11.1 Design dilemmas

I fully understand the need for compatible and accessible design and I try to be cognizant of contrast when I choose background and text colors. With this in mind, I ran my header, logo, and navigation tab colors through the color analyzer at Colors on the Web. The header is a gradient that ranges from #80021F (burgundy) to #3C0303 (dark burgundy); the text is #DAD9C3 (ivory) and the logo is #181412 (dark brown). According to the results, my header/logo combination, although it looks contrasty enough, does not pass. The navigation text/header combination passes on all fronts, for small and large text. So this leaves me with a bit of a design dilemma.

In order to rectify the problem, I went into Photoshop and altered my logo colors using a slightly darker version of the ivory that I used for the main content box and the main navigation text. The results of the original and the ivory version look like this:

Original:

Lightened version:

The problem is that I'm not really happy with the lighter look and haven't found any similar combinations that look quite right against the header. I'll keep trying, but it honestly appears right now that using the darker color combination is the lesser of the two issues. I have used a light background and dark text in the content areas and light text on a dark background for navigation, so it's not like I have unreadable content. It's also not like the contrast makes the logo indecipherable for most people. Is it possible to leave that one element "out of compliance," so to speak? I'm on the fence right now.  

One other issue in my design lately has been that I set up a blog for Taste the World using Blogger. The intent was to route the blog to a special page on the Taste website. I thought this would make it easy for Anne to later add content to the website without having to update the site. Unfortunately, I didn't realize prior to creating a customized look for the blog (which actually took a long time) that Blogger was no longer allowing FTP transfers of content to websites. I guess this has been in place since last March, so I should have looked harder at publishing tips, I guess. Anyway, I will probably just link to the external blog from the website; this seems like the best choice right now. One thing I know you can do is direct the header link (which defaults back to your blog) to your own website. I can't for the life of me find the link portion in the code, however. I combed that code too, so I don't get the issue. Anyway, I have seen dynamic headers with multiple links, so if I have time I want to build a new template. I modified an existing template and added a custom header image, but a new template would be better (if time allows, as my list of additions and tweaks continues to grow).

10.1 Funny stuff

Tom Chi and Kevin Cheng have a very funny comic at ok/cancel that displays a designer being chided by his office coworkers over increasing the border size on a web redesign. When the designer protests that the size increase is part of a cohesive design idea his coworkers cut him off by saying that they will need to retest prior to launch (which would probably cost untold sums of money in its own right…). The last frame hints at the sometimes ridiculous nature of design-by-committee as the coworker suggests that the border size increase would have cost the company a minuscule percentage of business. This is hilarious, but hints at the importance of balancing user-centered design, analysis, and aesthetics. As the comments indicate, people are rather torn on this front. One user notes that for a larger company, that insignificant percentage would equate to hundreds of thousands of dollars, while another notes that such pettiness will wear down creative professionals and they will depart for companies that allow more freedom. They are probably both right, and certainly this cartoon was at least partly in response to Doug Bowman departing from Google for such controlling policies as spoofed here. The accompanying blog post details this departure and goes on to talk about the balance between design and data-driven decisions.

Check out the comic and blog here:
http://okcancel.com/

My favorite line from the blog post reads, "OK, first off — design is not the same as art … I’ve often said that Art is about freedom while Design is about constraints." This is a great characterization since design really is much more about making something aesthetically pleasing while conforming to communication and usage needs. Design needs to accomplish a purpose that artwork is not necessarily held to. Both must communicate, but clarity isn't always the main goal of artwork. With design the message can be provocative but must still be clear. With that, data can help to refine the design process. It is very easy to get too absorbed into your own head and forget that others may not share your sense of logic or vision. Often things that makes sense to you are just not clear to others. User testing can help with this, as can other evaluations. The key thing, as the blog points out, is that designers learn what evaluation techniques add value and which waste time. Then, by pushing for the value-added metrics the designer can help control the process and demonstrate the professionalism and knowledge that goes into design and effective evaluation.  

This can be easier said than done, however. Whether evaluation is data-driven or not, committees can be a bad thing. There is a finesse to the design process that non-creatives don't always understand. The fact is there are some wretchedly designed sites out there that have great contents, but no will look long enough to find them. There also sites with good intentions that try to make everything visible from the homepage, which results in visual overload and unmanageable navigation. I worked at a museum that was going through a website redesign when I arrived. This was in 2007 and the redesign is still happening, two webmasters later. The problem there was that the design committee was comprised of people from various departments telling the designer what was needed. There were many competing interests and no cohesive visions. This is where design breaks down. As of now, the web page is still cluttered, confusing, and ugly. The designer was unable to communicate that the design would allow users to access information easily, but not necessarily from a list of everything placed on the homepage. An appropriate look for the site was watered down to the point that it does not fit with the image of the museum or look of the printed materials they produce. All of the changes, as far as I am aware, were based on anecdotal "evidence" as opposed to data. This is sort of the flip side of what was detailed in the cartoon, and yet it represents the same type of oppression that can hinder and destroy good design.

Speaking of design, my aunt had a designer work with my original logo suggestion. As it turns out, she had a nonprofessional work with it. The woman had done some miscellaneous design work for the county when she was employed there several years ago, but the extent of that work is questionable. This is why you always ask for a portfolio sample! The final product my aunt was provided with had redesigned the original into something that was unbalanced and looked a little like a PowerPoint slide.

Logo redesign:

The font chosen was Papyrus, which does not in any way communicate the sophistication of fine roasted coffee and specialty foods; the inclusion of a globe as steam from the coffee was too cluttered and the elements cut from the original design were jagged (as in not a vector graphic). The elements and text piled together created something of a lopsided triangle and the black background was dominating everything. This would also present problems for printing; it just wasn't functional at all, let alone communicative of the correct message. It was mentioned that the black background could be eliminated, but that would actually create more balance issues by exacerbating the lopsidedness of the text and image stack.

