Композиция в веб-дизайне: что это такое, основные приемы и примеры работы с композицией в web-дизайне

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

Что такое композиция в веб-дизайне и зачем она нужна

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

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

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

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

Топ-10 правил композиции в веб-дизайне

Рассмотрим 10 основных приемов для создания композиции в веб-дизайне. Используйте их по одному или комбинируйте, чтобы получить нужный результат. 

Объединение объектов

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

Объединять элементы можно по принципу:

• близости — объекты расположены рядом друг с другом;
• подобия — объекты имеют одинаковые размер, форму и цвет;
• линейности — объекты находятся на одной линии.

Пример объединения объектов по принципу линейности в блоге Craftum

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

Центры композиции

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

По типу образования фокальные точки бывают двух видов:

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

• Композиционные. Могут быть созданы в любом месте на странице с помощью цветового или другого акцента, не всегда совпадают с геометрическими центрами.

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

Активные зоны

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

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

В веб-дизайне используют 3 способа расчета активных зон:

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

2. Принцип Иоганна Гутенберга. Это немецкий изобретатель, гравер и первый типограф Европы, внес огромный вклад в развитие книгопечатания. Он первым отметил, что при изучении книг и газет взгляд человека движется по Z-траектории. Это обусловлено нашей привычкой читать сверху вниз и слева направо. 

По Гутенбергу на странице можно выделить 4 активные зоны:

1. Левый верхний угол. Это самая сильная точка, именно с нее пользователь начинает изучать страницу. Здесь можно разместить УТП (уникальное торговое предложение) или другую важную информацию.
2. Правый верхний угол. Следующая на очереди точка, куда попадает взгляд посетителя. Это область с высоким потенциалом, сюда можно добавить контактную информацию, баннер, форму авторизации. 
3. Левый нижний угол. Далее взгляд попадает на третью точку, но, что интересно, надолго там не задерживается. Поэтому зону считают малозаметной, часто в ней прячут служебную информацию, которая должна быть на сайте, но не несет особой пользы для посетителя. 
4. Правый нижний угол. Это последняя точка внимания человека, ее также называют CTA-зоной. Здесь располагают кнопки действия (позвонить/купить/заказать). Считается, что к этому моменту человек уже изучил УТП и другие важные условия и готов к сделке. 

3. F-паттерн Нильсена. Якоб Нильсен — специалист в области интерфейсов и удобства пользования сайтами, автор книг по веб-дизайну. В 2006 году он проводил исследование движения взгляда пользователей при изучении страниц сайтов. Самые «горячие» зоны расположились в форме буквы «F», откуда и пошло название паттерна. 

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

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

Линии композиции

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

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

Горизонтальная прямая — создает ощущение равновесия, устойчивости и комфорта.

В рекламе зубной пасты Meswak можно увидеть горизонтальную прямую линию

Вертикальная прямая — показывает рост и развитие, или, наоборот, падение.

Вертикальная прямая линия в рекламе службы доставки FedEx

Плавные линии — показывают направление движения, делают дизайн более «мягким» и спокойным.

Плавные линии в рекламе чипсов Lays

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

Ломаные линии в рекламе зубной пасты Even Kids

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

Нисходящая (динамическая) — идет от левого верхнего угла к правому нижнему. Дает эффект ускорения и динамики.

В рекламе клининговой техники Tekna можно заметить нисходящую диагональ

Восходящая (статическая) — идет от правого верхнего угла к левому нижнему. Дает эффект замедления. 

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

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

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

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

Ритм

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

Существует три основных типа ритма:

• Регулярный. Элементы схожи по длине и размеру, а интервалы между ними предсказуемы. С помощью такого ритма можно создать статичный узор, который выглядит лаконично и дает ощущение стабильности. Чтобы немного «оживить» дизайн, достаточно добавить ярких цветов или контраста. 

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

• Прогрессирующий. Размер фигур и других объектов либо расстояние между ними последовательно меняется в большую или меньшую сторону. Возникает иллюзия движения, скорости, роста или падения. 

 

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

Баланс 

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

Виды баланса:

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

Пример симметричного баланса в логотипе Shell

