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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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