Язык визуального дизайна: как научиться на нем говорить?

Эффект красивого юзабилити. Зачастую пользователи считают эстетичный дизайн более удобным в использовании.

Язык визуального дизайна — довольно сложный термин, который подразумевает нечто большее, чем внешний вид и восприятие пользовательского интерфейса!

Что такое язык визуального дизайна?

Любой язык состоит из единого словаря и набора согласованных правил и определений для беспрепятственного взаимопонимания.

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

Язык визуального дизайна — это общий и проработанный визуальный словарь взаимосвязанных шаблонов, которые обеспечивают создание сильного продукта с уникальной атмосферой. Это специальный язык, на котором разговаривают члены команды. У него есть своя (визуальная) грамматика, которую формулируют «создатели продукта».

Создание визуального языка следует начинать с разработки визуального алфавита? Не совсем так.

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

Субъективная область исследований

Визуальная эстетика носит в высшей степени субъективный характер. У всех (в том числе и не дизайнеров) есть мнение, которое часто не может быть четко сформулировано. Из-за этого обратная связь кажется необоснованной и неоправданно предвзятой.

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

Концепция и цели продукта 

Концепция и цели компании — это необходимые исходные данные, которые определяют основные правила для субъективной области визуального языка.

Философия Fittle…

ПРОДУКТ

Fittle — супер-приложение, в котором можно найти все, что связано с едой. Оно предлагает 5 способов покупки еды: онлайн-доставка готового питания, сервис доставки продуктов с рецептами, бронирование столика, заказ продуктов и еда на вынос.

СТРЕМЛЕНИЕ

Fittle хочет стать таким же амбициозным брендом, как Apple of Food Space.

ЦЕЛИ

Дать возможность всем питаться правильно, по одному блюду на каждый прием пищи.

КОНЦЕПЦИЯ

Мы представляем себе мир, в котором люди знают, какая еда является для них правильной. Они могут покупать продукты или еду на свое усмотрение и брать на себя ответственность за собственное здоровье.

Основные ориентиры для Мудборда (на данном этапе): Apple of Food Space

Сформулируйте принципы дизайна

Ориентир на приложение Apple of Food Space подразумевает минимализм в визуальном дизайне. Полезно обратиться к принципам проектирования Apple, прежде чем создавать их для Fittle.

Хотя эти принципы окажут косвенное влияние на визуальное оформление и направление развития продукта, два из них являются прямыми подсказками, как должен действовать Fittle.

Основные ориентиры для Мудборда (на данном этапе): 

Apple of Food Space

Запоминающийся — Вызывает образы в памяти пользователя

Честный — Ты получишь именно то, что видишь

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

«Все выглядит хорошо и работает правильно, но почему-то не напоминает мне приложение [вставьте свое название]».

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

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

1. Пользователи чаще всего видят теплые цвета, которые используют бренды продуктов питания

Все популярные компании, такие как Swiggy, McDonald’s, Pizza Hut и Zomato, применяют в своем фирменном стиле теплые цвета, например, оранжевый, красный и розовый. Возможно, это связано с тем, что психологически они усиливают чувство голода. Некоторые бренды с посланием «здоровая еда», как правило, используют зеленый цвет.

Fittle заявляет о «правильном» питании, а не о «здоровом». Его цель — быть «хорошо запоминающимся» и ассоциироваться с «любой едой». Следовательно, теплая цветовая палитра будет соответствовать концепции бренда. Желательно выбрать желто-оранжевый оттенок, чтобы отойти от чрезмерного использования красного и создать жизнерадостную атмосферу.

2. Пользователи видят, что бренды продуктов питания повсюду размещают аппетитные изображения еды

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

3. Пользователи видят, что  расположение ресторанов и блюд в приложении отличается друг от друга.

Интересно, что различия в макете помогают пользователям отличить ресторан от блюда. Это наблюдение следует принципу «хорошо запоминающийся», и оно натолкнуло меня на интересную идею в отношении Fittle.

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

Концепция еды на тарелке

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

Пустая тарелка — это приглашение к столу, с которым регулярно сталкивается каждый. Поэтому я выбрал простую белую тарелку для каталога еды.

4. Пользователи цифровых приложений одновременно видят несколько вариантов еды.

Большинство приложений предлагают пользователям несколько вариантов. Это помогает им быстро найти нужное блюдо. Компания Fittle должна не только следовать этому пути, но и улучшить его. Важно в значительной степени персонализировать контент в соответствии с принципом Fittle «Предельно персонализированный».

Основные ориентиры для Мудборда (на данном этапе): 

Apple of Food Space → Минимализм: контент расположен с применением большого количества свободного пространства. Большой выбор/возможность свернуть страницу

Запоминающийся: Направление концепции → Еда на тарелке

Ты получишь именно то, что видишь: Образы → Аппетитно, но честно

Запоминающийся: Цвет бренда → Желто-оранжевый оттенок 

