With fast food apps like JustEat, Dominos, and Hungry House changing the way we eat, food apps – and therefore their icons – are in greater demand than ever before. These sorts of apps need a concise, effective way of representing all the different food products available for order.
Obviously, the usual rules of good icon design still apply: any good icon needs to be usable, compact, and quickly recognisable. However, there’s an additional dimension with food app icons that designers need to grapple with – namely, the challenge of making an icon feel as delicious as it is intuitive.
1. Bring the ingredients to the front
Take a leaf out of the book of actual food artists, who, as Jess Zimmerman points out, “have to bring all the ingredients to the front” of advertisements in order to show what the product contains. That’s why, as the video below demonstrates, McDonalds is able to make pictures of its food often look much better than a “restaurant”-bought Big Mac otherwise would.
The same principle applies if you’re designing an icon to resemble food. Take the example of Julian Burford’s square food app icons. He applies the rules of a uniform, “almost flat” style to the icon set to establish uniformity, but brings the ingredients to the front of the image as described. That’s how we’re quickly able to recognise the burger icon as a tasty burger, or the Dominos’ app icon as something that provides tasty pizza. Bring the snacks to the foreground, and you’re halfway to making an app icon almost edible. Keep colours simple
2. Keep colours simple
Food can be very colourful. To return to the pizza example, it could be classified as red, yellow, beige, or even green and black depending on the toppings. However, you can’t get bogged down in the complexities of food colour schemes; you have to reduce the colour scheme to its essence.
Think about which colours people associate with any given food. A burger looks mostly beige, so that should dominate, but without the brown filling (at the very least), it is unrecognisable as a burger. No matter what icon you’re designing, colours should be used to build recognisability – otherwise, the app icon is ineffective. An easy way of checking is squinting – does your burger still look like a burger when you can’t see the details?
3. Don’t be scared to break the rules
Just because a food is circular doesn’t mean your icon needs to be. You are not in a Ramsay kitchen, and you will not be scalded for doing otherwise. As the Burford icons demonstrate, it is entirely possible to make an icon any shape you desire and still enable it to retain its essence. Take the example of the Oreo icon below:
Oreos are famous for their circular shape. This is a square Oreo – but it is undeniably still an Oreo, with all of its delicious Oreo-ness. Designing an app icon based on a real world object is about representing the function and meaning of that object, rather than the aesthetics of the object itself. While these are obviously important, your icon will become unforgettable if it successfully manages to blend a delicious aesthetic with rule-breaking. Easier said than done – but buying lots of Oreos, pizzas, and burgers as inspirational design models will certainly help!
Get the perfect App icon
Want your App to look great and increase sales?
A professionally designed app icon will tell your story at a glance, leading to more engagement in the App Store and more conversions.
Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…