Композиция легко

Часто, когда заходит речь об этой теме, вспоминают пресловутое золотое сечение и правило третей — но для дизайн‑задач они далеко не полезны. Давайте разберемся, почему.

Устаревшие схемы

Золотое сечение придумали еще в античности, это соотношение встречается и в математике, и в искусстве, и в природе. А термин «правило третей» впервые появился в 1797 году — в книге Джона Томаса Смита «Замечания о сельской местности и пейзажной живописи».

Композиция легко, image #1

Золотое сечение

Композиция легко, image #2

Правило третей

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

Композиция легко, image #3

Пример технических требований и слепых зон

Как жить в моменте?

Две главные вещи: размер и «не соприкосновение»

Первое: пусть объекты будут разного размера — хотя бы чуть-чуть. Декора тоже в меру: максимум три элемента, иначе макет начнет шуметь. Если сделать все одинаковым, взгляд перестанет «ехать» по композиции, и динамика развалится.

Композиция легко, image #4

Плохой пример слева

Второе: не ставьте элементы вплотную край к краю границ элементов. Проведите между ними мысленные направляющие — и станет видно, что у каждого своя линия и свое место, никто не стоит на границе с соседом.

Композиция легко, image #5

Плохой пример слева

Композиция легко, image #6

Все хорошо, границы объектов не соприкасаются

Примеры хороших композиций в макетах

Композиция легко, image #7

Сетки

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

Композиция легко, image #8

Плохой пример слева

Композиция легко, image #9

Модульная сетка для текста

Источник

213 views·28 shares