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.
Monday, December 20, 2010
Saturday, December 11, 2010
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.
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.
Friday, December 10, 2010
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.
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.
Thursday, December 9, 2010
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.
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.
Wednesday, December 8, 2010
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.
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.
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:
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...
Subscribe to:
Posts (Atom)