Книга: Веб-дизайн

Текст и фон

Текст и фон

Элементы, без которых не обходится ни одна веб–страница, — фон, текст и гипертекстовые ссылки (стр. 215) — ставят интересную задачу гармонизации трех (или четырех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции резко различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной композицией, которые привлекают и запоминаются исключительно своей цветовой гаммой.

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

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

Необычные цветовые решения веб–страниц можно разбить две большие группы: с темным текстом на светлом фоне и со светлым текстом на темном фоне.

Рис. 22

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

Посмотрим сначала, что может дать нам схема с темным текстом на светлом фоне. Оставим пока текст черным, возьмем какой–нибудь достаточно насыщенный цвет (синий, к примеру), увеличим его яркость (другими словами, смешаем его с белым) и закрасим им фон. Результат (рис. 22 на цветной вкладке, а) трудно назвать особо привлекательным — очевидно, что насыщенность фонового цвета противоречит его яркости. Цвет этот кажется водянистым, разбавленным, неинтересным. Зачем нужно разведенное молоко, если можно пить чистую воду или чистое молоко?

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

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

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

Необходимую долю разнообразия такому цветовому ландшафту может придать более насыщенный или контрастный по тону цвет ссылок. Вообще, для эффективного опознавания ссылки обязаны иметь более заметный цвет, чем основной текст, хотя достичь этой заметности можно разными способами — контрастом тона, увеличением насыщенности, повышением или понижением яркости. Посещенные (visited) ссылки должны сигнализировать о своей «отработанности» цветом менее насыщенным или просто более близким к цвету основного текста. Принятая в графических броузерах раскраска ссылок по умолчанию — синий цвет для «свежих» ссылок и фиолетовый для «использованных» — достигает нужного результата и без каких бы то ни было вариаций насыщенности, пользуясь тем, что фиолетовый цвет обычно производит впечатление смешанности, «нечистоты» и потому «неизначальности». Сайтwww.chess.tbm.com (пример 17) являет собой великолепный образец сбалансированного цветового дизайна. Его светлый, но притом достаточно насыщенный фоновый цвет (#СССС 99) выразителен сам по себе и не требует поддержки со стороны текста, для которого выбран слегка смягченный черный цвет (#333333). Для ссылок использован контрастный, но равным образом смягченный синий (#0033FF). Остальные графические элементы поддерживают эту разнообразную, но абсолютно лишенную пестроты цветовую гамму.

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

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

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

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

На втором месте по популярности после чисто черного фона стоят насыщенные холодные цвета — такие как, например, бархатно–синий фон сайтаwww.verso.com (пример 19). Для текста, наоборот, популярны оттенки теплых цветов, в особенности желтого, призванного символизировать золото. Необычный цветовой колорит сайта www.bdaweb.com (пример 13) объясняется полным отказом от цвета как такового — темно–серые буквы i черном фоне привлекательны своей сдержанностью, но они выглядели бы мрачновато, если бы не ярко–оранжев цвет логотипа и ссылок.

Оглавление книги