Как пережить замену иконок на большом сервисе и писать об этом статью полгода
На днях сервису Беру исполнился год, время вести себя как стартап прошло, и мы неизбежно начали заботиться даже о самых мелких деталях — в их числе и набор брендовых навигационных иконок. Я такой дизайнер, который всегда считал, что тема пиктограмм скучная, очевидная, интересная только для дотошных перфекционистов и там нет простора для творчества.
Но в процессе создания этих самых иконок я прошла все классические стадии принятия неизбежного — и в итоге мнение своё поменяла на почти противоположное. Обо всём по порядку.
Отрицание
Наш продукт без проблем вышел из беты со смесью яндексовых иконок, находок The Noun Project и авторской работы каждого дизайнера. И зачем нам тогда новые иконки?
Мы придумали для Беру общий тон коммуникации, отрисовали новый акцидентный шрифт, задали фотостиль, оформили продуктовые киты, закрепили фирменные цвета и описали правила стиля для текстов. Мы определились, что наш сервис — про простоту и удовольствие от покупки. И тут мы подумали, что если есть возможность протянуть эту историю ещё и в иконографике, это, наверное, стоит делать.
Гнев
Посмотрев на текущее состояние наших иконок, я поняла, что дела наши не очень. Непонятные метафоры, неубедительные формы и отсутствие общей стилистики, которая связала бы иконки с остальными ключевыми элементами бренда. Мы с ребятами собрали всё, что пойдет под замену, выясняли, чего не хватает и что скоро пригодится. Необходимо было создать набор иконок, в которых была бы исправлена пластика и пересмотрены метафоры, и всё это должен был объединить общий стиль. Мы были уверены, что справимся за месяц. Смешные.
Торги
Сперва мы начали смотреть на то, что делают прямые конкуренты. Не вдохновились. Перешли к работам известных студий. Изучили пиктограммы навигации Нью-Йорка и городских велосипедов в Осло, редизайн иконок для Скайпа, Каяка, Люфтганзы и Зэ Гардиан и другие кейсы, за которые не стыдно.
Дмитрий Моруз, Студия Politica: «На сегодняшний день для бренда считается большим управленческим везением, если за разработкой иконок обращаются к профильным дизайнерам. Но ещё большим везением являются случаи, когда бренд осознаёт важность точности задачи и решает заказать исследование. В нашем случае работа была начата именно с исследования».
Мы поняли, как важно, чтобы иконки по пластике соответствовали настроению бренда, и как они могут быть полезны для поддержания чёткого, выверенного и надежного стиля, который остаётся разборчивым даже при меньших масштабах. Во всех хороших примерах эта связь проходила через шрифт.
Д̶е̶п̶р̶е̶с̶с̶и̶я̶ Работа
В процессе исследования мы выбрали три принципа стилеобразования, то есть три способа заставить иконки говорить голосом бренда:
1. Цвет
Иконки могут наследовать цвета бренда и так определять принадлежность к тому или другому продукту. Например, иконки Каяка оранжевые, у Тиффани цвета тиффани, а у Эйрбиэнби цвета их розового пантона.
— У нас есть фирменный фиолетовый пантон и два варианта размещения иконок. Фиолетовые на белом фоне и инверсия — белые иконки на фиолетовом.
2. Соответствие пластике шрифта и логотипу
Во многих примерах в построении иконок были повторены приемы из логотипа или шрифта. Если шрифт рубленый, как у Гардиан, то и иконки будут угловатые. Если лого дутый, как у Скайпа, то иконки будут стремиться к покатым формам.
— У нас шрифт YS text, и по пластике мы будем привязываться к нему.
3. Общее ощущение
Например, чем больше радиус скругления, тем более дружелюбным и детским кажется стиль. Чем более правильные и графичные формы у иконок, тем они нейтральнее и тем больше говорят о надёжности бренда. Упрощённые или скеоморфичные иконки тоже говорят о бренде и его характере. Залитые формы придают иконке больше веса и работают как буллеты, иконки с обводкой по весу — лёгкие и читаются скорее как глифы, то есть продолжение шрифта. Я вычитала, что залитые формы люди понимают легче, но в другом исследовании это тут же опровергли.
— Наш сервис про простоту и легкость. Именно эти ощущения должны были создавать иконки в общем.
Затяжная де̶п̶р̶е̶с̶с̶и̶я̶ работа
Первый подход был очень милый и по-хорошему придурошный, но не совсем соответствовал выведенным нами принципам. Красиво, но совсем не похоже на YS Text. Так что эту итерацию пришлось отложить и продолжить поиски.
Мы доуточнили бриф, поняли, что мало смотреть только на толщину штриха, соединения, апексы и вот это всё — нужно учитывать характер шрифта в целом. YS Text говорит как помощник, особо не выпячивая характер, это гуманистический гротеск, и скорей стремится не к упрощению, а к понятности. Потому домик в новой итерации стал больше похож на домик, а курьер перестал выглядеть как черепашка-ниндзя.
Понятность метафор мы проверяли на наших пользователях — мы показывали им интерфейс приложения или десктопа и просили, например, найти акцию или узнать условия доставки. Самую понятную и красивую метафору брали в работу.
В следующих подходах мы выявили и зафиксировали закономерности построения букв и постарались ещё более осознанно применить их при отрисовке.
Дмитрий Моруз, Студия Politica: «В какой-то момент стало ясно, что мы не просто рисуем иконку — шрифтовую пару, а что-то между интерфейсной кнопкой и буквой. Связь с интерфейсной кнопкой предполагает то, что она «пухленькая» и на неё приятно нажать пальцем, а связь с буквой то, что она понятна и обладает общей с ней пластикой. Тут мы отказались от явно острых терминалов, которые присутствуют в шрифте YS Text.
Привязка к шрифту сохранилась в той мере, в которой она не мешает иконке быть кнопкой: учтена детализация иконки, схожая сложности глифа, сохранены стилистические элементы, такие как острота окончаний или стыки. В построении иконки заимствуют толщину линий, округлость форм, но не в ущерб геометрии и узнаваемости».
Иконки прорисовывались в трёх пропорциях: вертикальной, квадратной и горизонтальной, с сохранением общей массы иконки. Каждую иконку рисовали в трёх размерах, которые мы определили, отталкиваясь от кеглей шрифта, используемого в продукте.
Вышло всего 3 размера:
- шрифту размером в 14 pt соответствовали иконки 16х16 px,
- шрифту 16 pt по толщине подошли иконки размером 20х20 px,
- шрифту 18 pt — иконки 24х24 px.
Для набора иконок в белом цвете для размещения на темном фоне мы решили использовать компенсацию, потому что оптически белое на тёмном кажется жирнее.
Если учесть привязку к шрифту, понятно, что в спокойном состоянии наша иконка должна быть продолжением надписи и не утяжелять интерфейс залитостью.
Но необходимы и залитые (активные) формы для иконок тапбара и для тех иконок, у которых есть активное и неактивное состояние.
Принятие
В итоге получился стройный ряд пиктограмм, который настолько характерен, насколько этого просит соседство с шрифтом и функция кнопки.
Исцеление
Работа сделана, теперь осталось дождаться внедрения всех новых иконок во всех местах нашего необъятного продукта, а пока благодарности.
Спасибо мне и моим коллегам. Дизайн-директору Диме Быкову и арт-директору Мише Ткаченко за такое ответственное поручение, дизайнеру Студии Politica Диме Морузу за усердную работу и готовность поспорить даже через океан в 5 утра, продюсеру Роме Усманову за то, что растягивал нас с Морузом по углам и за всеми записывал, моему коллеге дизайнеру Тарасу Сгибневу за беседы об иконках как о чём-то очень важном, редакторам Юле Архангельской и Полине Делюкиной за правильные пробелы в статье и буквы «ё» в нужных местах.
Рецидив
Чтобы решать задачи не только в продукте, но и в других местах, где нужно говорить повеселее, параллельно мы начали рисовать микроиллюстрации или коммуникационные иконки. Но это уже другой крупный спор и совсем другая история.
