Menu Planning Website

For my course project, I'm working on creating a website that will provide a week's worth of healthy and flavorful recipes, designed for busy individuals who are not used to cooking at home. This week, I scoured the internet to find a website that might be a good model for what I'm planning to create, and found one that has some good characteristics...and also some ways that I might change and improve their design and organization for my particular implementation.

Eat At Home: Everyday Food for Busy People (http://eatathomecooks.com/) is a blog that publishes a weekly feature with pre-planned meals (6 dinners and one dessert). The current menu (http://eatathomecooks.com/2010/10/menu-grocery-list-recipes-year-2-week-8.html) features several slow cooker recipes to be prepared before work, and then several that can be completed quickly. In addition, there is a PDF shopping list, organized by type (produce, dairy), and including printable versions of each recipe. Each recipe includes clear, concise directions, and the online versions also include several images of the finished dish and/or steps along the way. While the recipes aren't always ones that I'm interested in eating, the layout and organization does make it easy to use the entire set.

What I find frustrating about this site, however, is its organization. Since the site has multiple purposes, it isn't always easy to see what recipes are there--and what the week's meals are once you get further into the week. Also, once you navigate to the individual recipe, the only way back to the weekly plan is the "back" button on the browser--there's no link between it. Finally, there is little support or illumination in the recipes themselves. While there are images, they are often only raw ingredients and finished dishes--not intermediary steps to clarify directions. In addition, there is no clear resource for understanding specific vocabulary--such as the difference between "dice" and "mince." The overall layout is cluttered with advertisements and non-helpful links, with no defining characteristics for the active parts of the page (where the recipe is). I am impressed that they've been producing weekly dinner plans for families for over 2 years now, however, there really isn't an easy way to go backwards in time to find older recipes, or any running organization for meals sorted by main ingredient, cooking time, etc. While I may borrow some of their recipes for my site, I think there's enough that needs to be changed about its organization and flow so that mine will be distinct from this environment.

podcasts!

I'll admit--I'm not a huge fan of podcasts. I've never really gotten into the serialized format as a listener, and as a creator of media, I'm a bit stumped by how best to use the format for education. As a learner, the only podcast I listen to with any regularity is Marc Finn's Irish and Celtic Music podcast (WWW.celticmusic.com). It's a great way to hear new bands and tunes, interspersed with the occasional artist interview. Each podcast is about an hour long, and includes songs and narration. It's almost always entertaining--and often informative as a survey of upand coming bands.

What music podcasts do you listen to?

Published with Blogger-droid v1.6.2

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?