Иерархия располагает элементы в порядке важности. Она указывает зрителю, на что следует обратить внимание в первую очередь, во вторую и в третью. Заголовок крупнее основного текста. Кнопка призыва к действию ярче, чем окружающий её фон. Заголовок раздела жирнее, чем абзацы под ним. Иерархия направляет взгляд по дизайну. Без неё всё конкурирует за внимание. Ничто не побеждает. Зритель не знает, с чего начать.

Иерархия создается за счет контраста. Размер, цвет, толщина, положение и расстояние между элементами определяют их значимость. Крупный элемент доминирует. Яркий цвет привлекает внимание. Жирный шрифт выделяется. Элементы в верхней части страницы видны первыми. Свободное пространство вокруг элемента придает ему выразительность. Дизайнер комбинирует эти инструменты для создания четкого визуального порядка. Иерархия — это не просто увеличение размеров элементов. Это увеличение размеров правильных элементов. Самый важный элемент должен быть самым заметным. Если все выделено, ничто не будет выделено. Дизайнер должен определить, что важнее всего, и проектировать соответственно. Иерархия также меняется в зависимости от контекста. Экран мобильного телефона имеет меньше места, чем экран настольного компьютера. Плакат рассматривается издалека. Книга находится близко. Иерархия адаптируется к среде. Цель остается той же: направить зрителя по контенту в нужном порядке.

Инструменты иерархии

• Размер — более крупные элементы привлекают внимание в первую очередь.
• Цвет — яркие или контрастные цвета выделяются.
• Вес шрифта — жирный шрифт более заметен.
• Положение — верхняя и центральная части видны первыми.
• Пространство — изоляция придает элементу важность.

Иерархия — это порядок важности. Она указывает зрителю, куда и в какой последовательности следует смотреть.