Creating a website: Design and technical issues - Part 1

In the next few posts I will cover some of the design and technical issues associated with creating the Taste the World website. Reflection is key to improving design skills, so here goes with part one. 

Audience:

The first consideration in any good web design has to be ensuring that it will communicate with the correct audience. Obviously a website is freely available for anyone on the Internet to view, however the purpose and content of the site does need to vary depending on the likely users. For instance, if I created an informational medical website it might have a sleek but authoritative design with a limited color palette. It is unlikely that I would include hand-drawn graphics or dancing animation since it would be difficult for users to take the site seriously. If I was designing a site advertising new art classes for kids, however, the hand-drawn graphics would be perfect, as would lots of bold primary colors. The two diverse audiences would call for two radically different designs. 
 

TasteTheWorldOnline.com is a companion site to my aunt, Anne Backer's, newly opened gourmet food store. As such, the expected audience is visitors looking to read about or purchase gourmet foods and coffee; additionally, these visitors would presumably be looking for information about the store, including its history, ownership, mission, physical location, and hours. They might also be interested in viewing recipes that incorporate the available products as well as suggestions for hosting parties and events. All of these elements are included in the website and are intended to meet the expectations of this audience. Additionally, the informational sections are intended to draw in visitors that might be searching for information on topics such as roasted coffee or cheese pairings, but not necessarily products. These users would benefit from the information and as a bonus their interest in the gourmet products available might be piqued. Either way, it is clear that designing for a largely consumer audience requires attention to certain details common to many ecommerce web sites.

Tools & Methods:

Over the course of creating this website I utilized a number of different software packages, hardware, and freely available scripts. Following is a description of the major elements that went into producing the website sections.

Hardware:
I used a Nikon D5000 SLR camera fitted with a Nikkor 18-55mm lens for the product photography. I also utilized Nikkor close-up rings (+2, +2, +4 in various combinations) and a daylight-balancing filter on some of the shots. The design and graphics work was completed on a Macbook Pro with a 2.66 Ghz Intel Core 2 Duo processor; the operating system was Mac OS X Snow Leopard, version 10.6.5. I used an Epson Perfection V600 Photo Scanner to scan the hand-drawn graphics incorporated into the web site.

Software:
In order to complete the logo design that appears in the upper left corner of the header I first drew the complete design on paper. After scanning I used Adobe Illustrator CS5 to create a scalable vector file and subsequently converted the file to PNG-24 format for use on the web. All of the graphics work, including cropping, retouching, image optimization, and the creation of rollover buttons was done using Adobe Photoshop CS4. The web site design was completed using Adobe Dreamweaver CS5. I designed the site from scratch by creating an external style sheet to govern all the major elements of each page.

Scripts and web resources:
The remote and resident rollover graphics were created using the scripts that Dreamweaver automatically generates when using the "behaviors" menu of the program to swap images. The rotating slideshows on the index and shop pages were added using a free script from the Dynamic Drive website. This script was simply changed to customize the images, size, and timing and inserted into the header section of the page; then some additional script was added to the div where the slideshow would appear. I also used a few Internet based tools to refine the design process, including the color creation and analysis tools at Adobe Kuler and Colors on the Web, and the link checker at the WC3 website. I also used the Google map generator at www.map-generator.org; this was actually easier to use than the official Google version and allowed a slightly incorrect marker placement to be corrected prior to acquiring the code. It was not possible in the Google Maps application to move the marker (which was placed across the river on East First Street instead of West First Street).

Web host and domain name:
The website is hosted by GoDaddy, and incorporates an SSL certificate, which will be useful for future development of site elements, such as functional ecommerce. I advised Anne to purchase a package with SSL certificate (so no non-secure messages pop up when a shopping cart grabs the logo), domain name, and business hosting. Her chosen domain name is a little long, but was the best of the available choices that included her full store name. I felt the inclusion of the full "Taste the World" name was not imperative, but Anne felt that the unaltered name was important. I did convince her to avoid uncommon extensions, even though the original title was available. For instance, TasteTheWorld.biz, .mobi, .us, and .me were available. Instead, the addition of Online to her title allowed for a .com extension. She did also purchase TasteTheWorldOnline.net, which I have set to forward to her main .com website.

Next time I'll talk about the design choices I made, including the color palette, textures, spacing, and balance.