Delicious going under? Really?

First I have to admit that I don't really utilize Delicious to its full potential, so I guess I am part of the problem here. I have two really great thematic lists set up--both of which accompanied library class projects--that I like to point people to from time to time. Beyond that, I have to say that I don't often think to go to Delicious for my own information gathering needs. But I should.

I was reading an article recently that suggested some ingenious ways to use Delicious, by, say, tracking which users are tagging current and significant content. By identifying a handful of these super-users it is easy to subscribe to the lists that are most likely to remain current and useful. It also offers a window into who is likely to have a fantastic blog. Finding tech resources (in particular) can be a challenge and Delicious really does offer a way to find the best stuff out there.  There are also fantastic thematic lists that teachers can use to weed through all the information out there to find lesson resources. It is a fantastic time saver for a group of professionals with very little extra time to comb the web. 

Beyond individual users, there are many institutiions that really rely on their Delicious links to share information--schools and libraries are among the most diligent users. So this begs an important question: Is the profitability of a service the only thing that matters? Sure, you can argue that Yahoo is expending valuable time and resources on maintaining Delicious, and that the profit potential is not there. Is it costing them money? Definitely. But who cares? Chalk it up to a social service and move on.

Museums and libraries offer free services all the time, often working on severely limited budgets. The point is to increase benefits of some kind to the community, which is a worthwhile endeavor. Yahoo, on the other hand, has tons of money, and is in the business of making more. Good for them. But is it really so hard for a for-profit company to see the benefits of maintaining a service just because it helps other organizations to better do their jobs? It isn't costing Yahoo much to maintain Delicious in the grand scheme of things.

What Yahoo needs to do is shift their attitude towards Delicious. Stop trying to make it into a cash cow--we have enough of that on the web already. Instead, why not publicize what a great public service it is (Target promotes their community giving campaigns all the time). It would be the best type of free advertising--the kind where a Goliath of a corporation does something for the little guys, just because they can. You can't buy that type of public endearment, and I know I would like Yahoo a lot better if I thought they cared at all about something besides profitability. 

Creating a website: Design and technical issues - Part 4

Future Directions & Continuity:

Now for the last post about the design particulars of Taste the World Online.

Blog:

In order to keep the website current, I created a blog for Anne using Blogger. To date I have written all the contents for the site, blog, and Facebook page, however when her schedule settles down a little she will be able to keep the website updated with content through Blogger. The blog will allow her to add recipes and party ideas directly from the Internet, without having to either modify the website or ask me to make frequent additions. What I will maintain are the box areas that feature announcements (like upcoming events). These areas are small, however, and maintenance will be minimal. The blog, however, will ensure that users can find current content associated with the site, so there should be no sense that the storefront might be abandoned. My other hope is that through blogging Anne can develop a following of users that will discover the store website through that forum.

Check out the blog here:
www.tastetheworldonline.blogspot.com/

Site expansion:
The website is small in scale right now due to a number of factors. First, the store is newly opened, so the number of products available is relatively small and the number of products I was provided for photography purposes was even smaller. Therefore some of the category pages have less products listed and some product pages have alternate views while others (that could) do not. The space on these pages will allow for future growth, as will the addition of additional linked pages in each category.
Second, I have left space for buttons and shopping carts associated with ecommerce. I have researched some options and will likely use Zen Cart, which is an open source program that can be customized to fit the look of your website. I have encouraged Anne to create a PayPal Merchant Account to handle the payment (although to date she has been preoccupied with opening the physical store and is not ready to engage in online ordering). After reading about the pros and cons of the PayPal system, I feel that she would benefit from their small commission fee, recognizable status, and the protections they offer for ecommerce. The payment functions seem easy to set up, and they are compatible with many third-party shopping cart applications, including Zen Cart. Adding this functionality will be the next logical step in expanding this site in the future.

For now, the Taste the World website strikes a balance between informational pages (i.e. how to present cheese, why bother with roasted coffee, etc.) and product pages that give descriptive information and prices. Anyone trying to scope out the physical store prior to actually heading down there should find all the information they need on this website. The design and information on the Web should assure potential customers that the physical location—which they can see pictures of on the site—will live up to their expectations of high-quality products and a pleasant ambiance. The future of the site is exciting, as it is designed to grow at the rate of the business, and areas for expansion are already engineered into the basic design.

