#3 Урок. Базовый курс WDi
Визуальная коммуникация
Визуальная коммуникация — это разговор с пользователем без слов. Человек смотрит на макет и сразу понимает о чем сайт и какую задачу решает. Когда ты научишься прорабатывать визуальную коммуникацию, станешь на голову выше многих коллег, потому что это навык арт-директора.

Поговорим о том, как подбирать образы, цветовую схему, шрифты и геометрию.


Как подобрать образ

Графический образ — визуальный объект на странице. Он объясняет пользователю о чем сайт или отдельный блок.

Чтобы лучше вникнуть в тему, давай посмотрим на сайты, где уже решена задача визуальной коммуникации. Первый сайт — groovemade.com

Что сразу понятно из фотографии? Здесь продаются деревянные аксессуары для компьютерной техники. Видел, как педантично они расставлены? Такая аккуратность важна для тех, кто пользуется дорогими компьютерами. Это говорит о том, что у аксессуаров такое же качество, как и у дорогой техники. Поехали дальше.

Следующий пример, wootten.com.au

Это компания по продаже изделий из кожи. Это понятно из фотографии на главном экране.
Что здесь показано? Мастерство, педантизм и ручная работа.

Как делать также. Предлагаем следующий алгоритм подбора изображений, цветов и геометрии:

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

Например:

Думаешь о велосипедах, в голову приходит сам велосипед, велодорожка и ветер. Велосипед и велодорожка связаны с продуктом, а ветер с эмоциями.

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

Например, робот-пылесос, который едет по квартире и собирает мусор.

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

2. Найти изображения

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

3. Выбрать точные изображения

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

Кроме фотографий на сайте есть шрифты, цвета и геометрические формы. Они тоже должны передавать верные эмоции.

Как подобрать цвет

Цвет играет важную роль в визуальной коммуникации, потому что каждый оттенок несет свои эмоции. Чистый цвет передает одни эмоции, а в сочетании с другими оттенками — новые.

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

Как подобрать геометрию

Геометрия — это формы графических элементов и шрифтов на сайте. Чтобы подобрать геометрию, мы отталкиваемся от эмоций, которые выбрали для проекта.

Например,

Скругленные формы передают легкость и мягкость. Массивные и острые — уверенность и твердость.

Пропиши эмоции проекта, а потом подбирай геометрию. Для этого смотри примеры сайтов из этих галерей:

https://www.behance.net/galleries/8/Interaction
http://httpster.net/
http://onepagelove.com/
http://www.siteinspire.com/
http://bestwebsite.gallery/
http://www.awwwards.com/

Что делать, когда все собрано

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

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

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

Если какой-то информации не хватает, пиши прямо сейчас. Не стесняйся.

С любовью,
WDI