So back to the drawing board. I tweaked the original design, changed out the fonts (a free Caviar Dreams, and licensed , and sent it off to a company that produces vector graphics by redrawing the shapes in Illustrator--I just don't have that skill down to the appropriate level. Anyway, the logo is now complete and ready for inclusion on the website as well as signs, vinyl labels, and packaging.

Original design tweaked and vectorized:

I also want to briefly recount my experiences playing around with Dreamweaver plugin Flexi CSS Layouts. It is a drag and drop process that allows for drawing layouts while it writes the code. It is an interesting program but it has a few quirks I wasn't able to iron out. I will have to try it again at a later time because it seemed to create very clean code. However, if you notice in the image below, some things, when not drawn correctly yield some slightly funky results. Despite my efforts, I couldn't quite get the layout right, so I returned to working directly from Dreamweaver for this part.

Flexi layout, slightly off:

I am adding this plugin to an ever-growing list of things I need to study after this class ends. For instance, using the @fontface css rule is something I need to read more about. It seems like a great way to add fonts without defying accessibility by using images of fonts for headlines, however, it doesn't work correctly with Internet Explorer. I would love to use this rule, but IE is still the most widely browser so I can't defy all those users, especially when creating a site to accompany a physical store. There are all kinds of work arounds out there, but I just don't have time to learn that in enough detail just now. My suspicion is that the website I role out will be a good start, and the best I'm capable of at this skill level. Then over the semester break I will be able to work out some fixes to make it more sophisticated and technologically sleek. I'm overwhelmed by all the information out there and thankful for all the techies that so freely share resources, tricks, and advice via a seemingly infinite number of blogs and forums. I'm even more grateful for the websites that organize the best of these resources and deliver the lists in endless succession to my Facebook and Twitter accounts. "Following" has made me so much more aware since every quality organization is engaging in social outreach. It really does work in building a great community feeling in an abstract environment. I feel totally connected.

9.3 Audio, scripts, and some software

Hot Scripts website:
There are a lot of positive elements to this website, ranging from the excellent contents to the pleasing design. First, the color scheme, red with off-white and white for the content areas, combined with a few bright pops of green, is pretty perfect for conveying the theme of the website. The logo of a pepper enclosed in angle brackets is simple and clever, and that heat theme is translated to the rating system used to rank the quality of the resources available. Not that using a pepper scale to indicate whether something is super hot is unique, but I haven't necessarily seen the heat theme carried through an entire design quite like this. The designers definitely paid attention to the small details on this site and it makes for a pleasant browsing experience.

As for the contents, there is a blog section, design templates, and over 48 thousand scripts that can be searched. Realizing the magnitude of the site, the designers have helpfully offered up "top rated," "most popular," and "new" sections to wade through the scripts if you aren't really sure what you're looking for. The secondary navigation on the side has specific categories to browse for those that have an idea of what they need. The results present a mixture of free and for-purchase resources, so the only possible drawback is that if a user is looking for a free resource they might be disappointed to find the perfect script and then discover it costs money. Sometimes, though, you just have to pay for that perfect resource. I myself found what seems to be a good free script for incorporating a search feature into a website. I haven't tried it out yet but it was highly rated. The comments also indicated that it works well and allows you to create a search section that fits in with the look of your website. I'm actually excited because it seems simple enough to add to the code. One additional feature that I like on this site is that once you identify a script you like you can click a link on the page to see more by the same publisher. Kind of like tracking font manufacturers, you can predict that someone that created one quality product is very likely to have a lot more.

Check out HotScripts here:
http://www.hotscripts.com/listing/free-search-engine/

Trellian software:
The Trellian website provides access to both free and purchasable software packages. In the latter category, they have a Search Engine Optimization package that combines a bunch of different tools, including their site promotion software and some link checker and analytics tools. It actually sounds like a good package because it brings together some resources that you would otherwise have to use separately; at $300, however, locating and manually running analytical tools freely available on the internet seems like a comparatively good deal. The free software packages include InternetStudio and Trellian Webpage, which are web creation tools. I didn't download the resources, but they seem as though they would be good tools to replace more complex systems and that they would be quite user-friendly. It's always good to have free alternatives to the expensive professional software packages. I might have to grab a trial of the SEO software, though, because I'm interested to see how well it performs. Stay tuned for that description at a later time.

Check out Trellian here:
http://www.trellian.com/index.html   

Self Seo:
This website is mostly of note for a simple how-to article on streaming audio. In fact, it is almost unbelievable how easy it is to set up, since all it really requires is creating a file with an m3u exitnsion, uploading and linking. Ok, that was a little simplified, but read the article and you'll see it truly isn't much more complex than that. The text itself is clearly written, and the clutter-free site design mimics that simplicity; it works well. A number of SEO tools are also worth noting. My favorite is the keyword suggestion tool, which shows the popularity of an entered term as compared to others that might wind up being more useful. Similarly, the misspelling tools provide insight into how adding common misspellings to keyword tags might your website easier to find. Interesting and useful stuff here. I found that "hot sauce" had a high daily ranking, for instance, but that "hot sauce recipes" was also popular, so would be worth adding if the site has relevant contents. Cool way to keep in touch with what people might be searching.

Check out the streaming audio story here:
http://www.selfseo.com/story-13698.php

Audacity:
Audacity is a great open source audio editing program. I have used it several times in the past because it has sophisticated features like the ability to mix multiple channels and record or import files for editing, and so forth. Most notably I used Audacity recently to edit sound files for a cell phone tour pilot program at the art museum where I worked. A collegue and I recorded audio and I then imported it and laid in music and intro tracks. I was also able to clean up the voice files quite a bit. The only hitch is that WMA and AAC files are not supported, so when I incorporated existing audio recordings of gallery talks into the files I was creating I found I had to convert them first. This was a pain because it added an extra step, but really it is a very small inconvenience in the grand scheme of things. I am not a musician or anything, but I found this to be great audio software for a number of projects. So basically this is great software, easy to use and available completely free of charge; its very existence means I should never again have to suffer through an informational video with unedited sound! 

Download Audacity here:
http://audacity.sourceforge.net/download/

Music:
Pandora and Musicovery are both worth mentioning here, although I prefer the former (maybe out of habit though). What is notable about Musicovery, however, is the ability to define a playlist by mood (calm, dark, etc.) or dance matrix (tempo) and then refine it by choosing an era from which the music should be drawn. Cool concept. Even better though, is that you can download an iTunes plug-in to impose this structure on your own music library, thus ensuring you match your mood with music that already presumably like. Pandora, on the other hand, offers what I feel is a more sophisticated approach to assessing your musical tastes. Because of the extensive analysis that has gone into each song, the stations generated by inputting an artist or title are pretty much dead on. I don't skip much music when listening to Pandora because it assigns music with similar qualities so accurately that it really can pinpoint taste. Even better though, it learns. Skipping a song results in ban from the channel and skipping an artist twice results in a musician ban. The channel just gets increasing specialized not to a type of music, but to a type refined by your own tastes. It's great. People sometimes lament not being able to skip enough songs because of the limits they place, but I really think if you use the program correctly excessive skipping becomes unnecessary anyway. I've discovered more good music that way than I ever could have located on my own. And much like free fonts, scripts, templates, etc., you have to love a free resource that is based on little more than the enthusiasm of developers to create a community and share something they are passionate about. Fantastic stuff.

Check the sites here:
http://musicovery.com/

http://www.pandora.com/  

9.2 Flash resources and web site critiques

Adobe Flash Professional software is used for a number of web development functions, including adding animations and multimedia content. The software is somewhat expensive at $700, however the educational version is only $179. Flash is frequently used for video playback on the web, and most users have the Flash plugin installed on their computers. That said, if users don't have the free player installed then Flash-heavy sites won't work at all. An interesting dilemma in that realm is Apple's relationship to Flash. Apple did just lift a ban on Flash-built apps for the iPhone, but it was suggested on ReadWriteWeb that the ban had been in place long enough to effectively allow Apple to keep the Flash clutter out of the apps; lifting the ban allows them to appear gracious while having already achieved their goal. I believe this too, as yesterday I saw in Computer World that Macs will no longer be sold, starting with the new Macbook Air, with Flash pre-installed. The software can still be downloaded, but the message is clear that Apple wants Flash to disappear. Additionally, without Flash Player pre-installed some users may not bother to go out and grab the software, although Microsoft doesn't install Flash either, so maybe it isn't too much of a problem. Still, I could see this beginning to dissuade some web designers from using Flash and thus finding alternatives. That trend would be some time off however, and for now Flash is a good design tool.

Read the Computer World article:
http://www.computerworld.com/s/article/9192699/Apple_dumps_Flash_from_Mac_OS_X?taxonomyId=123&pageNumber=1

Flash Vista:
The first website I will discuss today is FlashVista, a directory for all kinds of content related to Flash. There are some good elements to the web site's design, including a "random link" box that generates a thumbnail of a web site featuring flash animation that changes as you navigate from page to page. This is a good way to feature content that is included in the browsable lists on the site. Unfortunately, while the "site info" link under the thumbnail works, the "get another" link does not. Instead it (frustratingly) reloads the page with the same graphic in place. Additionally, clicking on the graphic to visit the featured random web site was hit or miss, sometimes yielding an error and suggesting the links on this site need to be validated. The links to Flash content that are provided are by and large pretty good. I found it more useful to use the main navigation and follow "top rated," "most popular," and "cool sites" than to try and browse the categories. The former option opened a list of randomly themed thumbnails while the latter opened sets of categories. This was good when there were sufficient category contents, but many categories were empty and I felt this equated to a lot of unnecessary clicking back and forth. Also, the most popular web sites are generally tagged as such for a reason: They are really interesting and represent the best of the contents available from FlashVista. In my opinion this makes those categories a better bet in terms of efficiently browsing for inspiration.

Moving on down the navigation bar, I found the Flash tutorials section to be one of the more helpful elements featured. The tutorials are mostly text-based, however several video tutorials from LearnFlash.com are also embedded in the site. (For the rest of the LearnFlash contents you have to navigate to an external site that requires a password.) I watched a great tutorial featured from LearnFlash.com that covered how to use the loader component in Flash to create a photo gallery. This solution is a much better way to add a gallery than having separate pages for each image, which can get unwieldy for a portfolio site. Even though I am not ready to invest in the program, I can see how Flash would be a good tool to learn for the future. That said, after I navigated away from the the video tutorial I never did find my way back to that section; the organization of the site is alright, but it is certainly easy enough to lose track of contents. The search feature was not much help in this case either, as it returned either many pages of results or no results, depending on where I specified it should peruse.

Overall, while there are worthwhile elements at FlashVista, I dislike the look of the web site. First of all, the long skinny content area at the left that houses logins, navigation, small thumbnails, etc. forces scrolling well past where the main content area on the right ends. This is annoying to see such copious amounts of white space. Also, I can't understand why the designer decided to label each section; it looks cheesy. For example, users are accustomed to seeing navigation links listed on the side of a page so there is no need to label the box "main navigation." I have less of an issue with the page headings, although I think they could be better integrated into the design. What I don't like are the clipart icons that precede the headings. The "home" page uses the classic house icon that was all over the place years ago (I think Office still has it in their clipart gallery); the "most popular" page uses a smiley face, "top rated" a trophy, and so forth and it looks amateurish. I actually think the width of the main content block is problematic as well. It creates long strings of text in some cases and just doesn't look quite right. Making that area narrower or perhaps adding another column to the page would have been a better choice. To be fair, the page is a directory and as such is meant to showcase the screenshots of external sites, not get in the way of the contents by overusing fancy graphics. Even so, more judicious use of color, a creative header, and a footer (which is MIA) would have made this web site sleeker, which is important given the function is to showcase other good designs. On a final note, I believe this site is abandoned, which would account for the dated look. There are no links entered under "new links" and the Flash News section has 1363 links, but the last one was posted in 2005.

Check out Flash Vista here:
http://www.flashvista.com/

Flash Explained:
As is the case with pretty much any software out there, there are lots of people sharing information about using Flash. Flash Explained is a web site by Luka Maras that contains tons of tutorials and some free downloads of things like fancy buttons. While I don't have Flash software in order to try out any of the tutorials, it is pretty clear that they are quality resources. First, the positive comments are a testament to the effectiveness of the directions. Second, as I read through several of the resources I noted that they were detailed and written in very clear language; this is a sure sign of a good how-to resource. As for the web site design, it is clean and extremely easy to navigate. His color choices are simple and the pages are uncluttered so that the focus is on the tutorial contents and not on distracting elements like graphics or banners. This lack of extras does not equate to a boring look, however, as it sometimes does on other more scaled-down pages. Instead Maras has used a quirky and fun color combination and large text to create interest. The header is a simple red box with a slight gradient and the navigation menu underneath is a thin strip of turquoise with white text hyperlinks. I would never have paired those two colors as it isn't a "normal" combination. I would have used a neutral color like brown to pair with the turquoise. But this red-turquoise combination is bold and makes the page quite interesting. A big part of the success is that he has wisely balanced the colors by making the turquoise bar roughly a third of the size of the red area so that neither color is competing for equal space. In order to continue that visual balance, he includes turquoise headers throughout the page, and then a solid block of red as the footer. Neither color overwhelms the other or the black text used for the body contents.

The layout of the site is also a plus. He has included links to well-organized topics in the main navigation bar. This is quite user-friendly because the categories are clear (banners, animation, sound, text, etc.) and the subsequent list of tutorials in each area are impeccably labeled with titles such as "creating a big glossy logo." It's pretty easy to see what clicking there will yield. My only criticism of the design is that the "recent entries" menu in the right column doesn't display correctly in my browser. I am using Firefox, and the red headline type is squished into the red header area, covering the search box. The list of links that follows, in turquoise type, begins just under the headline so the first link is covering the turquoise navigation bar. The only way to even see that an entry is there is by rolling over the area, which changes the type to black. Aside from that however, the site looks good and the contents are truly a useful resource for both Flash beginners and experts.  

Check out Flash Explained:
http://flashexplained.com/

SitePal:
This site features Flash animations of avatars and is geared at adding a personal touch to your web page. The use of avatars in customer service roles seems a little contrived to me, and I would think visitors might be a little irritated by them; they seem a bit "impatient" to me because, at least in the demo on SitePal, the avatar kept moving her head and blinking while I was reading down the page. I can't imagine shopping or browsing on a web site with an avatar moving around waiting for me to finish and interact. I do, however, believe as the site suggests, that avatars would be useful for educational websites and training videos. Some people do learn better through interaction, and in such a setting a sense of communication could be important.

I think that by and large avatars are a good stand-in for live interaction in virtual world settings. There have been some studies that show people seem to interact through avatars as though they were in the same room. That is in a virtual 3-D world, however, where context is significant and live interaction is possible. The SitePals models are cool, but I don't think they can fill that interactive role in a more static web page environment and the illusion of "live" interaction with an avatar in that setting is paper thin. I also think they are somewhat of a fad, despite what the testimonials on the SitePals page suggest, except possibly in the training and education sectors.

The avatars available through SitePals look high-quality to me with a lot of options to customize their look, including uploading a photo to create a photo-realistic version of yourself. The animation is pretty good, although the lip movement doesn't precisely align with the audio if you look too closely. The audio itself is good, with options to record your own voice or use a text-to-speech feature, which sounds quite natural (as opposed to many free ones that sound jerky or tinny). These avatars are an easy way to add animation to your website without knowing how to create it yourself. The account you open with SitePals allows you to create a character and embed the code into your website after which any audio or character changes update automatically. This is all done for a monthly fee and could be a good option for some people. I think, again, that for most personal and many corporate sites these are a bad idea, but for a few applications they could really work.

Check out SitePals here:
http://www.sitepal.com/home/

Swift 3-D is a piece of software that integrates with Flash and is used to create custom 3-D graphics and animations. Actually, it is a standalone program that easily emports animations into Flash, or it is available as a Flash plugin that performs basic animations. In watching the video tour of the software capabilities I was impressed by how powerful but simultaneously easy-to-use it appears. For instance, on the basic side the software can create 3-D objects from existing vector graphics such as logos or from shapes drawn within the program. Once an object is created there is a library of textures, colors, and preset animations (like rotation) that can be applied. According to the product description such features are intended for beginners to be able to use almost immediately, with the idea that they will then learn more advanced features (the advanced options seem pretty limitless). I can believe this. It looks easy enough to get started and if software is usable from the start it is easy to dig in and teach yourself more advanced uses.

I would be remiss in not mentioning the web site design here as well. It is one of the best software product pages I have seen simply because it demos the product in a number of sleek videos. In fact, the product tour helps to erase the abstract qualities of the text descriptions. After watching the video it is crystal clear what this software does and how the graphics look and move. This is essential to capturing the section of the market with no experience but a desire to learn about 3-D animation. This tour video is supplemented by others around the site that show working animations, screenshots, and videos of the workflow. These features go beyond what any text description could relay and probably convince many visitors to jump in and buy the product. Amazing stuff. 

Check Swift out here:
http://www.erain.com/Products/swift3d/   
 
In contrast, Swish Max3, a similar product, has a standard web page with bulleted descriptions of the software features. This is common, but having just looked at the Swift website I would choose that software over Swish because I could see how it worked. The dynamic samples on the Swish website of different effects that can be created in Swish did help to make the software purpose clearer, but the lack of audio descriptions still means the Swift web software wins out. These small animations could not compete with the full-fledged tour of the Swift product. That said, the features included with Swish seem as equally geared to a range of abilities as those of Swift, with preset multimedia effects and ready-made vector shapes all the way to scripting languages for advanced users. The prices for the two software packages are about the same as well. I just am not sure if the Swish software is as user-friendly as the Swift interface appears to be. That said, both seem to be powerful tools that could really make web sites, especially for games, movies, and high tech design, unique and interactive.

Check out Swish here:
http://www.swishzone.com/index.php?area=home

9.1 Design and design again

Over the course of the last few months I have written several posts about the ongoing design process of my website. I have covered an initial personal site design with layout and color choices, transition to a new concept (Taste the World), logo development, and layout diagrams. In this post I will share the new phases of my Taste the World project which I am developing to provide a web presence for my aunt's new business.

First, I took a look at my web layout drawings and opened Photoshop to work with the designs. I played around with moving the header and footer to occupy different locations, and decided on a footer that covers only part of the screen and aligns with the main content area. Similarly, the header stops short of running all the way across the top of the screen. I tried running the header from edge to edge, but the look was too blocky. I also added a rounded corner to make the header look a bit softer. My goal here is to create a site that looks sophisticated and sleek, but not overly contemporary. Therefore I have incorporated some Web 2.0 touches, like rounded corners and drop shadows, but kept them minimal.

Here is the first rendition:

The web area is defined by the orange and burgundy borders. I plan to make the dimensions compatible with 800 x 600 screen resolutions, just to make sure I don't annoy any potential visitors with horizontal scrolling. This is important in order to make sure that both the side navigation and main content areas remain visible. The brown area surrounding the web page is the background area that will display at larger screen resolutions.

Once I blocked out the elements I began to add colors. As you can see from the image above, I initially intended to use an analogous color scheme using red, orange, and yellow. I choose burgundy because as I thought back to the Beaird chapter on color I remembered him mentioning that dark reds were rich and luxurious, and would be good for sites related to fine living. Taste the World will feature unique spices, fresh roasted coffee, imported olives and cheese, and so forth, so the luxurious association seems appropriate. Working from there, analogous colors seemed perfect because it would have allowed me to include orange as well, which Beaird mentions is associated with food and appetite. Sounds perfect for a high-end food store. However, as I worked with the colors I found the orange to be too jarring, even though I experimented with many tints and shades. Also, when combined with the brown background it just screamed out fall or harvest.

In trying to fix it, I added a general gradient, and came up with the following, which I liked:

However it was not really a sophisticated look, so I abandoned it without finishing the edges. I might save the look for a future project though. After this point I abandoned trying to work orange into the design and decided a color palette generator was in order. 

So I went into Adobe Kuler and entered the code for my burgundy, which I still feel is the most important starting point for the site colors. I then generated a complementary color scheme, just to try something new. It was wasn't quite right initially, but when I played with the settings I was able to find a good olive hue that made a perfect combination. I know, red and green sounds a little too thematic — as in Christmas owns the combination — but trust me, this is so far removed and sophisticated it won't conjure such associations.

This is my new color scheme, using olive, burgundy, brown, and ivory:

   













This got much closer to a sophisticated look that suggests indulgent foods. Once I had the colors, I decided to work with some gradients since I felt the green was a little intense. I already had a slight gradient on the header and footer area, using a narrow range of hue and shade to create just a little depth. I then added a gradient to the green area, setting the parameters to run from light olive to brown in order to create a slightly different look.
This was the result:

This look is closer to what I was looking for, with a little added depth. I decided it was still a little too bright though, especially in the upper corners. I wanted the brown to blend a little closer to the background color in order to soften the edges between background and web area. So I went into the gradient tool and tweaked the settings to darken more, resulting in this look:

The difference is subtle, but the darker brown adds depth and richness. With the color scheme in place, I added some subtle background textures in the form of light drawings along the top and left edges. I also added a drop shadow under the header and an inner shadow on the right edge to give the illusion of some dimension. In order to balance this look, I left some elements, such as the secondary navigation box, flat. I also made sure not to pack the page with too much information, leaving some open spaces at the top and bottom of the page so the design has a little breathing room.

The main template is now done, with all the above elements put into place in Dremweaver. I am still working out the look of the buttons though. I am leaning toward a rollover with a small hand-drawn graphic, but haven't finalized the design yet. It will fall into place at some point, but I'm toying with different graphic drawings. The Facebook icon in the corner will be a classic looking icon, but instead of the usual blue it will be the same brown from the background area. That's it for now; on to figuring out my shopping cart situation!

8.2 Menus, buttons, and a dash of multimedia

I think at this point in time including either a dynamic menu or set of buttons is a must for web sites. Including only text hyperlinks just looks a little bit too plain and, frankly, amateurish. In Creating a Web Site: The Missing Manual, Matthew MacDonald covers the process of adding JavaScript code to create rollover buttons and dynamic menus. He provides suggestions for where to get free code and does a very thorough job of explaining the process. In fact, the more I read the more I am interested in learning more about writing scripts. At the very least I need to check out some tutorials. Not that I think I can write better stuff than what is already available, it's just that as I read about how it works it makes the background processes of Dreamweaver much clearer.

Speaking of Dreamweaver background processes, the program includes an automated feature for adding rollover buttons; you just set your main button image and the rollover image, specify the link, and Dreamweaver inserts the script into your page. This can't possibly be any easier and I am definitely primed to add rollovers to my Taste the World web site. I am in the process of deciding what the buttons should look like so I will add more about that design process in a later post. I am intrigued by the dynamic menu option as well, but haven't decided if the site would warrant that type of linking. With the inclusion of product pages it might, but I am experimenting with using two navigation menus (a primary and secondary navigation) instead. I think coupled with product thumbnails this will work for the site, but I need to see if the buttons and thumbnails make sense without adding extra pages to click through.

MacDonald also covers the use of multimedia in the book, and I think this a great page enhancement. I don't think, however, it will have a place in my particular web page. That said, he describes adding YouTube pages for video and I have to say this is really the only viable option. I created a YouTube video page a couple semesters ago to show case a presentation with screen-captured video and it works beautifully. I was able to save the video in high definition and upload a huge file (I think it was a couple of gigabytes if I remember correctly). Of course I can take a lesson from MacDonald's optimization primer, but in the presentation case I needed to keep the quality high so the screen text would remain readable. Anyway, I would never have had the space to host that video myself; I like the idea of placing it in a searchable forum anyway. And MacDonald notes that you might be able to drive users to your web site if they find your video content on YouTube. It is a great promotional tool in that regard.

Check out my YouTube resource page here:
http://www.youtube.com/user/rfitzsim12

As for audio, Flash seems like the way to go. The benefits far outweigh the other embedding and downloading options in almost every case I can think of and scripts for adding players to a web site are available for free. When considering audio, I can't help but think of the 2Advanced Studios website that I discussed in an earlier blog. Honestly, I believe I stayed on the site ten times longer because of the soundscape than I would have if I had browsed in silence. It was subtle and hypnotic and the slightly sci-fi edge that the audio had on rollovers was a dramatic enhancement to the site contents. It was one of the most brilliant designs I can think of. That said, I can't imagine a soundscape that would fit so seamlessly into my own storefront site. The rhythmic ambiance of 2Advanced is perfect for the fantasy genre; classical music seems too overdone for a storefront; modern musical genres don't really fit the theme either. It also seems to me that people may prefer to web shop in silence, so I will forgo the audio for this project. I am going to add some music to my personal site when I get a chance though; I do like the idea of streaming from someplace like Pandora to get a little variety into the mix.      

8.1 Images and software

Image editing tools:
My image editor of choice is Adobe Photoshop, in part because it is still the best photo editing program out there and in part because that is what I have used since I was an undergraduate student. I'm comfortable with the layout and good at using the various tools. I mix in a little Illustrator from time to time (although sometimes I use Inkscape, a great open source vector graphics program, instead) and that usually rounds out my image editing suite. That said, there are some other great programs out there — some of which I use once in a while, others that are completely new to me — that I want to talk about here.

Gimp is an open source program that performs the same types of tasks as Photoshop. I personally really like this program for a number of reasons, not the least of which is that I love the idea of a community of developers freely sharing resources and improving a piece of software just because they want to make sure everyone has access to high quality programs. Comparatively, Photoshop costs hundreds of dollars, Gimp is free; you can't really go wrong there. The look of Gimp is streamlined as well, so anyone that just doesn't want to look at the Photoshop environment should enjoy it. It's also easy to find your way around after just a short time, which it makes it a good choice for beginners as well as experts. My biggest gripe with Gimp is that I can't stand their logo (a weird little dog head), but then this is a community of programmers, not necessarily artists, so I'll give them a pass on that one.

Downloading Gimp is easy as they have placed everything important right on the home page. The large download button is in the header bar and program updates are listed right below that. There is no digging around required, which is a hallmark of user-friendly design. For anyone that wants to contribute to the program, a "get involved" link is prominently displayed. Contributions include everything from reporting bugs to programming features and writing tutorials. The tutorials are available via a link from that page or in the footer bar on every page. A little more exploration of the additional links yields some interesting information about the history of the program and some screenshots so users can get a glimpse of the program's look. The website also has a historical archive of splash screens, and it was fun to look at the designs, of which version 2.2, with pencil shavings and handwritten text, was the best. It was a good nod to the creative process.

To download Gimp, head to:
http://www.gimp.org/

Another open source program to be aware of is GimpShop. This is a variation of Gimp that replicates the look of Photoshop. As such it is a good alternative for people that are used to Photoshop, but want to use a free alternative. A serious advantage here is that the millions of Photoshop tutorials out there (I see at least 3 new ones a day from Photoshop Roadmap) can usually be followed using this program. It is definitely nice to be able to access that wealth of information since specific GimpShop resources would never be able to come close in number.


Check out Photoshop Roadmap for tutorials about creating any effect imaginable. New content is added every day and older postings are placed in a searchable archive. You can also follow the site on FaceBook to get daily updates on newly added tutorials, which is a great tool to help you decide whether to checkout the site that day:
http://www.photoshoproadmap.com

The GimpShop website has a couple of noteworthy features, including easy navigation and a community forum that is accessible from a link in the header bar. You have to register to add comments, but otherwise the forum is searchable and has discussions and help answers for many topics of interest. I appreciate the inclusion of a forum because it helps to build a solid community around both the website and the software, which is important in order for an open source resource to thrive and improve. The forum is relatively active, with the last comment having been left about 10 days ago.

That said, there are some real negatives to this website as well. First off, there are just enough spam messages on the discussion board to be annoying, suggesting a few moderators might be in order. It isn't a super active forum with many posts per day so this should be an acceptable workload for someone. A much worse issue, however, is the inclusion of tons of pop-up ads. Every single click on a new discussion thread yields two pop-up ad windows. Clicking the back button reloads these same ads, as does clicking the home icon. I get that the software is free, and that the annoyance of some ads is a relatively small price to pay, however, it makes the forum a huge pain to navigate and probably causes a serious reduction in users.

The final issue is that a number of links on the main page are broken. Both the network button and the huge GimpShop Social Network alert yield error messages. The latter is especially problematic because it occupies such a prominent place in the main content area. I was actually wondering why no one had joined yet (the box invited me to be the first), since a special area for sharing artwork created using the program would ordinarily be a popular feature. I have to wonder how long this has been broken and how it has gone unnoticed, or at least unrepaired. I also think that the ads and errors are defeating the donation section of the website. I am sure many people would kick in a few dollars to support software development, but maybe not with the site having so many glitches — it just seems unprofessional. This, unfortunately, probably also dissuades some people from downloading a good piece of software.

Check out GimpShop here:
http://www.gimpshop.com/index.shtml
   
The last piece of software I will discuss is Adobe Fireworks, which is not one I have used before. In looking over the product specs I see it has a number of web-specific design features that seem as though they would be extremely useful. Interestingly, the program includes templates for mobil devices and other products, which can help to ensure that appropriate screen sizes and resolutions are used. Of course, I am not planning on designing for alternate devices, however the rise in mobile browser use makes this a significant feature. Traditional websites can't display in a very usable form on a handheld device so it can be really important to create content that will. This is really a future direction that can't be ignored and you have to love preset templates that make the design process easier. Other features include image optimization (including transparency preservation) and tools meant to help create standards compliant web pages. All in all, Fireworks appears to be useful in concert with a number of other design programs and streamlines the process of development. I can't say much more without actually using the tools, however it is a program I will definitely check out.

Read about the product features here:
http://www.adobe.com/products/fireworks/features/

Image sources:
There are a lot of sources of free imagery out on the web and sometimes it can be extremely time consuming to wade through them all. It gets tricky if you just try to Google a topic because you then need to check whether an image you like is actually in the public domain or requires permission or payment for use. Sometimes determining that information is not all that simple, especially if the image came from a source other than a large compilation of images specifically for design use. Finding copyright-free music or video can be even trickier. The Wikipedia Public Domain Image Resources page can help with the weeding process as it contains a bunch of links categorized by topics. This is a useful list as it cuts down on the frustration of visiting a catch-all site and trying to locate something specific. For instance, if I want weather-related pictures I can see from the government sites list that the National Oceanic and Atmospheric Administration has a photo library, which is probably a good place to begin. That said, Wikipedia is careful to offer the disclaimer that some sites might not have only royalty-free contents. This is a good reminder to actually check the policies associated with any free resource. Sometimes it is free, but requires a link to the creator's site, or a credit line. Sometimes it is free for personal use only. Free imagery doesn't necessarily mean imagery without rules and it is important to remember to check the usage guidelines to avoid issues.

Check out the Wiki here:
http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources

Footnote is a website that provides around 70 million images and is organized by topics such as census, missing air crew reports, Revolutionary War pensions, passport applications, and so forth. These are primary source documents and would be great for research, history related web content, and even edited for design purposes. This is a great database and the images I viewed were all high quality. Also, it appears that the community can create pages and update records, which increases the likelihood of locating unique sources or images. The website itself does a good job of wrangling the immense number of documents. For instance, clicking on a topic yields collections that are broken down into progressively smaller categories; this means rather than looking at everything related to West Africa, I have to choose an area (Gold Coast), then a category (electronics), and a sub-category (radio), before seeing that two captions are available. I then choose one to display an image. This is remarkable organization because while I can step forward and back at any point, I don't get bombarded with every image tagged with the topic "West Africa." Another great feature of this website also helps users to manage information by including a "recently viewed" tab that displays thumbnails. For anyone looking through massive amounts of imagery and then wanting to relocate a certain source, this tab is essential. It would be maddening to weed back through the contents trying to remember how you got to a certain image and this feature eliminates that frustration point. Very sleek and user-friendly design.

This website is well worth checking out for about hundred more reasons than I mentioned above:
http://www.footnote.com/

I will end here with a resource that is not about images, but rather a technology blog. Why does this belong here? Because it is difficult to keep up with tech trends without following something like ReadWriteWeb. The articles posted there include important information about design, standards, and pretty much everything else in the world of technology. The potential of augmented reality, Apple finally allowing Flash development for iPhone apps, and the problems with Twitter's photo policy (FYI they can sell any images you upload there to whomever they choose) are just a few of the posts I read from the last few days. I feel kind of dwarfed by the research and endless streams of advances out there when I read these pieces and I would feel sort of out of touch without reading them. Progress is amazing and blogs like this make it manageable to follow.

Check out ReadWriteWeb (subscribe to a feed!) here:
http://www.readwriteweb.com/

7.4 Money, money, money and a few fancy extras

E-commerce and ads:
No book on web page construction would be complete without a section devoted to making money, and MacDonald delivers a pretty good chapter in Creating a Web Site: The Missing Manual. I was wishing for a little more breadth on the virtual shopping cart front, but then again, this is not a book about effective storefront creation. It is about web page creation and in that sense, he covers the simplest way to get a functioning shopping cart system in place. Additionally he covers other money-making ideas, which he appropriately refers to as "schemes." I like the wording, I have to say, because there is something inherently sleazy underlying the proliferation of advertisement all over the free web. Now, I am not lamenting the rampant commercialization of society here — there is already a countless quantity of research on the bombardment of advertising in the form of TV, radio, subliminal messages, and billboards. It has been happening forever and I'll save that discussion for another time. The real issue here, is that lurking behind many Internet ads is the possibility of inadvertently enter a phishing site. Not so innocuous.

That said, there is a lot of good, verified advertising out there and MacDonald devotes space in the book to using Google AdSense for both promoting your own business via ads on other people's websites and using AdSense to generate revenue by displaying those ads for others. While I am not interested in actually using AdSense as a revenue generator, what I appreciate about it is the subtlety Google applies to the concept. The text-only ads really do sit quietly on the page and are less of an intrusion than you would expect advertising to be. The targeted nature of that advertising is also key. Not only does it increase the likelihood that a user will click the ad, thus generating revenue for the site owner, you could almost argue that some of the ads actually offer value to the site. If I am reading about hot sauce, for instance, an ad link to a great hot sauce store might actually be just what I want to see. The Amazon Associates program might be just as good here, though, since the link could go right to a particular product and it doesn't scream AD in the same way that even the Google AdSense content does. The tradeoff, I guess, for the sleekness of the Amazon approach is that a user just clicking a link doesn't yield any profit and it is sort of unlikely that all that many people will buy the product in order to generate your commission. 

One thing I am not crazy about is the AdSense for Search concept. I think the temptation for visitors to exit your site is that much greater when a Google search box is embedded right there, and that seems counterproductive to me. At least with the sidebar ads, a user has to see something relevant to your site contents to entice clicking. They may actually finish reading your website first or return after viewing the ad. With the search box I feel like you essentially just turned your website into the Google homepage. Even if you limit the Google searches to only your website, I feel it still takes something away from the site. A sleeker search option is to create one that combs your website and fits in with the overall look (as in no Google logo in the search box). Forget generating advertising revenue with the Google search feature; it is just a little too distracting.

Internet storefronts are almost a must for any physical store in this day and age. Users expect to, at the very least, be able to check out a new local store to get a sense of the environmental vibe before they set foot in the building. More significantly, however, many of those users may choose to buy products from the comfort of their homes, including people that could just as easily head down to the physical location. Convenience (or sometimes outright laziness) is key.

MacDonald does a good job of covering the slightly tricky task of adding e-commerce functions to your web site by covering the PayPal shopping cart. I have looked into open source software, and a cart can be added in other ways, but I have to say PayPal does provide a streamlined process since you can do everything from your account, including creating the cart buttons and so forth. I was also rather surprised to read in MacDonald's text that you can customize the colors and use buttons you have created, so you can make the PayPal generated pages fit the look of your website, at least to a point. I was previously under the impression that the pages would look distinctly PayPal and totally unattached to your own site design. Given that, I am going to explore PayPal as an option for the e-commerce portion of the Taste the World website. It might save some serious headaches. And on a technical note, the chargeback protection offered by a huge vendor like PayPal


JavaScript to add a little flair:

I have used scripts to create a form, slideshow, and remote and resident rollovers in my personal website. I will likely use these elements to add a little flair and some needed function to the Taste the World website. Not surprisingly, I grabbed the scripts from free web sources, and am still amazed at the variety of freely available scripts out there. I used DynamicDrive to find my scripts, which is a site MacDonald mentions, but he goes on to provide a list of some huge banks of material. I am definitely going to be perusing the javascript-2.com website; with 9,000 scripts there has to be some amazing stuff out there! I will say, however, for usability purposes DynamicDrive is a great site. Everything is neatly organized into categories that make sense, such as Image Effects: Galleries, Mouseover, Slideshows. You can't beat that kind of structure when you are trying to dig for something very specific.

I am also interested in learning more about the creation of scripts, so at some point I will spend some time checking out his suggested resource, webmonkey.com. For right now, though, I will be content with the premade stuff, which is undoubtedly better than what I could create at this juncture anyway. Obviously, as with everything else, compatibility with multiple browsers is an issue. Fortunately, a lot of the scripts out there list the browsers that they are compatible with. Testing them firsthand is still important, but knowing up front if a script is supposed to be widely compatible can go a long way towards narrowing the field and choosing the correct resource.

To check out the websites mentioned above, visit:
http://javascript-2.com/

http://www.dynamicdrive.com/

http://www.webmonkey.com/2010/02/javascript_tutorial/

By the way, on a humorous note, I love that Blogger, which is owned by Google, is able to catch that I spelled "AdSense" as "Adsense" at one point, but can't deal with the word "premade," which is in the dictionary as a non-hyphenated term. The attention to detail that would catch a proprietary term misspelling is crazy. If they could just add that detail to the rest of the language...

7.3 Typography again (huge topic, deserves more space)

This post will focus on a few more typography resources but it will also address some of the problems surrounding using interesting type on the web. First off, I think most people creating web sites realize that only a few fonts are widely supported by most browsers; fancy fonts that are not installed on a user's computer are simply converted to one of the standards. Using only these standard fonts is a sure way to guarantee that you are controlling the look of your web page, but unfortunately it can also make your web page a little boring. This is where using specialized fonts for headings is important to add interest while leaving most of the textual content in a more universal form.

This brings up some interesting issues related to how, exactly, you can get the heading text to render appropriately.

Use CSS to get creative:
Digital Web Magazine has a 2005 article by Garret Dimon that suggests various ways to apply CSS to text in order to achieve good design and readability. Some of the techniques are aimed at tweaking body text by adjusting line heights and employing bolding or italics to make text easily scannable. The article also suggests trying "some headings in all caps, rich colors, or with tighter word or letter spacing" as a way to set them apart. It goes on to list a few examples of well-designed websites that use only CSS to create differentiated and readable text. Truthfully, this simple advice has a point; adjusting the letter spacing to create a wider or narrower than normal heading can look cool, and requires very little effort. Using only CSS to alter text also has the advantage of being compliant with usability standards as screen readers should have no trouble with the text.

Check out the Dimon article here:
http://www.digital-web.com/articles/css_typography/

Stick an image in place of the headings:
Sometimes working with the standard web fonts is just not enough, no matter how many fancy colors or letter spacing tricks you try. There is a reason so many great fonts exist; we LIKE variety. Sometimes the structure of a specialty font communicates a clear message or emotion that one of the web fonts just doesn't. This is important not to overlook since communication through design is more complex than just having clearly readable text. Font styles can invoke meaning. In order to use a particular unsupported font for one or more headings, the easiest thing to do is just create a jpeg or gif image of that type and insert the graphic where the headings belong. This process is quick and can be accomplished by anyone, and has been my personal method of choice. However, there are a few downsides to this method, including accessibility issues. Screen readers will not handle images like regular text, so technically your site is not easily accessible to those using such technologies, or to anyone that has image display disabled. The other issue is that jpegs and gifs, depending on file size, can take longer to load. This might actually be noticeable on slower computers, especially if a lot of text is replaced by imagery.

Replace the text using sIFR:
Plain browser text can be replaced by small Flash movies that display fancier fonts. A javascript function controls this behind the scenes so users don't realize the replacement technique is happening. If Flash is disabled the font still displays, it just appears in the default text. The upside here is that the sIFR movies are small, taking up only around 20k, unlike the image text solution above. Also, since the default text is still there, screen readers have no trouble with recognizing the heading font as text.

To read more specifics about sIFR visit:
http://www.mikeindustries.com/blog/sifr/     

Other possibilities exist, such as replacing text using javascript or image replacement techniques, but I won't cover them here because, quite frankly, I am too much of a novice to fully understand how to implement them.

Typography and web design articles:
A List Apart is an online resource geared towards web designers and covers all kinds of related topics. Not surprisingly, typography is covered in a number of articles. First off, the design of the web site is quite appealing. The text is black on a white background while the header and logo are a subtle beige. The article titles are set apart in a blue font, the color of which is repeated in a thin strip at the top of the page. Linked text appears in orange, creating a good visual contrast. The navigation structure is perfect. Main links appear across the top while a sub navigation system reveals main topics of interest such as design, code, and process.

The articles on this site are quite useful. For instance, Web Fonts at the Crossing by Richard Fink provides a good overview of the changes and future direction of web fonts. As part of his article he notes that the aforementioned sIFR technique is probably a relic already given the lack of Flash support in key parts of the market (iPhones, iPad). I love reading stuff like this as it gives me some perspective about what is in and what is out in terms of techniques. Another great find from this article is the @font-face css rule. This apparently downloads a font from your server if an end user doesn't have it, so the correct font appears on the page. This seems to have some issues associated with copyright since I guess users can grab the font from the CSS and only a limited number of fonts are available using this method because of this issue. I'm not sure I understand how the fonts can get grabbed, but with every new system comes the potential for abuse.

Anyway, read more about it and check out some of the articles here:
http://www.alistapart 

Abc Typography: A Virtual Museum of Typography was a website assigned this week, and it bears a mention here. The site is divided into four sections of type and upon clicking a typeface it gives a brief description. Navigation tabs in the header area offer access to resources such as historical accounts of typography and links to some good free font downloads. The typography museum section of the website was, sadly, useless. Clicking a category such as modern or atypical opens a page with a drop down menu from which you are supposed to select a font; none of the links work, however, in any of the categories. Instead error message after error message confronts viewers. This is obviously enough to eclipse the other useful contents of the site, and frankly the good content can be found elsewhere on more functional sites, so why bother browsing here?

If you want to check out the Abc Typography: A Virtual Museum of Typography, click here:
http://abc.planet-typography.com/index.html

I'll close today with one other resource, the Typographic website. This resource has lots of useful information, including a gallery. Beyond simply showing what the featured typefaces look like, the gallery shows artwork created to express the feeling of the type; some of the work is extremely inspiring and reinforces the use of type as an art in itself. Also noteworthy is the timeline. It scrolls horizontally, but it looks so cool that this is completely forgivable. Also, since the layout is a classic horizontal timeline structure it is actually easier to read and underscores the linearity of the material. This part alone is worth checking out. In fact, the timeline is so cool I might forgive them for having a header "logo" graphic that doesn't link to the home page. Additionally, the glossary of typographic terms is quite extensive, so this web site would also be worth bookmarking as a quick reference guide.

Check it out here:
http://www.rsub.com/typographic/

7.2 Fonts and type

"Don’t forget to draw all of the characters a good font needs! That means punctuation, tildes, accents, parentheses and brackets, and numerals. You’ll also want to include obscure characters like the thorn and eth."
                                              - Alec Julien
                                                "So you want to create a font"

The quote above came from a post on one of my favorite web resources, I Love Typography, and illustrates what amounts to a quintessential difference between high-quality and more dubiously designed fonts. In a previous post I spent time discussing the beauty of free, unrestricted fonts and I stand by the fact that there are many wonderful fonts out there. It's just that you really have to dig around to find the good stuff; even then, a lot of really nice free fonts are missing essential characters and this can obviously pose a number of problems. This brings me to I Love Typography and the simple beauty of sometimes paying for that certain perfect resource. The web site contains a bar running down the right-hand side of the page with featured fonts; new choices are added each month. All of the fonts are clearly high quality (whether they are useful for a specific project or not) and this is a big deal. They tend to have the full range of characters and they are just better-constructed than a lot of the free resources out there. Giorgio Sans, for instance; you would never get that for free and for the right application it would be well worth the $50.

I Love Typography is much more than just a resource for discovering fonts, however, and has many, many useful articles. The topics range from choosing typefaces, readability issues, and "best font" spotlights to articles on the history of various typefaces. The content is definitely written in an easy and enjoyable style and the web site itself is simple and elegant. When various article contributors mention that fonts should enhance (not impede) communication, it is an easy idea to buy into because the web site design showcases this concept beautifully. The text is black on either a white or beige background, which provides a perfect space to showcase the pictures and fonts described in the articles. A splash of color is added by repeating the muted orange (from a small graphic in the logo) across the top of the page and in the section headings. The footer is a beautiful contrast with white and orange text on a black background. And that's it-black, white or beige, orange, and gray. Far from boring, however, the layout capitalizes on just the right balances of color and negative space. The articles can get lengthy (for a web page), especially if you read the comments, so choosing a light surface was smart. It is easy on the eyes and that translates into staying around to click through the archives. In fact, I am thinking about my own blog page and seriously reconsidering my dark background, light text combination. I really like that look, but the postings are a little lengthy and numerous to support that style, I think. White on black is fine for shorter content, but it can get tiring to read after a while. Anyway, I Love Typography got their design just right. The only caveat here is that I dislike that some pages employ the white background and others the beige. This breaks the unity of the web site just a bit because the choice of which color is used seems arbitrary; it doesn't seem to be according to subject and it definitely isn't according to posting date.

Check out the website here:
http://ilovetypography.com/

And don't miss this article specifically geared at Web typography (the Designview/* example is gorgeous minimalist website; definitely click there!):
http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/

Typographica is another web resource with some great reviews of typography. Why is the review important? Because if you can't quite wrap your head around what to think about a font someone else has picked it apart already. And the critiques are honest ones:

"If we compare Candy with Kobayashi’s Lithium, it looks inappropriate to name them as descendants of that 'vision of the future' which implied an entirely different concept."
                                             - Claudio Piccinini

This website was apparently redesigned in 2009, and has some evidence of new content (two articles from 2010, a few reviews from 2009), however a lot of reviews seem to be from 2007 and 2008. For instance, under the feature tab, "Typefaces of 2008" is the latest article of this kind. This is still a really good resource, but perhaps not the most timely if you are looking for the very latest in font reviews and information. Fortunately I am not, so this website is current enough.

The website itself, much like I Love Typography, is minimal in design. This  helps to make the featured fonts stand out. The actual typefaces employed by the website for the body, logo, and headings are diverse, and yet they work together, which is a testament to judiciously chosen variety. Additionally, the navigation structure is perfect. Users can choose between designers, foundries, and classifications, which makes this perfect for experienced users (that would actually look for a particular type designer)  or amateurs who might only know a category such as serif. I really love the option to search by foundry as well because users can start to see patterns develop. For example, I noticed that two attractive fonts, Paperback and Luxury, were both distributed by House Industries. I then searched that foundry and located Studio Lettering, a nice script font. The point here is that this opens up a whole new searching and sorting method that allows users to become familiar with high-quality distributors. While the specific font choices on this web site might be somewhat limited, you can then search elsewhere for resources by a designer or distributor that you already know you like. A great way to start learning the ins and outs of the type world.

Check out Typographica here:
http://typographica.org/

I'll dedicate another post to more online typography resources since there are a lot of worthwhile websites and each one deserves a fair discussion. As for this post, just looking through these sites has reminded me that free resources are awesome, but sometimes you just get what you pay for. I may have to invest in a few gorgeous fonts for my website (and then pine over the many more that I can't afford).