Creating a website: Design and technical issues - Part 3

Part three of this four part commentary on Taste the World Online addresses issues and challenges. If you have been following my posts over the past few months you are familiar with the discussion of some sticking points. Below are some of the larger challenges I encountered.

Graphics:
I photographed or drew all the images on the website in order to avoid any copyright infringement issues, with a few notable exceptions. I sent my father to photograph the store location images since the physical location is in Upstate New York, which is inaccessible for me at the moment. I also sent an email to the owners of Blair's Hot Sauces (a small company) and they were nice enough to send me a number of product shots that I could freely use to sell their products. All other icons, buttons, logo, texture elements, and imagery were completed using a combination of Photoshop, Illustrator, photography, and hand drawing. For the logo and quote on the index page I incorporated the font Zapfino, for which I purchased a commercial license. The other font, Caviar Dreams, which I used for the navigational elements, was available under a Creative Commons license that allowed for commercial use.

All the images were sized in Photoshop and then optimized using the "save for web and devices" option. Whenever possible the images were saved as JPEGs, however it was necessary to save some images as PNG-24 files in order to preserve transparency. While this increased the file sizes, in some cases it was necessary in order create an effective design (such as in the creation of the rollover buttons).

I created all the page elements within Photoshop, and then created a CSS file in Dreamweaver that incorporated appropriately placed divs to contain the separate elements. As for the look of the overall page, I incorporated some modern trends to make the page appear sleek. This included the use of rounded corners, which have come to be associated with Web 2.0 design. Far from wanting to invoke that computer feel, however, I balanced transparency, color scheme, and sharp edges with the rounded corners. I made the header fall short of the page edge in order have the background begin to blend with the active area of the page at the top, and added a round corner just at one edge. I had the hand drawn graphic spill over from the header to break up the potential boxiness of the page. I was looking for something sleek and sophisticated that still seemed rich, glamorous, and natural. Similarly, the drop shadows and rounded edges on the transparent boxes were intended to add depth and a stylish edge without screaming out "contemporary."

Challenges:
Preparing this site from scratch was both interesting and at times frustrating. There was a point when I somehow tweaked the code in a way that caused the website to develop serious issues; I was ultimately unable to recover and after many hours combing the code and reviewing discussion forums in an attempt to discover what I might have done, I simply rebuilt the template. This has made me acutely aware of the fact that I can do simple hand coding and rectify simplistic errors that crop up, but beyond that my skills need serious development. A class will be helpful in refining the basics, as will additional practice.

There were also some elements that proved to be beyond the scope of my knowledge. For instance, I understand that using graphical text poses accessibility and search engine optimization issues. I have read about several alternatives to utilize fancy fonts without creating image files, but decided against incorporating them. First, using SIFR in order to replace fonts seems to be quickly becoming obsolete. Using the CSS rule @fontface is preferable. This method, however, requires that the font carry a web license, which is not necessarily included in a commercial license. My Zapfino font could have been handled in this manner, in particular on the index page where a graphic font occupies a large area in the main content box. This graphic, while it has attached alt text, both bucks accessibility and adds unnecessary size to the page. However, as I read more about the @fontface rule I found a lot of information about it not working in Internet Explorer; the proposed workaround was simply beyond my current skill. I prefer Firefox as a browser, however many people do use IE, so I felt that ignoring such a display issue was problematic. When I have better honed my skills I will definitely rethink the text-graphic issue, but for now it had to suffice.

SEO and promotion:
Since ideally this website will help to attract customers to Anne's business, I tried to do some things to help with location. For starters, I made sure to include a good, concise Meta description in the code on every page. I also included the Meta keywords, although I remember that the MacDonald text and forums I have seen note that Google mostly ignores keywords because of past abuses. Even so, I added them just in case it will help (and I noticed while combing page sources that most web designers are still including them). I also made sure to include a link to the website from the blog page I created for Anne, as well as from Facebook. I added a link to the page from my own blog as well and put a web link when I created a location for the business on Google Places. I realize that these links fall far short of building a web presence, but it is a start. I attempted to make as much of the page as possible decipherable for web crawlers as well, and despite the exceptions I noted above, made sure heading text was handled in the page as a web-safe font instead of a graphic.

