Компоненты HTML5 и CSS3. Модульная сетка для веб-дизайнеров

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

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

Для этого и существует модульная сетка. Она помогает предотвратить хаос элементов. Поэтому, когда она отсутствует, или представляет из себя вот это…

… на веб-странице правит произвол и путаница. Списки, кнопки, блоки и менюшки раскиданы как попало. Верстается все так же тупо и запутанно. А это не есть гуд.

Что из себя представляет модульная сетка

Набор горизонтальных линий, к которым привязываются практически все элементы, расположенные на странице.

В подавляющем большинстве случаев она бывает 12, 16 и 24 колоночной. Если вы делаете свободный сайт с большим количеством «воздуха» между элементами, стоит использовать 12 колоночную сетку. Если же , где должно быть over дох*уя информации на квадратный пиксель (привет forex), стоит использовать 24 колоночную сетку.

Где раздобыть модульную сетку

Существует 2 легальных способа ее получения в домашних условиях:

1. Нарисовать.

Долго, дорого (если учитывать человеко/часы, за которые вам платят деньги) и не всегда аху*енно (зависит от опытности дизайнера в этом вопросе). Я никогда этого не делал. На мой взгляд - лишний геморой и тупая работа.

Нужно высчитывать процентное соотношение столбцов и отступов, выставлять направляющие. Брр. В общем, я бы не стал рекомендовать этот способ.

2. Скачать

Зачем рисовать, если можно взять уже готовое? Причем не украсть, а скачать бесплатно. В этом вопросе, такой принцип работает на 100%. Существует огромное количество, как готовых сеток, так и всевозможных генераторов.

Давайте обратим внимание на некоторые из них:

Конечно же. Каждый дизайнер наверняка знает этот сайт. Здесь можно бесплатно скачать сетку под разрешение 960 px практически для всех возможных редакторов (Photoshop, Illustrator, Corel…)

Довольно интересный сервис, который позволяет создавать сетки под любые разрешение экрана, хоть 2500px. Идеально подойдет для адаптивного дизайна.

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

Одно из самых популярных расширений. Полностью бесплатно (но вы можете сделать пожертвование). Рекомендации по установке (English) можно прочитать . Если в двух словах и на русском: установите Adobe Extensios Manager (бесплатно), установите расширение, перейдите в Window > Extensions > GuideGuide , наслаждайтесь.

В заключении

Не стоит пренебрегать построением макета по модульной сетке. Это облегчит жизнь вашим коллегам дизайнерам и вашим коллегам верстальщикам. Если появились вопросы - милости прошу в комментарии.

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

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

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

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

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

Модулем можно назвать единицу измерения, создаваемую для придания соразмерности и пропорциональности.

Наверное, слишком заумно написал. Попробую объяснить простым языком, в нашем мире достаточно много примеров модульных сеток, к примеру, кирпичная стена в полкирпича она как раз будет модульной сеткой, а кирпич будет модулем.

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

Для чего нужна сетка, и какие задачи она выполняет?

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

• Ускоряет процесс разработки. Нам требуется гораздо меньше времени на подборку места для блоков в макете.
• Помогает в позиционирование. Все элементы выравниваются относительно друг друга по сетке, и позиционирование занимает минимум времени.
• Позволяет шаблонизировать. Разработав модульную сетку, мы создаем шаблонную основу для всего проекта, как при разработке, так и для решений на будущее. А также предоставляем возможности быстрой модификации.
• Исключает ошибки. Сетка позволяет избежать ряда самых обычных ошибок с позиционированием, структурированием, размерами и отступами между блоков.
• Является единой системой пропорций. Благодаря модулям все элементы в макете пропорциональны и соизмеримы между собой.
• Структурирует и упорядочивает. Благодаря модульной сетке макет становится более структурированный и упорядоченный, дизайн воспринимается более комфортным.
• Приводит к более эстетичному виду. Четкая и логическая структура получаемого сайта придает более эстетичный вид.
• Помогает в дальнейшей разработке другим участникам проекта. Дизайн, построенный посредством модульной системы верстки, верстать значительно легче, нежели макет, построенный без сетки. Сетка дает верстальщику стандартизацию решений, ускоряет процесс верстки. Позволяет легче работать большой команде над масштабными проектами. А так же позволяет гораздо быстрее разобраться в макете новым разработчикам участникам проекта. Что в свою очередь приводит к получению более целостного результата работы.

Строим модульную сетку

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

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

В данном случае я создам холст с шириной в 1000 пикселей под минимальное разрешение в 1024х768 пикселей. Контентную часть сделаю в 960 пикселей, по 20 пикселей отступы по краям (ширина наших полей).

Создаем шрифтовую сетку

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

Межстрочный интервал (в css line‑height) можно рассчитать двумя способами:

1. Размер основного шрифта для контента (16пт.) / 2 + размер основного шрифта для контента (16пт.) = 24пт.
2. Размер основного шрифта для контента (16пт.) x 1.5 = 24пт.

