Зачем и как использовать контрасты в дизайне сайтов. Разбираем на примерах

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

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

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

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

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

Контраст размера в текстах

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

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

Не бойтесь делать большие заголовки: крупная типографика — один из трендов в веб-дизайне.

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

Контраст размера в изображениях

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

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

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

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

Цвета могут отличаться не только по яркости — тёмные или светлые, но и по цветовой температуре и насыщенности.

Примеры сайтов с контрастными кнопками:

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

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

Этот принцип можно назвать «правилом бутика» — в дорогих магазинах вещи никогда не теснятся на вешалке в узких проходах. У каждого предмета достаточно пространства вокруг, чтобы на него обратили внимание. Точно так же на сайте сдержанное использование акцентного цвета привлечёт внимание к тем элементам, которые должны быть заметны — например, кнопке с целевым действием. Подробнее о работе с цветом читайте в бесплатном курсе «Создание Landing Page» на Tilda Education.

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

Этот тип контраста достигается за счёт пустого пространства вокруг элементов, его ещё называют «белым» или «негативным».

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

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

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

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

Больше полезных материалов про дизайн сайтов — в нашем блоге и телеграм-канале. Экспериментируйте и создавайте впечатляющие сайты на Тильде!