Материалы Web-дизайна: цвет, текстура, форма, размер

План

1. Цвет и его характеристики

2. Восприятие цвета

3. Подбор цветов для Web-страницы

4. Текстуры

5. Форма и размер

6. Пропорции и расположение элементов

Цвет и его характеристики

Необычный, но тщательно продуманный и сбалансированный набор цветов вполне может стать основой великолепной композиции. Любой цвет несет с собой своё собственное настроение. Разнообразие цветовых настроений огромно, у каждого человека есть "любимый" цвет. Хотя, восприятие цвета субъективно (разные не только любимые цвета, но и ощущения, связанные с цветом), тем не менее в цветовой вселенной есть свои, вполне универсальные законы, которые любой дизайнер обязан знать и уметь применять на практике. Это не даст гарантии, что цветовое решение будет нравится всем, но придаст работе некоторый профессионализм.

Цвет - это та область, в которой компьютерная графика имеет самое большое преимущество перед графикой естественной. Экран компьютера в отличие от листа бумаги сам излучает свет и регулирование количества этого света позволяет охватить гораздо более широкий цветовой спектр, чем тот, который можно воспроизвести на бумаге. До последнего времени проблема была лишь в качестве дисплеев и небольшом количестве памяти, которое отводилось для хранения графических изображений. Теперь, когда видеосистемы с поддержкой режимов high color (65536 цветов) и true color (16, 5 млн.) перестали быть экзотикой, компьютер превратился в лучший инструмент работы с цветом. Но, конечно, на цвет нельзя возлагать функцию основного носителя информации, страница должна быть читабельна и в черно-белом виде.

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

• Тон (hue)- собственно цветовой компонент, представляющий собой одну из точек цветового круга), максимально яркий и насыщенный.

• Насыщенность (saturation) - соотношение основного тона и равного ему по яркости бесцветного серого. Максимально насыщенный цвет не содержит серого вообще, а при нулевой насыщенности полностью отсутствует основной тон (при нулевой насыщенности варьировать тон бесполезно, результат - серый).

• Яркость (value) - общая яркость цвета. Максимальное значение этого параметра превращает любой цвет в белый, а минимальное в чёрный.

Ц

ветовой круг по сравнению с линейной радугой, правильнее отражает наше представление о континууме тонов, как о чем-то замкнутом, не имеющем начала и конца.

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

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

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

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

П

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

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

Восприятие цвета

Человеческое восприятие по природе своей синтетично. Совершенно по-разному воспринимается цвет в зависимости от того, какую он площадь занимает и какие цвета его окружают.

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

На практике это означает, что для небольших по размеру объектов нужно выбирать более яркие, "примитивные" цвета, а темного слабонасыщенного оттенка необходима достаточная площадь (например, фон страницы).

2. Если цвет слишком темен, глаз склонен считать его просто чёрным, а незначительную светлоту списывать на неаккуратность автора. То же самое относится к белому. Незначительные "примеси" (кроме синего) создают впечатление неопрятности.

3. В осприятие зависит от соседства. Если цвета-соседи обладают примерно одинаковой яркостью и если один из цветов заметно превосходит другой по занимаемой площади, то он "подминает" под себя своего соседа.

   Например, тускло-синий приобретает в окружении ярко-зеленого приобретает зеленоватый оттенок.

4. Темный цвет в соседстве с более светлым приобретает ещё более темную кромку, а светлый возле границы делается более ярче.

Подбор цветов для Web-страницы

Сочетаемость цветов - эта та область, где у каждого человека есть своё мнение и привязанности. Тем не менее, можно выделить некоторые принципы подбора цветового оформления Web- страницы.

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

2. П

   

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

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

Если автору Web-страница, основанная на принципе единства, кажется монотонной и скучной, ему надо склонится на сторону принципа контраста.

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

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

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

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

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