Что такое композиция
Композиция — это грамотно организованное пространство, где все элементы смотрятся целостно, гармонично взаимодействуют друг с другом и с пользователем.
Почему важно соблюсти композицию в дизайне сайта
Наш мозг привык моментально считывать информацию, поэтому важно преподнести ее правильно, удобно. Хорошо выстроенная логическая компоновка элементов приятна для восприятия, а также помогает вести взгляд пользователя в нужном направлении и качественно с ним взаимодействовать.
Принципы и правила композиции в веб дизайне
Как грамотно выстроить композицию на сайте? На что обратить внимание? Рассмотрим важные составляющие успешной реализации дизайна.
Точка фокусировки (якорные объекты)
У любого сайта есть цель. Какой бы она ни была: рассказать историю, продать, получить заявку — важно правильно сформировать фокус внимания.
За счет привлечения взгляда к конкретному объекту мы как бы управляем поведением посетителя и ведем его в нужном нам направлении.
Необходимо выбрать точку фокусировки — куда в первую очередь должен посмотреть пользователь, и сделать ее максимально заметной. Важно среди нескольких одинаковых элементов решить, какой главный, а какой второстепенный.
Например у вас две кнопки на экране. Если они одинаково яркие и не отличаются друг от друга — GAME OVER. Пользователь просто не поймет, какое основное целевое действие, а какое альтернативное, поэтому 50/50 пойдет не туда, куда вам важно его направить.
Определите главную кнопку и второстепенную. Выделите главную так, чтобы сначала хотелось нажать именно ее.
Точка фокуса не обязательно должна быть одна. Их может быть две или несколько. Тогда одна из них будет главная, и будет иметь больший вес, остальные — второстепенные.
Направление взгляда
При построении композиции UI-дизайнерами используются два паттерна направления взгляда пользователя: Z и F-образные.
При Z-образной композиции человек считывает информацию слева направо и по диагонали, по траектории одноименной буквы.
При F-образной композиции сначала считывается левая сторона вертикально, потом по горизонтали, причем верхние элементы запоминаются хорошо, а нижние уже не так значимы.
Большая часть населения мира в спешке считывает только ключевую информацию, не изучая всё досконально. Вспомните себя: вы берёте статью, читаете, сканируете взглядом. Как это происходит? Вы в первую очередь обращаете внимание на заголовки. Если заголовок зацепил, начинаете читать текст детальнее. Если заголовок не зацепил — вы перескакиваете к следующему, экономя время и «оперативную память».
Ключевая идея F-паттерна состоит именно в этом. Проведя тысячи исследований, построений тепловых карт, стало однозначно понятно, что человек сканирует страницу сверху вниз слева направо. Это связано с тем, что в большинстве стран мира люди пишут и читают любой текст сверху вниз слева направо, нам привычен такой паттерн. Если размещать контент в несколько колонок, при этом в левой колонке будут заголовки, ключевые тезисы или важные функциональные элементы (например, навигация, фильтрация) — можно существенно упростить жизнь пользователю и повысить удобство ресурса.
При всём при этом нельзя ответить на вопрос, какой паттерн лучше использовать — это не имеет смысла. Нужно использовать тот, который подходит лучше в каждом конкретном случае. Как правило страница сайта автоматически, без глубинных размышлений дизайнера, целиком выстраивается без лишних усилий по F-паттерну, а Z-паттерн применяется в рамках конкретных блоков на сайте.
Зная паттерны поведения пользователей можно не только сделать страницу удобной, красивой, читаемой, но и изменить поведение пользователя в рамках 1 блока, части этого блока и просто в каком-то объекте дизайна.
Паттерны помогают расположить контент таким образом, чтобы последовательно провести посетителя сайта по нужной вам траектории, акцентируя его внимание на важной информации.
Контрасты
Цвет играет важную роль в построении композиции. Именно он влияет на то, какое впечатление произведет ваш сайт на пользователя. Яркие смелые решения вызывают эмоции радости, драйва, позитива. Комплиментарные монохромные тона (один цвет в разных своих оттенках, например, светло-синий, темно-синий, грязно-синий, выбеленный синий) — спокойствие и умиротворение. Подбирая разные комбинации, UI-дизайнер управляет вниманием пользователя на сайте, привлекает взгляд к акцентным точкам, а также закладывает определенную эмоцию или настроение.
Применяйте контраст грамотно. Там, где нужно привлечь внимание, например: на блок, форму, кнопку — использование акцентного контрастного цвета или естественного контраста объекта по отношению к фону отлично справится с задачей. И наоборот, в менее важных блоках тона можно приглушить, цветные акценты с элементов убрать.
Модульная сетка
При построении композиции нельзя пренебрегать принципами выравнивания. Упорядоченный контент хорошо выглядит, структурирован, вызывает положительные эмоции и попросту удобен. Хоть и не всегда у нас дома чисто, мы все любим порядок, когда каждый объект на своём месте, книжки стоят по полочкам, ничего не валяется на полу, телевизор стоит по центру относительно кровати, а не смещен на 2 метра и прочее. С контентом на сайте также.
В модульной схеме все элементы имеют свое место, аккуратно располагаются по сетке, имеют систему отступов, иерархию. Визуальная иерархия выстраивается за счёт правильного и логичного распределения веса объектов, то есть с помощью размера, цвета, жирности, формы. Например, читая текст, мы на интуитивном уровне понимаем, где заголовок, подзаголовок, а где просто текст, потому что между ними выстроена иерархия по размеру и жирности. Информация становится упорядоченной, понятной пользователю.
Правило третей
Базовая основа построения композиции — правило третей. Разделите экран на девять равных частей при помощи двух вертикальных и двух горизонтальных линий. Точки пересечения этих линий — это те позиции, в которых фокусируется взгляд в первую очередь. Считается, что самые важные элементы необходимо располагать именно в этих зонах, либо по периметру линий.
Важно знать меру! Используйте не все точки сразу. Достаточно одной или двух. Иначе взгляд пользователя разбежится по странице и эффект будет обратным, сопоставимым с только что раскрытой газетой.
Негативное пространство
Наведите порядок, избавьтесь от хлама :)))
Чем чище макет, чем больше свободного пространства вокруг элементов, тем легче считывать информацию и фокусироваться на важном. Прочь лишние иконки, цветочки, картинки.
Негативное пространство, а проще, свободный фон или воздух — один из главных приёмов, и даже своего рода трендов в современном веб-дизайне. Не бойтесь его использовать! Если информации много, разбейте ее на несколько блоков, структурируйте.
Статическая и динамическая композиция
Статическая композиция подразумевает покой, спокойствие, баланс, в то время, как динамическая — движение.
В статической композиции все предельно просто: всё внимание вокруг главного элемента, ничего не мешает, не отвлекает от него.
С динамической композицией сложнее — здесь важно не переусердствовать и выстроить правильную иерархию контента, чтобы логически подвести пользователя к основному действию.
Обсудить проект →
Визуальная иерархия
Определитесь с тем, какие элементы дизайна наиболее важны и на каких стоит сделать акцент.
Выделить важное на сайте можно при помощи нескольких приёмов, о некоторых вы уже прочитали выше:
- Цвет;
- Размер;
- Необычная форма;
- Пустое пространство вокруг.
То есть, чтобы выстроить композицию, в которой информация быстро и непринужденно считывается юзером, самый важный заголовок должен быть написан самым крупным шрифтом, второстепенный — шрифтом поменьше, наборный текст — еще более мелким. Главная кнопка целевого действия — должна быть акцентной (например, цветной), кнопка второстепенного действия — прозрачной и т. д.
Также здесь помогут знания правила третей. Самую важную информацию логично разместить в верхнем левом секторе. Далее ведите пользователя к цели последовательно. Здесь пригодятся знания маркетинговой схемы AIDA.
Важно при этом соблюдать правило внешнего и внутреннего. Все элементы должны собираться в группы и группы внутри групп. При этом отступы внутренние не должны превышать внешние. В каждой внутренней вложенной группе отступ меньше или равен внешней группе.
Баланс
Определить, как правильно сбалансировать макет очень сложно. Здесь нет четких правил. Необходимо тренировать насмотренность.
Как понять, нужно ли, например, добавить в правую часть блока картинку, если слева текст, тем самым сбалансировать композицию или это фишка пустого пространства и стилистика минимализма? Где это нужно, а где лишнее? Важна идея, точное понимание стиля и композиции данного проекта.
Со временем будет легче отличить необходимое пустое пространство от некачественной сетки и ощущения съехавшего контента.
Баланс необходимо выстраивать не только в блоке, но и в целом на странице сайта. Неверно собрать контент в одном блоке страницы и оставить пустыми остальные.
Есть два вида баланса: симметричный и ассиметричный.
Симметричный баланс
Баланс в макете достигается за счет симметрии элементов — контент располагается симметрично по схеме лево-право, верх-низ.
Асимметричный баланс
Асимметричный баланс требует более тщательной проработки. Элементы уже имеют позицию и вес неравный друг другу, но расположить их нужно с умом, так, чтобы они уравновешивали друг друга. Например: коллаж из фото справа может быть сбалансирован крупным заголовком слева. Или за блоком с явным перевесом влево, может следовать блок с перевесом вправо.
Хотите научиться создавать гармоничные сайты? Оставьте заявку на предзапись на курс Pro Web →
Принцип сочетаемости
При создании гармоничной композиции на сайте важно использовать сочетаемые элементы. Это как пазл: множество элементов, которые идеально подходят друг к другу, складываются в единую картинку, логичную и понятную.
Вот основные моменты, на которые стоит обратить внимание:
Изображения
Фотографии необходимо подбирать из одной фотосессии, либо с одинаковой обработкой. Это создаст целостную атмосферу на сайте.
Иконки из одного набора
Иконки должны сочетаться между собой, быть в одной палитре, одинакового размера, с одинаковой толщиной линий. Идеально, если они из одного набора, сочетаются визуально и по тематике. Если не получается подобрать иконки в одном наборе, то необходимо искать максимально подобную или вовсе отрисовать их под задачу.
Пример хорошего подбора иконок на сайте:
Пример плохого подбора иконок на сайте :
Шрифты и начертания
В заголовках, а также в остальном тексте на сайте должны быть выдержаны единые размеры, начертание, жирность, одинаковый выбор шрифта. Н-заголовки одного уровня должны быть одного размера, наборный текст — одного размера, меньшего чем заголовки и т. д. Так сайт аккуратно выглядит с точки зрения верстки, а также правильно с точки зрения SEO и UI-дизайна.
Формы
Геометрические формы играют важную роль в создании единого стиля оформления сайта. Помимо того, что формы должны быть в одной стилистике, они также должны соответствовать нише, передавать правильные ассоциации. Например, странно будет выглядеть сайт в нише производства гидравлического оборудования с прямоугольными строгими линиями в кнопках и плашках, но при этом скругленными углами на изображениях :))
Декор
Декор должен быть уместен на сайте, не перегружать макет и быть в единой стилистике с общим оформлением. Например, плохо будет смотреться сайт с иллюстрациями, прорисованными тонкими линиями и с декором в виде фотографий каких-нибудь листиков, звездочек на фоне.
Единая стилистика ведущих и фоновых элементов
Этот пункт вытекает из предыдущего. Если у вас сайт с иллюстрациями и прорисовкой в тонких плавных линиях, то логично, что и элементы фонового декора должны быть по тематике, округлые, плавные, тонкие, легкие.
Если сайт для серьезной компании нефтегазовой промышленности, то ни о каких плавных линиях речи быть не может, как и о скругленных фотографиях и прочих милых штучках))
Повторения и ритм
Какой бы классный и оригинальный не был дизайн, важно, чтобы он создавал впечатление целостности. Особенно это касается крупных сайтов с большим объемом информации.
Однообразные блоки быстро наскучат пользователю, и, скорее всего, он покинет страницу. Разношерстные и несочетающиеся между собой блоки и страницы также отпугивают, из-за чего пользователь теряет фокус, не сосредоточен, не настроен на то, чтобы прочитать информацию, которую вы даёте. Это нервирует пользователя, тратит его время, силы, снижает покупательскую способность.
Необходимо создать ритм, эффект повторения. Это могут быть контрастные блоки, которые сменяют друг друга, или повторяющаяся периодически структура блока. Если подряд идет много блоков с текстовой информацией, то целесообразно периодически разбавлять их сбивкой — блоком с изображением, или видео, или цитатой, который позволяет отвлечься от монотонности контента.
Также единому ритму должна соответствовать анимация на сайте. Пользователь, при попадании на страницу, улавливает настроение, передаваемое дизайном, привыкает к подаче информации. И, скорее всего, у него будет шок, если на одной из страниц аккуратного минималистичного сайта, вдруг резко начнут вылетать элементы со всех сторон или поменяется в корне стилистика оформления.
Типографика
Знания основ типографики обязательны при создании качественного дизайна.
Важно разбираться в выборе шрифта, его начертании, размере, грамотно выставить интерлиньяж.
Понимание основ типографики даёт возможность создавать такую композицию, которая удобна, красива, сбалансирована, не содержит нарушений в иерархии, легко читаема.
Выбор шрифта
Шрифты делятся на 2 макро-группы: Антиква — с засечками, Гротеск — без засечек.
Дизайнер должен уметь правильно подбирать шрифт для той или иной задачи, а также грамотно сочетать шрифтовые пары.
Например, если мы работаем с проектом для банка и нам нужно передать ассоциацию доверия, надежности, истории. В таком случае антиква может отлично смотреться.
А для проекта студии дизайна интерьеров, работающих в последних трендах, подойдёт современный, технологичный, геометрический шрифт.
Подобранные шрифтовые пары должны быть либо максимально похожи друг на друга, либо кардинально различаться.
Начертание
В веб-дизайне используются следующие виды начертаний:
- Regular (Обычный) — прямое начертание символов;
- Bold (Жирный) — увеличенная толщина символов;
- Italic (Курсив) — наклонный вид символов;
И другие, а также их комбинации, например Bold Italic.
Необходимо правильно комбинировать начертания шрифтов, а также правильно подбирать нужный вид начертания в зависимости от тематики сайта.
Например Italic может хорошо выглядеть в нише спортивных товаров или в бьюти-сфере, придавая драйва и эффекта движения, но точно не подойдет для тематики дизайна интерьеров или нефтегазовой промышленности, где будет вызывать ассоциации агрессии и неуместной динамики.
Интерлиньяж
Интерлиньяж — это расстояние между базовыми линиями строк. (На схеме показан голубым цветом). Оптимальный размер обычно равен или чуть больше высоты строки.
Слишком маленький интерлиньяж смотрится зажато, слишком большой — наоборот размашисто, из-за чего текст становится труднее читать.
Рекомендуемые соотношения:
Очень трудно дочитать материал до конца, если допущены ошибки:
— Не понятно, где заголовок, а где текст;
— Какая вообще иерархия, что к чему относится;
— Текст слишком длинный, слишком короткий, слишком крупный, супермелкий;
— Выбран нечитаемый рукописный шрифт из Краснодарских открыток для всего текста;
— Текст написан тем же цветом что и фон;
— Цвет текста не сочетается с фоном или выжигает сетчатку.
Типографика — это 50% успеха при создании дизайна, и ей нужно уделить максимально много времени.
Проверка дизайна по Гештальт-принципам
Гештальт — дословно: единое целое. То, как мы воспринимаем картину в целом.
Основной посыл в том, что целое отличается от единичных составляющих.
Основные принципы гештальта: сходство, завершенность, непрерывность, фигура-фон.
Каждый элемент дизайна имеет свою функцию, задачу, ценность. Но дизайн в целом — это не просто совокупность составляющих его элементов, а нечто большее, новое, уникальное. У него, как у целостной единицы, появляются свои свойства, он способен решать более глобальные задачи.
Если сайт построен логично, удобно, предсказуемо, то это как бы усыпляет бдительность пользователя, впечатлившегося общей композицией. Он перестаёт думать и просто плывет по течению. Поэтому хорошие лендинги работают: пользователь вкручивается и в какой-то момент, ему кажется, что это он сам дошел до решения о покупке. На самом же деле это мы продумали так, чтобы на каждом этапе решить его проблему и закрыть возражения, чтобы как будто он сам взвесил все за и против, оценил перспективы. Это псевдовыбор.
Задача дизайнера — управлять вниманием пользователя и вести его по нужному пути. Чем больше логики в сайте — тем меньше логики и раздумий требуется от пользователя. И наоборот, если сайт убогий и нелогичный, с одинаковыми по цвету кнопками, с неправильно расположенными блоками, с неверной иерархией и т. д. — мозг цепляется за каждую неровность, каждый раз сигналит, что что-то не так, заставляет вчитываться внимательнее и рассуждать логически, находить нестыковки — отсюда сомнения, недоверие, и как следствие, брошенная корзина.
По этому при помощи дизайна, грамотно выстроенной структуры и композиции можно повлиять на решение и поведение пользователя.
Итоги: как создаются гармоничные сайты
Конечно круто создать мега-супер-классный концепт и впечатлить всех вокруг.
При этом намеренно нарушить кучу базовых правил ради ВАУ-эффекта.
Но подумайте, какой результат вы хотите получить? Супер-дизайн это классно, но реальный заказчик к вам придет в 90% случаев не за этим. Ему нужен грамотный инструмент, который будет работать. При этом желательно, чтобы он все же был достаточно ВАУ :))) Но без фанатизма)
Вывод простой: изучайте основы и не пренебрегайте ими при разработке сайта!
Пойти учиться →
