Как захватывать внимание с помощью цвета и визуальной иерархии

  • 05.07.2020
  • 1 Комментарий

Создать такой ресурс тебе помогут знания о визуальной иерархии и психологии цвета. Эта тема соприкасается с UI/UX. Захватывать внимание — значит знать свою аудиторию: ее привычки, вкусы, поведение и дать информацию в правильной форме и правильном порядке. Мы расскажем, как это сделать и как объяснить ценность такого подхода заказчику.

Как захватывать внимание с помощью цвета и визуальной иерархии

Что такое иерархия в веб-дизайне и дизайне приложений?

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

Как захватывать внимание с помощью цвета и визуальной иерархии / WAYUP

Что происходит без продуманной иерархии?

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

Значимость и заметность

Управляй значимостью и заметностью контента с помощью:

  1. Размера — первыми мы считываем большие элементы, они лучше “бросаются в глаза”
  2. Контраста — элементы, которые выразительно отличаются от других цветом, размером, визуальным стилем, форматом — считываются первыми
  3. Размещения — выше на сайте в приложении — выше в иерархии
  4. Пустого пространства — грамотно использованное пустое пространство цепляет внимание.
  5. Цвета

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

Как захватывать внимание с помощью цвета и визуальной иерархии / WAYUP

Приоритеты бизнеса — на первом месте

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

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

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

Выбираем цвета

Цвета для проекта мы выбираем после утвержденной архитектуры. Готовые палитры, руководство кругом Иттена и правила типа “темно-синий хорошо работает в бизнесе” — не годятся. Цветовая палитра сайта или приложения должна:

  1. Вызывать правильные ассоциации
  2. Пробуждать нужные чувства
  3. Гармонично сочетаться с контекстом продукта

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

Как захватывать внимание с помощью цвета и визуальной иерархии / WAYUP

Хочешь научиться делать гармоничные, интуитивные интерфейсы, которые ведут пользователя к ключевому действию? Регистрируйся на коучинг «Веб-дизайнер: счастливый билет в Таиланд». Ты сможешь зарабатывать $1000 из дома или любой точки мира. Даже совмещая с учебой. Ты освоишь композицию, теорию цвета и типографику. Научишься проектировать сайты и работать с пакетом Adobe. Сделаешь 5 сильных работ для портфолио.

Зарегистрироваться

Хочешь узнать как проходит обучение? Залетай на День открытых дверей

По материалам: wayup.in

Tags
GeekBrains
1 Комментарий

Добавить комментарий

Your email address will not be published. Please mark all required fields.