Mobile StrategyProduct Design

Shelf Presence: Designing a Standout App Icon

In packaging design it’s all about shelf presence. Here's tips for standing out on the digital shelf:

When creating a mobile app, your icon is essentially the packaging for your product. In packaging design it’s all about shelf presence. The packaging not only needs to communicate the product – it needs to stand out.

There are over 3 million, unique apps on the market today. As a designer, you have a few hundred pixels to work with, and your consumer has only a few seconds of attention to spare. With so much riding on appearance, it’s not surprising that many companies struggle with designing their apps’ icon. However, understanding some basic aesthetic rules and guidelines will help you design an icon that will thrive on its digital shelf.

Strive for Simplicity

According to the Apple’s Human Interface Guidelines (HIG), icons should “embrace simplicity, provide a single point of focus, and be recognizable”. Even the simplest app icon has the potential to make a lasting impression, and crafting one starts with the shape.

Create a Unique Shape

Creator of The Simpsons, Matt Groening, believes characters are made more memorable if they have a unique silhouette.

1 silhouette

He first noticed this phenomenon with Mickey Mouse. The unique ears were distinguishable, even over a mile away. While Groening’s distinctive silhouette theory refers more generally to character design, it can certainly be applied to app icons as well.

For example, Which icons first catch your eye in the screenshot below?

2 homescreen

For me, these are some that stand out:

3 basicShape

These shapes also hold up at smaller sizes (i.e. notifications).

4 basicshapes SMALL

Also, it’s important to consider the contrast between shape and the background. Higher contrast equals stronger impact. The leading authority on web accessibility, WCAG (section 1.4.3), states 3:1 is the minimum contrast ratio for text and background, and can be used as an industry guide for icon legibility.

5 contrast

Style and color are a window to your brand

After figuring out the shape, consider the colors and styling. An icon’s exterior style should feel like it matches the content inside of the app, making this a great opportunity to build your brand.

For example, color and style coordination ensure that Google and Apple’s app icons are identifiable and cohesive.

Google

6 google

Apple

7 apple

If all the elements within your app (icons, boxes, buttons, etc.) have rounded corners, make sure your icon also has rounded corners. While elements within the app should be clean and concise, you have some more wiggle room with the icon to add more flair. For instance, if you’ve never used a drop shadow or gradient inside the app, that doesn’t necessarily exclude you from adding one to the icon. If the effect compliments the design guidelines you have set forth, give it a try.

Below, is a hypothetical app icon and several style possibilities. When creating your icon, feel free to mix and match, or do something entirely different. This list is not exhaustive.

8 organic 9 corners 10 minimal 11 abstract

Text is fine – as long as it’s short. Try to keep the character count between 1 and 4, and remember to keep that outside shape unique (ie not a box).

12 line 13 styling

With gradients, shadows, textures, other embellishments be careful not to go overboard unless there’s a good reason.*

Your icon’s color is also reflective of your style and brand, and can help the icon’s digital appeal. If using existing brand colors, don’t be afraid to bump up the saturation and brightness a bit, or add a subtle gradient. Using some restraint, your icon can still feel branded, and also be on point with a digital medium.

Inspiration is everywhere

Take the time to find inspiration. Not only will it make it easier to create, but you’ll truly make a better icon. While everyone finds inspiration in different ways, here are some techniques I use:

  1. Make a word cloud using the themes in your app or product. Write down whatever comes to mind. I’ll use these words to search for ideas, and in my sketching phase.

  2. Look through the app stores at other app icons. What are competitive apps doing? What are competitive apps not doing? What are non-related apps doing? What are other areas of design doing? If everyone is using shades of blue, and you use orange then which app icon will be noticed more? 14 color

  3. Create a moodboard. Moodboards are a collection of images, colors, and elements that you can reference throughout the design process. I use Pinterest, but use whatever software that works for you.

Inspiration can come from anywhere. If you see an awesome sculpture and want to use that as a springboard, do it. However, remember to avoid copying exactly what someone else did. Take the parts you liked and use those aspects to inspire your icon.

The pen is mightier than the cursor

After you’ve picked out some words and the creative juice is flowing, it’s time to sketch. Don’t worry about clean lines or making things perfect; just get ideas out. More often than not, your first ideas/sketches will be unoriginal.

Let those sketches sit for a day or two, pick a few ideas, and start turning them into vector images. Illustrator can be great tool, but there are other free vector programs that offer similar services. Make sure to use a grid, and start small.

Pro Tip: When tinkering with your icon, constantly duplicate your icon as you progress. That way you can always go back, compare, and copy.

Icon in action

When creating your icon, be sure to constantly check how it looks on an actual phone in different use cases (homescreen, store, notification) – basically, everywhere your app icon could be used. An easy way to do this is take a screenshot of your home screen and then superimpose your app icon onto it. Your icon will look very differently on a device than on your 27” monitor. When I’m designing an icon, I’ll mirror my screen onto a phone as I prototype.

Resources

Keep it fresh

Make sure to keep up with native UI updates. An outdated icon will also make your app appear outdated. For example, Google recently debuted adaptive icons, with which users can set what shape the icons appear as on their home screen (i.e. square or circular). Adaptive icons also have subtle animations when moved or interacted with.

15 adaptiveIcon

(Made with Adapticon)

Join our team to work with Fortune 500 companies in solving real-world product strategy, design, and technical problems.

Find Your Role
WT Blog Post

WillowTree Ranked on Deloitte's Technology Fast 500

Deloitte announced the 2019 Technology Fast 500™ today and WillowTree is honored...

Read the article