EXPERIENCE SUPERIOR SOUND
About Tom's Audio:
Tom has been installing audio and entertainment equipment for 25 years.
His certified technicians have all been in the industry for more than 5
years and have extensive knowledge on each product.
Tom's staff proudly installs products from top-tier sound companies:
Documentation of the development process
I developed this website for my uncle’s business so more people in Rochester will be aware of the products we offer. I want people in the surrounding area to know there is a top-tier audio company that they can visit or hire. This website aims to entice audio enthusiasts and quickly show people who know nothing about entertainment systems what they are missing. Tom wanted the website to allow customers to contact the company directly when they want the equipment professionally installed.
In order to meet my objective of enticing audio enthusiasts, I included the top-of-the-line brand names that audio enthusiasts will recognize. I also tried to choose images that romanticize audio entertainment. For the visitors that know little about audio systems, I chose to add snippets of information that are easy to understand. These statements describe why the audio equipment Tom sells is better than what most people use by describing benefits and features. The “contact” page provides the address and phone number of the company, while forms can be filled out by the customer, so they can be contacted by us. This step ensures my last objective is being met—so visitors can contact the company if they want a professional installation.
Defense of the final product
The overall design for the website was to give the visitor a clean, professional impression of Tom’s Audio. I chose a simple color palette of black, white, silver, and gray because I felt that it would give the pages a sleek aesthetic. Adding several different bright colors wouldn’t have been the kind of flashiness/busyness I wanted to convey with this content. The font type I chose is “Trebuchet MS”. This one font is used to convey all the type in the entire website. I felt that it flows well with the color palette and minimalist design. The other web-friendly fonts I considered did not match the website’s content or message—such as “Times New Roman” and “Comic Sans MS”. On each page, the same header and footer are used to create a sense of familiarity throughout the site. The header and navigation bar are among my favorite aspects of the site—they are presented seemingly with precision and nice spacing. Here is an image of the header that follows on each page of the website:
I chose to make “Tom’s Audio” as a link to the homepage because it is what most modern sites do. The navigation bar links change as you hover, but don’t affect readability or aesthetics because it uses the same color palette and geometric shapes as the rest of the site.
The homepage consists of three sections that have gray outlines of varying sizes. I felt that these lines organized the page well and complimented the header design. I chose to use images that used the same color palette and that gave a sleek impression to the site. While searching for the perfect images, I asked myself if it would fit the style that I was going for. I included links to the “home theater” and “music” web pages within these sections. I did this so the reader could have several ways of navigating the site to make it more fluent to traverse. I didn’t want to include a video because of the color clash, but I was required to by the assignment and it is informative for the visitor.
For the “home theater” and “music” pages I carried over the same type face and color palette. However, I used different shapes and lines to organize the page. The title of the pages is highlighted in silver to draw the eye a little, while the next shapes below draw the eye using a white horizontal line similar to the header (which is a theme carried through the rest of the pages). The title of each section is in uppercase for emphasis, while the body of each section is toned down with a gray color. The tables reflect the white lines throughout the website and carry the title/body rules as well.
The “contact” page uses an image with a little color, mainly because I couldn’t find another suitable one. The white horizontal line carries into this page, as do the title/body rules. I organized the forms and labels so that the user would not be confused. I also made implicitly created a label out of “name:” and “email” so that the user could click on the label or the form to get started. The code that allowed this was as follows:
<label> Name: <br><input type="text" id="fullName" name="fullName"></label>
The about page uses two horizontal boxes to title the page and show brand names. The headshot image to the right follows the white box theme. The differences this makes from previous web pages is not severe enough to hinder navigation. The required part of the “about” page is organized with more horizontal white lines to write aesthetically pleasing paragraphs. The letter spacing in the body writing is zero in order to make it easier on the eye when reading large paragraphs.
I attempted to professionalize the site even more by adding an image viewed on the browser tab. The image below shows what the results should look like:
The following code is what made this logo possible for the tab image:
link rel="icon" type="image/ico" href="img/music.png"
Opportunities for improvement and growth
The most obvious function that is missing from this site is the ability to transact a purchase electronically. This would bring Tom’s Audio more sales if the customer was able to make purchases on the website easily. In a perfect world, I would’ve included this in the website, but I simply did not have enough time to do everything I wanted.
One thing I wish I could have done differently is the homepage design. I wish the homepage was more reflective of the rest of the site. The gray outlines are a little different than that of the white horizontal lines of the other pages. I definitely think the white lines look more put together and are more aesthetically pleasing. I also wish I would’ve positioned the links such as “home theater products” between the images a little better. As it stands, your eyes are drawn to the images more than the title that describes them, which is frustrating.
The last thing I wish I had more resources to do is to make an actual logo for the company.
