Ольга Яцюк - Основы графического дизайна на базе компьютерных технологий

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

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

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

Ниже приведены некоторые рекомендации и описаны возможностей форматирования текста с помощью HTML-кода.

□ Пустое пространство особенно важно для содержательных страниц. На них рекомендуется оставлять свободными от 40 до 60 процентов поля экрана.

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

□ При разметке текста можно задавать длину строк и отделять одну область текста от другой. Длина строки должна составлять от 50 до 70 символов или от 7 до 15 слов.

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

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

□ Различные по значимости части текста выделяются гарнитурами, размером, цветом, яркостью.

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

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

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

5.5.1. Технические приемы использования цвета в Web

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

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

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

□ Еще один важный параметр цвета – яркость (светлота). Самый сильный контраст по яркости дают белый и черный цвета. Чем сильнее контраст фона, графики и текста по яркости, тем выразительнее Web-страница.

□ Не используйте в качестве фона сложные текстуры с множеством цветов. Лучше использовать сплошные заливки или текстуры приглушенной яркости и насыщенности.

Цветовая палитра браузера

В главе 2 мы упоминали, что для описания цвета на мониторе используется модель RGB. Язык HTML представляет цвета шестизначными шестнадцатиричными числами, которые кодируются как #RRGGBB. Префикс # обозначает, что кодируется цвет, первые две шестнадцатиричные цифры RR определяют красную составляющую в цвете, вторая пара GG – зеленую, третья пара ВВ – синюю составляющую. Шестнадцатиричные двузначные числа изменяются в диапазоне от 00 до FF, что соответствует диапазону от 0 до 255 для десятичных чисел. Таким образом, белый цвет кодируется числом #FFFFFF, черный – #000000, красный – #FF0000, оливковый – #808000.

Чтобы эффективно использовать цвет, нужно помнить, что большое количество мониторов передает 256 цветов, однако, применяя современную цифровую технологию, дизайнеры могут создавать до 16,7 млн цветов. Если цвет, используемый в созданном графическом файле, не входит в набор цветов, отображаемых на экране, он будет искажен или затемнен. Цвет теряется, следовательно, его использование не целесообразно. Последнее время в печатном дизайне популярны цвета металлик, но включение этих цветов в Web-сайт невозможно, т. к. они не могут быть воспроизведены монитором. Качество изображения зависит от технических возможностей компьютера и от программного обеспечения. Для передачи изображения Netscape Communicator и Microsoft Internet Explorer используют только 216 цветов, которые являются общими для операционных систем Мае и Windows. Эти 216 цветов составляют палитру браузера (Browser-Safe-Pallette). Если дизайн изображения создан на основе палитры из 256 цветов, то в результате отображения в браузерах, использующих 216 цветов, цвета исказятся в соответствии с установками браузера. Эта проблема наиболее заметна на изображениях, где есть большие площади, залитые одним цветом. На них искажение цвета будет особенно заметно, и результат может быть неприятным. Использование основной палитры поможет избежать этого.

5.5.2. Выразительность цвета в Web

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