Case Study: HUAWEI. Icon Design for EMUI 10

There is no chance to overestimate the impact that icons make for the usability and desirability of any app, and even more – operating system. Small but influential, they become key visual hooks helping users to navigate quickly and intuitively. For designers, icons always present a challenge as what looks simple is the hardest job to do. To be effective, icons require a perfect balance of originality and recognizability, tradition and innovation. That’s what our new case study is about: today we are going to unveil the creative process on icon design Tubik did for HUAWEI.

The team for the project was Sergii Valiukh, Arthur Avakyan, and Polina Taran. Welcome to check the design stages, from sketching and searching the style to polished icons system.

Project

Design of basic icons for HUAWEI EMUI 10 user interface

Client

In summer 2019, we’ve got an offer from HUAWEI to collaborate. The request was to take a fresh look at the design of basic icons for the EMUI custom Android user interface, for flagship devices of the brand which were going to appear in the new OS version. Our task was to create 54 icons that would meet the trends, would be loved by current fans and users of the brand, and would attract new users.

The outcome of this Icons project has been commercially deployed in HUAWEI flagship smartphones. The first flagship smartphone using these icons is Mate 30, and then, P40.

Design Process

Basic icons of the core native apps are among the interactive elements that are always at users’ sight, sometimes dozens of times a day, so they should bring not only functionality but also aesthetic satisfaction. What’s more, they have to present a consistent design approach harmonically integrated into the general style of the EMUI design system.

We offered the grid that would suit all the needed sizes and variants of roundness as well as would help to keep the same dimensions for all the icons. So, any shape and filling of the icons could look belonging to one design system.

Aiming at providing a fresh perspective, we started from traditional sketching in search of new ideas and ways to shape them. The biggest challenge was to give a sort of a new face to the symbols that are already well-known and recognized by millions of users around the world.

As it isn’t possible to reinvent the basic icons of a phone receiver or a message, we hold a course for finding new forms and original color solutions.

The simpler is the thing, the harder it is to make it. We’ve tried hundreds of variants, from the super non-standard where the shape of the icons was formed from overlaying elements which laid freely without a clear square or round frame to more recognizable graphic solutions. Colors also were the aspect of our creative experiments: we tried bright ultra-violet, maroon, and lurid green shades.

Of course, such kind of work has a more conceptual nature, but we know well that great variability is the productive way of finding the seed of ideas ready for life.

One of the interesting stories in the design process was working on a photo icon. As well as for all the icons, we were in search of numerous shapes and styles, but one detail appeared to be constant: the red dot in the top right corner. Its goal was to inform users that HUAWEI uses the top-quality lenses from Leica, whose logo features a vintage typographic part on the red circle.

The stylistic concept below is based on the opposition of the circle shape to the square icon to reach the higher contrast and recognizability of the images on the smartphone screen.

At the next step, we developed a variant of elegant minimalistic icons based on geometric primitives. This stylistic concept featured the icons of free shapes with the priority on circles. For example, the weather icon is made of a cloud and sun and isn’t fitted into a circle or square. The icon of a wallet is rectangular with a card sticking out on top. However, despite the relatively free shapes, all the icons are subordinate to one general grid and have equal weight.

Then we got back to the idea of gradients. Without them, the flat icons seemed to be a bit more childish and didn’t give an upper-class feeling which was one of the key criteria for the new style of icons.

The final version brought us to the decision to keep the square shape for all icons as well as reduce the radius of the rounded parts. The gradients were also kept in the harmonic combination with minimalism and basic geometry as core priorities.

This design case presents a good demonstration of how much thought and effort is invested in the smallest elements of UI such as icons to make the layout both beautiful and user-friendly. The devil is in details, so any tiny pixel, curve, or gradient may have a huge impact on general perception and stylistic of the interface as well as its emotional appeal.