In his latest blog post, Hugo wrote how icons can make a difference. They play an important role in the design of our apps. We use them to make apps look better. But we also use them to create great user experiences. They create a clear context to other content and make it easier to read. They also attract attention to what is important. This makes it easy for users to quickly reach their goals.
Because of their impact, I’ll explain how we design effective icons in a 2-part blog series. In this first part, I’ll write about the three core ingredients of icon design. In the second part, I’ll give an in-depth explanation about how we create effective icons by taking you through the creation of a new icon.
The three core ingredients of effective icons
When we design icons, we always make sure the following attributes are in place: form, unity, recognizability. Always in this particular order. We start with a general form and work our way through to the more specific recognizability. We use this approach to ensure we look at a design from more than one perspective. We also see it as a good way to have some built-in quality control.
To create a stable base for an icon, we begin with combining basic geometric shapes. You can consider this a blueprint. This way we make sure we don’t step into too much detail too soon. This helps us to quickly get a general idea of what an icon should look like.
The graphical elements we use in a single icon or across a set of icons determine the unity. Good examples of such elements are rounded or square corners, fills or outlines and line weights, colors and more. We repeat these elements as much as possible to tie an icon or set of icons together and making it easier for the viewer to see them as a whole.
An icon works when the viewer is able to easily understand what is depicts. This means that an icon should show properties that the viewer commonly associates with the idea. But it’s also important that an icon can be recognized as a part of a set of icons. This is where Unity also helps.
In this post, we have looked at the basic ingredients that help us make great icons. Thinking about them in an iterative way, helps us outline what an icon should look like. In the next chapter of this 2-part series, I'll show you how we actually create them. See you soon!