Доминанта в композиции

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

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

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

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

Доминанта создает визуальную иерархию в дизайне, что помогает пользователям различать главную и второстепенную информацию. Она определяет, на чем следует сосредоточить внимание в первую очередь. Можно добавить субдоминанту, которая укажет пользователю, куда обратить взгляд дальше.

Доминанта в дизайне способствует формированию фокусной точки или центрального элемента, который первым привлекает внимание людей.

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

Сначала вам нужно решить, что будет являться доминантой. Главным элементом может быть изображение (одно или несколько), коллаж, обтравки. Также можно использовать различные элементы, включающие текст, фотографию, иллюстрацию или 3D-графику. Практически любой компонент может стать центром внимания. Например, это может быть логотип компании или слоган.

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

Как правило, мы способны воспринимать три уровня доминирования. Сначала мы обращаем внимание на наиболее выделяющийся элемент, затем на менее выделяющийся элемент и затем — на все остальное. Эти уровни должны хорошо отличаться друг от друга, чтобы мы могли их воспринимать. Если будет создано слишком много уровней, могут возникнуть «серые поля», в результате чего ваши акценты будут неясными для пользователей. Кроме того, обилие акцентов может создать дополнительную когнитивную нагрузку, что уменьшит легкость использования вашего интерфейса.

Три уровня доминирования:

Визуальная иерархия

Уровни доминирования помогают выстроить визуальную иерархию в дизайне. В идеале эта визуальная иерархия должна соответствовать концептуальной иерархии контента.

Сначала определите приоритетность контента, а затем продумайте визуальную иерархию, опираясь на эти приоритеты. Удобнее всего это сделать в соответствии с уровнями доминирования. Если логотип компании более значим, чем слоган, то он должен быть выделен визуально. Верхняя часть иерархии (доминирующий элемент) должна помочь ответить на возникающие у пользователей вопросы сразу после перехода на страницу. В течение нескольких секунд пользователь должен понять ключевые моменты и основную мысль страницы. Этого можно достичь, если наиболее важную информацию сделать визуально заметной.

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

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

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

Для создания доминанты необходимо придать ей визуальный вес. Сделать это можно при помощи разных способов:

1. Расположение

Избегайте размещения большей части доминанты на краях и границах макета, так как это отвлекает внимание от нее и переносит его на второстепенный контент. Мы привыкли, что элемент, расположенный в центре, имеет больший вес, но это не так. Центр макета, вертикальные и горизонтальные оси, проходящие через центр, являются слабыми местами для акцентов и главных объектов. Лучше располагать элементы, немного отклоняясь от центра. Так наше зрение будет стремиться удержать в фокусе объект, который выходит за край листа.

Соблюдайте баланс: не слишком близко к краю и не на пересечении вертикали и горизонтали в центре.

2. Размер

Для того чтобы доминанта была заметна и привлекала внимание, нужно, чтобы она занимала не менее 30% общей площади макета. Это значение является средним. Оно не универсально, так как конкретные пропорции определяются индивидуально. Иногда доминанты могут занимать до 75% пространства макета. Помните: не стоит создавать множество объектов одного веса. Обычно, они привлекают меньше внимания, чем один, но тяжелый элемент. Если ваш макет не является каталогом, где нужно показать весь ассортимент товаров, лучше выбрать одну доминанту.

3. Цвет

Разные цвета мы воспринимаем по-разному, например, теплые тона визуально тяжелее, чем холодные. Чтобы обратить внимание пользователя на объект, добавьте желтого, оранжевого или красного. Для фона используйте голубые, синие, фиолетовые цвета. Такое соотношение — холодный фон и теплый предмет, является наиболее комфортным для нашего зрения. Если вы помещаете элементы холодных тонов на теплом фоне, они теряются. Ранжирование цветов по весу: Красный (самый тяжелый), Голубой, Зеленый, Оранжевый, Желтый (самый легкий).

4. Контраст

Визуальный вес объекту можно добавить при помощи контраста. Нужно сделать главный элемент наиболее контрастным по отношению к остальным. Для более спокойного дизайна используйте низкую контрастность между темными и светлыми тонами.

Важно! Не располагайте темные объекты в верхней части макета, они будут давить на нижнюю часть листа.

5. Текстура

Элементы с текстурой или с 3D-эффектом визуально весят больше. Так вы можете выделить объект среди одинаковых. При этом не стоит увлекаться детализацией и добавлением текстуры на фоне — доминанта может затеряться среди второстепенных объектов.

6. Физический вес объекта

Реальный образ объектов мы переносим и в виртуальную жизнь — так работает наша психика. Поэтому даже нарисованная гиря будет восприниматься тяжелее пуха. Кроме этого, еще в дизайне работает закон гравитации (тяжелые предметы стремятся к нижнему краю макета).

7. Пространство

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

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

Daniel Roth

Сайт, созданный для перезапуска бренда часов Daniel Roth.

Доминанта — изображение новой модели часов, которое занимает почти все пространство страницы. Изображение темнее, чем фон и выделено контрастом.

Субдоминанта — название новой модели  ”Tourbillon Souscription” выделяется за счет контраста и расположения по всей длине страницы.

Подчиненные элементы — название бренда, навигационное меню и кнопка для контактов.

T-cup

Сайт нового продукта — однокомпонентный стаканчик со встроенной чайной мембраной для контроля крепости напитка в одноразовом бумажном стаканчике.

Доминанта — изображение упаковки стаканчика (она меняется в соответствии со вкусами). Расположена в центре, детализирована, реалистична.

Субдоминанта — название вкуса. Оно выполнено контрастно по отношению к фону. К тому же расположено в центре и привлекает внимание.

Подчиненные элементы — описание вкуса и состав чая.

Fabric

Компания по инвестированию проектов, связанных с Web 3.

Доминанта — 3D-объект красного цвета. Выделяется за счет контрастности по отношению к фону, яркого цвета и теплого оттенка. Помним, что красный — самый визуально тяжелый цвет. Этот элемент динамичный, он двигается и привлекает на себя внимание в статичном пространстве.

Субдоминанта — название компании. Оно лаконично, контрастно по отношению к фону и занимает всю длину страницы. Расположение этого объекта внизу добавляет визуальный вес.

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

History of Italian Food

Сайт, посвященный итальянской кухне.

Доминанта — заголовок страницы. Расположение в центре, в верхней части страницы и контрастный цвет по отношению к фону акцентируют внимание на тексте.

Субдоминанта — коллаж из фотографий и изображений. Взгляд героев, прямо устремленный на пользователя, притягивает внимание. Детализация и обилие элементов в коллаже добавляют визуальный вес.

Подчиненные элементы — навигационное меню.

Доминанта — важная часть дизайна.

Грамотно продуманные уровни доминирования позволяют структурировать информацию и помогают пользователю ориентироваться на сайте, делая посещение удобным. Помните: лучше соблюдать принцип одной доминанты в макете, чтобы все остальные объекты не потерялись на ее фоне. Соблюдайте баланс, ориентируясь на контент, который вы размещаете. И творите!