One other challenge I struggled with was the decision about whether to use a pop-up window for the Recipes button. The main issue was that I modified a Blogger blog template to look like the rest of the Taste the World web pages with the intention of using FTP to publish the blog to a page on the main website. Unfortunately I was unaware that Blogger stopped supporting this feature earlier this year. I have been unable, to date, to successfully point the logo on the blog page back to main website, as it defaults to linking to the Blogger page and as far as I can tell they remove the target attribute from the code view within the blogger application. I will eventually rebuild the template from scratch, as I know you can use unique CSS to control the behavior of your own pages, but have not had the time to invest in this project yet. As such, I felt many people would be confused by the similar look of the blog page, yet the lack of functionality of the logo linking back to the index. There is always the back button, but I believe that in not realizing they had left the main website, users might be frustrated by the inability to navigate.

I read a lot of opinions about the frustration a pop-up window causes viewers, but ultimately decided that it was necessary. The users can open the Recipes blog while the main ecommerce site remains open. This seems, for now, to be the best compromise. I also read some heated debates about the controversies between using target= blank or JavaScript to point to a new window. Target= blank is non-compliant with WC3 standards, however it also easy to drop into a site and for now proved to be the best solution… real world design.

Next up, future directions for the website.

Creating a website: Design and technical issues - Part 2

Design Elements:



Good design helps to communicate a message, rather than obscuring the contents of a website. As such, simplicity is a great design consideration. However, simple, clean design does not mean boring design. The following considerations were part of my process to create a layered and sophisticated look that would reflect the gourmet food theme of the website without adding a lot of clutter.

Functionality:
I created the design for this website with a few functional issues in mind. First, since it is a store website featuring products there are certain elements that users expect to find. I kept in mind that such visitors would be driven away from the site if they had to hunt too hard in order to locate these elements. The information about hours and store location is prominently placed on the contact page. Additionally, the address, phone, number and email address are footer elements that remain consistent on each page. Most importantly, however, I considered the ease of navigation. If users can't find something quickly, they simply move on; quickly equates to within one or two clicks.

The main navigation is situated on the right-hand side of the page, with clearly labeled categories of About, Shop, Contact, and Recipes appearing horizontally in the header. Simple rollover graphics help to indicate that these are links. There is no Home button, however the logo in the upper left is placed in a typical location and links to the index page from all other pages; this is so common that virtually all users would attempt to click there prior to looking for an actual home button (I certainly do). The addition of a button that actually read Home seemed redundant, and I feel that typical Internet users are past the point of needing such a text-based cue to return to the index page of a website. 

The secondary navigation is located on the right-hand side as well, with the main product categories listed vertically. I had initially planned to have this secondary navigation appear when users clicked the shop page, and remain on all tertiary category and product pages. Upon viewing dozens of ecommerce sites, however, I noted that almost all of the designs kept such product navigation intact on every page, including the home page. I decided that this was likely an ingrained expectation of viewers, and that removing the category buttons on the index, about, and contact pages would be aggravating to users.

I also considered whether cascading menus would be appropriate, since the main categories control navigation to particular products. Many sites do use such stacking features to obscure and reveal increasingly specific categories, but I decided in the end that the selection on Taste the World was too small to justify this feature. In fact, it would probably be aggravating to see stacked menus reveal only 3-4 choices, and would create extra clicking, which is a serious design faux pas. Instead, the shop page contains a descriptive category list, with each subheading linked to the appropriate category page. These links are the same as the navigational links on the right, so users can bypass the shop page altogether if desired, or click from within the main content area on the shop page, if that is what they are used to. They can return to any category page at any point within the site simply by using the secondary navigational menu.

The category pages offer thumbnails of products, as well as brief descriptions of the overall category. Ceramics and Accessories, therefore, contains images that link to individual product pages detailing specific price, use, and imagery of serving pieces. The category pages reflect another trend in ecommerce sites, which is to have a series of images on one or more pages that link to more detailed product pages. It is a logical organizational tool and one that is likely expected by most users. The individual product pages are also designed with typical expectations in mind. They include a sizable product shot, and when available and appropriate, alternate views. The alternate views are located as thumbnails below the main image, and are remote rollover buttons. Eventually, the site will include a functional shopping cart, so an add to cart button will be added to each product page; ample space has been left at the bottom to accommodate this future addition.

