Правила композиции в графическом и веб-дизайне

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

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

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

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

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

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

Цвет

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

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

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

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

Обязательно определите основной цвет и дополнительные. Установите для каждого из них роли. Один — для интерфейса, второй — для контента, третий — для кнопок и т.д.

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

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

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

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

Направление взгляда пользователя

Удачная композиция в дизайне позволяет управлять внимание человека и направлять его к нужным разделам. Здесь есть два вида композиции: Z-образная и F-образная. Считается, что именно по траектории этих букв обычно движется взгляд читателя или посетителя сайта.

В случае с Z — слева направо, затем по диагонали вниз и снова слева направо.

В случае с F — сначала вертикально сверху вниз, а затем слева направо вдоль строк.

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

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

Для направления внимания читателя в композиции можно использовать и более очевидные техники. Например, никто не отменил классическую “стрелочку”, которая переходит от одного раздела к другому и ведет за собой посетителя. Другой способ — нумерация блоков. Взгляд человека в первую очередь зацепится за пункт “1” и далее пойдет по списку.

Для этой же цели подойдут и иллюстрации. Например, фотография человека с вытянутой рукой, которая указывает на форму регистрации. Это упрощенный пример, но принцип понятен.

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

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

Суть его в следующем. Поделите экран с помощью двух вертикальных и двух горизонтальных линий на девять одинаковых частей. А теперь обратите внимание на места пересечения этих линий. Из правила третей следует, что именно в этих местах сфокусировано внимание зрителя/читателя.

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

При этом, если у вас на экране один объект, его лучше расположить в левой части экрана. Если объектов несколько, самый главный расположите в правой нижней части.

Свободное пространство

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

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