7.1 Imagery and a look at some layouts

I was a little disappointed as I finished up the final chapter of Jason Beaird's The Principles of Beautiful Web Design, not because of the book contents, but rather because it was truly an enjoyable read. He effectively scratched the surface of classic design elements and underscored the importance of incorporating those elements into web design, regardless of how easy it is to get distracted by flashing buttons and crazy animations. The message of this book is clear: no matter how trendy or unique a design, with proper layout it can retain a timeless quality.

Beaird's last chapter focuses on using imagery in a way that creates a pleasing visual appeal without losing sight of the mission to communicate the site contents. He also goes through a number of options for procuring images, including the real faux pas of imagery theft. In fact, I was amused to learn that the latter has its own special name — Google Ganking. I appreciated his descriptions of using different Photoshop techniques to create interesting effects and thought his suggestions were explained in thorough detail, to the point that an even an amateur could follow his advice. Additionally, his choice of very pedestrian imagery helped to drive home the point that much can be done to elevate the look of graphics for a web page. He did have one slight slip, however, that I think bears some attention here.

In a hypothetical example he shows some creative cropping of an image of some stonework on the Biltmore Mansion. He suggests that the somewhat ordinary image will be tweaked for inclusion with a news article about the estate, and proceeds to crop in a manner that allows the head and arm of a relief carving to break the top and side edges of the picture frame; he also manipulates the background and foreground separately to create an unnatural vividness, and thus a 3-D effect, to the carving portion of the image. This raises some questions for two reasons, both related to his choice of client. Since knowing your client's needs is key (and a point he mentions throughout the book), the image manipulation suggested here is surprising. First, the broken frame is atypical of what a newspaper would ordinarily display. It seems less documentary in nature than a news article would require. Perhaps more importantly, however, is that the obvious digital manipulation would cause some viewers to actively question what other images the news source might be doctoring; this is a question I am certain all news sources would choose to avoid at all costs. Therefore, flaunting creative image altering would be an extremely poor choice.

