New role, same company: Career progression at Delivery ...
16.05.22 by Louise Byrnes
On the streets, in our phones, in airports and even in bathrooms, when you play your favorite song or when you skip the one you don’t like, we can’t escape from icons so let’s make them our friends!
A brand is not just a logo
When we have to design a brand from scratch or work on a rebranding, there are several elements that we need to keep in mind.
We start by defining the colour palette, typography (either customized, free or paid) and designing all of the brand assets (brand devices, patterns, iconography system, illustration system, etc). All these elements together make the brand come to live, and with them we can start creating different designs for our brand channels.
A well-designed & strong brand identity is not only beautiful, but consistent across every touchpoint within the system.
Connecting iconography with branding
Iconography is an important part of every branding and should follow the same aesthetics and be an extension of the brand. We want our iconography system to have its own flavor, to be unique and represent the brand personality in a cohesive way.
So how do we start? By considering specific parameters: the thickness of the lines, the endings, the details, the curvatures, the angles, the complexity, etc.
Solid? Outline? Flat? Perspective?
Let’s go! The style of the icon should be a reflection of the brand. It doesn’t matter if they are in stroke, solid or use a perspective, the brand values have to be reflected in the iconography. Is your brand playful? Joyful? Luxurious? Colorful? or perhaps serious? Each of these attributes that define brand personality can also be applied to the icons.
Building an icon
The pixel grid will help us to create our icon system in a correct way and make them look sharp and defined. Why? It helps all elements to be aligned, have the same size, stroke and margins. No matter if they are squared, vertical, landscape or circular.
The size of the icons is generally builded in a grid multiples of 4. This means that if we have our icons in a 48×48 px grid, when we make them smaller it will be 24x24px or 64x64px when we make them bigger.
It is always recomendable to start with the smallest icons. We start by creating them in outline or solid, adding details to give them personality and make them understandable. If these work, then we can start creating the larger sizes, adding more details as long as it keeps the same consistency.
4 basic concepts to keep in mind
Icons should communicate a concept quickly, either through an existing metaphor or more intuitive. Many of the icons we use are standardized, we are familiar with them but if this is not the case, then we can invent the wheel.
Keep in mind the details and the spaces we leave between them so that the icon has correct readability in the size we are going to use it. This helps to make the icons less busy and easy to read.
For our icons to look balanced we have to align the elements optically, as it is done in typographies. The grid helps us but we can also use our eyes to achieve a correct balance.
Harmony in an icon family is important, this is achieved by building clear stylistic rules and principles. Maintain consistency in stroke thickness, size, shape or for fills icons, take care of the weight.
What is the purpose of iconography?
An icon’s primary goal is to communicate a concept quickly. When we create an icon, we assign a meaning to help users understand actions while interacting with the brand in a simple way.
Most successful icons are not only easy to understand for one group of people but are universal across cultures, ages, and backgrounds. Consider your audience and use metaphors that will resonate with them.
We assign the meaning when we create an icon, helping users to understand actions while interacting with the brand. For example: the mail icon helps us understand that I will receive my messages there. If they do not accomplish this objective, the icons are not working as expected.
If we understand each of the concepts explained here (clarity, simplicity, personality, readability & consistency) and apply them, we will successfully create a coherent iconography system.