Beyond navigation, there are some other functional considerations. I used the color contrast analyzer available at Colors on the Web to check my text/background combinations to make sure they met accessibility standards, which they do. The only contrast area that was flagged as problematic was the dark logo on the red header banner. I could not find a color combination that worked in this case while still fitting within the site color palette, and simply made the assessment that the combination was contrasty enough for the majority of Internet users. I also made sure to label all images with alt text to ensure that text readers could effectively process what is a relatively graphics-heavy website. This includes the rollover buttons, which are an image that utilizes text. Beyond the logo, navigational buttons, and a decorative quote on the index page, all text is written in the Trebuchet font, which is approved for the web. Therefore, all text should render correctly in most browsers. Additionally, I increased the spacing between lines and made sure the smallest text was set to a 12pt size to increase the readability of the website contents. I also made the main content block light in color so I could use darker fonts in that area. I felt that light on dark fonts (which I like the look of) should be reserved for the side boxes where short snippets would be easy to read. I felt that the longer text sections required for the main content area might cause fatigue if viewers were expected to read light text on a dark background for such passages.

Balance, texture, and space: 

The design is arranged using the rule of thirds, with the main content area occupying two-thirds of the horizontal space, and the navigation and announcement blocks occupy the remaining third. This gives the content area a greater presence on the page, and should pull a viewer's eye there first. Additionally, the use of burgundy gradients in the header and footer areas creates a sense of balance and unity as the repetition of the colors creates a mirror effect on the page. Additionally, textural elements add interest to the background and help to draw the viewer's eye across the page. First, the translucent coffee cups in the header bar both mirror the logo design and draw attention across the page towards the navigation bar. The graphic overlaps the background slightly in order to eliminate the boxy feel that might otherwise prevail on the page. The drawings of star anise seeds repeated on the left and right sides of the background help to draw the gaze up an down the page. They also create an asymmetrical balance because the same images are repeated on the left and right, but occupy different spatial areas. The smaller but more numerous left-hand seeds are placed closer to one another, while the larger and more flowing seed drawing on the right is surrounded by more open space. These size and space differences offset one another on the page. Both the coffee cups and spice images reference the store theme and products, and so are not just arbitrary textures.

As for space, some areas have been left open to create an uncluttered feel. There is also room for growth here as there is plenty of space to add a small shopping bag icon and/or search box under the header if the site becomes large enough to warrant such a feature. On the secondary pages there is a lower box in the right-hand column that is intended to contain important information or add graphical interest through images, depending on the page. The separate container box helps to set important sound bites of information or announcements apart from the main content area. As such, the grand opening announcement initially occupied this spot, and has now been replaced by an announcement of a new Bean Club promotion. This important area has been removed on the tertiary product pages, however, in order to make sure the space there remains uncluttered. This is due to the large graphics already in place on those pages; the open area under the navigation bar creates a good balance with the product space, and trying to feature additional content in that smaller box would compete with the main content on those pages.

Color:

