Еще один популярный элемент Web-страниц – ролловер (rollover). Это кнопка, изменяющаяся в зависимости от состояния. Обычно, если на ссылку-ролловер наводится мышь, она меняет цвет или форму. В ролловерах второго поколения используются два или более различных изображения. Ролловеры обычно имеют три состояния:
□ обычное или рабочее, когда кнопка еще не выбрана;
□ активное, когда над кнопкой установлен указатель мыши;
□ нажатое, когда кнопка мыши нажата.
5.3. Типы страниц
В зависимости от назначения Web-страницы, можно выделить следующие их типы: содержательная страница, страница навигации, специализированная страница, страница смешанного типа.
Большинство страниц относятся к смешанному типу (содержание + навигация), но есть чисто навигационные (например, карты сайтов) или чисто содержательные, хранящие информацию по теме, которой посвящен сайт.
Среди страниц следует выделить входную и выходную. На первой (входной) странице должна содержаться информация, дающая представление о сайте и о том, какая информация на нем представлена. Выходная страница может быть либо информационной, либо специализированной, например, с подтверждением заказа, если он делается через сайт. Но в любом случае на этой странице должен быть итог посещения сайта. Подавляющее большинство сайтов выходной страницы не имеет.
Некоторые сайты имеют в качестве входной особую, так называемую splash-страницу. Она используется как заставка для представления сайта, определения его стиля. На splash-странице может использоваться анимация, звук, эффектная графика. Далеко не всегда посетитель сайта имеет время и желание разглядывать такую рекламную заставку, поэтому внизу ставится текстовая ссылка, которая позволяет миновать эту страницу. При повторном посещении сайта этим же пользователем вывод splash-страницы рекомендуется подавлять.
Домашняя страница – главный вход на сайт. Ее роль аналогична роли обложки книги или иллюстрированного журнала. Эта страница должна выделяться среди других. Как правило, именно она остается в памяти посетителя. На ней обязательно должен быть фирменный знак, она задает стиль оформления: цветовое решение, шрифт, характер графики, вид кнопок и меню (рис. CD-5.2).
Домашняя страница должна вызвать желание пройти в глубь сайта. Время от времени ее можно менять, но общий визуальный стиль желательно оставлять неизменным. По внешнему виду страницы пользователь должен понимать, что сайт "живет", регулярно обновляется. Для этого можно использовать различные приемы:
□ отображать дату создания (последней модификации);
□ время от времени менять общий вид страницы;
□ дать короткую информацию об основных изменениях на сайте;
□ дать ссылку на раздел новостей сайта.
Внутренние страницы (навигационные или содержательные) несут основную информацию. Они должны иметь более сдержанный дизайн, чем домашняя страница, но соответствовать ей по стилю. Содержание внутренних страниц зависит от назначения сайта и может быть любым, от пресс-релизов до стихов и репродукций картин (рис. CD-5.3).
Среди них есть специальные страницы, например, страницы FAQ (Frequently Asked Questions – часто задаваемые вопросы). Их цель – давать ответы на наиболее часто возникающие вопросы. Это освобождает пользователя от поисков по всему сайту. Как правило, такие страницы удобно распечатать для более подробного изучения, поэтому стоит продумать отдельную печатную версию.
Еще один тип специальных страниц – информация для контактов (телефоны, адрес электронной почты). Это может быть форма для связи с владельцами сайта. Ссылка на эту страницу должна быть в каждом разделе.
Размеры Web-страниц могут быть различными, но лучше придерживаться стандартных. Фиксированные размеры задают границы расположения элементов оформления, позволяют четче структурировать информацию, улучшают читабельность. Геометрические размеры окна зависят от разрешения мониторов, типов браузеров, настроек панелей. Лучше всего, если страница по ширине умещается на экран. Прокрутка по высоте гораздо удобнее, чем прокрутка вправо, кроме того, материал легче распечатывать. Если страница по длине не вмещается на экран, ее оформляют так, чтобы было понятно, что ниже есть продолжение.
5.4. Особенности отображения текста в Web
Подходы к текстовому дизайну, рассмотренные в предыдущей главе, в общем случае применимы и к Web-страницам. Но тщательно продуманное шрифтовое оформление иногда "плывет", так как существуют некоторые технические проблемы: на разных мониторах размер шрифтов может меняться, невозможно отрегулировать межстрочный интервал, шрифты с одним названием выглядят на разных компьютерах по-разному и т. д. Один из способов избежать этих неприятностей – перевести текст в формат графики, но при этом возникают другие проблемы:
□ увеличивается объем данных и страницы медленно загружаются;
□ при изменении разрешения экрана шрифт плохо читается;
□ трудно обновлять или редактировать информацию, так как текст больше не редактируется;
□ возникают серьезные проблемы, если браузер не поддерживает отображение графики;
□ такой текст игнорируется поисковыми системами.
Пожалуй, применение текста, преобразованного в формат графики, оправдано только в заголовках, кнопках в специальных эффектах.
Если же работать с наборным текстом, нужно учитывать некоторые особенности.
По умолчанию браузеры поддерживают два типа шрифтов: пропорциональный (Times) и моноширинный (Courier). Пропорциональный шрифт более удобен для восприятия. Моноширинный чаще всего используется для отображения компьютерного кода или технических данных. Если вы хотите использовать другие гарнитуры, придется проделать несколько дополнительных операций, чтобы выбрать шрифты, поддерживаемые браузером. С помощью команд HTML-кода можно регулировать интерлиньяж, выключку, расстояние между символами и словами, определять стиль заголовков и подзаголовков. Для форматирования текста используются буквицы, линейки, колонки, врезки. Есть возможность создавать таблицы.
Наиболее целесообразно использовать на одной странице три шрифта: для основного текста, для заголовков и для системы навигации. Применение большего числа разных гарнитур нежелательно. Для заголовков и навигации выбираются обычно гарнитуры без засечек.
Колонки помогают структурировать текст, но их длина не должна превышать 300 пикселов. Хорошо смотрится страница, на которой колонка с основным текстом располагается по центру страницы, левая колонка используется для системы навигации, правая – для дополнительной информации или цитат.
Низкое разрешение большинства мониторов и мерцание делают чтение электронных документов довольно сложным процессом. Воспринимать текст с экрана гораздо труднее, чем с листа бумаги, поэтому очень важно использовать различные приемы структурирования текста: пустые области, крупный шрифт, большое расстояние между строками.
Ниже приведены некоторые рекомендации и описаны возможностей форматирования текста с помощью HTML-кода.
□ Пустое пространство особенно важно для содержательных страниц. На них рекомендуется оставлять свободными от 40 до 60 процентов поля экрана.
□ По умолчанию для Web текст выравнивается по левому краю, но возможно программирование других вариантов. Выключку по формату лучше не использовать, так как в этом случае возможно возникновение белых "коридоров".
□ При разметке текста можно задавать длину строк и отделять одну область текста от другой. Длина строки должна составлять от 50 до 70 символов или от 7 до 15 слов.
□ По умолчанию 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 цветов, однако, применяя современную цифровую технологию, дизайнеры могут создавать до 16,7 млн цветов. Если цвет, используемый в созданном графическом файле, не входит в набор цветов, отображаемых на экране, он будет искажен или затемнен. Цвет теряется, следовательно, его использование не целесообразно. Последнее время в печатном дизайне популярны цвета металлик, но включение этих цветов в Web-сайт невозможно, т. к. они не могут быть воспроизведены монитором. Качество изображения зависит от технических возможностей компьютера и от программного обеспечения. Для передачи изображения Netscape Communicator и Microsoft Internet Explorer используют только 216 цветов, которые являются общими для операционных систем Мае и Windows. Эти 216 цветов составляют палитру браузера (Browser-Safe-Pallette). Если дизайн изображения создан на основе палитры из 256 цветов, то в результате отображения в браузерах, использующих 216 цветов, цвета исказятся в соответствии с установками браузера. Эта проблема наиболее заметна на изображениях, где есть большие площади, залитые одним цветом. На них искажение цвета будет особенно заметно, и результат может быть неприятным. Использование основной палитры поможет избежать этого.
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).
Желтый у многих народов ассоциируется с солнцем. Этот цвет очень популярен у Web-дизайнеров. Светло-желтый вызывает чувство бодрости, веселья.
Ярко-желтый – более сложный, заметный цвет. Он привлекает взгляд, приковывает внимание, особенно если присутствует в контрасте с противоположными, холодными тонами, такими как голубой и зеленый.
Желтый и черный дают наиболее мощный цветовой контраст. Эти два цвета инстинктивно напоминают нам о хищных зверях и жалящих насекомых. Реакция на защитные природные цветовые комбинации остается с нами и сегодня (рис. CD-5.10).
В общем случае, в искусстве желтый вызывает радостное, восторженное чувство. Он работает лучше, когда с его помощью пытаются передать ощущение счастья.
Оранжевый цвет любят дети. Как наиболее энергичный, он ассоциируется с праздником и это хороший выбор при разработке дизайна среды для радостных событий, карнавалов. Цвет имеет широкий спектр, поэтому оттенок нужно выбирать особенно тщательно (рис. CD-5.11).
Черный цвет имеет много аспектов. Черный может выглядеть траурным, мрачным, ассоциироваться с горем, но, в то же время, это цвет таинственности, силы, власти, элегантности. Черный – хороший выбор для выражения элитарности (рис. 5.12).
Пурпурный – смесь красного и синего, наиболее сложный цвет. Сегодня пурпурный чаще всего трактуется как символ творчества. Это сложный цвет, поэтому он эффективно используется в эксклюзивном дизайне. За счет красной составляющей этот цвет привлекает внимание, вызывает волнение, заставляет остановиться (рис. CD-5.13).