Что это за иконка? Инструкция по разработке логотипа сервиса

Рассказываем на примере дизайна Яндекс.Коннекта

Что это за иконка? Инструкция по разработке логотипа сервиса

Дизайн

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

alt

Этап 1. Постановка задачи

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

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

Яндекс.Коннект, для которого нам нужно было придумать знак, объединяет несколько сервисов для удобной работы в команде: Почту, Диск, Вики, Трекер и некоторые другие. Своих наработок у создателей сервиса не было, так что мы начинали с чистого листа.

Этап 2. Поиск метафоры

Идею нужно уложить в небольшой, но запоминающийся знак. В случае с Коннектом мы сначала подумали про стол: пользователи как будто сидят за одним столом, когда находятся в приложении. Но за столом можно не только работать, но и есть, да и вообще сам символ довольно скучный — от идеи отказались. 

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

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

alt

Собрали много разных изображений: деревья, соты, матрешки (от матрешек пришлось отказаться, потому что культурный контекст в них перебивал смысл сервиса). Затем пробовали рисовать людей, которые держатся за руки и уже сами вспомнили про логотип Nokia, которая connecting people. 

alt

В итоге мы немного отошли от мысли о «работе в команде», для которой создан сервис, и сосредоточились на его названии. Что такое «коннект»? Это связь между двумя устройствами. Если нет второго устройства, то ничего не будет работать. Почему бы не нарисовать два ноутбука? Мы попробовали складывать их по-разному, и пришли к готовому изображению. 

Этап 3. Отрисовка формы

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

Когда вы рисуете какой-то образ, важно понимать, как устроен объект. Довольно часто вы идете в интернет и пытаетесь найти снимок нужного предмета в надежде, что это вам поможет. Но на фотографии объект не получится покрутить, перевернуть, залезть в него. Чтобы передать образ, нужно найти правильный ракурс, а этого нельзя сделать, стоя на месте. Сделайте небольшое усилие и найдите нужный предмет в реальности.

В случае с Коннектом, мы пользовались ноутбуками. Когда мы разрабатывали иконку Маркета, в офис привезли настоящую тележку из магазина. Иногда нужный вам объект ещё ближе, чем кажется. Для сервиса Яндекс.Разговор, который помогает слабослышащих людям, мы решили выбрать в качестве символа жест, который на русском жестовом языке значит «окей, я тебя слышу». И чтобы его нарисовать, не нужно лезть в интернет — можно использовать собственную руку. 

alt

Есть классный способ найти необычный образ: переместить объект в контекст, в котором он будет использоваться. Например в проекте айдентики парка Brooklyn Bridge в Нью-Йорке для обозначения детской площадки использовали иконку с человечком, который весело подпрыгивает вверх. Он не статичен, не абстрактен и указывает, что здесь нужно делать: играть и веселиться.

Этап 4. Внедрение дизайна

Нашу идею с ноутбуками приняли, настало время внедрять дизайн в жизнь. Но для того, чтобы все сложилось в единую систему, одной иконки недостаточно. Идею нужно внедрить в остальные части сервиса.

Логотип с ноутбуками оказался очень удобным для этого. Он легко масштабировался, а Ждан Филиппов, арт-директор дизайна в Яндексе, создал на его основе узнаваемый фирменный стиль. Мы использовали угол открытого ноута для оформления основных страниц, и всё сложилось в единый визуальный язык.

alt

В итоге даже когда мы смотрим на часть сервиса, на которой нет логотипа, всегда можно узнать Яндекс.Коннект и отличить его на фоне других. Я это называю зебра-тестом: даже если вместо целой зебры показать её часть, вы же все равно поймете, что это зебра. Этот же тест должны проходить и хорошие проекты по идентификации.

Больше по теме

Дизайн

Как провести A/B-тестирование: 6 простых шагов

От постановки цели до определения статистической погрешности

Дизайн

Как организовать идеальный дизайн-спринт?

Что нужно знать о процессе быстрой генерации и проверки продуктовых гипотез

Дизайн

Инструменты в помощь дизайнеру

Прогнозирование реакции пользователей, создание графики для VR и перевод набросков на бумаге в прототипы

Дизайн

7 бесплатных сервисов для начинающих дизайнеров

Подбор цветовых сочетаний, коллекция из двух миллионов иконок и инструмент для распознавания шрифтов

Дизайн

10 книг и 6 фильмов для дизайнера коммуникаций

Советует Иван Оленкевич — ведущий дизайнер Яндекса

Дизайн

Как в девяти городах прошли воркшопы Дизайн-перемены

Дневник одного путешествия

Дизайн

«Дизайн — это не только красивые картинки»

Чему научились студенты образовательной программы Яндекса и  Школа дизайна ВШЭ