Каркас сайта, или модульная сетка в веб-дизайне

Каркас сайта, или модульная сетка в веб-дизайне

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

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

Что такое модульная сетка?

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

Вообще веб-дизайн довольно много разных «фишек» наследовал от полиграфического дизайна. Это и принципы работы со шрифтами, и правила композиции, и модули. Сайты-визитки и сайты-презентации вполне могут довольствоваться одноколоночной структурой, домашние страницы — двухколоночной, более сложные информационные проекты должны, соответственно, иметь более сложный и продуманный макет.

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

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

Что делать, если во время прорисовки внутренних страниц у вас появились блоки или элементы, которые не подходят к вашему каркасу? Не хочу вас огорчать, но это свидетельствует о том, что ваша сетка никуда не годится, и вы недостаточно времени уделили ее проектированию.

Какие бывают сетки?

Давайте рассмотрим виды сеток для веб-дизайна.

1. Блочная сетка — грубая разметка площади на блоки.

2. Колоночная — имеющая колонки в своей структуре.

3. Модульная — состоящая из пересекающихся прямых, которые образуют модули.

4. Иерархическая — сетка с интуитивным размещением блоков, без какой-либо логической структуры.

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

Сетка для веб-дизайна 960 Grid System (//960.gs) отвечает концепции «статического» макета, а для создания «резинового» можно обратить внимание на сетку фреймворка Bootstrap (//getbootstrap.com/css/#grid). Модульный каркас 960 GS делит веб-страницу на 12, 16 и 24 колонки.

При разработке «резиновой» структуры не забывайте про максимальную ширину экрана. Ее обычно ограничивают 1280 пикселями. Если не учесть максимальное значение по ширине, то на больших мониторах содержимое сайта будет сильно растянуто, что негативно повлияет на его восприятие.

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

самое распространенное разрешение экрана —1024х768;

ширина макета не должна превышать 770 пикселей, для того чтобы на экране с разрешением 800х600 внизу не появлялась полоса прокрутки;

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

Исходя из этого, пропорция выглядит так: 200 пикс. + 550 пикс. или 150 пикс. + 620 пикс.

В большей колонке предполагается разместить меню навигации, в меньшей — каталог, или содержание.

Смотрите и учитесь — модульная сетка сайта BBC

Рассмотрим в качестве примера сетку веб-дизайна известного сайта. На всех сайтах BBC используется универсальная структура с колонками размером 61 х 16 пикселей, что соответствует стандартным фото и видео бренда.

Как можно увидеть на картинке, сетка BBC довольно гибкая и позволяет разместить любую информацию: от серьезной аналитики до развлекательных новостей. Данная модульная сетка является визитной карточкой компании, так как является стандартной для всех ее сайтов. Кстати, эта штука представляет собой компонент гайдлана «Global Experience Language», если кому интересно.

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

1. Процесс начинается с определения мест для блоков высшей иерархии. Представляем себя эдакими Шерлок Холмсами – мастерами дедукции и соблюдаем правило «От общего к частному, от большего к меньшему».

2. Спускаемся на следующий уровень и размещаем блоки, следующие в иерархии. При этом базируемся на приоритетах контента, для определения которых анализируются ожидания пользователей и выявляются собственные конкурентные преимущества.

3. Таким образом, вначале прорабатываем общую композицию и самые крупные элементы. Затем — уточняем, дорабатываем, детализируем. Для этого нам понадобится нарисовать серию черновых эскизов. Только после детальной проработки идеи сайта с помощью карандаша и бумаги наконец-то садимся за компьютер.

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

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

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

Напоследок, хочу напомнить, что веб-дизайн — это создание не только красивой, но и практичной, удобной системы. Вот почему каждый уважающий себя веб-дизайнер должен уметь проектировать систему модульной навигации, структурировать информацию и разбивать ее на блоки. Благодаря этому пользователю будет приятно «сёрфить» ваш сайт и легко воспринимать его содержимое.

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

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (1)