Композиция в дизайне

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

Расположение элементов строится от краёв макета, на котором они находятся. Например, можно расположить объекты по его углам. В дизайне мы всегда используем понятия «правый или левый угол», «центр».

Композиция — это визуальная иерархия, акценты, порядок и правила взаимодействия между этими объектами. Например, слайд презентации: заголовок, текст, изображение. Всё это можно расположить десятками способов. И каждый раз получить разные акцент и ощущение. То же самое с сайтом, брошюрой или даже с 3D. Это всё про расположение объектов, их отношения между собой, вес и взаимодействие. Принципы одни и те же, просто среда разная.

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

Если я делаю фотографию, то неосознанно использую правило третей. То есть я делю пространство на девять частей и располагаю объекты на пересечении линий. В этот момент я не думаю о применении правила. Это происходит автоматически.

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

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

Я никогда не заучивал правила. Это всегда работало в связке с практикой.

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

У меня есть лайфхак. Когда читаю теорию, я сразу планирую, где буду её применять. Так лучше запоминается, и появляется системность в работе.

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

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

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

Дальше в работу идут референсы. Лишнее отсеивается и остаётся то, что попадает в задачу. И уже на основе референсов стоит использовать подходящие композиции. В одних случаях информация подстраивается под композицию, в других — наоборот. Если вы новичок, то работайте с хорошими референсами.

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

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

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

Здесь важно не смешивать понятия. Композиция строится за счёт формы, размеров и контраста. Она может одинаково хорошо работать и в чёрно-белых оттенках, и в цветных.

Но цвета имеют разный визуальный вес. Тёмные массивнее, а светлые легче. Например, тёмно-синий элемент на белом фоне будет притягивать внимание сильнее, чем жёлтый. Но если жёлтый объект один, то он всё равно станет акцентом.

Есть устоявшиеся цветовые ассоциации:

• синий — надёжность,
• зелёный — спокойствие,
• жёлтый — радость,
• красный — тревога.

Могу рассказать, как я изучал композицию. Я учился в художке, делал сайты на курсах и много смотрел референсы. Основное обучение было через практику, статьи в интернете, Medium и дизайнерские ресурсы. У меня был формат: учил правило и смотрел примеры. Я бы даже не сказал, что я специально учил композицию. Я просто постепенно набирал арсенал приёмов.

Могу посоветовать книги, которые дают инструменты для работы с композицией:

• Йозеф Мюллер-Брокман «Модульные системы»,
• Ян Чихольд «Облик книги».

Поначалу лучше перерисовать готовые композиции. Например, можно написать в Pinterest «modern ui design» и выбрать понравившиеся примеры. Но желательно рисовать непохожие композиции, чтобы разнообразить свой опыт. Так получится эффективное обучение.

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

У меня нет примера «идеальной композиции», потому что я не хочу переоценивать её значение. Она важна, но это всего лишь один кирпичик хорошего дизайн-решения. Если композиция хороша, обычно и всё остальное выглядит круто. Чтобы композиция прямо бросалась в глаза, остальные элементы должны быть плохими. А это уже не лучший кейс.

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

1. Соответствует ли результат задаче? Надо смотреть на цель: решена она или нет.
2. Есть ли визуальная иерархия? Должно быть сразу понятно, что главное, а что второстепенное. Особенно важны первые три уровня иерархии: первичное, вторичное и менее важное.
3. Соблюдена ли базовая гигиена? Нужно, чтобы ничего не съехало. Элементы должны стоять на осях, отступах и модулях, которые задуманы. У объектов должна соблюдаться логика отступов. Они должны быть либо одинаковые, либо явно разные. Разница 3−5% выглядит как ошибка.
4. Нет ли ложных связей? Проверяйте, не связываются ли визуально элементы, которые не должны быть связаны.
5. Нет ли композиционного напряжения? Избегайте, когда элементы стоят «почти близко» или «почти пересекается». Либо близко, либо далеко.