5 дизайнерских техник по работе с эмоциями
10 мая 2014 | Опубликовано в статьюшечки | 12 Комментариев »
В современном веб-дизайне важно учитывать множество факторов, ведь каждый из них может повлиять на успешность проекта. Сегодня дизайнеры располагают всеми возможностями, чтобы подарить пользователю не только удобную навигацию и интуитивно понятный интерфейс, но и эмоции. В этой статье вы найдете несколько советов о том, как оживить ваш UI.
Персонифицируйте сайт при помощи комических иллюстраций
Возможно вы даже не представляете какую роль способна сыграть персонификация сайта. У вас есть возможность подарить пользователю запоминающийся и очень положительный опыт использования вашего ресурса. Персонификация поможет лучше выразить эмоции, которые вы хотите донести и вызвать у посетителя. Вы можете продемонстрировать любое настроение.
Таким образом, интеграция персонажа в ваш проект поможет сломать барьер, возникающий между вами и вашими посетителями. Пример использования такого персонажа - MailChimp, в котором используется в качестве талисмана почтовая обезьянка. Этот пример наглядно иллюстрирует как можно добавить радости дизайну и спровоцировать у пользователя положительные эмоции.
Продемонстрируйте утонченность и минимализм
Те, кто следит за тенденциями в области веб-дизайна, конечно заметили какой мощной волной нахлынула мода на минимализм. Этот стиль порождает утонченность, при помощи которой вы можете приблизиться к чувствам посетителей. Интерфейс, в котором на фоне минималистичного содержания расположены привлекательные элементы, позволяет дать пользователю именно то, что ему хочется видеть.
Хорошим примером минималистичного и утонченного дизайна может служить YourKarma. Обратите внимание на то, как дизайнер, используя простую цветовую палитру, минимум контента и большие изображения добился потрясающего результата.
Повысьте интерес при помощи параллакса
Чтобы спровоцировать эмоции, нужно повлиять на одно из человеческих чувств, таких как зрение или слух. При помощи эффекта параллакс воздействовать на визуальное внимание пользователя легко и интересно самому пользователю.
Посмотрите для примера Nizo. Этот одностраничный сайт отлично демонстрирует как при помощи параллакса можно получить полное внимание и оживленный интерес пользователя. Параллакс популярен не только из-за эффектов анимации. С его помощью также можно создать ощущение глубины и объема в дизайне.
Предложите объект взаимодействия
Люди проявляют признаки беспокойства когда сидят сложа руки, глубоко погружаются в раздумья или нервничают. Схожую модель поведения демонстрируют пользователя во время взаимодействия с интерфейсом сайта. Зная это, вы можете дать посетителю свободный элемент UI, взаимодействие с которым развлечет и расслабит. Это может быть небольшая интерактивная анимация, или прокручивающиеся карусели.
К примеру, меню сайта Rog.ie дает пользователю возможность «поиграться». При наведении курсора на элемент, он увеличивается и всплывает, что привлекает внимание и развлекает.
Пробудите эмоции при помощи портретных снимков
Эмоциональные реакции играют важную роль в формировании социальных связей. Именно поэтому мы предпочитаем общение лицом к лицу. В этом случае мы можем воспринимать личность человека, его реакции и проявления чувств в реальном времени.
Ничто не поможет нам передать эти ощущения так, как большое портретное фото, как на сайте Andrea Mann. Дизайнер блестяще использовал классическое портретное фото в черно-белом варианте.
Заключение
Интегрирование эмоциональных элементов в проект всегда является компромиссным решением. Ведь люди разные и вам не всегда удастся вызвать именно те чувства, которые вы планировали. Однако это лучше чем апатичный дизайн. Как сказала Майя Энджелоу, «Люди забудут, что вы сказали, и что вы сделали, но они никогда не забудут, как вы заставили их чувствовать себя».
Автор статьи Sylvia MLewis
Перевод — Дежурка
Смотрите также:
20 мая 2014 в 16:25
Как на сайте Andrea Mann блог находится не на главной странице? Как это настраивается в WordPress?
июня 20, 2014 at 5:03 пп
Создаешь папку «blog» в корневой папке сайта, в нее заливаешь скаченный WordPress, и когда ты заходишь на site/blog/ он устанавливается и работает как отдельная стр. (если я не ошибаюсь конечно)