A news source has to maintain a certain image of objectivity (at least to a point) and despite the widespread public knowledge of digital imaging technology it is still scandalous when an image from a news source is exposed as being obviously doctored. It gets at the heart of truth in imagery; people do not want to think a news source is actively manipulating any further than traditional cropping. (I will save the whole philosophical discussion on the history of image manipulation in all forms for a later post.) Now, you may be thinking I am making a lot of this example; it is, after  all, not a huge news story or even a real event. The point here, however, is to highlight how easy it is for "designer" mode to control and eclipse content communication in favor of something that just looks cool. Beaird's image would look great on the Biltmore web site or on an artistic museum website feature page, but for a news website it really eclipses the purpose of the news source, which is to communicate factual information. The overall danger here is in sliding into a "photoshoping" mentality where the lines between acceptable manipulation for different sources become very blurry.

As a matter of fact, another image in this section — a shot of downtown Charleston — is also altered. While Beaird doesn't name a source for where the image might wind up, he does seemingly make an alteration that goes unmentioned in the book and that makes me think that such an image tweak is second nature for him. He describes shifting the focal point by cropping the unsightly edge of the image; this includes cropping out power lines near the steeple of a church. Upon close examination of the source image, however, several of the power lines appear to run horizontally from the image edge to behind the church. In the cropped image that area of the shot displays only clear blue, empty sky. He has certainly cropped most of the power lines out, but he obviously also used the cloning tool to eliminate those that couldn't be cropped (I believe he extended the long cloud area this way as well). He fails to mention this point. Again, this is a common practice and is fine, unless the image goes to a news client. That would create an unrealistic, "better" view of reality. I am simply pointing out that his failure to mention the cloning might suggest he isn't thinking about it.

