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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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