Композиция в дизайне. Баланс.
Статье о Балансе, золотом сечение и расположение элементов.
Композиция - это организация элементов в пространстве, гармонично взаимодействующих друг с другом. Грамотно выстроенная композиция управляет вниманием зрителя и выглядит убедительно, в ней элементы поддерживают и уравновешивают друг друга. Принципы композиции применяются во всех видах изобразительного искусства, таких как фотография, архитектура, живопись, дизайн и т. д. В этой статье мы рассмотрим баланс, один из основных принципов композиции, и покажем примеры дизайна, где грамотно применяется данный принцип.
Итак, для начала выделим 2 вида баланса: симметричный и асимметричный.
С первым все довольно просто, мы можем легко распознать его, если разделим пространство пополам и обнаружим, что обе части являются зеркальным отражением друг друга. Такая композиция олицетворяет стабильность, монументальность и устойчивость.
Рассмотрим примеры симметричной композиции:
С асимметричной композицией все намного сложнее, она требует от нас большего анализа, так как для того, чтобы грамотно ее выстроить и не превратить все в хаос, нам нужно придерживаться некоторых правил. Самое главное, что нужно помнить, - композиция не должна заваливаться в одну из сторон, элементы в ней должны уравновешивать друг друга, для этого нам нужно помнить о весе элементов.
Вес элемента зависит от нескольких факторов:
- Размер: на картинке мы видим, как можно уравновесить элементы, меняя их размер или количество
- Форма: объекты, имеющие разную форму, но одинаковые по высоте и ширине, могут иметь разный вес, поэтому форму важно учитывать и выравнивать баланс на глаз
- Цвет: важно учитывать цвета объектов, чем больше контраст, тем больше вес
- Тон (светотень): более тусклые по тону объекты казаться меньшие по размеру и весу
Также важно знать приемы, делающие нашу композицию более выразительной и помогающие управлять вниманием пользователя:
- Правило третей или золотое сечение
- F- и Z-паттерны
- Якорные точки или привязки к сторонам фрейма
- Направляющие
- Негативное пространство
Поговорим подробнее о каждом приеме:
1. Золотое сечение и правило третей. Эти схемы часто используют фотографы, чтобы гармонично расположить объекты на фотографии, но их также можно использовать и в дизайне. Композицию обычно не подгоняют под эту сетку, чаще это делается на глаз. Наверное каждый из нас хотя бы раз сталкивался с этими схемами, посмотрим, как это может выглядеть в дизайне.
Золотое сечение
Правило третей
2. F-паттерн и Z-паттерн - это 2 распространенные траектории, по которым скользит взгляд пользователя, когда он бегло изучает информацию. На этих примерах мы можем видеть, как данные паттерны помогают расположить контент на странице:
3. Чтобы уравновесить композицию, а также связать контент со средой и сделать его более удобным для восприятия, можно расположить его по якорным точкам или по привязкам к сторонам фрейма, на примерах можно хорошо разглядеть этот прием:
Якорные точки для поддержания формы фрейма
4. Мы можем использовать направляющие или указатели, чтобы помочь пользователю обратить внимание на важную информацию, но важно делать это аккуратно, чтобы избежать визуального мусора:
В данном постере руки являются указателями и направляют взгляд пользователя на заголовок
5. Негативное пространство - это пустое пространство вокруг главного объекта, оно создает контраст и добавляет воздуха в композицию, что позволяет усилить акцент на нужном объекте и сделать картинку визуально приятнее и понятнее, убрав шум:
Теперь, зная основные принципы и правила, мы можем разобрать два примера удачного дизайна:
В этом примере правая часть чуть меньше левой, но при этом композиция не заваливается влево, так как правая часть окрашена в красный контрастный цвет, что добавляет ей веса, а первая имеет больше негативного пространства, поэтому выглядит достаточно легкой, чтобы не перевешивать.
Тут применены примерно те же правила, что и в примере выше, правая часть занимает меньше места, но имеет больший вес за счет тона, который добавляет ей контраста. Левая часть состоит из двух блоков, в одном (2) мы видим 3 плашки, между которыми есть немного воздуха, который не мешает нам воспринимать их как одно целое, а в другом (3) размещен текст и несколько элементов, заполняющих пустое пространство. Правая и левая части уравновешивают друг друга, поэтому композиция выглядит убедительно.
Итак, мы разобрали основыне принципы композиции, которые помогут вам гармонично располагать эелементы в дизайне так, чтобы они “дружили” друг с другом и помогали пользователю правильно считывать информацию. Однако, важно помнить о негативном пространстве, оставлять воздух в композиции и не пытаться использовать все правила разом, чтобы избежать хаоса.
Узнайте больше
Контакты
