Основы графического дизайна на базе компьютерных технологий
Шрифт:
Низкое разрешение большинства мониторов и мерцание делают чтение электронных документов довольно сложным процессом. Воспринимать текст с экрана гораздо труднее, чем с листа бумаги, поэтому очень важно использовать различные приемы структурирования текста: пустые области, крупный шрифт, большое расстояние между строками.
Ниже приведены некоторые рекомендации и описаны возможностей форматирования текста с помощью HTML-кода.
□ Пустое пространство особенно важно для содержательных страниц. На них рекомендуется оставлять свободными от 40 до 60 процентов поля экрана.
□ По умолчанию для Web текст выравнивается по левому краю, но возможно программирование других вариантов. Выключку по формату лучше не использовать, так как в этом случае возможно возникновение белых «коридоров».
□ При разметке текста можно задавать
□ По умолчанию HTML-текст отображается в том стиле, который определил браузер, при этом расстояние между строками близко к одинарному интервалу. Для улучшения восприятия текста интерлиньяж можно увеличить.
□ Для структурирования информации применяются заголовки и подзаголовки. Нужно, чтобы они явно отличались друг от друга.
□ Различные по значимости части текста выделяются гарнитурами, размером, цветом, яркостью.
□ Имеется возможность задавать двойные интервалы между абзацами для улучшения восприятия текста на экране.
□ Буквицы, выступающие инициалы или начальная буква, выступающая за левый край текста, хорошо структурируют текст, но их применение связано с дополнительными операциями. Целесообразно применять эти эффекты для выделения достаточно больших разделов.
5.5. Цвет в Web
Огромную роль в композиции страницы играет цвет. Если вы считаете, что дизайн хороший, значит, разработчики грамотно подобрали сочетание цветов и правильно определили их эмоциональное воздействие. Дизайнер должен чувствовать цвет и уметь оценивать, насколько его работа улучшает восприятие Web-страниц. Необходимо знать ограничения, накладываемые средой Интернет, использовать ее преимущества и уметь превращать недостатки в достоинства.
5.5.1. Технические приемы использования цвета в Web
Web-страница предназначена только для экранного просмотра. Следовательно, разработчику незачем особенно заботиться о сохранении всех параметров изображения при выводе на печать. Это значительно облегчает работу, но остается ряд других проблем. Для Web-страниц очень важен цвет текста. Один из приемов – использование цветового контраста между буквами и фоном. Традиционное сочетание – черный шрифт на белом фоне. Он легко читается, но смотрится «неинтересно». Другой вариант – светлый текст на темном фоне. Это не всегда целесообразно, т. к. затрудняет восприятие информации. Такие цвета нужно подбирать особенно тщательно. Можно добиться неплохих результатов, следуя нескольким простым правилам.
□ В полиграфии использование оттенков одного цветового тона часто оправдано: это дешевле, чем полноцветная печать и выглядит стильно. На Web-страницах лучше этого избегать. Светло-синие надписи на темно-синем фоне плохо читаются, лучше использовать контраст по цвету, например, светло-синий текст на желтом или белом фоне.
□ Текст и графика плохо воспринимаются, если цвета фона и шрифта близки по насыщенности к ахроматическому серому (например, серо-синий на тускло-розовом). Лучше использовать контраст по насыщенности: белый или черный текст на слабо насыщенном фоне.
□ Еще один важный параметр цвета – яркость (светлота). Самый сильный контраст по яркости дают белый и черный цвета. Чем сильнее контраст фона, графики и текста по яркости, тем выразительнее Web-страница.
□ Не используйте в качестве фона сложные текстуры с множеством цветов. Лучше использовать сплошные заливки или текстуры приглушенной яркости и насыщенности.
Цветовая палитра браузера
В главе 2 мы упоминали, что для описания цвета на мониторе используется модель RGB. Язык HTML представляет цвета шестизначными шестнадцатиричными числами, которые кодируются как #RRGGBB. Префикс # обозначает, что кодируется цвет, первые две шестнадцатиричные цифры RR определяют красную составляющую в цвете, вторая пара GG – зеленую, третья пара ВВ – синюю составляющую. Шестнадцатиричные двузначные числа изменяются в диапазоне от 00 до FF, что соответствует диапазону от 0 до 255 для десятичных чисел. Таким образом, белый цвет кодируется числом #FFFFFF, черный – #000000, красный – #FF0000, оливковый – #808000.
Чтобы эффективно использовать цвет, нужно помнить, что большое количество мониторов передает 256 цветов, однако, применяя современную
5.5.2. Выразительность цвета в Web
Правила цветовой гармонии в Интернет важны как для программистов, так и для художников, создающих сайты. Их знание позволяет расширить возможности сети, сделать ее более эффективной. При подборе цветов необходимо учитывать особенности каждого цвета, его физиологическое и психологическое влияние, национальные предпочтения, тенденции в использовании, специфические условности Web.
Мы уже говорили о том, что цвет очень важен в любой дизайнерской разработке. Он вызывает определенные эмоции, усиливает чувства, обостряет восприятие. Стильные, лаконичные изображения можно создавать и в ахроматической черно-белой гамме (рис. 5.4).
Рис. 5.4. Пример Web-страницы в черно-белой гамме
Для того чтобы усилить выразительность или облегчить распознавание бренда, дизайнеры используют цвет. Всем известен красный фирменный знак Coca-Cola или оранжевые упаковки стирального порошка Tide. Цвет формирует образ или вызывает нужную реакцию целевой аудитории.
При создании сайта, первый шаг для правильного колористического решения – понимание того, как цвет влияет на зрителей, как изменяется его восприятие при длительном рассматривании. У каждого человека есть своя собственная реакция на определенные цвета, иногда просто предвзятое отношение. Некоторые цвета могут быть популярными, но иметь негативный подтекст. В своей работе дизайнер должен соблюсти культурные традиции и не вызвать отрицательных эмоций, а для этого нужно тщательно проанализировать весь используемый цветовой ряд. Тем не менее, художник имеет право на собственное мнение и учитывает свою собственную реакцию при выборе определенной цветовой гаммы.
Web-дизайн – очень динамичное искусство. Стремясь выделиться среди конкурентов, привлечь к себе внимание, художники ищут все новые приемы и эффекты, в частности, пересматриваются подходы к цветовому решению сайтов.5.5.3. Роль цвета в формировании образа сайта
Мы уже говорили, что каждый цвет создает определенный настрой. Часто человек даже не может определить, что его так привлекает или отталкивает. Понимание характера каждого цвета позволяет критически относиться к его применению в дизайне Web-страницы.
Рассмотрим примеры Web-страниц, в которых наиболее удачно используется цвет.
Красный мгновенно привлекает внимание. Он наиболее энергичный, иногда агрессивный (рис. CD-5.5).
Выбор красного цвета может быть обусловлен национальными предпочтениями (рис. CD-5.6.)
Голубой – цвет воды и неба, надежности и постоянства. Оттенки голубого часто используют как основной цвет фирменного стиля. Популярность этого тона и его оттенков приводит к тому, что сайты становятся похожими друг на друга. Но бывают и очень интересные решения, например, если используется два контрастных цвета (рис. CD-5.7) или гамма голубого с контрастом по яркости (рис. CD-5.8).
Глядя на зеленый цвет, люди видят образ Природы, который ассоциируется со свежестью и целомудрием. Исследования показывают, что из всех наиболее популярных цветов самый часто используемый в Web-сайтах – сине-зеленый. Дополнительные ассоциации – здоровье, чистота (рис. CD-5.9).