Бывает, что в макете есть всё необходимое: красивое изображение, заголовок, описание, цена и кнопка. Но дизайн всё равно кажется слабым. Взгляд перескакивает с одного элемента на другой, важная информация теряется, а человек не понимает, что именно ему предлагают. Часто проблема не в цвете, шрифте или недостатке декора. В макете просто нет визуальной иерархии.
Шаг 1. Определите главную мысль
Сначала ответьте на один вопрос: что человек должен увидеть в первую секунду? Не пытайтесь выделить сразу заголовок, скидку, фотографию, дату и цену. Главным должен быть только один элемент. Представим, что мы создаём рекламу летнего курса по дизайну. В макете есть название курса, дата начала, скидка и кнопка записи. Если задача публикации — рассказать о новом обучении, первым должен считываться заголовок: «Летний курс по дизайну»
Именно он объясняет, что предлагают человеку. Скидка и дата пока ничего не значат, если зритель ещё не понял, о каком продукте идёт речь. Чтобы усилить заголовок, сделайте его крупнее остальных надписей, добавьте вокруг свободное пространство и обеспечьте хороший контраст с фоном. Необязательно использовать яркий цвет. Иногда достаточно увеличить текст и убрать мешающие детали.
Шаг 2. Добавьте пояснение
Когда человек увидел главное, ему нужно быстро понять подробности. В нашем примере вторым уровнем станет дата: «Старт 15 июля»
Она продолжает мысль заголовка и даёт необходимую информацию. Дату нужно сделать заметной, но спокойнее названия курса. Она может быть меньше по размеру, легче по начертанию или слабее по цвету. Здесь важно сохранить разницу между уровнями. Если заголовок и дата выглядят одинаково, взгляд не понимает, с чего начинать чтение. Второй уровень не должен конкурировать с первым. Его задача — объяснять.
Шаг 3. Покажите действие
После того как человек понял предложение, он должен увидеть следующий шаг. В нашем макете это кнопка: «Записаться»
Кнопку можно выделить цветом, рамкой или отдельной плашкой. Она должна легко находиться, но не становиться главным элементом раньше времени. Если кнопка крупнее заголовка, человек сначала видит призыв записаться, но ещё не понимает, куда и зачем. Поэтому действие должно завершать маршрут взгляда, а не открывать его. Получается понятная последовательность: Летний курс по дизайну → Старт 15 июля → Записаться
Что делать со скидкой
В макете остаётся ещё один элемент — скидка 70%. Начинающий дизайнер часто делает её самой крупной и яркой, потому что скидка кажется сильным рекламным аргументом.
Но если огромные 70% перекрывают название курса, человек сначала замечает цифру и только потом пытается разобраться, к чему она относится. Скидку лучше оставить дополнительным акцентом: разместить в небольшой плашке, уменьшить размер или перенести в угол. Она останется заметной, но не разрушит порядок чтения. Главное правило простое: не каждый важный элемент должен быть главным.
Как проверить результат
Когда макет готов, уменьшите его до размера миниатюры. На маленьком изображении детали становятся менее заметными, зато сразу видна общая иерархия. Посмотрите на макет несколько секунд. Сначала Вы должны увидеть название курса, затем дату, после этого кнопку. Если первым бросается в глаза скидка, случайная фигура или декоративный элемент, композицию нужно исправить.
Чаще всего для этого не требуется добавлять новый декор. Достаточно увеличить главное, ослабить второстепенное и убрать лишний визуальный шум.
Главный принцип
Визуальная иерархия строится не только размером. На порядок просмотра влияют цвет, контраст, расположение, свободное пространство, форма и насыщенность элементов. Но начинать нужно не с выбора дизайнерского приёма, а с логики, что человек увидит первым, что поймёт вторым и какое действие заметит третьим. Если этот маршрут понятен, макет работает. Если заголовок, скидка, дата и кнопка кричат одинаково громко, взгляд начинает метаться и сообщение теряется. Хороший дизайн не заставляет искать важную информацию. Он сам показывает, куда смотреть.
Все статьи на сайте