То, как организован макет, влияет на восприятие информации пользователями. Различные форматы дизайна и их свойства управляют направлением взгляда пользователя, помогая сфокусироваться на наиболее значимых элементах композиции.
От правила третей и золотого сечения до различий между статичными и динамичными композициями — понимание этих свойств форматов позволит создавать визуально привлекательные и эффективные дизайны.
Активные зоны (Active zones)
Создайте сетку из двух равномерно расположенных вертикальных и двух горизонтальных линий, разделяющих прямоугольник на девять равных частей — это пример правила третей. Согласно этому правилу, люди склонны концентрировать внимание вдоль этих линий и особенно в точках их пересечения — активных зонах композиции.
Фотографы изучают правило третей с самого начала обучения, так как оно помогает создавать сбалансированные и привлекательные изображения. Дизайнерам также следует учитывать эти точки при размещении ключевых элементов страницы.
Не все пересечения в правиле третей получают одинаковое внимание — восприятие варьируется в зависимости от культуры, но верхняя часть всегда привлекает больше внимания, чем нижняя.
Пассивные зоны (Passive zones)
Правило третей определяет, где должны располагаться ключевые элементы композиции. Те области, которые находятся за пределами активных зон, привлекают меньше внимания. Эти пассивные зоны идеально подходят для второстепенных элементов, которые не требуют мгновенного взаимодействия.
Например, заголовки можно разместить в верхней пассивной зоне. Они останутся заметными при необходимости, но не будут отвлекать от основного контента страницы.
Динамический формат (Dynamic format)
Динамичные форматы создают иллюзию движения, даже если состоят из статичных элементов. Это достигается за счет размещения объектов таким образом, чтобы взгляд пользователя перемещался по композиции.
Расположение элементов под углом, использование отрицательного пространства перед или после объекта, а также продуманная расстановка элементов на странице могут создавать ощущение движения.
Статический формат (Static format)
Если цель — создать спокойную и сбалансированную композицию, следует использовать статичный формат. Он не направляет движение глаз пользователя, а позволяет естественно просматривать содержимое.
Статичные композиции строятся на сбалансированных (часто симметричных) формах, которые не создают эффекта движения. Их можно рассматривать как состояние покоя по сравнению с активным состоянием динамичных композиций.
Гармония формата (Format harmony)
От древнегреческих скульпторов до первых типографов человечество искало идеальные пропорции. Этот поиск привел к открытию золотого сечения (1:1.618), основанного на последовательности Фибоначчи.
Золотое сечение придает дизайну гармонию и структуру, делая его более эстетически привлекательным. Оно также естественно воспринимается человеческим глазом — возможно, наша биология предрасположена к восприятию структур, соответствующих этому принципу.
Золотое сечение (Golden ratio)
Золотое сечение, также известное как божественная пропорция, спираль Фибоначчи или число Фи (не путать с числом Пи), использовалось в искусстве и дизайне с древних времен. Примеры его применения встречаются в природе — в ураганах, головках подсолнечника, раковинах моллюсков, сосновых шишках и многих других объектах.
Использование золотого сечения в дизайне помогает привлечь внимание пользователей к ключевым элементам, таким как кнопка призыва к действию. Оно также создает ощущение баланса и гармонии, что делает композицию визуально привлекательной.
В дизайне вычислить золотое сечение для прямоугольника просто: найдите длину короткой стороны и умножьте ее на 1.618, чтобы получить наиболее эстетичную длину для более длинной стороны.
Сетка золотого сечения (Golden ratio grid)
При создании пропорций сетки применение золотого сечения делает композицию более визуально гармоничной. Для упрощения расчетов можно использовать числа Фибоначчи — последовательность, в которой каждое следующее число является суммой двух предыдущих (3, 5, 8, 13, 21 и так далее). Наиболее сбалансированные пропорции — 3:5, 5:8, 8:13 и т. д.
Размещение важных элементов дизайна в точках пересечения сетки золотого сечения делает их более заметными для пользователей. Это идеальные места для ссылок или кнопок призыва к действию.
Активные зоны (Active zones)
Размещение элементов по правилу третей помогает направить взгляд пользователя. Объекты, расположенные в активных зонах, привлекают внимание в первую очередь. Элементы в пассивных зонах воспринимаются позже, поэтому кажутся менее важными.
Заголовки, ключевые изображения и кнопки CTA стоит размещать в активных зонах. Менее значимые элементы, такие как меню или второстепенные ссылки, можно вынести в пассивные зоны, чтобы они оставались доступными, но не отвлекали внимание.
Пассивные зоны (Passive zones)
Элементы, которые не требуют немедленного внимания — меню, вспомогательные ссылки, поисковые строки — лучше размещать в пассивных зонах. Если важные элементы находятся в этих областях, пользователи могут их не заметить. Лучше избегать размещения в пассивных зонах заголовков, главных изображений и кнопок CTA, так как они должны привлекать внимание и мотивировать пользователей к действию.
Динамический формат (Dynamic format)
Вертикальные макеты естественным образом создают движение в композиции — наш взгляд начинает путь сверху и постепенно перемещается вниз по странице. Размещение элементов так, чтобы они направляли взгляд (например, использование вертикального текста в двух колонках), усиливает ощущение динамики.
Статический формат (Static format)
Для создания спокойных, уравновешенных интерфейсов лучше использовать статичный формат. Горизонтальные макеты более предрасположены к статике, поскольку они не заставляют взгляд пользователя активно перемещаться.
Сбалансированное расположение элементов по обе стороны от вертикальной оси создает устойчивую и гармоничную композицию.
Золотое сечение (Golden ratio)
Применение золотого сечения в макете может привести к созданию эстетически безупречного дизайна. Если мысленно провести спираль от нижнего левого угла через весь интерфейс, можно увидеть, что основное внимание привлекает левая часть макета, а затем взгляд постепенно переходит к элементу в нижнем правом углу.
Такие сбалансированные композиции интуитивно воспринимаются как гармоничные и приятные для глаз пользователей.
Источники
- The Rule of Thirds: Know your layout sweet spots | The Interaction Design Foundation
- Basics of composition in graphic design part 2Script Tutorials — Web Development Tutorials | Script Tutorials
- Design Principles: Compositional, Symmetrical And Asymmetrical Balance — Smashing Magazine | Smashing Magazine
- The Golden Ratio — What it is and How to Use it in Design
- Sense of Beauty Partly Innate, Study Suggests | livescience.com
- How the Golden Ratio Manifests in Nature | Treehugger