Создание атмосферы продукта

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

Визуальный язык является синонимом атмосферы продукта, а взаимодействие с пользователем — его индивидуальностью.

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

3 главных прилагательных, которые описывают атмосферу Fittle — приглашение, аккуратность и веселье

1. Приглашение → Интуитивно понятный интерфейс • Фотографии, которые вызывают аппетит
2. Аккуратность → Большое количество свободного пространства • Оптимальный цветовой контраст
3. Веселье → «Хорошо запоминающийся» • Удобное перемещение по приложению • Акцент на важном контенте • Создание визуальной атмосферы с помощью цвета, форм и текста.

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

Основные ориентиры для Мудборда (для Визуального Дизайнера): 

Apple of Food Space → Минимализм: контент расположен с применением большого количества свободного пространства. Большой выбор/возможность свернуть страницу

Apple of Food Space → Четкость: понятный текст и цветовой контраст

Запоминающийся: Направление концепции → Еда на тарелке

Запоминающийся: Последовательное и удобное перемещение по приложению

Ты получишь именно то, что видишь: Привлекательные образы → Аппетитно, но честно

Запоминающийся: Цвет бренда → Веселый и активный желто-оранжевый оттенок 

Мудборд

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

‍На этом этапе у вас также должны быть вайрфреймы 3-5 основных экранов продукта.

Время визуальных исследований!

На этом шаге к работе приступают визуальные дизайнеры. У большинства из них есть довольно стандартный и проверенный метод проведения визуального исследования. Давайте рассмотрим его.

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

Ниже представлена финальная версия приложения Fittle.

У Fittle уже есть визуальное направление, но пока еще нет визуального языка.

Создайте визуальный алфавит

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

Модель представления контента

Меня очень вдохновляют размытия, которые использует  Big Sur, для создания иерархии за счет наложения слоев. Fittle ограничивается применением тени для базовых и самых верхних слоев с «тарелками». Все промежуточные слои будут размыты для создания иерархии.

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

Визуальная грамматика (на данном этапе)

1. Функциональные области окрашены в соответствии с их назначением.
2. Области изучения контента всегда белые, чтобы пробуждать дух исследования.
3. Темные области всегда ориентированы на выполнение задач, чтобы побудить пользователей сосредоточиться и добиться результатов.
4. Области, ориентированные на выполнение задач, всегда расположены на нижней панели задач.
5. Для выделения Призыва к действию используется размытие и перекрытие изображения, а не акцентный цвет.

Цветовая палитра

Для Fittle в качестве акцентного цвета был выбран осенний желтый с оттенком оранжевого (#EAB44D). С позиции психологии он ассоциируется с жизнерадостностью и счастьем. Он является теплым цветом. Когда люди в хорошем настроении, они больше склонны к тому, чтобы поесть. Выбранный оттенок хорошо контрастирует как с темными, так и с белыми цветами.

В дальнейшем можно добавлять другие цвета. Такое правило я извлек в процессе применения цветов.

Я понимаю, что такое абстрактное правило требует определения. Следовательно, есть необходимость в создании соотношения использования цветов.

Концепция еды на тарелке

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

Концепция Тарелки не работает, если изображение слишком маленькое. В таком случае оно теряет способность подталкивать пользователя к покупке. Я обнаружил, что размер тарелки должен быть не меньше 110×110 пикселей.

Типографика

Дизайн на 80% состоит из текста, а форма букв определенным образом вызывает различные эмоции у пользователей. Я использовал для Fittle 2 шрифта  — Modelica и Hansief.

Визуальная грамматика

1. Функциональные области окрашены в соответствии с их назначением.
2. Области изучения контента всегда белые, чтобы пробуждать дух исследования.
3. Темные области всегда ориентированы на выполнение задач, чтобы побудить пользователей сосредоточиться и добиться результатов.
4. Области, ориентированные на выполнение задач, всегда расположены на нижней панели.
5. Для выделения Призыва к действию используется размытие и перекрытие изображения, а не акцентный цвет.
6. Каждый экран, за исключением процесса онбординга, должен соответствовать коэффициенту использования цвета.
7. В призывах к действию никогда не используется фирменный желтый цвет.
8. Размер тарелки должен быть не меньше 110 × 110 пикселей, иначе она потеряет свое свойство пробуждать аппетит.
9. Баннеры со специальными предложениями и иллюстрации должны содержать яркие фирменные цвета.
10. Шрифт Hansief не используется в тексте, который описывает продукт, а только в демонстрационных целях: в специальных предложениях, онбординге и т.д.

В визуальной грамматике будут появляться новые правила, поскольку дизайнеры будут сталкиваться с другими вариантами использования визуального дизайна и связанными с ним вопросами.

Визуальный алфавит Fittle

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

При дальнейшей работе будут добавлены недостающие части алфавита (иконки, иллюстрации и т.д.) и новые правила визуальной грамматики.