navigation Home Portfolio Services Rates Contact

Archive for ‘Visual Design’

August 27th, 2010

Bakery Web Sites

What users requested:
- Hours
- Directions to Location
- Contact Info (phone, address)
- Menu with lots of pictures, prices & diet info
- Catering / Special Events
- Info on their specialties (what makes the bakery different)
- Ordering / Delivery Options

Amongst the web users I polled, the two most important items that came up were: Location/Hours and a menu with as many pictures as possible. Since a sense of smell is not possible online, delicious looking photos are essential. When deciding what bakery to go to, people want to see the sorts of things available. In busy modern times, people can’t spend hours traipsing from one local bakery to another. They want to be able to quickly glance over the web site and decide if it is worth the effort of driving there. Once they do decide, clear obvious directions are as essential as listing a phone number.

Tartine Bakery & Cafe

The design of the site is very elegant– with interesting photos right up front, obvious navigation, and the hours/contact info easy to spot. It might benefit from a subtle slow slideshow, rather than static main image. The “Bread” link has an interesting variety of photos– from the oven to your plate. The menu does not hold up so well. It offers simply some downloadable word documents. While I understand this is easier from a web updating point of view (the bakery can quickly tweak some word documents and toss them up there) it will make the average user simply leave. Most people would take one look at that and say, “oh well on to the next bakery site” and click off. Many web users, particularly middle aged and above, do not understand things like downloading word files. If I only had a nickel for every time I’ve been asked to “find” a download. This only works for very web savvy users, and they tend to sheer away from un-encripted files anyway.

If a user has sat through the slow download process, managed to find the downloaded file and liked what they saw (which is highly unlikely), there is no “Location” or “Directions” page. The contact page has the address, and a link to an offsite map, which is not very helpful.

This is an example of a beautiful site that completely fails in everything it is attempting to accomplish. IE:
1. Get people interested in going to the bakery
2. Showing them how to get to the bakery

Billy’s Bakery

While light gold and yellow is usually a cheerful sort of colour family, it can be overused. The colour scheme of this site is very 1920s– and while that may interest Art Deco historians, it doesn’t work on a web site. The vivid light green next to the bright yellow tends to overwhelm the eye. If the green were a bit darker, it would help with the site. Do not use a set of hues without having some contrast. A good test for this is to open up Photoshop’s colour selection palette. If you can move the pointer up and down the right-hand narrow column without having to click around in the large open area (for colour contrast adjustment) — that is a bad thing. Always make sure one of the main colours on the site is a good contrast– particularly the main background field.

The site is also rather busy with multiple areas, shapes and stroke elements everywhere. It is fortunate that there is an excellent hierarchy in place (Title, Navigation, Content) or the site would not work at all.

That being said, the actual content itself is refreshingly good. Right on the homepage there is a photo of the bakery and some of its products, as well as delivery information. The location information is right up in the navigation (finally!) and even includes how to take public transit to the bakery locations. This was clearly put together by a webmaster who thought through what users really need to know and put it online.

The menu is filled with full colour photo— although they have been sharpened a trifle too much. Food photography does well if ever so slightly blurred, think of it like the old Hollywood film stars— a tiny bit of blurring made them more attractive on screen. The menu items also use javascript popups, which most people find the height of irritation. There are many other options for displaying the menu.

In general, this site has excellent content— worth studying if creating a bakery site, but the design and execution needs work.

Bouchon Bakery

Apparently the lime green look is rather prevalent in bakery sites— although in this case it is well balanced with a rich dark chocolate colour. Notice also that this site uses identical cutout shapes, so it has less of a feeling of randomness and allows the eye to concentrate. They placed an especially large hero shot of their baked goods right on the homepage— the idea is to get a user’s mouth to start watering the moment the arrive on the site, and Bouchon manages to capture that. This is carried on into their menu area. Notice the softer look of the food photography on this web site?

The menu is excellent— it has plenty of very well photographed stills of their products, with obvious titles. The only thing that is missing is the prices. I know that may seem banal, but honestly that is a major consideration for people these days. They need to know at least a general price, even if it has *subject to change underneath it. People hate wasting time, and if they have to phone a bakery to get prices, it is very irritating. It also makes them feel guilty.

The visit us page is a beautiful design, but it has almost no practical use. It isn’t enough to have lovely photos of the location and talk about how it is near bistros and in the ambience of the wine country. People want to know how to actually get there.

In general, baking sites have the idea that excellent food photography is a must, but often fall short on the mission of the web site. Before getting excited and drawing up a wireframe for a site, or playing in Photoshop, write out a purpose statement. I don’t mean a wishy-washy sort of piece— something that tells the exact purpose of the site. Don’t ever lose track of that vision, because even the best design won’t make up for ignoring it.

July 20th, 2010

Political News Sites

Politico

