Основы композиции в вебе

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

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

Композиция — закономерно устроенный организм, все части которого находятся в неразрывной связи и взаимозависимости. Характер этой связи и взаимозависимости определяется идейным замыслом художника. Конструктивная идея, свойственная природе замысла, дает практическую основу композиции. (Е. А. Кибрик)

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

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

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

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

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

Светотень — еще один декоративный элемент веб-дизайна, который позволяет задать объекту объем и глубину. Светотень — комбинация бликов и тени, которая накладывается на объект. Использование светотени необязательно, например, в плоском дизайне.

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

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

Это пространство может быть любого цвета, несмотря на то, что его условно называют «белым».

Негативное пространство = белое пространство = контрформа

Например, на странице студии Uprock «белое пространство» вовсе не белое, а черное.

Негативным пространством считаются и интервалы между буквами и строками в тексте.

Композиции в веб-дизайне разделяют на статические/динамические и симметричные/ассиметричные.

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

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

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

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

Равновесие

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

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

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

Таким образом, баланс и равновесие композиции достигается через гармоничное распределение объектов или элементов на веб-странице.

Единство

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

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

Иерархия

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

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

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

Самыми популярными приемами составления композиции можно назвать:

Каждый из предложенных приемов — это не непреложное правило, а лишь рекомендации, которые вы можете адаптировать под конкретный проект.

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

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

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

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

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

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

Золотое сечение, известное также как золотая или божественная пропорция — это соотношение частей и целого друг к другу, которое равно 1,618. Если говорить о процентном соотношении, то части целого соотносятся друг с другом и с целым как 62% относятся к 38%.

О золотой пропорции знали в Древнем Египте, Древней Греции и на Руси. В разное время изучением золотой пропорции занимались Евклид, Архимед, Лука Пачоли, Иоганн Кеплер, Леонардо да Винчи, Адольф Цейзинг, Эдуард Сороко.

Золотое сечение напрямую связано с понятием золотой спирали, или спиралью Фибоначчи, коэффициент роста которой равен 1,618, то есть золотому сечению.

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

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

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

Композиционная схема Z

Данная композиционная схема основана на диаграмме Гутенберга, которая показывает, что пользователи просматривают контент на странице слева направо и сверху вниз, образуя букву Z.

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

Данная композиционная схема больше актуальна для тех страниц, наполнение которых преимущественно визуальное, а не текстовое.

Композиционная схема Z часто используется для размещения кнопки CTA (от англ. call to action — призыв к действию).

Композиционная схема F

Данный паттерн чаще всего используют на страницах, где сосредоточено большое количество текстовой информации и малое количество графики. Проектирование композиции по F-паттерну — это классическая схема расположения элементов, которая позволяет пользователям быстро сканировать текст на странице сайта. Название данного паттерна «F» часто расшифровывают как fast — быстрый.

Гештальт-принципы

Над разработкой гештальт-теории, которая объясняет закономерности и особенности восприятия человеком визуальной информации, трудились сразу несколько ученых: Макс Вертгеймер, Вольфганг Келер и Курт Коффка. Гештальт-теория нашла свое применение не только в визуальном искусстве, но и стала основой для развития такой научной дисциплины как гештальт-терапия — одного из направлений психотерапии.

Говоря о гештальт-принципах в контексте построения композиции в вебе, стоит выделить три самых известных из них:

Принцип «Появление».

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

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

Принцип «Близость».

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

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

Принцип «Схожесть».

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

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

Сетки в веб-дизайне

Одним из важнейших инструментов построения композиции на сайте является сетка.

Сетки используют как в UX/UI-дизайне, так и в графическом дизайне. Они позволяют гармонично расположить элементы на странице/макете.

Вот так сетку можно использовать в качестве основы для композиции в полиграфии:

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

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

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

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

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