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

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

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

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

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

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

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

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

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

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

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

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

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