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

□ удобство (способность быстро находить нужную информацию, наглядность и понятность);

□ визуальная привлекательность (эстетичность, грамотная композиционная организация страниц, хорошее сочетание цветов, стильность).

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

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

5.1. Общие принципы дизайна Web-сайтов

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

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

Сайт должен быть функциональным, а одна из основных функций – быстрый поиск. Для его организации необходимы ясные имена ссылок, логическая группировка кнопок, четкие заголовки, страниц, согласованные элементы навигации. Существуют специальные программы для просмотра HTML-файлов – браузеры. Наиболее известные – Microsoft Internet Explorer, Netscape Communicator, Mozilla, Opera Они используются для навигации в сети Интернет, связи с Web-сервером, интерпретации HTML-кода, вывода на экран документов в заданном формате. Браузеры поддерживают звук, видео и трехмерную графику.

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

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

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

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

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

5.2. Структура сайта

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

Особенность оформления любой Web-страницы – блоковая структура. В поле экрана располагаются различные типы объектов (текст, кнопки, иллюстрации, анимационные заставки). Важно определить, какие объекты должны присутствовать на странице и как они будут расположены на экране. Такой подход позволяет решить проблему сквозного дизайна (рис. CD-5.1).

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

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

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

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

Помимо гипертекста, для ссылок используются другие элементы композиции страницы – кнопки, пиктограммы, графика.

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

На страницах, которые возможно захочется распечатать, часто размещают кнопку-пиктограмму вывода на принтер. Это очень удобно и экономит время работы.

Внизу страницы обычно располагаются дополнительные текстовые ссылки. Они дублируют контекстные или графические ссылки.

На страницах сайтов по договоренности или за плату размещают баннеры. Это графический элемент, который служит ссылкой на другой сайт или страницу. Часто баннеры делают анимированными. На размер баннера существует несколько стандартов: 468x60, 460x55, 392x72, 334x60, 125x125, 120x90, 120x60, 88x31, 120x240 пикселов, поэтому прежде чем создавать баннер, следует выяснить, где он будет размещаться и ознакомиться с требованиями выбранных серверов. Обычно хозяева Web-страницы жестко оговаривают не только размер картинки в пикселах, но и размер ее файла в килобайтах (слишком большой и медленно загружающийся баннер недопустим), так что вопросы анимации на баннерах, выбор цветов и т. д. надо решать очень аккуратно.

Еще один популярный элемент Web-страниц – ролловер (rollover). Это кнопка, изменяющаяся в зависимости от состояния. Обычно, если на ссылку-ролловер наводится мышь, она меняет цвет или форму. В ролловерах второго поколения используются два или более различных изображения. Ролловеры обычно имеют три состояния:

□ обычное или рабочее, когда кнопка еще не выбрана;

□ активное, когда над кнопкой установлен указатель мыши;

□ нажатое, когда кнопка мыши нажата.

5.3. Типы страниц

В зависимости от назначения Web-страницы, можно выделить следующие их типы: содержательная страница, страница навигации, специализированная страница, страница смешанного типа.

Большинство страниц относятся к смешанному типу (содержание + навигация), но есть чисто навигационные (например, карты сайтов) или чисто содержательные, хранящие информацию по теме, которой посвящен сайт.

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