Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Минимализм

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

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

Игровой момент

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

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

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

Видео

Небольшие реалистичные видеоролики (не анимация) используются достаточно часто. Веб дизайнеры стараются использовать видеоряд в качестве фона для страницы сайта и уже в качестве верхних слоев накладывать текст и изображения/иконки. 

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

Наглядный пример – сайт volkswagen-coccinelle.fr/espritcox/. Видео представляет мастера художника за работой над логотипом бренда. Посетитель сайта чувствуют вовлеченность в процесс, близость к чему-то сокровенному в такой известной компании как Volkswagen, а его эмоции наполняются прекрасным чувством красоты, творчества и восторга.

Комиксы

Не удивляйтесь, но комиксы давно стали видом искусства, а потому использование их при создании сайтов не является, по сути, чем-то обескураживающим. Тем более что они способны воздействовать на очень большое количество пользователей, затрагивая эмоции не только целевой аудитории проекта. Личность, индивидуальность – вот то, что отражает наши с вами эмоции. Мы можем быть напуганными, ленивыми, занятыми, сосредоточенными, практичными, веселыми – все это наша личность. И комиксы способны изобразить каждую такую личность, эмоцию.

Удобнее всего использовать комиксы для логотипа или отличительного знака (талисмана) компании. Например, Ubisoft имея в логотипе бесконечную спираль, обладает веселым талисманом кроликом (rabbid), которого найти можно почти на всех страницах всех сайтов компании. Или Meandoli использует стиль комикса для оформления всего сайта.

Эффект параллакса

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

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

Одними из ярчайших примеров могут послужить как проект изучения лаборатории (discovery lab) от проекта dementialab.org, так и проект Thief 2014 (thiefgame.com), в котором на фоне анимации глубины в изображениях улиц города или объектов прорисовывается текст и спецэффекты.

Портрет

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

Используя такие фотографии в веб-дизайне можно сильно укрепить связь, как с целевой аудиторией, так и с новыми пользователями и потенциальными клиентами.  Обычно такой вариант оформления используется для сайтов музыкальной или кино тематики. Например, сайт Юлии Гавриловой (Голос-4) или студии дизайна Bokche.

Резюме

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

Как вам материал?