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

Дизайн Web-страниц

Популярность компьютерных сетей растет лавинообразно. Каждая уважающая себя фирма создает свой Web-сайт, и спрос на Web-дизайнеров огромен. Число сайтов в мире увеличивается примерно на 4000 каждый день! Значимость Интернет постоянно возрастает, влияние его на жизнь людей трудно переоценить.

Исследования показали, что 80% пользователей посещают в общей сложности всего 15000 сайтов, и только 0,4% всех страниц внимательно просматриваются. Для привлечения посетителей на Web-сайты нужно приложить определенные усилия: тщательно продумывать их архитектуру, навигацию, содержание и, конечно, композиционное и цветовое решение. Поэтому, применительно к созданию сайтов слово "дизайн" подходит наиболее точно.

Быстро проникающий в любую точку мира Интернет организует досуг и рабочее время. Основные достоинства Интернета как средства коммуникации — высокая скорость передачи информации, возможность быстрого редактирования и доступность. Почтовая карточка, отправленная по Сети из Сан-Франциско, в тот же день будет получена в Шанхае. События, происходящие в Сиднее, почти сразу же станут известны в Сантьяго. Эта сеть действительно всемирна, никогда еще дизайн не требовал такой универсальности. Оформление страниц должно быть понятно и хорошо восприниматься на разных континентах, в разных странах, в столицах и в маленьких селениях. При растущем значении WWW происходит взаимное влияние разработчиков и пользователей, дизайн и аудитория развиваются одновременно.

Основные требования к Web-сайтам:

- практичность (возможность помогать пользователям в решении определенных задач);

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

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

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

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

Общие принципы дизайна 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. Кнопка хорошо заметна на экране, кроме того, несложно создать эффект нажатой кнопки, например, для использованной ссылки.

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

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

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

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

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

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

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

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

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

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

Некоторые сайты имеют в качестве входной особую, так называемую splash-страницу. Она используется как заставка для представления сайта, определения его стиля. На splash-странице может использоваться анимация, звук, эффектная графика. Далеко не всегда посетитель сайта имеет время и желание разглядывать такую рекламную заставку, поэтому внизу ставится текстовая ссылка, которая позволяет миновать эту страницу. При повторном посещении сайта этим же пользователем вывод splash-страницы рекомендуется подавлять. Домашняя страница — главный вход на сайт. Ее роль аналогична роли обложки книги или иллюстрированного журнала. Эта страница должна выделяться среди других. Как правило, именно она остается в памяти посетителя. На ней обязательно должен быть фирменный знак, она задает тип оформления: цветовое решение, шрифт, характер графики, вид кнопок в меню (рис. CD-5.2).

Домашняя страница должна вызвать желание пройти в глубь сайта. Врем от времени ее можно менять, но общий визуальный стиль желательно оставлять неизменным. По внешнему виду страницы пользователь должен понимать, что сайт "живет", регулярно обновляется. Для этого можно использовать различные приемы:

отображать дату создания (последней модификации);

время от времени менять общий вид страницы;

дать короткую информацию об основных изменениях на сайте;

дать ссылку на раздел новостей сайта.

Внутренние страницы (навигационные или содержательные) несут основную информацию. Они должны иметь более сдержанный дизайн, чем домашняя страница, но соответствовать ей по стилю. Содержание внутренних страниц зависит от назначения сайта и может быть любым, от пресс-релизов до стихов и репродукций картин (рис. CD-5.3). Среди них есть специальные страницы, например, страницы FAQ (Frequently Asked Questions — часто задаваемые вопросы). Их цель — давать ответы на наиболее часто возникающие вопросы. Это освобождает пользователя от поисков по всему сайту. Как правило, такие страницы удобно распечатать для более подробного изучения, поэтому стоит продумать отдельную печатную версию.

Еше один тип специальных страниц — информация для контактов (телефоны, адрес электронной почты). Это может быть форма для связи с владельцами сайта. Ссылка на эту страницу должна быть в каждом разделе. Размеры Web-страниц могут быть различными, но лучше придерживаться стандартных. Фиксированные размеры задают границы расположения элементов оформления, позволяют четче структурировать информацию, улучшают читабельность. Геометрические размеры окна зависят от разрешения мониторов, типов браузеров, настроек панелей. Лучше всего, если страница по ширине умещается на экран. Прокрутка по высоте гораздо удобнее, чем прокрутка вправо, кроме того, материал легче распечатывать. Если страница по длине не вмещается на экран, ее оформляют так, чтобы было понятно, что ниже есть продолжение.

Не нашли, что искали? Воспользуйтесь поиском: