1 Принципы web-дизайна

Веб-дизайн (web page design) – это процесс проектирования, планирования, моделирования и реализации доставки электронного содержимого через сеть Веб с использованием технологий (на основе языков разметки), подходящих для интерпретации и визуализации веб-браузером или другим графическим веб-интерфейсом пользователя.

Очень важным является приведение веб-ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств, а также кроссплатформенность кода разметки ресурса.

Основными аспектами веб-дизайна (в первую очередь для коммерческих веб-сайтов) являются следующие:

• Содержимое. Информационное наполнение должно быть релевантным тематике сайта и ориентированным на целевую аудиторию сайта.

• Удобство в использовании (usability). Сайт должен иметь дружественный пользовательский интерфейс с простой и надежной навигацией.

• Внешний вид. Графика и текст должны быть выполнены в одном стиле и согласованы на всех страницах сайта. Стиль оформления должен демонстрировать профессионализм, привлекательность и релевантность.

• Видимость. Сайт должен легко находиться с помощью большинства поисковых систем и рекламных площадок.

По-сути, веб-сайт - это информационная система, которая содержит две основные компоненты:

• Компоненту представления (front-end). Видимое содержимое (разметка страниц, графика, аудио и текст).

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

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

Этапы проектирования веб-сайта зависят от объема сайта, его функциональности и многого другого.

Разработка веб-сайта включает в себя следующие этапы:

• Дизайн главной и типовых страниц сайта. (выполняетя обычно в графическом редакторе).

• HTML-кодирование, в результате которого создаётся код, который можно просматривать с помощью браузера.

• Программирование сайта. Может осуществляться как "с чистого листа", так и с помощью специального высокоуровнего пакета - системы управления сайтом (CMS).

• Размещение сайта в Веб, наполнение контентом и публикация.

• Оптимизация веб-сайта с целью повышения его видимости в Веб.

• Сдача сайта заказчику.

Для дизайна веб-сайта и разработки веб-приложений для него имеет широкий спектр инструментальных средств. Компания Майкрософт имеет уже давнюю традицию создания WYSIWYG-инструментов такого рода. Среди таких инструментов можно назвать, в частности Microsoft Visual Studio. NET и Microsoft Expression Web.

Дизайн сайта (веб-дизайн) это не просто его художественное оформление. Создание качественного дизайна должно учитывать несколько обязательных аспектов. Вот основные из них:

1. Веб-дизайн должен ориентироваться на целевую аудиторию. Если достаточно большая часть аудитории, к примеру, те люди которые подключаются к интернет по телефонной линии, в оформлении не должно быть больших, или как говорят специалисты, "тяжелых" картинок. Если среди аудитория состоит из специалистов-компьютерщиков, позаботьтесь о том, чтобы созданный сайт был виден абсолютно под всеми браузерами. А если аудитория из тех, кто наверняка оставлял настройку машины "по умолчанию" можно не стесняться сделать какой-нибудь нужный, с функциональной точки зрения, элемент, который не будет работать в Netscape или Galion и т.п. - это почувствует на себе менее 1% посетителей. Для сайта развлекательной тематики движущиеся элементы, мерцание и яркость красок будут, возможно, в самый раз, а на деловом или информационном ресурсе такой веб-дизайн будет совершенно не уместен - раздражать и отвлекать внимание.

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

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

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

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

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

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

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

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

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

Четко сфокусированная ориентация всех элементов дизайна корпоративного сайта на потребителя, на требуемую Вам целевую аудиторию – один из основных факторов успеха.

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

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

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

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

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

Элементы дизайна

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

Элементами дизайна являются:

• Точка

• Линия

• Форма, фигура

• Движение

• Цвет

• Узор

• Текстура

• Пространство

• Текст, шрифт

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

Линия - это черта создаваемая движущейся точкой, и соответственно она имеет определенное психологическое значение в зависимости от ее направления, толщины и изменения ее направлений и толщины. Это очень полезное и разнообразное графическое средство, которое способно "говорить" как визуально, так и вербально. Оно может использоваться в языке символов, либо для передачи эмоций своим направлением и свойствами.

Узор это фоновая структура, которая организует плоскости или структуры в нечто однообразное и повторяющееся. Узор можно описать, как повторяющийся элемент фигуры или формы, но так же его можно представить как "скелет", который организует части композиции.