Дизайнер интерфейсов
3 способа использовать иллюстрации в интерфейсах
На курсе «Дизайнер интерфейсов» мы подробно разбираем создание дизайн-концепции. Кроме изучения теории студенты делают много практических заданий, и у них неизбежно появляется вопрос: как выделиться среди миллионов таких же интерфейсов? Сегодня мы расскажем про использование иллюстраций в дизайне интерфейсов.

Мы перевели пост Ника Бабича о трех способах использования иллюстраций в интерфейсах.
17 июля 2018
Ник Бабич
главный редактор UX Planet
Картинка стоит тысячи слов. С незапамятных времен люди знали, что сложную идею можно передать с помощью одного неподвижного изображения.
Рисунок на стене в пещере Ласко, Франция. Нарисован 17 000 лет назад. Изображение: subarcticmike
Большая часть нашего мозга предназначена для обработки визуальной информации (по мнению некоторых исследователей — до 90%). Сегодня речь пойдет о вполне конкретном ее типе — иллюстрациях.

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

Иногда концепцию, особенно абстрактную, бывает сложно описать словами. Иллюстрации спешат на помощь! Посмотрите, как Basecamp с помощью картинки изобразил текущие проблемы бизнеса. Голый текст выглядел бы гораздо менее убедительно.
Задают контекст

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

Иллюстрация помогает быстрее погрузиться в контекст. Например, Evernote с помощью картинки дает понять, что именно означает «Помнить все» при использовании приложения.
Картинка помогает лучше раскрыть смысл текста. Изображение: Evernote Текст на картинке: «Помните все. Организуйте свою работу и наведите порядок в жизни. Соберите все нужное в одном месте, чтобы его можно было быстро найти».
Иллюстрации отлично подходят для того, чтобы познакомить пользователя с продуктом и объяснить, как он работает. А еще они оживляют интерфейс приветственных страниц.
Новый продукт тоже встречают по одежке. Поэтому обязательно используйте иллюстрации на приветственных страницах. Изображение: Slack
Побуждают к действию

Правильная иллюстрация даже может заставить пользователя действовать!
Многим пользователям будет любопытно узнать, что это за кнопка. Изображение: Webflow Текст на картинке: «Хммм… что делает эта голубая кнопочка?».
02
Доставляют удовольствие
Пользователи ежедневно взаимодействуют с десятками продуктов, но помнят только те, которыми приятно пользоваться. И если уж они нашли такой, велик шанс, что они останутся верны именно ему.

Хорошая новость для дизайнеров: вы можете порадовать юзера с помощью иллюстраций.
Пользователь достиг цели

Анимированная картинка, которая появляется на экране по достижении какой-либо цели, создает у пользователя ощущение, что он добился чего-то значимого.
Помогите пользователю порадоваться пустому почтовому ящику. Изображение: Google
Пользователь запутался или чем-то раздражен

Если пользователю что-то непонятно, он нервничает. Успокойте его с помощью картинок! Например, стартовый экран при первом использовании продукта нужно оформить так, чтобы юзеру было проще начать работать с приложением.
Иллюстрация помогает уменьшить беспокойство и начать работать с приложением. Текст на картинке: «Давайте начнем… Отдохните от повседневности. [Купить билеты]»
То же самое, когда пользователь сталкивается с ошибкой — скрасьте неприятный эффект классной иллюстрацией. Иногда она даже может заставить юзера улыбнуться.
Сообщение об ошибке в приложении OfferUp Текст на картинке: «Вы застали нас за работой! Это запланированное обновление, оно поможет OfferUp работать лучше»
03
Передают характер
Выделите продукт из общей массы с помощью уникальных иллюстраций, нарисованных специально для вас.
Иллюстрация как часть идентичности бренда

Иллюстрации, выдержанные в стилистике бренда, отлично повышают его узнаваемость. Пользователь видит такую картинку и сразу вспоминает о вашем продукте.
Для своих иллюстраций Google использует уникальный визуальный язык. Изображение: Google и Maya Stepien
Маскоты

Маскот — это нарисованный персонаж или объект, который юзеры отождествляют с продуктом или брендом. Хорошо продуманный маскот даже может создать эмоциональную связь между пользователем и продуктом.
Маскот оживляет продукт и придает ему характер. Юзеры чувствуют с ним связь, а опыт использования лучше запоминается. Изображение: Github
Один из самых знаменитых маскотов технологической индустрии — дружелюбный шимпанзе Фредди из MailChimp, который стал элементом идентичности продукта.
Изображение: Mailchimp
Настроение

Иллюстрации помогают придать сайту или приложению определенное настроение. Важно, чтобы изображения были выдержаны в общей стилистике интерфейса и гармонировали с ней.
Shopify создает настроение с помощью иллюстраций. Изображение: Meg Robichaud Текст на картинке: «Доброе утро, Мохаммед. Вот что сегодня происходит с твоим магазином. Продажи: 15,5$. Посетители: 2. Срок действия кредитной карты истекает через 3 дня [Обновить информацию] 5 популярных продуктов закончились [Посмотреть]»
Хотите добавить интерфейсу красоты, эмоций или рассказать историю? Используйте иллюстрации!
На третьем курсе программы «Дизайнер интерфейсов» вы научитесь воплощать свои идеи в дизайн-концепции и самостоятельно создадите визуальный язык своего интерфейса.

У вас будет много практических уроков, вы попробуете работать в Photoshop, AdobeXd, Figma и Sketch. Вы научитесь создавать анимацию, узнаете про возможности пользовательских исследований и аналитики, протестируете и доработаете прототип собственного интерфейса.

Вы научитесь:

- Создавать интерактивные прототипы на основе бумажных прототипов

- Использовать современные инструменты прототипирования

- Анализировать работоспособность прототипа

- Обнаруживать и устранять проблемы в дизайне

- Детализировать и улучшать дизайн прототипа

Начните прямо сейчас: не откладывайте свои достижения в долгий ящик, курс уже запустился, так вы можете начать учиться прямо сейчас!


Мы научим вас создавать не только удобные, но и красивые интерфейсы
Понравилось? Поделитесь с друзьями