Строим вертикальное членение или колоночную сетку

Теперь самое интересное, нам необходимо создать колоночную сетку. Ширина колонки определяет ширину нашего модуля. Итак, нам необходимо определить эту самую ширину, как это можно сделать.

1. Если на сайте планируется присутствие блока с постоянной величиной (баннера, видео, иллюстрации и т.д.). Эти блоки имеют фиксированные размеры и зачастую включают в себя несколько модулей. Таким образом, зная их размер, мы можем с легкостью определить ширину модуля, достаточно понимать, что блок должен находиться в пределах ширины модулей.
2. Второй способ это когда у Вас есть конкретные задачи, на которые можно опираться. Например, по задаче стоит расположить в линию на всю ширину тела сайта определенное количество блоков, скажем 6. Тогда, зная этот параметр, мы можем прикинуть, что один такой блок включает в себя два модуля по ширине. Соответственно нам подойдет 12 колоночная сетка.

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

Таким образом, у нас получается ширина модуля равная 63,5 округлим до 63 пикселей. У нас остается по 0,5 пикселей на каждый модуль их у нас 12 итого 6 пикселей, раскидаем их на поля по 3 пикселя, тем самым наши поля увеличатся и станут равные 23 пикселям, а не 20, соответственно и контентная часть станет равная 954 пикс.

Примечание: количество колонок зависит от потребностей и задач и может отличаться. Однако стоит учесть такой факт, что удобнее работать с модулями средних размеров, нежели крупных или мелких. Крупные модули, получаются громоздкими и менее гибкими в обращение, а мелкие очень сильно рассеиваются и теряются, отчего также становится неудобными в работе.

Делаем горизонтальное членение

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

Создаем прототип макета

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

Оформляем, детализируем, прорабатываем

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

А вот так макет выглядит уже без модульной сетки в итоге после всей проделанной работы.

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

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

Ниже можно ознакомиться с пошаговым процессом создания дизайна от прототипа до готового макета сайта из этой статьи.

Видео процесс по созданию дизайна сайта с использованием модульной сетки:

• Урок 1:
• Урок 2:
• Урок 3:

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

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

Обратите внимание на один из эскизов развития Манхэттена 1807 года, который подчиняется строгой сетке улиц, проходящих с запада на восток и с севера на юг

Зачем нужны сетки?

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

Следуя новым веянием, в начале 1960-х художник-оформитель Питер Палаццо обновил дизайн газеты New York Herald Tribune. В 1966-м художественный редактор Джанет Коллинз ввела новую верстку в лондонской Times. Оба этих преобразования показали работникам индустрии, что единый стиль оформления повышает качество взаимодействия читателей с изданием. Газетчики и редакции журналов быстро поняли необходимость сеток и начали применять их в своей практике.

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

Йозеф Мюллер-Брокманн в своем пособии «Модульные системы в графическом дизайне » пишет о сетках так:

«Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. <…> Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».

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

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

Мы собрали наиболее распространенные и ставшие уже «классическими» образцы, знакомство с которыми поможет лучше понять модульное проектирование:

Квадратная сетка

Простейшая сетка, которая легла в основу модульной системы, состояла из квадратов и была похожа на обычную разграфленную таблицу. Она начала использоваться уже в конце первой четверти ХХ века. Дизайнеры-типографы из Цюриха и Базеля усовершенствовали ее в послевоенные годы, что совпало со скачком интереса к Гельветике и подобным ей шрифтам, породив школу «швейцарской типографики ».

На примере: Роберт Бюхлер, 1914 г.
Источник:

Продолжаем тему адаптивной верстки . Сегодня речь пойдет об одном из трех китов адаптивной верстки - макете на основе сетки (flexible gridbased layout). Два других – это и гибкие изображения (flexible images).

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

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

Чтобы применить к веб-странице модульную сетку следует использовать простую формулу пропорциональности:

target / context = result

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

Мы сверстаем его «резиновым». Но вот проблема: как задать ширину обоих блоков? Ведь если прописать ее в пикселях, то они уже не будут резиновыми. Значит, нужно использовать проценты, а не пиксели. Но позвольте, а какие значения писать-то? Все равно ведь нужно от чего-то отталкиваться.

Можно, конечно, прикинуть на глаз: контент занимает примерно 70% от общей ширины страницы, а сайдбар - 30%. Но правильный верстальщик никогда и ничего не прикидывает на глаз. Нам нужен точный размер.

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

660 / 960 = 0,6875
300 / 960 = 0,3125

Остается только перевести эти данные в проценты. Не сильно заморачиваясь, просто сдвинем запятую на два знака вправо. Получаем:

68,75%
31,25%

Вот так вот просто. Однако давайте усложним задачу. Предположим, у нас контентная часть разделена еще на две неравные части. Например, слева узкая колонка с датой статьи и социальными кнопками, расположенными вертикально, а правая колонка широкая, и в ней у нас размещен текст статьи.