Color is perhaps the most important element I considered in this design. I began with the intent of using burgundy because I felt it conveyed a certain richness. Jason Beaird backed up this assumption when he suggested that such deep red conveyed associations with fine living, but that such colors were also associated with power and hunger. This seemed perfect for a gourmet food store. I initially began with the intent of using an analogous color scheme, incorporating other colors that suggested associations with food—namely yellow and orange. After working with these colors, however, I could not find a combination of yellow, orange, and burgundy that appeared sophisticated (no matter how "burnt" the orange color I chose). It simply created a site with a harvest look.
I then decided to use the color palette generator at Colors on the Web to try out different looks. I began with my original burgundy (#80021F) and tried triadic and complementary color schemes. Interestingly, I would never have independently used a complementary color scheme with red and green because it sounds Christmas-like. However, the burgundy was offset by a rather rich green. I then tweaked the green so it was not quite exactly opposite, and ended up with a rich light olive color (#78752C). I then took my new color scheme to Adobe Kuler in order to generate a full palette for my website. There I added tints and shades of the original colors, as well as a rich brown that suggested the idea of coffee to me (an important element of the store). I ended up with a dark, medium, and light version of brown, burgundy, and olive green, and added an ivory color as the lightest tint (in lieu of white). This color palette reminded me of a winery, coffee house, or other sophisticated food topic, and therefore seemed perfect for Taste the World. (I also made my new color palette public, since I love the type of resource sharing that drives the Web.)

The actual website displays all the colors and ranges in the described palette. Every color is repeated somewhere in order to add unity to the elements on the page. The deep brown of the background, for instance, reappears in the hand drawings (which were re-colored in Photoshop to fit the overall palette). The ivory from the main content area is repeated in the main navigational headings, footer text, and rollover graphics. The dark burgundy is repeated in the text heading, and so forth. This all sounds very "matchy," but it makes for an overall unified look and ensures some weird background element doesn't suddenly compete with the site contents.

Next up I'll relay some of the issues and challenges I faced during the design.

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.

14.1 Final web design

The structure is in place for the Taste the World website. It looks good, and incorporates room to grow. As products are added to the inventory they can be added to the website easily. The next step, when my aunt is ready, is to incorporate ecommerce into the site. Right now it features products and information, but you can't buy directly from the website. I am waiting for Anne to set up an account, however, in order to proceed with that phase of the project. I told her that I think PayPal will be the best route in this case.

Check out the website here:
www.tastetheworldonline.com

In my next few posts I will talk about some of the design particulars. It bears noting here that I learned a tremendous amount through the production of this site, however I feel that a class in coding is the next step. I can certainly hand-code something simple, but when it comes to unearthing pervasive problems my success rate has been somewhat lower. I need to rectify this in order to really move forward with my designs. Tutorials have been helpful, but a class will really bring things together for me. I might have to push that off to the summer though. The timing between break and the spring semester just won't work, and the upcoming USF semester is going to be packed. Meanwhile, I will keep tweaking the site and posting about design.

And finally, lessons learned:

• Keep it simple! Not boring, but definitely streamlined and clutter-free.
• Real world design sometimes requires workarounds. 
• Getting a better grasp on the particulars of CSS and XHTML will be a necessary addition to my skillset.
• Sometimes if it can't be figured out, cut your losses and rebuild! I "learn" this one over and over...  

13.1 Form and function clashes

I would like to discuss a little design and accessibility quibble I have, once again. Somehow I accidentally deleted the code from my CSS that overrides the focus box that appears on visited links in Firefox. Of course I knew it was a simple fix, but just couldn't remember what it was so I had to dig around on the Internet looking for the answer. Since I couldn't remember what the box was officially called I was stuck searching for "dotted lines in Firefox," "borders on links in Firefox," etc. This search returned lots of forums that described setting images to have a zero border and so forth, which meant I had to comb many of those forums before I found my answer. This process led me to focus on the aforementioned design quibble.

What was striking about this search was the large number of people that responded to the forum inquiries about losing the dotted lines (who fully understood the border was a feature of Firefox) by stating there was a javascript workaround or some code that could tell Firefox to override the focus box, but then wouldn't tell how to do it because it was considered "poor practice."

From David on Adobe forums:
"There are JavaScript techniques for removing focus rectangles, but they are considered very bad practice, and go against the accessibility requirements for websites laid down by most governments."

When later prompted he added:
"As for the focus rectangles, they're deliberately visible. If you were disabled, you would want them to be as visible as possible. If you think they destroy the look of your site, perhaps it's time to rethink your design."

Newsgroup_user added:
"I get it most of the time with most browsers, I came to terms with it about 8 years ago, its just one of those things."


These types of responses were relatively prevalent, and here is my issue. I don't necessarily disagree with the usage of those focus boxes — accessibility is a good thing. However, I believe many users do find them annoying, yet would not take the time to disable them in the browser settings. I certainly haven't bothered and I actually know how to do it. So, we are forcing an annoying element on Firefox users, many of whom will assume the web designer intended the focus box as part of the page. How is this different than any other annoying element, such as overuse of animation? Most users that don't require the functionality of the focus boxes will not understand them to be useful or automatic and therefore will not excuse the element as being out of the designer's control.


That leads me to the next point, which is that bad practice or not, most designers are forcing Firefox to override the focus boxes. I don't have the default setting turned off, I use Firefox all the time, and yet I rarely encounter the dreaded dots. I also take issue with the arrogance of stating that if the focus boxes ruin a design the design must be poor to begin with. I don't know of any way to change the color, and that bright blue "link" hue is jarring. If a designer has spent considerable time crafting a color palette that blue just might look very wrong against the page, as it does on mine. It is unfair to say we should just get over it. In fact, I would have much less of an issue with the focus box if you could change the color to something that would be contrasty enough, yet still fit the look of the page.


I also feel that pointing out that you know how to change the effect, but won't divulge the technique because you are "saving" someone from making an error is arrogant. Don't weigh in, or else give the information with the caveat that you believe it should not be used. I might also mention here that Firefox could make the focus box feature default to invisible. Then nobody would bother overriding it since only people that wanted to see the focus box would turn it on. Right now designers are being forced to choose between all or none, which is totally unnecessary. All of that said, there are valid reasons for wanting to control the look of web designs. If I am to be faulted for bad choices by using hot pink, yellow, orange, purple, and powder blue on a page, why would it suddenly be fine to have a bright blue dotted border appear around elements on a page that uses only earth tones, or black, white, and gray? Design choices matter as much as functionality. Form is equal to function in my view (sorry Louis Sullivan, but Modernist ideology is dead) and sometimes "functional" rules get in the way of good communication through aesthetic design, which in itself creates a usage issue.

All of this aside, I eventually did find the rule: a { -moz-outline: none 0; outline: none 0; } and my website looks much better for having put it to good use.

12.1 Web tutorials

Today I am looking at Smart Webby, which is a design guide web site that has lots of free tutorials. More importantly, the tutorials are written at a very basic level so anyone can follow them; to this end, all web terms are defined at the beginning of the articles so that novices can find what they are looking for without being entirely familiar with the lingo. The articles state that familiarity with the software will help, but honestly they are so clear I feel even a complete beginner can follow along.

The choice of tutorials includes a surprising variety, from Dreamweaver to Flash and Fireworks. Within each category the options are further refined to include specific functions, such as creating rollovers and pop-up windows. I have to admit, I didn't realize that Dreamweaver would write the code for the latter--I thought that was definitely a feature you had to manually enter. Other particularly useful files include the tips lists for effective navigation and layouts. For example, the point is made in the former that too many links will confuse and overwhelm a visitor and therefore extra (secondary) links should be stored in drop-down menus. They also make the point that if you want to remain flexible in your ability to add additional links that drop-down menus are the best way to do this. Truthfully, I wish I had thought more about that point in my own web design. I have an airtight arrangement for my links that looks good, but there is absolutely no room for additional categories later on. This is something I may need to eventually consider as it is likely that new products might demand new categories. For now though, the navigation will stand.

As for the other tips, clean layout, optimum load time, scalability, and compatibility with multiple browsers make sense. As for minimizing graphics, I have mixed feelings. I totally agree that clip art, useless animations, and extra non content-related garbage can go. I also feel, however, that pictures can illustrate many good ideas and that well-placed scripts such as unobtrusive slideshows, forms, etc. are some of what can give your site personality. Slower running, perhaps, but that's where optimizing the code and graphics (another recommendation from the list) can help.

As for the Smart Webby site, it looks pretty good. The text is very large with ample line spacing, which makes it quite easy to read. This is good because it makes it likely users will stick around to view several tutorials. Of course, you could argue that the size is overkill, as a smaller version would be alright as well. Then again, I have great eyesight… The page is also very colorful and rather fun, but not to an obnoxious level. The textures (clouds and vines with flowers) are whimsical and align perfectly with the judiciously placed rainbow background colors. The repetition of those colors in the navigation, account, and news boxes helps tie the page elements together. Even the black top navigation bar, which originally I thought might be out of place, is echoed in the footer. Bottom line, balance and repetition are key to making all the disparate elements on this page gel in a professional manner; it does this, while still maintaining a sense of whimsy and fun, which are nice elements to take the scary out of web design topics.

Check out Smart Webby here:
www.smartwebby.com/

11.2 Web site reviews

This week I will discuss some web sites that offer listings of good designs that are out there. I love these types of "best of" lists because they really do take the work out of combing the web for great inspirations. An added bonus is that many of the sites listed have links to other great resources (designers really do take sharing quality examples seriously). The websites featured here are all pulled from the blog "27 Best Places You Should Visit To Get Incredible Web Design Inspiration!" posted by Smashing Apps.

To visit this post directly, go to:
http://www.smashingapps.com/2008/10/20/27-best-places-you-should-visit-to-get-incredible-web-design-inspiration.html

One Page Love:
This web site contains a compilation of web sites that cleverly contain all the navigation and information on a single page. Some of these pages are beautiful, such as the Heart's Cry, Inc. page, which uses a yellow text box that unfurls as you click links. This navigation is sleek and organized and actually makes multi-page sites seem a little clunky. Of course, it depends on the amount of information that needs to be presented, so specific topic pages work great in this format--multiple product or topic pages would get unwieldy. Some of the sites mentioned by One Page Love seem to be nice page designs that are actually not really self-contained. For example, the Rei das Praias site may be one page, but it really functions more as a home page with links to different but related company websites. Each of these opens a full website that navigates through various pages. Even so, most of the featured pages do fit the criteria for true one-page navigation.

The design of One Page Love is conducive to browsing the featured websites. Like many similar compilation sites, it uses a very minimal design that does not compete with the contents. In this case the black background and white text are highlighted with just a few splashes of hot pink in the logo, footer, and links. These pops of color are used judiciously and therefore add a nice touch without becoming annoying. The website thumbnails are large so it is easy to see the contents of the pages prior to clicking, which is important for navigation; it is easy to bypass those that look uninteresting without the hassle of clicking. One feature that I like, although it is controversial in the web world, is that the links open in new tabs. This saves navigating back to the site, and mimics the manner in which I normally choose to browse anyway. I don't think this is uncommon, and yet I was reading a blog the other day that chastised the practice of forcing a new window--ever. Apparently an even greater sin is using a target= blank attribute to do so, which I noticed this website employs. All the code wars and objections aside (I don't really care if javascript or target= blank makes it work), I think this type of browsing works well.