One of the most important aspects of a web site is what people first see on the initial page. In this case, it is primarily advertisement areas with some disturbing balding heads. While the ad areas are better designed than most I have seen, it is important to note that people come to a site for its content. Forcing people to scroll down significantly to view the news is not a good idea.

The navigation on the site is very well done— it is bright and obvious with a large font that contrasts well, and the names of sections are clear.

Important interactive elements, such as the poll, are all shoved down to the very bottom of the page. Most first-time visitors will not bother to scroll that far.

Elements that were well done include the news headlines and excerpts. They are a good readable size, with the authors visible and enough excerpt to entice without cluttering. The headlines were fairly well written— short and effective. There is a decent sense of white space— on content heavy sites it has to be used sparingly, but should not be tossed out altogether. The accent colours were used well— just enough to emphasize important points without becoming overwhelming or vulgar.

Daily Political

This shows how a strong contrasting background helps a heavy content site pop for its readers. When the background is also a light colour, it all blends together confusing the eye. The rich blue helps this site appear as a concise block and draws the eye right to the text.

The same cannot be said of the navigation— it blends right into the background and looks identical to the main font of the web site. Look over the Politico navigation and see how it comes right to the forefront, unlike this site.

Daily Political does have a better use of the initial page— most important information is right there, and the photos aren’t cut off at strange angles. It could learn something from Politico in its use of spot colour for the news headlines.

While thumbnail spot photos are interesting, they are not the most effective means of visual communication. They are too small to make an impact, and a large number of them seems like a patchwork quilt. It is better to use larger and fewer images.

CA Political News

This site has a more interesting visual masthead than most news web sites, which quickly drew my eye. The navigation was obvious and well structured, although a trifle small.

Notice that the text is all jammed up against the side— never do this. It is far better to have a narrow, newspaper style column than text running up against its boundaries. Notice also that the hierarchy is confused— it is not clear where to look first or what is most important. When having to read long articles, it is crucial to have a relaxing environment in which to read them.

The Washington Times

Notice that while many items are “below the fold” on the homepage, the site keeps two columns filled with the most relevant information right up front. “Happening Now” is in the prime location— top left. The list of latest editorials is also in an obvious location.

On this particular site, instead of a slideshow of images, the headline story has its own hero shot and featured homepage slot. This is an interesting idea— although I would recommend less height on the hero so that people do not have to scroll in order to view the headline.

The top navigation, while a readable size, has insufficient contrast. The grey under “News” is too close to the grey of the link colour. Main navigation needs to be of the sort that a quick glance tells the visitor all they need to know.

The Huffington Post

By site stats, this is probably one of the most popular political news sites online. Notice that its navigation is clean and makes quick sense, with the main headline blatantly huge. Its columns are well organized with a variety of image sizes, although the subheads could stand being slightly larger. They repeat the navigation at the bottom of the page, which is helpful after having scrolled past all the news stories. The site has a strong connection with social media and duplicates references to it on each part of the page.

Salon.Com

This is a good example of how a strong masthead can help even a bit of a mess down below appear to hang together. The site is well anchored in the bold red and black of the top navigation area, which is a similar method to having a dark overall background.

I have noticed many news sites attempt to replicate a newspaper look. This makes some logical sense, but there are many better ways to use online features. Imagine this page with coloured headlines— it would be so much easier to do a quick scan of the main news items and choose one to click on.

If you go to the bottom of their homepage, they have a very well designed “Other News” area with tasteful columns and logos. This is an excellent look to use— very elegant and airy.

Talking Points Memo

So far this is one of the best sites available for hierarchy. Your eye goes straight from the logo to the main headline, taking a quick pause on the ad banners. Subtitles are still obvious, but not vying with the headline, and subtle accent colour is used where necessary. Links are obvious and the photos quite attractive.

I particularly liked their “Follow Us” on the subpages:

Large and clear with the main three quick and easy to access. While their homepage could still use some improvement, I believe their individual article pages were the best I’ve seen on a political site, other than their lack of commenting ability.

AlterNet

I liked the idea of a coloured bar breaking into the background to display the navigation— they also have a very large font size for the nav as well, which is admirable.

Their use of a horizontal display of news items with thumbnail images is excellent. It is able to give several news stories prime real estate with no scrolling and without having to go through a slide show. The various columns are different enough that they read as clearly unique areas, rather than a mass of tangled information. It begins to lose that sense the lower down the page it goes.

The bottom area is particularly well put together with the various categories spelled out. It is an intriguing idea to use different colours in areas to obviously show where one is on the site. I’ve used it a few times, and in a news arena it might be quite effective. Used poorly, multiple colours can also entirely sink a web site, particularly if all used on the homepage.

Tech Learned:
- Always have commenting available, this is universal and put to use
- Include Facebook & Twitter repost ability on news posts

Design Learned:
- Be careful what is visible ‘above the fold’ on a web site
- Reduce scrolling to find interactive elements
- Use accent colours carefully
- Always keep some white space, even on text heavy sites
- Newspapers aren’t always right– colours are allowed!