Модульные сетки

[web-des]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таким образом пропорция выбирается 150px+620px или же 200px+550px. Мы получаем сетку из двух колонок, причем в меньшей предполагается расположить навигационное меню, а в большей - содержание.

В общей конструкции страницы присутствуют так же блок начала страницы и завершение страницы, объединяющие по ширине две колонки (т.е. каждый из этих блоков имеет ширину 770 пикселей). В верхнем блоке (top) традиционно принято располагать логотип проекта (левый верхний угол блока), его название, возможно - слоган, образно описывающий тему проекта, иногда - графическое оформление, коллаж, иногда - рекламный баннер. В завершение страницы (bottom) - информация об авторских правах, быстрый доступ к контактной информации (к примеру, e-mail автора или разработчика проекта), иногда - дублируется основное меню. Пример описанной модульной сетки вы можете наблюдать на сайте www.uapeople.com.


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

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

1. Выравнять документ по центру экрана (пример центрированного проекта с описанной модульной сеткой можно посмотреть здесь: www.nundesign.com);



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



3. Задать ширину обоих колонок в процентах. Решение интересное, однако в веб-дизайне редко используемое. Наиболее частая пропорция для такой сетки - 40%х60%.

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

Отлично. Вы определились с модульной сеткой и готовы начать рисовать? Нет, рано.

Каждый сайт имеет название. Это может быть название фирмы (сайт Adobe - www.adobe.com), или фамилия автора (Авторский сайт Алексея Петюшкина - www.alpet.spb.ru), или просто название проекта (webmascon - www.webmascon.com).

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

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

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

Источник