One last note, I like that this website includes dates next to some of the thumbnails. I'm not certain why all of the submissions are not dated, but the inclusion of at least some dates is essential. For instance, when I see November 15, 2010 listed next to the latest feature I can tell the website is still active. This is important since such sites run a real risk of seeming static.

Check out One Page Love here:
http://onepagelove.com/

Unmatched Style:
This website has much more content than One Page Love since the focus here is on a variety of web sites as well as other resources, interviews, etc. The focus on quality web site designs remains central though (literally), as it occupies the middle column of the page. Organization on this site is key as it helps to avoid information overload. The other categories are neatly defined and contained in logical columns, with headers like news, interviews, and resources. It is immediately obvious that this website is vibrant and active, as evidenced by a news section that contains the  latest highlights (this in turn links to an archive area). Here again, knowing the web site is updated makes it more likely users will return.

The design of this website is clean, with the contents creating all the page decor, so to speak. A few bright red headlines and buttons add interest, but otherwise the slate colored header and footer contrast with a white background. This lack of "design" functions perfectly for this web site, however, because it leaves the contents as the only focus. Adding any other page elements would be distracting given the vast amounts of information presented. It is actually hard to pull off an information-rich yet uncluttered look, and in that regard this site is extremely successful.     

Check it out here:
http://www.unmatchedstyle.com/

