Вы научитесь замечать визуальную иерархию - порядок, в котором страница направляет внимание человека.
Хорошая страница не просит смотреть на все сразу. Она подсказывает: сначала пойми главное, затем уточни, после этого действуй. Такой порядок и называется визуальной иерархией.
Иерархию создают размер, насыщенность, контраст, положение и свободное пространство. Для старта мы используем три уровня внимания, но на реальной странице их может быть больше или меньше. Заголовки и отступы помогают группировать содержание и быстрее понимать структуру страницы.1 Лишние яркие элементы конкурируют с главным и ослабляют его заметность.2
Содержание почти одинаковое. Разница не в «красоте», а в том, может ли человек быстро понять предложение и найти следующий шаг.
Самый современный. Очень полезный. Уже сейчас.
Практический курс для новичков. От идеи до работающей страницы без программирования.
Начать обучениеПосмотреть программуПосмотрите на учебный первый экран ровно 5 секунд. Затем ответьте, что вы заметили первым. Это не тест памяти - он проверяет, управляет ли макет вниманием.
Разберите 12 реальных макетов и соберите собственный чек-лист арт-директора.
Попробовать урокКак проходит обучениеВыберите правку, которая дает агенту достаточно информации и позволяет проверить результат.
Возьмите любую страницу, созданную ИИ, и проведите один цикл. Не исправляйте весь дизайн - работайте только с иерархией первого экрана.
Проанализируй визуальную иерархию первого экрана.
1. Назови, что сейчас привлекает внимание первым, вторым и третьим.
2. Сверь этот порядок с задачей страницы из брифа. Если задача не задана, сначала попроси ее уточнить и не меняй макет.
3. Укажи один элемент, который зря конкурирует с главным.
4. Предложи одну локальную правку без изменения текста и общей структуры.
5. Критерий: при беглом просмотре первым должен читаться [главный смысл], вторым - [главное действие].
Если что-то осталось неясным, покажите агенту скриншот страницы и спросите: «Какой здесь порядок внимания и за счет чего он возникает? Не предлагай правки, пока я сам не назову проблему».