Композиция и акценты

Композиция — это то, как соотносятся между собой части целого. А акценты — то, как выделяются важные элементы. Если на сайте нет чёткой композиции — это сразу бросается в глаза. В нём «непонятно, что хотел сказать автор». При создании любого сайта стоит учитывать законы композиции. 

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

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

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

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

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

Паттерны сканирования

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

При движении он повторяет начертание буквы F. Верхняя перекладина слева направо → нижняя перекладина в том же направлении → вертикальный отрезок сверху вниз. Зная это, располагайте важные элементы в последовательности F-паттерна. 

Кроме него есть Z-паттерн. Он характерен для сайтов с альбомным позиционированием. Взгляд скользит по траектории буквы Z: верхняя перекладина слева направо → диагональ → нижняя перекладина слева направо. 

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

Акценты

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

 Блок со статьёй при наведении курсора меняет цвета и выделяется на фоне монохромных блоков

Цветовая гамма 

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

• Если у бренда есть корпоративные цвета, используйте их. Это повышает узнаваемость и вызывает доверие. Согласитесь, на сайте Сбербанка странно бы смотрелась цветовая гамма, отличная от фирменного зелёного: 

• Избегайте цветов, которые не подходят под тематику сайта или резонируют с ней. Например, розовый не ассоциируется со сферой недвижимости, поэтому не подойдёт для оформления сайта ЦИАН. Его связывают с отношениями или товарами для женщин:

• Используйте 2–3 цвета в оформлении интерфейса. Чем больше цветов, тем сложнее их гармонично сочетать. Для трёх цветов используйте соотношение 60-30-10. 60% — одноцветный фон, 30% — цвета иллюстраций или текста, 10% — для акцентных элементов. 

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

Выбирайте для фона неяркие цвета, которые не мешают сосредоточиться на контенте. Подойдёт белый и оттенки серого, бежевого. 

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

Также можно использовать различные онлайн-сервисы (colorscheme.ru и другие). 

• Делайте элементы контрастными, то есть отличающимися по яркости.

Пример того, как кнопки и надписи теряются из-за слабого контраста (белый и светло-серые, голубые гаммы)

Единообразие 

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

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

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

Типографика

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

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

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