• Асимметричный. Стороны имеют неравнозначный «вес», одна доминирует над другой. Это дает ощущение динамики и помогает визуально выделить нужный объект. Такой баланс можно увидеть в дизайне многих сайтов, где на одном экране размещена разная по степени важности информация.

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

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

Пример радиального баланса в логотипе Google Chrome

• Мозаичный. Объекты располагаются в виде плиточной или любой другой мозаики. Здесь нет иерархии и четкого фокуса, поэтому создается ощущение, что все элементы равны по значимости. Такой прием подходит для сайтов с галереями фотографий или видео. Один из примеров — главная страница Youtube. 

Мозаичный баланс в дизайне платформы Youtube

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

Цветовые сочетания

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

При выборе палитры для дизайна рекомендуется использовать золотое правило: «60 – 30 – 10», где 60% всего макета составляет основной цвет, 30% — поддерживающий или дополнительный, и 10% — это яркий акцент. Правило работает не только в вебе, но и в любом другом дизайне, будь то интерьер, одежда или рекламные буклеты. 

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

Для правильного подбора оттенков советуем пользоваться цветовым кругом Иттена. 

В нем все тона поделены на три типа:

• Комплементарные. Это цвета, расположенные друг напротив друга. Например, синий и оранжевый. Они создают резкий контраст и помогают выделить нужный объект. Однако если весь дизайн будет состоять только из них, это может выглядеть слишком ярко, броско и навязчиво. Поэтому часто их используют только для отдельных баннеров или CTA-кнопок.  
• Аналоговые. Это оттенки, которые стоят рядом друг с другом. Например, зеленый и светло-зеленый. Помогают создать спокойный и неброский дизайн, подойдут в качестве дополнения к основному цвету. 
• Триадические. Это оттенки, которые в равной степени удалены друг от друга на цветовом круге и делят его на три равные части. Например, красный, желтый, синий. Помогают создать яркий контраст, но при этом не делают дизайн «кричащим». Подойдут для выделения важных элементов. 

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

Негативное пространство

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

Чтобы легче организовывать объекты на макете и правильно рассчитывать отступы можно использовать модульные сетки. Они автоматически делят пространство на равные части и помогают структурировать контент. 

Иерархия

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

Пример иерархии контента в блоге конструктора Craftum

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

Для создания иерархии используют разные приемы: 

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

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

С правилами применения композиции мы закончили. Теперь перейдем к практике.

Работа с композицией в веб-дизайне

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

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

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

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

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

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

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

Примеры работы с композицией

На первом скриншоте показана часть главной страницы сайта Booking.com для бронирования отелей и домов в разных странах. 

Здесь мы видим сразу несколько приемов композиции:

1. Мозаичный баланс. С его помощью дизайнеры разместили равные по значимости объекты рядом друг с другом. 
2. Триадические цвета (желтый и синий) на баннере. Они достаточно яркие и контрастные для того, чтобы привлечь внимание, но при этом не раздражающие. 
3. Иерархия контента. Заголовки, подзаголовки и описания отелей выделены разным по размеру и начертанию шрифтом. Цвет ссылок отличается от основного текста.
4. Достаточное количество «воздуха». Дизайн не выглядит перегруженным и контент легко читается. Элементы выровнены по сетке и находятся на достаточном расстоянии друг от друга. 

На следующем скриншоте вы видите страницу регистрации/авторизации ВКонтакте.

Здесь заметны такие приемы, как:

• Z-паттерн. В зоне высокого потенциала находится форма авторизации, а в CTA-зоне — кнопка действия «Зарегистрироваться».
• Объединение объектов. Информация сгруппирована по блокам, которые выделены белым цветом на сером фоне. 
• Негативное пространство. На странице достаточно «воздуха», дизайн не перегружен элементами. 
• Иерархия. Контент разбит на блоки и выделен разным шрифтом. 

А теперь разберем первый экран главной страницы сайта Skillbox.

В глаза сразу бросается крупная надпись «Станьте востребованным специалистом». Она находится в самой сильной зоне Z-паттерна, вдобавок выделена цветом и крупным шрифтом. 

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

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

Заключение

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