Tags Archives Category Books

Case Study Illustration UI/UX

Case Study: HUAWEI. Icon Design for EMUI 10

The article shows the creative process of icon design for HUAWEI EMUI 10: check the stages of icon creation from sketches and concepts to polished icon system.

There is no chance to overestimate the impact that icons make for 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 it 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.

HUAWEI_EMUI_icons_tubik design case study

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.

HUAWEI_EMUI 10_icons_case study tubik

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.

HUAWEI_EMUI_icons_tubik design structure

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.

HUAWEI_EMUI_icons_tubik design sketches

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.

HUAWEI_EMUI_icons_tubik design process

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.

HUAWEI_EMUI_icons_camera icon

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.

HUAWEI_EMUI_icons case study tubik

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.

HUAWEI_EMUI_icons_tubik phone icon

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.

HUAWEI_EMUI_icons_tubik graphic design

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.

HUAWEI_EMUI_icons_tubik design case

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.

HUAWEI_EMUI_icons_tubik studio

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of UX design projects done by Tubik.

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Inspora. Brand and UI Design for Virtual Stylist

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping


Welcome to check designs by Tubik on Dribbble and Behance