CSS Creme: Best web flavors:
This website, like Unmatched Style, showcases a three-column design that allows a lot of information to occupy the home page. This page has more design elements and yet it manages to stay uncluttered as well. The color scheme of light brown and turquoise is pleasing and a little trendy, and it  because it has a minimal amount of texture it is interesting without competing with page contents. The color scheme is carried through by the use of turquoise text in the main white content area.

The navigational structure on this website is an important element in making it user-friendly. The amount of information could be daunting, but it is neatly organized into a series of sub-navigation menus. The resources  menu on the left stays consistent on almost every page, while a new menu specific to a broader category (fonts, tutorials, etc.) opens below it on each section page. This helps to refine the selection within a category so users can easily find only Photoshop tutorials or CSS tutorials, and so forth. An interesting note, you can peruse featured designs by color; clicking a color swatch reveals websites that use a predominate color, such as blue or purple, in the layout. This is a nice feature that I have seen in only a few other places, and is one that could help provide inspiration when you have a color for a web design but don't know what to do with it.

One thing that I don't like about this site is the large gradient-filled rectangle in the center of the header. It is empty of any content and it appears that something didn't load there. If it is intentionally placed it is a bad design choice because it simultaneously non-functional and covers up other header elements like wood grain and paint splotches. And while it is only on element on an otherwise nicely designed page, the prominent placement really makes the entire site look a bit unprofessional.

