Iconography makes up the atomic level for digital interfaces. When it comes to icons, each designer has his/her own approach yet we all can agree that these tiny elements can drastically enhance or ruin any user interface.
We at Allurive Studios have set up few guidelines for iconography and layouts. I’ll be talking about our most generic icon design at 24 px.
Our Guidelines:
We have adopted the specific guide after a long process of evolution, trying different grids and styles.
We operate on 8 point grid system and the above grid preferences perfectly align with the former. Read this amazing article “Intro to the 8-Point Grid System by Elliot Dahl” to get the idea of the whole layout.
The 24 px format has been adopted following “Material design guidelines” and are built ensuring clarity and proper visibility at atomic sizes.
Few pointers for iconography:
1. Anti Aliasing
Your icon should have crisp edges, even consistent anti aliasing. Having an edge with differing x co-ordinates like shown below in last reference will make your icon give a blurry feel.
2. Minimising the complex shapes and Construct with geometric shapes
Human mind has a tendency to remember geometric shapes easily. A good practice to follow is to break down a complex shape into possible geometric shapes. There can be multiple approaches to building up an icon. Break down an item with geometric shapes and brainstorm how minimal can it get without loosing the essence.
Tip: Always sketch on paper beforehand.
3. Boolean Operations
There are 4 boolean operations in sketch application namely: Union, Subtract, Intersect and Difference. Study the shapes and how various boolean operations can be applied to them to get desired result.
Adobe Illustrator has more powerful tools for vector editing and gives way more flexibility.
Learn about boolean operations in sketch from here.
4. Consistency
While designing for a specific project ensure the consistency of the icons to give user a uniform feel & harmony throughout the application/website. One of the major parameters ensuring consistency is level of detail. The level of detail should be consistent throughout your icon set, elucidated below with an example.
CLICK HERE OR IMAGE ABOVE TO DOWNLOAD THE SKETCH FILE WITH ICONS
Thank you for reading.
This is my first blog on Medium and would greatly appreciate all kind of feedback or criticism.
Find me on:
dribbble.com/arashbal
instagram.com/arashbal
Allurive studios
dribbble.com/allurive
