Images on the Web

I'm having a bit of a hard time with this week's assignment: find examples of good and bad websites in terms of how they integrate graphics into the website. I'm still stuck on my first two shared websites (tastespotting and irish2000) as fairly archetypal examples of good and bad design--and that holds true for what they have (not) done with integrating visual images. But instead of beating the dead horse by describing these websites, I thought I'd take you on a look through three of the major recipe clearinghouse websites: Food Network, Epicurious, and Food.com (formerly Recipezaar), and briefly discuss the highs, and lows, of each. For each site, I searched for "burger," and selected the first search result to analyze the page.

Of the three, Food.com was the least effective visually for me.

First, the layout is cluttered--the header bar is fairly clean under the advertisement, but as soon as you get to the recipe itself, it's written in the same font as the navigation suggestions to the left and the advertisements, information, and suggestions on the right. For this recipe, there is not image of the finished product, or any of the steps along the way, although other recipes on the site do have more directions. Overall, when I was looking at this website, I did not feel that the visuals--the fonts and images--were helping me find the important information.

I'm torn in ranking my two other websites, but I think Epicurious comes in a close second for me.

Epicurious was significantly cleaner than food.com: first, the layout is a bit simpler: we still have a lot of advertisements and some navigation integrated in the header bar, but when you get down to the "meat" of the page, the recipe takes up 2/3 of the horizontal space, with advertisements and suggested links occupying the right third. Epicurious also uses more variety in font size and emphasis: the title of the burger is larger than anything on the page, making it clear what the important information is. Subheadings, such as ingredients, are larger than the narrative description or their items, making it easy to scan for the section that you need. They also include an image for every recipe (as far as I could tell), and use icons like the blue ribbon to indicate popular recipes. You can also easily tab to user reviews, more photographs, and other information, making the site more interactive and communal.

For me, Food Network just barely beats Epicurious--but just barely.

Food Network has many of the same layout features as Epicurious: the name of the recipe is the largest font on the page, and headings and subheadings are larger than their contents. Each recipe (that I found) has an image of the recipe, and when it's contributed by a Food Network Chef, shows an image of the chef, as well as the title of the show and episode where the recipe was featured. Each recipe also shows a ranking, from 0-5 stars, based on site averages in the header bar. As with Epicurious, the recipe takes about 2/3 of the space, and ancillary content is in the right third. Unlike Epicurious, however, similar recipes are placed on the left under the image--which I find helpful because those are the links I'm most likely to click--and having them isolated next to the recipe helps me find them. What most sways the image use battle for Food Network is the header bar--although there is still an advertisement, I find their header much cleaner and easier to use than the one on Epicurious. It's not a perfect design, but I find the visual layout slightly more appealing.

So, there you go--three quick website reviews on recipe sites. I'll fully admit to using each for different reasons, regardless of their design properties--but in terms of visual layout and ease, Food Network is my favorite.

Here are the specific websites I looked at if you want to see:

Food.com: http://www.food.com/recipe/kevin-garnett-burger-405025

Epicurious: http://www.epicurious.com/recipes/food/reviews/Open-Face-Crab-Burgers-with-Red-Pepper-Dressing-352591

Food Network: http://www.foodnetwork.com/recipes/bobby-flay/tuna-burgers-with-pineapple-mustard-glaze-and-green-chile-pickle-relish-recipe/index.html

What do you think?