Food-Based Web Design Tips to Make Visitors Hungry
It’s the same routine every date night: “where are we heading for dinner?” To the web we go, looking for restaurants around us that whet our appetites. And the places we always seem to hit after this dinner search are the locations with websites that just make us hungry.
Certain techniques, from color to photos to imagery, are common among the best food-based websites. These sites employ a specific strategy designed to make you hungry. Today we’ll look at how photography, colors, shapes, vivid copy and simple design are used to make mouths of website visitors water.
It all starts with a great photo. That can be harder than you might think. Taking pictures of food in a way that makes it look appetizing can be difficult. And you don’t want to use a food photo unless it is perfect. (There’s nothing less appetizing than a photo of a soggy cheeseburger.)
Rather than trying to showcase every item on the menu, pick one or two superstar items to photograph. Choose food items that fall in line with some of the basic principles of design, such as those that have color and texture contrast, interesting shapes and consider layering of food items that go together.
Be aware of lighting. It can make or break the photography. Using warm lighting techniques is essential because they are more engaging and will encourage hunger. Avoid photographing food in fluorescent light; the result can be cold and quite unappetizing. Think of it this way, most people think of food as a hot item (although some things are served cold), photos that show this will be more effective.
Consider different angles. While food items should be clearly identifiable in images, a straight ahead image can be boring. Antibo Restaurant and Florentina (above) do a great job of photographing items from interesting perspectives.
Think of imagery that is associated with specific food items. Coffee does not always photograph especially well. But an interesting mug will hammer home the point. Not all food imagery is of the edible item itself.
Finally – and most importantly – make sure food looks yummy. Set a scene with props. Stick to foods that have a distinct look and are identifiable. Avoid things that are runny, too creamy or overly bland in color.
Color is often one of the most debated topics in food-based design. Does red really make you hungry while blue curbs your appetite? While some studies tend to support both ideas, use a more common sense approach: use colors that are natural to eating.
Reds, greens and yellows are common colors for fruits and vegetables. Reds and browns are most common for meats. Develop a color palette that matches the tone of what you plan to highlight.
Opt for colors that are more vivid and lively. Your site should be designed to encourage action; you want people to leave their computers, tablets and phones and come to your establishment. Muted tones may have a nice look but won’t have the same effect as something that “looks alive.”
Look at it this way, I love a nice breakfast with eggs. But at a recent themed meal, a friend based our dining choices on Dr. Seuss’s “Green Eggs and Ham.” Yes, the food was dyed green. And while it did not actually taste different, it felt different. Because the food was not the proper color, it was completely unappetizing.
The lesson here is to use colors that are appropriate for the type of food they will surround. Or stick to a more neutral palette.
Shape and placement can be an important consideration when planning for a food-based website.
Consider the way items such as dishware will play into the photography and look at ways to create symmetry or contrast with shapes. Round shapes work well with shapeless items such as spices or pasta and rectangular shapes can pair nicely with more distinctly shaped items such as sushi or a cheeseburger.
Then look at navigation and call-to-action elements. These shapes are equally important. If your site has great photography, opt for simple shapes for user interface elements. For sites with minimal imagery, add a little more pizazz to these items.
Shapes can also be used to establish the flow of the site itself. Take Hopgoods Foodliner, for example. Shapes encourage navigation and flow of the site through menus and a photo gallery.
While images and color can really sell, great copy is equally important.
One of the oft-repeated rules of writers is “show, don’t tell.” When it comes to food show website visitors how much they want to eat or drink something. Use highly descriptive language that induces a mouth-watering state.
In addition, use copy to showcase other reasons your food item is the best. Locally-grown, packaged and produced food options are especially trendy, as are places that emphasize green and environmentally practices.
Make it clear what food items you offer with website copy. Not every site will include a menu, but make sure your key selling points are clear. An image of a pizza is not enough; what else is offered? Why is this pizza better than all of the other options available?
Let the food do the talking.
Simple can be better. Don’t over-think putting together a food-based website. A great image and a few lines of excellent copy is all you need to hook a website visitor. Be honest in what you offer and make it easy for visitors to salivate over your food selection.
Then remember the basics – tell visitors where you are located, operating hours and a general idea of price range (this can be especially important for premier or upscale establishments with rules for dress). Also note if reservations are necessary. While adding menus can be a nice touch for restaurants, they are not a necessity. When including menus, make sure pricing and item availability is accurate.
For sites that focus on food sales that are not restaurant-based, make sure visitors know where to find your product. Can they order online? Is it in stores? Make it easy for visitors to buy the item you have made them crave.
If you are in the business of selling food, the best way to make customers hungry is with great imagery. This includes photographs, vibrant and vivid color, shapes and language.
Use these tools to set a scene and then sit back and wait for the hungry masses to come rolling in.
Image Sources: The Whig, Florentina, Antibo Restaurant, Crema, Koa, Andolini’s Pizzeria, East African Bakery, Brown’s Court Bakery, Hopgoods Foodliner, Premium Draught, Balzac Brothers and Company, Fior di Latte and Molly & Me Pecans.