5 1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 [1 Голос]

Контраст в веб-дизайне

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

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

Цветовой контраст в веб-дизайне

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

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

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

Чтобы веб-страница была визуально приятна, следует использовать цвета, которые сильно контрастируют друг с другом, объединяя их в цветовые схемы. Для этой цели существует специальный цветовой круг (https://colorscheme.ru/), присутствующий во многих графических редакторах. Круг построен таким образом, что какой бы цвет вы не выбрали основным, прямо напротив него окажется дополнительный.

Для новичков веб-дизайна будет достаточно двух цветов, но помимо них, в работе, обязательно должны быть использованы черный и белый или их оттенки. Помните, что наиболее удобным для чтения является темный текст на светлом фоне, но использовать всегда цвета #000 (черный) и #FFF (белый) необязательно. Вы можете смягчать их, тем самым, уменьшая контрастность.

Контраст размера

Контраст размера в веб-дизайне

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

Золотое сечение – это математическая «мера красоты», которая предполагает что идеальное размерное отношение одного элемента к другому равно 1.62 (то есть приблизительно 2/3 к 1/3). Отсюда же берут свое начало правило третей, ставшее упрощенной версией золотого сечения, и последовательность чисел Фибоначчи, где каждое следующее число равно предыдущему, умноженному на 1.62, или сумме двух предшествующих чисел (проверьте сами: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так дальше.)

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

Контраст шрифтов

Контраст шрифтов в веб-дизайне

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

Качественные шрифтовые пары образуются следующими способами

  1. Контраст классов. Если читатель хоть немного знаком с типографикой, то знает, что существуют романские (с засечками; например Times New Roman) и гротескные (без засечек; например, Arial) шрифты. За счет использования шрифтов обоих классов достигается контраст. Например, страница выглядит эстетично, когда заголовки написаны гротескным шрифтом, а основной текст и пункты меню – романским, или наоборот.
  2. Контраст размера. Придать выразительности или незаметности отдельным элементам позволяет увеличение или уменьшение их размера. Например, заголовки всегда делают более крупными относительно основного текста, а для вычисления оптимального размерного сочетания нередко используются числа Фибоначчи. Так, например, рядом с текстом, размер которого составляет 13px, будет отлично смотреться заголовок с размером 21px, напечатанный заглавными буквами. Междустрочное расстояние в основном тексте также основано на золотом сечении, поэтому для шрифта 14px оно будет равно 22-24px (размер * 1.6).
  3. Контраст цвета. Когда все содержимое страницы окрашено одним цветом, пользователю трудно отличить ссылки от текста, а сам контент выглядит немного «неправильно». В связи с этим маркеры списков, заголовки и другие текстовые элементы часто окрашивают основными или дополнительными цветами. Например, если в качестве основного выбран темно-фиолетовый цвет, его можно использовать для заголовков и ссылок, а контрастирующий ему оранжевый – для маркеров списка, цветных вставок и прочих украшений.

Гармоничный и аккуратный веб-дизайн

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

Разработано для Disqus