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

Яцюк Ольга Григорьевна

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 пикселов. Хорошо смотрится страница, на которой колонка с основным текстом располагается по центру страницы, левая колонка используется для системы навигации, правая – для дополнительной информации или цитат.