Визуальная концепция в дизайн-процессе

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

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

В дизайнерской среде используется понятие равнозначное визуальной концепции — мудборд. Но для клиентов оно зачастую звучит как ругательство и что-то непонятное. Поэтому часто приходится объяснять что это такое и зачем это нужно.

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

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

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

Задачи визуальной концепции:

1. Передать смыслы визуально

2. Вызвать эмоцию, ощущение, настроение

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

Процесс создания визуального брифа:

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

– Сначала выписываем ассоциации 1-го порядка — то, что приходит в голову сразу, эти ассоциации как правило очевидны.

– Потом выписываем ассоциации 2-го порядка. Ассоциации 2го уровня — это логические связи между событиями, предметами, явлениями и фактами, которые мы находим поразмыслив.

– Затем выписываем ассоциации 3го порядка — связи между событиями, предметами, явлениями и фактами, бессознательно улавливаемые человеком. Графический образ может иметь совсем условное отношение к предмету, который он символизирует, или не иметь его вовсе. Основная связь происходит как раз на эмоциональном уровне.

2. Создаем документ, куда будете помещать скриншоты. Можно создать бриф в фотошопе или в любом удобном для вас приложении или на сервисе. Как вариант, RealtimeBoard — онлайн-доска для совместной удаленной работы.

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

Существуют специальные приложения, где аккумулируются фотографии из разных источников. Можно сэкономить время на поиски нужного изображения. Например, приложение zoommy. Или же открываете все сайты с хорошими фотографиями (например, https://pixabay.com/, платные стоковые ресурсы) и ищите там. Кому как удобнее.

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

Говорят, одна картинка стоит тысячи слов. Ведь снимок способен пробудить эмоции, передать состояние радости, вкусности, скорости, грусти, разбудить воспоминания или напомнить о каком-то событии. Не подбирайте безликие фотографии. Берите сильные фото, которые способны вызвать чувства у ваших пользователей и заинтересовать их.

4. Подбираем изображения для композиции. Делаем скрины как может выглядить главная страница, каталог товаров и прочие блоки вплоть до форм «оставить заявку».

5. Находим шрифтовые пары, которые удачно подойдут для выбранной ниши. Если вам понравился шрифт на каком-то сайте, то определить название шрифта поможет плагин https://fontface.ninja/.

6. Ищем цветовую схему. Здесь выбираем акцентный цвет, фоновый и балансирующие цвета. Вот сайты, которые помогут в выборе цветовой палитры: https://www.materialpalette.com/amber/deep-purple, http://color.romanuke.com/

7. Подбираем геометрию и формы. Смотрим какие элементы интерфейса использовать — с острыми углами, со скругленными углами, плоские или объемные формы. Какие иконки использовать — контурные или с заливкой и т. п. Находим нужное, делаем скриншоты и помещаем в мудборд.

Все, мудборд готов.

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

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