Основы веб-дизайна

С чего начинается веб-дизайн?

На днях барышня-сотрудница обратилась ко мне со скромной просьбой - научить ее web-дизайну. И, хотя мой опыт работы в этой отрасли исчисляется годами, причем не только в дизайне, но и в предоставлении информации о нем... - я растерялась. Я не знаю, с чего начать. Порекомендовала прочесть ряд полезных книг, в частности - "Веб-дизайн" Дмитрия Кирсанова - книга, полезная как начинающим, так и имеющим опыт разработчикам, "HTML в Web-дизайне" Алексея Петюшкина (подробнее об этой книге вы можете узнать на сайте автора - http://www.alpet.spb.ru/books.shtml), несколько интересных учебников по работе с графикой...

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

С чего начинался мой опыт? С четвертого Adobe PhotoShop и CorelDraw, с 32Mb оперативной памяти, с рекламы и полиграфии, впрочем, как и у многих в тех уже далеких *95-96 годах. Визитки, рекламные буклеты, обложки на кассеты, позже - на компакт-диски, далее - скины и интерфейсы для локальных программ, иконки и 16-цветные кнопочки - волшебный простор для фантазии. Заказ на первый сайт.

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

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

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

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

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

В дальнейшем мы подробнее рассмотрим все вопросы, которые касаются непосредственно разработки и сборки страниц. Язык html/shtml, браузеры, их особенности и отличия в интерфейсе и визуализации web-документов, языки и кодировки, инструменты для верстки и обработки графики, языки и кодировки, элементы программирования, оптимизации и раскрутки сайтов. Это все - технологические проблемы. Однако разработка дизайна сайта никогда не начинается с верстки документов. А начинается она...
...

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

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

Далее. К примеру, Вы уже получили представление о ЦА вашего проекта. Однако вы по-прежнему не можете приступить к рисованию графических элементов. Почему? Потому что у вас еще нет модели вашего будущего дизайна. Для того, чтобы эту модель сформировать, следует тщательно проанализировать информацию, которую вы на сайте будете представлять - т.е. ее тип и объем, частота обновления, ее модульная сетка, структурированность данных. В зависимости от содержания сайты могут быть:
Презентационные,
корпоративные,
информационные,
электронные магазины.

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

После того, как вы определили тип будущего проекта (в нашем случае это домашняя страница, или - Авторский Сайт, и, следовательно, ЦА такого проекта - это ваши родственники, друзья и знакомые) следует тщательно проанализировать содержание (и объемы содержания) проекта. Вся информация, которая будет представлена на сайте, обязательно должна быть структурирована до того, как вы нарисуете эскиз первой кнопки. Разделы, подразделы, дополнительные разделы - сформируйте дерево вашей информационной структуры, определите вложенности документов, оцените степень сложности переходов. Карандашом на бумаге или в документе word, где вам будет удобнее - вы должны увидеть эскиз информационной модели вашего проекта. Как может в не очень сложном случае такая модель выглядеть - мы писали еще году эдак в 2001 в материале Эмоции 1. РАЗРАБОТКА СТРУКТУРЫ САЙТА.

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

Итак, первый урок с ученицей был проведен вполне успешно, мы рассмотрели вопросы "что же это такое - сайт?" и какие типы сайтов вообще бывают в зависимости от его целей, задач, объема информации и его целевой аудитории.

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

Дизайн, и, в частности, веб-дизайн - это проектирование практичной, удобной, визуально привлекательной системы. Англоязычные разработчики используют термин "usability" - целая наука, которая рассказывает, как разрабатывается дизайн, ориентированный на пользователя - понятный и удобный. В русском языке однозначно сложно подобрать термин, используется слово "эргономика" - наиболее соответствующий английскому "юзабилити", однако в переводе более близко к тексту слово звучало бы как "исполь-зу-емо-бляемость". Ух. Дизайнер получает информацию, данные, которые необходимо оптимальным образом упорядочить и реализовать в виде веб-сайта, предоставить такой интерфейс, которым будет легко и приятно пользоваться. Таким образом можно сказать, что веб-дизайн - это проектирование веб-интерфейса, и знание инструментов для разработки (языков разметки и программирования, графических редакторов и редакторов верстки, различных клиентских и серверных приложений и утилит) и профессиональное владение ими, безусловно, поможет разработчику, однако не гарантирует признания его как выдающегося веб-дизайнера.

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

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

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

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

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

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

Что такое модульная сетка? Легче всего будет пояснить это на привычных для вас примерах. Возьмите в руки книгу, журнал и газету. Внутри книги вы видите страницы, наполненные текстом, причем строки содержимого - на всю ширину страницы (исключая поля). Это типичный пример одноколоночной верстки. В журналах традиционно информация разбивается на две колонки, в газетах верстка бывает еще более сложная - трех-четырех, и даже шести-колоночная. Рекомендую для лучшего понимания понятий "модуль" и "модульная сетка" в отношении полиграфии и веб-дизайна прочесть статью Виктора Вязьминова "Модульная сетка" http://www.mrdesign.krasline.ru/articles/art13b.shtml

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

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

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

Наиболее популярная модульная сетка для авторских сайтов и проектов с умеренным объемом содержания (и наиболее легкая в реализации) - это сетка из двух колонок, пропорции которой расчитываются следующим образом:
во-первых с учетом наиболее популярного по статистике разрешения экрана на сегодняшний день - 1024х768,
во-вторых с учетом того, чтобы при разрешении экрана 800х600 не появлялась горизонтальная полоса прокрутки (для этого суммарная ширина всех колонок не должна превышать 770 пикселей),
в третьих, с учетом того, что колонка, которая определена как модуль для отображения собственно информации была больше, чем колонка, которая определена как модуль-навигационное меню.