All of that said, Beaird is very cognizant throughout the book that communication is the true purpose of design and he illustrates that point over and over through his examples. Next, I will take a cue from one of his earlier chapters on employing the rule of thirds and showcase some potential web site layouts that I sketched using his 3" x 3" grid method.

Below are eight sketches for possible layouts for the Taste the World website. In the first two I have tried out an off-center one column layout with a large header and a large static image area. The other is  a three column layout. The latter seems a bit too busy, but the first could work. The image on the left would remain constant across the page, and the content boxes would contain news and a welcome on the home page. This area could transition to a solid block on the product pages.

These designs incorporate two column layouts as well. In the first, the header incorporates a search box, and the main navigation is located underneath the bar in order to break out of the box a little. A secondary navigation bar will contain product lists. I also took a cue from a website featured in Beaird's book and tried out a grid of images. I like the additional navigation, but am not crazy about the images section. The second design expands the main navigation bar near the top by including the product categories there. I like this idea because the products can remain the focus of the site by virtue of their visibility. The image here is smaller and allows for some negative space on the page. The angled placement would direct the viewer's eye toward the main content block, which would be effective for highlighting that area. I think this design has real potential.

The bottom image here looks too blocky and is out of the running immediately. The top image employs a two column design and like the example above, incorporates a nice area of negative space. I like the organic shape of the header in this design and the incorporation of the product categories in the main header.
 

In this last set of sketches I have again used two column designs. These seem to be the best for a web site of this size. In the first image I used the general layout of a free CSS template I saw, with a round image of rice overlapping the navigation bar. I thought perhaps some coffee beans or a pile of spices would look good in that area. I was also drawn to the oversized header and navigation, but think that ultimately a simpler design might be better. The last image is a pretty standard design, but I stuck the content area on the left instead of the right. I remember Beaird suggesting this as a way to add emphasis to a content block and I like the look.

While I will play around with these layouts a bit more, I am leaning towards the organic edge header layout. I think with a subtle right-left gradient and an analogous color scheme that this layout would work well for the contents. The product pages can use the left-hand content area to feature thumbnails of additional products while the main header can incorporate the broader product categories. This should make for easy navigation. Now, on to color swatches and images...