Дизайнерские записки

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

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

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

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

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

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

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

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

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

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

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

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