Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
January 22, 2021
arrowPress Releases







If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 

Icon design rules you should know

by Iuliana U on 03/10/20 10:36:00 am

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

A picture is worth a thousand words. A well-designed one is worth even more. We see them on road signs, in restaurants, airports and apps. They can save time, lives and also ruin them and create confusion.

Icons are interpreted faster than text, are easier to spot, take less space and require less translation efforts. A wall of text blurs in to a single mass because of shape similarity, but icons are shape-diverse and look good even in groups.

So how can we design the most effective icons that look great and convey their message?

 

1.     Avoid similar shapes for different icons

Icons with similar shapes look like they belong together/do similar things. Be aware of that when you create another square shaped icon for your UI. You’re not taking full advantage of the benefits icon shapes can give.

An icon should be easy to distinguish from all others by it’s shape alone. Make the shape too similar and you increase confusion and the effort it takes to understand the message.

 

 

2.     Minimize icon complexity

The more elements an icon has, the less contrast there is, the more time and effort it requires to be identified. It looks like a jumbled mix of shapes from a glance.

Sometimes you might want to make your icon unique or add some flare to it. Make sure you’re not doing it at the expense of readability and clarity – keep it simple and clean.

 

 

3.     Keep a consistent visual style

When UI elements break the style rules they establish, the experience feels disjointed and unprofessional. Even small changes in styles can make icons look like they do not belong in the same app or are somehow different from the rest of the UI.

Contrast in visual style draws attention to itself. You don’t want to do that accidentally. Make sure to design icons side-by-side and check frequently if all your elements look like they belong together on one screen.

 

 

4.     Don’t rely on text

This makes the icon redundant, unclear at small sizes and locks it to a single language. Text can also look messy and reduce icon clarity.

This mistake is commonly seen in larger icons and app logos. If you must include text, then do it as a label underneath the icon.

 

 

5.      Don’t reinvent the wheel

Many millions of hours were spent creating and testing already established icons. Even if they can be improved, chances are people know what they mean due to encountering them so much.

Using the same icon shapes can feel tired and uncreative. Don’t feel like you need to reinvent the wheel to impress. Usability is key and design should serve to improve it, not stand in its way.

 

 

6.     Make the message consistent

 

Nothing stops work and causes anger and frustration as much as an improperly used icon or metaphor. This might surprise you, but there are apps out there that use the same icon for different functions.

It’s easy to make this mistake by mixing up inactive and active icons, without giving the user any way to distinguish between the two. Make sure you use the same rules and icons across all your pages.

 

 

7.     Design for small size

An icon that looks beautiful when you design it, looses all it’s charm when it has to fit in to a small space. All those carefully designed details turn it in to a jumbled mess.

It’s tempting to flex your creative skills and add details to make your icon stand out and look unique. Remember, icons are not the star of the show, they are there to be useful first and look beautiful second.

 

 

8.     Don’t rely on color for effect

 

Colorblind people will thank you for it. While color is a great addition to an icon’s message, shape must still be the first thing that people notice.

Often times color can mask a design mistake you’ve made. If you’re compensating an ineffective icon with color, consider revising the icon.


Related Jobs

Gunfire Games
Gunfire Games — Austin, Texas, United States
[01.22.21]

Senior Boss Designer
innogames
innogames — Hamburg, Germany
[01.22.21]

Senior Game Designer - Forge of Empires
Deep Silver Volition
Deep Silver Volition — Champaign, Illinois, United States
[01.21.21]

Senior Technical Designer
innogames
innogames — Hamburg, Germany
[01.21.21]

Game Designer - New Mobile Game





Loading Comments

loader image