Check out CSS Creme here:
http://csscreme.com/

Unique CSS:
This web site provides a twist on the "best of" concept by featuring only four websites per month, the best of which is determined by user votes. I like this concept because it involves the web community while still maintaining a high level of design credibility. This is accomplished because judges select the four finalists from a pool of websites that have been submitted by designers. They can ensure that the public, in turn, is only able to select a favorite from four quality designs. This avoids the problem of the public choosing a poorly designed site from an uncurated pool.

What I really like about this web site is the curation aspect. Rather than continue to showcase all the finalists from each month, only the winner's site is featured. This creates a truly curated selection of designs and adds some clout (or bragging rights, as the website points out) to actually winning. Overall the featured websites did indeed live up to the juried mission of Unique CSS. They were different and exciting, embracing a variety of design looks, but all worth perusing. Featured winning web sites extend back to 2008.

As for the design of the Unique CSS website, I like it less than I do their  mission. It's not confusing or cluttered, but it isn't quite clean either. It's easy to navigate, but somehow the design just seems blah. This is a bit counterintuitive, but perhaps stripping away a few elements would actually make it more engaging. The design would have a minimalist identity. Right now it doesn't have any identity, since it is neither playful or purposely stripped down. It is simply there, without adding too much clutter but with a few too many elements to be considered purposefully pared down. First, the winner stamp needs to go--it's cheesy. Second, the alternating white and gray boxes that separate list elements on the home page could be eliminated. Yes the alternation differentiates the items, but they are short enough on their own that it isn't necessary. The boxes also look like elements in a bad Word table or Excel spreadsheet. I also dislike the white header. It is not handled in a purposeful manner so it looks a little unfinished. Perhaps a white-on-white texture would help there with adding the element of color.

The bottom line is that the intent of Unique CSS is great. The web site contains beautiful web design examples and some good information. The design, however, interferes with the enjoyment of the contents.  

Check out Unique CSS here:
http://uniquecss.com/home

Cool Home Pages:
Interestingly, this website has an awful home page. The predominant colors are blue, orange, and white, and the overall design looks something like the old Reverse Phonebook website. Seriously. My point is that this design is generic in a way that screams basic template instead of sophisticated minimalism. Amazingly, there is a design academy section on Cool Home Pages that discusses the use of minimal color palettes. It reads:

"Websites like www.Apple.com, www.EddieBauer.com have used limited color space and yet look sharp, even Cool Home Pages mainly uses 2 colors, Orange and Blue."

While I agree with the sentiment, I think holding up this page as an example of appropriate color use is egregious. It is simply unsophisticated and, quite frankly, takes away from the contents of the site.

The recommended websites are pretty good, depending on the section. Clicking on "very clean" yields nice choices, as does the "low-bandwith" category. Even so, I have seen more questionable choices here than on other similar web sites. For instance, the "fun" category has some nice choices, but also a lot of garbage. I have seen better interactive and quirky sites featured elsewhere. Sure, this somewhat subjective, but really good sites tend to adhere to some basic design principles that quite a few of these designs lack. There are some duplicate postings in the same categories as well, which occasionally wind up next to one another (see screen bites in "fun").

This site does feature some good content, but not really the best stuff out there. It is worth a look, but ultimately other similar sites are just better, easier to look at resources.

Checkout Cool Home Pages here:
http://www.coolhomepages.com/   

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!