Из дизайн-макета мы знаем, что ширина этой узкой колонки 120 пикселей, а широкой 520. Как перевести эти числа в %? Опять же применить формулу пропорции. Но на этот раз мы в качестве context-а используем не всю ширину страницы, а ширину того блока, куда входят эти две колонки, то есть ширину контентной части, которая у нас составляет 660 пикселей. Делим:

120 / 660 = 0,1818
520 / 660 = 0,7878

В процентах получаем соответственно 18,18% и 78,78%

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

Content {
width: 68,75%; /* 660px / 960px */
}

Надеюсь, с этим не возникло сложностей. Поехали дальше!

Макет на основе сетки

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

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

На самом деле таких сервисов сейчас пруд пруди! Еще они называются фреймворки. Выбирай, какой больше понравится. Вот отличная подборка 30 CSS-фреймворков для адаптивного веб-дизайна .

Для чего вообще нужны эти модульные сетки?

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

Кроме того, такие модульные сетки гораздо проще сделать адаптивными, чем беспорядочно разбросанные блоки разного размера.

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

Надеюсь, теперь вы знаете, что такое адаптивная верстка на основе модульной сетки.

В следующий раз поговорим про гибкие изображения в адаптивной верстке. Очень важная и не однозначная тема. Рекомендую ее тоже изучить хорошенько, чтобы не попасть впросак. Оставайтесь на связи! А еще лучше подпишитесь на рассылку новостей блога Вебсовет.

Специально для пользователей сайта сайт мы предоставляем практический урок, по применению системы 960 Grid. Представьте, что нам дали дизайн для вёрстки. Сначала мы должны наметить себе план реализации структуры сайта, а только потом приступить непосредственно к коду. После изучения этой статьи вам будет по зубам любая классическая вёрстка за кратчайшие сроки и натуральный цвет волос на многие годы (без седины). Итак, вот наш дизайн:

1. Создание сетки

Как вы уже знаете, система 960 Grid использует целый набор классов и доступна в нескольких вариантах (12 колоночной и 16 колоночной версиях). Основной контейнер, независимо от количества колонок всегда будет шириной 960px. Для этого дизайна мы выберем 12 колоночную систему. Каждый блок в системе 960 Grid имеет внешний отступ (margin) 0 10px. Это гарантирует нам ровные, пропорциональные отступы в 20px. Для тех, кого смущает размер 960px, советую взглянуть на вот эту схему. Данный размер является оптимальным для подавляющего большинства разрешений мониторов. Итак, у нас есть возможность создавать блоки вот такой ширины:

• 140px
• 220px
• 300px
• 380px
• 460px
• 540px
• 620px
• 700px
• 780px
• 860px
• 940px

У каждого размера есть свой класс, название которого строится по схеме grid_X, где X это количество колонок. Если вам нужен блок в 960px, то следует выбрать класс grid_12. Для того, чтобы активировать систему 960 Grid, необходимо родительскому контейнеру задать класс container_12 или container 16. Ниже находится небольшой пример страницы, состоящей из 3х блоков. Ширина первого равна ширине 960px, остальные 2 в два раза меньше:

Запомните, что когда вы заполняете строку блоками с классом grid_X, убедитесь в том, что в сумме они дают не больше 12. К примеру как у нас - два блока grid_6 + grid_6 = 12. Меньше можно: 6, 4, 2 и т.д. Теперь, когда мы пробежались по основным принципам, можем приступить к практическому занятию:

2. Создаём Mock-Up

Попробуем построить схему того, что нам надо сверстать. В первую очередь нам необходимо 2 блока по 960px. Один для логотипа, другой для навигации. Дальше 2 блока (на одной строке), для постера и презентации сайта, блок разделитель (на всю ширину), 4 колонки (на одной строке), снова блок разделитель и футтер. Приблизительно вот так:

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

Помните, что в конце каждой строчки нам необходимо вставлять

для нормального отображения во всех браузерах. Не забудьте так же заинклудить 960 Grid CSS на вашу страницу в разделе head.

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

Div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }

Вот что у нас должно получиться:

Информация нас сейчас совершенно не интересует, так что в центральные колонки можете вставить контент с вот этой вот страницы. Перед тем, как заняться верхней частью, займёмся нижней. В нашем дизайне фон футера окрашен в серый цвет. На данный момент мы не можем это реализовать так как если вы помните, между блоками есть некоторый отступ, который не позволит нам полностью закрасить данный участок. Для решения этой задачи вынесем 3 блока, относящиеся к футеру в отдельные блоки с id = footer. Ещё одна деталь: когда мы используем классы внутри классов, то хорошо бы задать значения alpha (для того, чтобы указать какой блок будет первым и omega - для последнего):

Div#footer { background-color: #e5e5e6; }

Превосходно! Теперь у нашего футера есть цвет фона. Добавите в него какой-то текст и приступим к блоку с навигацией. По всем законам современных принципов вёрстки, навигация это ненумерованный список. Добавьте следующий код и стиль:

• Articles
• Topics
• About
• Editors
• Contact