Разбор кейса: дизайн иконок для HUAWEI EMUI 11

Невозможно переоценить влияние иконок на юзабилити и привлекательность любого приложения, а тем более операционной системы. Они выполняют роль визуальных ориентиров, которые помогают пользователям быстро и интуитивно перемещаться в интерфейсе. 

Для дизайнеров разработка иконок — сложная задача, поскольку то, что выглядит простым, реализовать сложнее всего. Чтобы иконки получились эффективными, они должны представлять собой идеальный баланс оригинальности и узнаваемости, традиций и инноваций. 

Именно об этом и пойдет речь в нашем примере: сегодня мы собираемся показать вам процесс создания иконок студией Tubik для HUAWEI.

В команду проекта входили Сергей Валюх, Артур Авакян и Полина Таран.

Проект

Дизайн основных иконок для пользовательского интерфейса HUAWEI EMUI 10.

Клиент

Летом 2019 года мы получили предложение о сотрудничестве от HUAWEI. Компания попросила нас по-новому взглянуть на дизайн основных иконок пользовательского интерфейса Android EMUI для новой версии операционной системы на флагманских устройствах бренда. Наша задача — создать 54 иконки, которые должны:

• соответствовать трендам;
• нравиться поклонникам бренда;
• привлекать новых пользователей.
  

Результат проекта был реализован во флагманских смартфонах HUAWEI. Первым устройством, где были использованы эти иконки, стал смартфон Mate30, а затем P40.

Процесс разработки

Базовые иконки основных нативных приложений — это интерактивные элементы, находящиеся на виду у пользователей (иногда десятки раз в день), которые должны:

• быть функциональными;
• являться эстетически привлекательными;
• демонстрировать единообразный подход к дизайну; 
• гармонично вписываться в общий стиль дизайн-системы EMUI.
  

1 этап

Мы предложили сетку, которая подойдет для всех необходимых размеров и типов скруглений, а также поможет сохранить одинаковые размеры всех иконок. Таким образом, иконки любых форм или цветов будут выглядеть частью единой дизайн-системы.

2 этап

Начинаем работу с создания привычных набросков, чтобы найти новые идеи и способы их реализации. Сложнее всего — придать новый облик символам, которые известны и узнаваемы миллионами пользователей по всему миру.

Поскольку невозможно заново изобрести базовые иконки телефонной трубки или сообщения, было принято решение — искать новые формы и оригинальные цветовые решения.

Чем проще идея, тем труднее ее реализовать. Мы перепробовали сотни вариантов: от самых нестандартных до более узнаваемых графических решений. Цвета также были предметом наших творческих экспериментов: мы пробовали использовать яркий ультрафиолет, бордовый и кислотный зеленый.

Описанные действия, скорее, представляют собой поиск концепции, но как известно — изучение большого числа вариантов позволяет эффективнее подбирать идеи, которые могут быть воплощены в жизнь.

3 этап

Интересным этапом дизайн-процесса стала работа над иконкой фотокамеры. Как и в случае с остальными иконками, мы перепробовали разные формы и стили. Но одна деталь оставалась неизменной: красная точка в правом верхнем углу. Таким образом, мы хотели проинформировать пользователей о том, что HUAWEI использует высококачественные линзы компании Leica, логотип которой представляет собой винтажный текст на красном круге.

Стилистическая концепция, представленная ниже, основана на противопоставлении круглой формы квадратным иконкам. Это сделано для того, чтобы добиться высокого контраста и узнаваемости изображений на экране смартфона.

‍

4 этап

На следующем этапе мы разработали элегантные минималистичные иконки на основе базовых геометрических фигур. Эта стилистическая концепция предполагает создание иконок произвольной формы (приоритет отдавался окружностям). Например, иконка погоды состоит из облака и солнца, которые не помещены в круг или квадрат. Иконка кошелька является прямоугольной с выступающей сверху картой. Тем не менее, несмотря на относительно свободные формы, все иконки были построены по единой сетке и имеют одинаковый визуальный вес.

Затем мы вернулись к идее использования градиентов. Без них плоские иконки казались слишком детскими и не выглядели утонченными и элегантными, что было одним из ключевых требований к новому стилю.

5 этап 

В финальной версии мы решили сохранить квадратную форму всех иконок, а также уменьшить радиус скругления углов. Основу дизайна составили градиенты в сочетании с минимализмом и базовой геометрией.

Данный кейс отлично демонстрирует то, сколько усилий вложено в разработку самых маленьких элементов пользовательского интерфейса — иконок, чтобы сделать его красивым и удобным в использования. Любой крошечный пиксель, кривая или градиент могут значительно повлиять на общее восприятие и стилистику интерфейса, а также на его эмоциональную привлекательность.