Designing an icon set — considerations, process, and implementation
Hick’s law states that decision-making time is lesser with minimal visual clutter. Elements like icons also add to the visual clutter. And, visually appealing interfaces are perceived as better, faster, easier, and users are more tolerant of errors.
Myntra is a heavily visual platform due to the imagery used. This makes the app look very colorful in itself. To balance this out the header icons needed to be cleaned. New icons were designed with a minimal look and feel and at the same time were rich in content and information.
Solid Icons To Line Icons
The old icons were complex and heavy with details that were missed in smaller screen sizes. They were a solid and opaque grey color. The weight of these icons was higher visually when compared to line icons. This was the main decision-making factor to rule out solid icons. Also, we were using line icons for other communications inside the app so uniformity also played a key role. The new simple shapes made it easier for us to put in place the icons that responded to any range of screen sizes.
Concept
Header icons were designed to be simple and modern. Each icon was reduced to its minimal form, expressing essential characteristics. Also, the icons were designed symmetrically with geometric forms to simplify them further and make the counter spaces more prominent.
The terminals were rounded off to give a smooth visual tone. Consistency was obtained by maintaining the thickness of the line and counter spaces. Stress was used to make them more legible in smaller screens. The principles used in type design were also used to design the icons here.
Process
The size specification for each icon was different to match with the font weight. We matched the icons with the weight of the type with different thickness at different sizes. For example — 24dp size uses a 5px line thickness to match the thickness of semibold. And a 64dp size uses a 4px line thickness to uniformly gel with both Semibold and Book variants.
The icons were designed in a construction rectangle to keep the shape uniformity across all icons. For e.g. the bell icon is narrower than the bag icon but have visually the same weight. Making them look uniform required tweaking the shape itself and the counter spaces in the icons.
Implementation
At the start, we had mapped out all the icons in our Myntra app and planned to design every icon around its context. When the design was finished it was mocked on a mobile screen to check for consistency. All the screens were used to check the icons. The homepage had a different set of icons than the list view page.
Product description page had a different construct. Icons are placed on the product image that can have different backgrounds — from light grey to dark grey. The solution was having a translucent white circle behind the icons. This helped in avoiding the use of different colored icons for each state. These then merged into the page on a scroll with a white header background.
There were many iterations at this step that required tweaking. Some of the icons were discarded and redesigned to maintain the design language and uniformity. The bag icon was tweaked many times as the height wasn’t matching with other icons. The overshooting principle helped here to visually align it with others.
Overshooting, in visual arts, is the optical correction of forms in relation to other graphic elements, more specifically to their construction rectangle, in order to achieve perceptual balance — The Art of Eyeballing — Part III: Overshooting
We hope you like it!
cheers!
