Больше статей читайте в нашем блоге

Принцип доминанты в веб-дизайне. Зачем выделяться из толпы

Принцип доминанты в веб-дизайне

Дизайнеры не прекращают споры о том, какие веб-решения наиболее удобные и "продвинутые". Бизнес-сайты, имиджевые веб-проекты, новостные порталы и блоги не похожи друг на друга. Но для создания эффективного и гармоничного дизайна любого сайта необходимо учитывать удобство пользователей, использовать творческий подход и уделять внимание визуальной составляющей.

Основные принципы веб-дизайна это доминанта, точки фокуса, соподчинение и иерархия.

Что такое доминанта

Композиция любого изображения имеет смысловой центр, в котором завязывается главное действие и на основе которого возникают внутренние связи. Помимо него есть визуальный центр - с него начинается восприятие сайта пользователем. Часто эти два центра совпадают. Не воспринимайте буквально слово "центр", ведь теоретически внимание человека можно концентрировать на любой зоне экрана.

Примеры смыслового и визуального центров на картине.
Примеры смыслового и визуального центров на картине.

Яркая юбка красного цвета девушки слева - центр композиции, с которого взгляд зрителя начинает изучение картины. Это визуальный центр, но в этом случае он не является смысловым. Зритель начинает задумываться над смыслом картины, созерцая лицо женщины справа - именно оно является смысловым центром изображения.

Пример доминанты на веб-странице.
Пример доминанты на веб-странице.

Если вы сравните два элемента в дизайне, то они будут или полностью идентичны, или один будет доминировать. Доминанта сразу притягивает взгляд, обладает большим визуальным весом. Как мы говорили выше, доминация создается при изменении размера и цвета элемента. Также большое значение имеют форма, насыщенность, текстура, ориентация, глубина, объем. В идеале желательно размещать один доминирующий объект (логически и визуально), который становится главной точкой отсчета истории, которую вы будете рассказывать посетителю.

Еще один способ выделения объекта - применение эффекта визуального направления (визуальной подсказки). К примеру, можно окружить элемент направленными на него стрелками. Таким образом получится доминанта такого же размера, как и остальные объекты.

Две и больше - можно ли?

Не рекомендуется на сайте оставлять 2+ доминанты - они "открывают" спор за внимание к себе и нарушают баланс композиции. Не следует делать и один объект чрезмерно доминирующим, иначе он будет затмевать остальные элементы.

Хотя дизайнеры и художники иногда используют несколько смысловых центров. Это необходимо при простановке сложных связей и событий, равных по значимости. При этом смысловые группы должны четко отделяться друг от друга, в чем помогает "воздух" или свободное пространство на экране. Но вся композиция должна быть взаимосвязанной - она не должна "развалиться" на нелогичные части.

Принципы выделения доминанты

Про якорные точки мы рассказывали в этой статье. Поэтому доминанту разместите на одной из них. Она будет более заметна, если расположить ее по центру или в углу экрана.

Если расположить объекты там, где кажется красивым - возникнет неразбериха:

Место одной доминанты в центре на якорной точке (изображение слева). На рисунке справа взгляд пользователя будет рассеиваться.
Место одной доминанты в центре на якорной точке (изображение слева). На рисунке справа взгляд пользователя будет рассеиваться.

Вы можете увеличить размер объекта, и это является лучшим решением в процессе доминирования, так как посетитель сайта будет сначала изучать самый крупный элемент экрана.

Человек замечает быстрее яркие цвета на фоне бледных. Для акцентирования внимания используйте контрастные оттенки.

Пример цветового контраста.
Пример цветового контраста.
Доминанту справа выделяет только розовый цвет.
Доминанту справа выделяет только розовый цвет.

Чем меньшее количество объектов находится по соседству с доминантой - тем лучше.

Доминанта, окруженная свободным пространством.
Доминанта, окруженная свободным пространством.
Доминирующие объекты, окруженные "воздухом".
Доминирующие объекты, окруженные "воздухом".

Что использовать в качестве доминанты

Вт