Илья Сидоренко Дизайнер интерфейсов

3. Продумывание сценариев или создание
Customer Journey Map
Дизайнер должен думать в рамках сценариев, а не экранов. Не важно,
сколько у вас экранов, – важно лишь то, насколько удобно пользователю
решать свои задачи при помощи вашего сервиса. Чисто логически
кажется, будто удобнее всё делать в рамках одного экрана, но
дизайнеры знают, что длинные формы лучше разбивать на несколько
шагов. В дизайне нет фундаментальных правил, всё всегда зависит от
задачи.
В своей практике я использую Customer Journey Map для продумывания
сценариев. Суть его работы я уже описывал в предыдущих главах.
В нашем случае сценарий будет небольшой (сайт → приложение), но
даже здесь у пользователя могут возникнуть проблемы. Например, он
может не проявить доверия к сервису (добавить отзывы, гарантию?) или
сайт не будет выглядеть премиальным (изменить визуальный стиль?), не
придет код SMS (сделать повторную отправку, добавить онлайн-
поддержку?) 
Итог. Вы должны понимать, какие проблемы могут возникнуть на пути
пользователя, и придумать несколько вариантов решений, которые
позволят их избежать.
4. Создание фреймворка
Как мы уже обсуждали, фреймворк – это структура, вокруг которой
строятся элементы интерфейса. Например, в почтовом сервисе Gmail
есть верхняя строка поиска, левое меню и правая часть, отданная под
письма.
Дизайнеры существуют потому, что нет универсального фреймворка.
Каждому сервису нужен свой. Конечно, есть верхнеуровневые принципы
дизайна (о которых мы поговорим в третьей части книги), однако, если
вы чуть углубитесь, будет необходимо придумывать свои решения,
иначе пользователь станет решать свои задачи неоптимальным
образом. Это всё равно что крутить педали руками: вроде и двигаешься,
но не столь эффективно, как если воспользоваться ногами.
В случае с сайтом фреймворк – это последовательно расположенные
блоки, собранные из сущностей, полученных на этапе исследования.
Если ваш бизнес уникален, то придется придумывать что-нибудь свое,
но, как показывает практика, у большинства компаний есть несколько
прямых конкурентов, опыт которых можно перенять.

---

Что делает посетитель, попадая на сайт? Если сервис ему знаком, то он
сразу регистрируется или заходит в аккаунт.
Если же нет, то ему будет интересно изучить главную страницу и
убедиться, туда ли он попал. Чтобы пользователь после изучения не
потерял форму скачивания приложения, ее лучше продублировать
внизу. Давайте вспомним структуру сайта заказа такси премиум-класса:
«скачать приложение», «о водителях», «об автомобилях», «страховка»,
«скачать приложение», «отзывы». Как видите, ключевые действия стоят
в начале и конце, чтобы посетитель сайта, просмотрев все блоки, не
ушел просто так. Это правило подходит всем.
Основные блоки сайта следует выбирать в зависимости от типа проекта.
Сервису заказа такси бизнес-класса необходимо показать статус и
отличия от обычных сервисов. Wheely делает это с помощью
фотографии водителя в костюме и списка особенностей, например:
«встреча с зонтом во время дождя», «учет пожеланий по маршруту и
музыке», «встреча в аэропорту с табличкой» и т. д. Если у вас такого нет,
можно использовать структуру конкурентов. Допустим, ваш сервис
нанимает только водителей-девушек. Это необходимо
продемонстрировать, подобрав фотографии и изложив причины, почему
водители-девушки – оптимальный вариант (контент обычно
предоставляет заказчик).
Подобным сервисам никогда не помешают отзывы известных людей и
ссылки на публикации в популярных СМИ. Это повышает доверие, столь
важное в эпоху интернета. Наглядности добавит блок со скриншотом
приложения и описанием его основных функций. Вряд ли к нему будут
сильно приглядываться, но его наличие повысит доверие.
Чтобы определить требуемую структуру сайта, достаточно выписать все
сущности, которые используют конкуренты, и отобрать наиболее
подходящие вашему бизнесу, слегка трансформировав их под свои
задачи.
Когда вы наберетесь опыта в определенной сфере, данный этап не
придется каждый раз проходить заново и можно будет использовать
наработки, периодически их актуализируя. Именно поэтому дизайнеру и
студии выгодно специализироваться в какой-либо области.
Итог. Вы должны понимать, какие сущности (блоки) и в какой
последовательности использовать в проекте. Лучше всего зарисовать их
на бумаге или прописать в текстовом документе.
5. Поиск визуального стиля
Об этом этапе мы уже говорили, а потому повторю лишь ключевую идею:
Визуальный стиль должен соответствовать посылу бренда. Это
основной критерий вашей работы. Совершенно не важно, каков стиль:

