navigation Home Portfolio Services Rates Contact

Posts tagged ‘colour scheme’

September 7th, 2010

Why Use Dark Text in E-Blasts

I often have to have lengthy conversations explaining why an e-mail design is different from a web site. Designers love using images and interesting backrounds in print advertisements. They catch the eye of a casual reader flipping through a magazine— they draw people’s attention away from web site content to look at a banner. Unfortunately, the same is not true of e-mail advertising.

Designers: Keep the background white or a light pastel with dark text and never use an image as a background. Here is why:

Exciting eh? Really makes you want to figure out how to turn images on in your email to view it? Hardly. One look at this and into the trash it goes. The problem is that the background was a dark image and the text is all white. This is what about 30% of people will see until they turn the images back on.

This is the email with images turned on. It is quite beautiful, but whomever designed it clearly was stuck in a “magazine ad” mindset.

I am always getting flak from designers complaining that I impede their creative process by always bringing up technical issues. Well here is one of those technical issues that I bring up. Pointing out that hundreds of potential recipients will see absolutely nothing when they receive the email with white text over an image is something designers need to keep in mind.

Remembering tech specs doesn’t impede design— it keeps designers from creating disasters like this e-blast.

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.