Анализ и применение принципа «контраста» в веб-дизайне

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

Контраст — это разница между двумя или более элементами. Благодаря контрасту дизайнеры могут создать визуальный интерес, одновременно направляя внимание пользователей. Представьте себе, если бы все элементы на странице выглядели одинаково, тогда контент выглядел бы неорганизованным, не было бы «потока (взгляда)», не было бы четкой структуры, и его было бы трудно понять и принять. Поэтому контраст — важная часть веб-дизайна.

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

цветовой контраст

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

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

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

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

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

сравнение размеров

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

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

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

Сравнение выравнивания

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

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

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

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

List Apart — еще один отличный пример центрированного заголовка с абзацами, выровненными по левому краю.

сделай это

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

Оригинальный текст на английском языке: Принцип контраста в веб-дизайне.