На макете нужно управлять вниманием пользователя. На каждом экране показывать первое, второе, третье и четвёртое. Польза этого в том, что ты ведёшь человека к нужному действию:
Первый шаг в управлении вниманием — создание визуальной доминанты. Это большой объект на экране. У него простая задача — привлечь взгляд и объяснить суть. Чтобы сделать доминанту, достаточно пройти 4 шага.
Шаг 1. Поставить объект на якорную точку
Визуальная доминанта заметна, если расположена на якорной точке: по центру или в углах прямоугольника.
Вот «ваза» на якорных точках:
Если расположить объекты там, где кажется красивым — будет неразбериха:
Место доминанты на якорной точке
Шаг 2. Увеличить размер
Размер определяет порядок иерархии: сначала человек изучает крупный объект, и только потом мелкие. Поэтому доминанта должна быть большой и важной:
Доминанта на макете должна быть одной, иначе непонятно откуда смотреть:
Больше — заметнее
Шаг 3. Добавить контраста
Человеческий глаз замечает яркие цвета на фоне блеклых. Когда нужно акцентировать внимание на конкретном объекте — используй цветовой контраст:
Без дополнительного акцента пользователь может пропустить важную информацию:
Если надо, делай доминанту контрастной
Шаг 4. Добавь «воздуха»
«Воздух» — это пустота вокруг объекта. Чем меньше элементов соседствует с объектом, тем больше к нему внимания:
Без воздуха доминанту труднее считать:
Доминанта должна быть «воздушной»
Что должно быть визуальной доминантой?
Визуальная доминанта — это самое важное, что должен увидеть человек на странице. Ему нужно объяснить, куда он попал и чем полезен блок. Для этого не годятся второсортные подробности вроде логотипа или нудных описаний. В доминанте всё четко и по-делу.
Инструментов для раскрытия смыслов много, вот пара из них.
- Лаконичный заголовок о продукте:
- Фотография, которая демонстрирует продукт:
Используй доминанту, чтобы создать точку входа. Человек сразу поймет, куда попал. Чтобы раскрыть подробности, веди взгляд от крупных объектов к мелким, от контрастных к менее контрастным.
Для тех, кто любит шпаргалки
- Поставить объект на якорную точку
- Увеличить в размере
- Добавить цветовой контраст, если нужно
- Добавить «воздуха»
Good luck!