---

он может быть модным, скучным, футуристичным или любым другим.
Важно лишь, чтобы он пробуждал нужные эмоции.
Какие эмоции должен пробуждать сайт сервиса по заказу такси бизнес-
класса? Логично, что он должен показывать высокий уровень качества и
премиальность услуги. Этого можно добиться несколькими способами.
Во-первых, цвета. Если посмотреть на премиальные бренды, то легко
заметить: в основном они используют черный или золотой. Это не догма,
тем более что наш главный конкурент – Wheely – уже использует черный.
Поэтому, чтобы выделиться, нужно придумать нечто иное: например,
добавить дополнительный цвет (золотой, желтый?) или взять красный в
качестве основного. Неожиданное решение, но оно может сработать.
Так, авиакомпания Virgin Atlantic Airways использует красный, предлагая
услуги бизнес-класса.
Во-вторых, изображения. Заходя на сайт Wheely, вы сразу же видите
действие – открываются двери черного «мерседеса», сайт сразу
вызывает у посетителя нужные эмоции.
В-третьих, инфографика. Порой дизайнеры берут первые попавшиеся
иконки, не задумываясь об их визуальном посыле. Посмотрите, какие
возможности по кастомизации предлагает Google – вы можете настроить
стиль иконок и выбрать наиболее подходящие; также интересные
варианты предлагает сайт Flaticon. Основные параметры, с которыми
можно поэкспериментировать, – это цвет, заливка или контур,
закругленные края и т. п.
В-четвертых, типографика. Шрифт с засечками хорошо подходит для
рассказывания историй, поэтому его использует Medium. Для
технологической компании он будет неуместным (посмотрите сайты
Apple, Microsoft, Amazon).
Итог. Вы должны определить посыл проекта и подобрать под него цвета,
стиль изображений, иконки (или обойтись без них) и шрифт.
6. Дизайн-макет
Когда структура и визуальный стиль определены, можно переходить к
дизайну экранов. Тут почти нечего сказать, особенно если речь идет о
простом сайте. Вам нужно лишь перенести свои идеи в реальность.
Если вы работаете над большим сервисом, то начинать следует с
экрана, входящего в основной сценарий. На нем вы можете отработать
стиль, структуру и провести первую презентацию заказчику. В случае с
сайтом следует начинать с главной страницы и отработать стиль на ней,
а после уже использовать его для остальных страниц.
Обычно первые наброски сайта я делаю от руки, а к графическому
редактору перехожу только после того, как определюсь со структурой.
Сделав один или два экрана, беру паузу, а после пытаюсь найти

---

недочеты. Таким образом, я продвигаюсь до футера, после чего могу
сделать еще несколько итераций по улучшению сайта.
Итог. Дизайн необходимых макетов готов и прошел несколько этапов
доработки.
11. Арт-директор
Многие отечественные дизайнеры называют себя арт-директорами, но
по факту таковыми не являются. Желая казаться авторитетнее, они
навешивают на себя регалии, не понимая их сути. Основная задача арт-
директора как творческого руководителя – корректировать направление
работы дизайнеров, используя свой опыт. Благодаря этому начинающие
специалисты растут, а опытный дизайнер не тратит времени на рутину и
может параллельно вести несколько проектов. Когда же арт-директор
ковыряет макеты, его потенциальная польза для компании в разы
снижается.
Основной инструмент дизайнера – мозг и графический редактор, а
главная ценность арт-директора – опыт. И чтобы его использовать на
благо компании, главным инструментом арт-директора должны стать
руки его неопытных коллег.
Арт-директор – не старший дизайнер. Старший дизайнер умеет
создаватьхороший дизайн, а арт-директор хорошо его понимает. От
первого требуется только выдавать качественный результат, в то время
как второму необходимо куда больше навыков.
Перечислим самые важные.