Как сделать модульную сетку
Добавил пользователь Валентин П. Обновлено: 04.10.2024
В этом уроке мы не будем углубляться в историю сеток, а поговорим о практическом применении их в вебе.
Модульная сетка в вебе — это один из инструментов, который помогает дизайнеру организовывать пространство экрана. Т.е. являясь основой композиции она помогает выстраивать элементы дизайна подчиняя их единому порядку.
Сетка по умолчанию способствует соблюдению ряда принципов дизайна, таких как правила внешнего и внутреннего, теорию близости.
Для создания дизайна сайтов используется колоночная модульная сетка, состоящая из вертикальных и горизонтальных колонок обозначающих систему отступов между элементами дизайна.
В этом примере вертикальные колонки организуют блоки (модули), а горизонтальные упорядочивают расстояние между ними.
Сетка с ключевым вертикальным ритмом используется не случайно. Это связано с тем, что контент на сайте не фиксируется по вертикали, как это происходит в полиграфии, где размер области страницы является статичной. В нашем случае сайт не заканчивается нижним краем экрана, а скоролиться дальше вниз за исключением одноэкранных страниц сайтов.
Ниже на примере слева мы видим сайт со скролом, а справа без.
Давайте рассмотрим еще один пример с блоком новостей с корпоративного сайта, где хорошо видно текст размещенный на сайте может быть разного объема относительно вертикали и тянуться вниз.
В вебе горизонтальные линии используются для выравнивания расстояний между целыми блоками, как показано на иллюстрации в первом примере.
Давайте поговорим о структуре сетки подробнее. Как мы уже говорили колоночная сетка состоит из вертикальных колонок, в которые встраиваются модули, где каждый модуль является основой для вложение в него контента (текста, изображений и элементов интерфейса). И в свою очередь горизонтальные колонки регулируют отступы между этими модулями. Внешние поля в сетке нужны, чтобы элементы не прилипали к краю экрана. Они могут быть 15px с каждой из сторон от самой сетки, как в нашем примере ниже. И гораздо шире, в зависимости от задумки дизайна. Например, в макете с сеткой на 1280px, ширина рабочей области может быть 1440px.
При разработки дизайна сайтов модульная сетка упрощает создание адаптивных версий дизайна для экранов разных устройств, таких как мониторы (декстоп), планшеты и смартфоны.
Благодаря адаптивному дизайну обеспечивается корректное отображение сайта на этих устройствах с разным разрешением.
В этом примере хорошо видно как работает адаптив в вебе, когда ширина экрана достигает определенных контрольных точек, мы видим как блоки на сайте меняют свое положение подчиняясь колоночному ритму.
Разрешение экрана — это размер видимого изображения измеряемое в пикселях. Например, 1920х1080px, 1280x1024px, 1024x768px, 768х1024px, 320х480px и т.д. Разрешение зависит от технических характеристик экрана устройства. Важно! У изображения есть еще один параметр dpi. Для веба используется 72dpi. Об этом мы поговорим в следующих уроках.
Колоночная сетка в адаптивном дизайне может состоять из разного количества вертикальных колонок. Это зависит от назначения сайта и количества предполагаемого на нем контента. Например для новостного сайта нужно больше колонок, чем для лендинга с небольшим количеством размещаемой информацией.
В 90% проектов используется сетка на 12 колонок. Это связано с тем, что число 12 делится на: 12, 6, 4, 3, 2, 1, делая сетку гибкой, позволяя органично вписывать в нее блоки практически любого количества или ширины. Давайте рассмотрим пример сеток для устройств с разными экранами.
На изображениях ниже мы рассмотрим два подхода к построению сеток. Первое, когда меняется количество колонок, а ширина колонки и межколонного расстояния сохраняется. И второе, когда сетка сохраняет 12 колоночную структуру, а меняется ширина колонки и межколонного расстояния.
Наконец я добрался и до сайта все как-то времени маловато, вот решил написать статью на тему модульных сеток в веб-дизайне, может, кому информация будет полезна и интересна. Модульная сетка это очень полезный инструмент для веб-дизайнера, и многие начинающие пренебрегают им почему-то, а зря.
Постараюсь в сегодняшнем материале рассказать о том, что такое модульная сетка, какие задачи она выполняет, как ее можно построить самому, а также покажу пример создания макета дизайна сайта на ее примере.
В качестве примера я создал несложный макет дизайна блога. Конечно же, рассматривать все мелочи создания дизайна в рамках этой статьи я не буду, покажу лишь общий принцип как можно использовать сетку для создания дизайна сайта.
Что такое модульная сетка?
Модульная сетка — это система модульной верстки, которая представляет собой сетку с вертикальным и горизонтальным ритмом, пересечения ритмов образуют модули. Таким образом, вся сетка состоит из таких модулей отсюда и появилось ее название.
Модулем можно назвать единицу измерения, создаваемую для придания соразмерности и пропорциональности.
Наверное, слишком заумно написал. Попробую объяснить простым языком, в нашем мире достаточно много примеров модульных сеток, к примеру, кирпичная стена в полкирпича она как раз будет модульной сеткой, а кирпич будет модулем.
Плитка в ванной комнате, тоже, вся стена модульная сетка (при условии, что вся плитка одного размера), а одна плитка это модуль или единица измерения как в нашем случае.
Думаю так более понятно, итак идем дальше, давайте определимся, для чего нам необходима сетка.
Для чего нужна сетка, и какие задачи она выполняет?
Сетка необходима для быстрой разработки макета, прототипа, дизайна сайта или приложения. Она значительно экономит время на разработку, структурирование, шаблонизирование макета. Убирает необходимость рутинной работы по позиционированию и выравниванию блоков дизайна. Упрощает работу как дизайнеру, верстальщику так и команде разработчиков в целом.
- Ускоряет процесс разработки. Нам требуется гораздо меньше времени на подборку места для блоков в макете.
- Помогает в позиционирование. Все элементы выравниваются относительно друг друга по сетке, и позиционирование занимает минимум времени.
- Позволяет шаблонизировать. Разработав модульную сетку, мы создаем шаблонную основу для всего проекта, как при разработке, так и для решений на будущее. А также предоставляем возможности быстрой модификации.
- Исключает ошибки. Сетка позволяет избежать ряда самых обычных ошибок с позиционированием, структурированием, размерами и отступами между блоков.
- Является единой системой пропорций. Благодаря модулям все элементы в макете пропорциональны и соизмеримы между собой.
- Структурирует и упорядочивает. Благодаря модульной сетке макет становится более структурированный и упорядоченный, дизайн воспринимается более комфортным.
- Приводит к более эстетичному виду. Четкая и логическая структура получаемого сайта придает более эстетичный вид.
- Помогает в дальнейшей разработке другим участникам проекта. Дизайн, построенный посредством модульной системы верстки, верстать значительно легче, нежели макет, построенный без сетки. Сетка дает верстальщику стандартизацию решений, ускоряет процесс верстки. Позволяет легче работать большой команде над масштабными проектами. А так же позволяет гораздо быстрее разобраться в макете новым разработчикам участникам проекта. Что в свою очередь приводит к получению более целостного результата работы.
Строим модульную сетку
Первым делом перед началом создания модульной сетки нам необходимо определиться с размерами макета будущего сайта. Определяемся, под какое минимальное разрешение мы создаем макет.
Минимальным разрешением чаще всего принимаются разрешения монитора в 1024х768 и 1280х720 пикселей. Конечно, могут быть выбраны и другие разрешения, все как всегда зависит от стоящей перед Вами задачи. Исходя из этих параметров, нам и придется создавать размеры макета сайта. Из них нам наиболее важна ширина, так как она зачастую фиксирована у сайтов, а высота наоборот варьирует из-за наполнения сайта.
В данном случае я создам холст с шириной в 1000 пикселей под минимальное разрешение в 1024х768 пикселей. Контентную часть сделаю в 960 пикселей, по 20 пикселей отступы по краям (ширина наших полей).
Создаем шрифтовую сетку
Первым делом мы создаем шрифтовую сетку. Выбираем одну высоту строки для всего макета сайта. Разлиновываем его как тетрадь в пропись, на которой у нас будут располагаться все тексты, списки, иллюстрации, заголовки, абзацы и прочие плашки. Высоту строки я создаю обычно в 18 пикселей, но может быть и другой размер все зависит от выбранного кегля и шрифта.
Межстрочный интервал ( в css line‑height ) можно рассчитать двумя способами:
- Размер основного шрифта для контента (16пт.) / 2 + размер основного шрифта для контента (16пт.) = 24пт.
- Размер основного шрифта для контента (16пт.) x 1.5 = 24пт.
Строим вертикальное членение или колоночную сетку
Теперь самое интересное, нам необходимо создать колоночную сетку. Ширина колонки определяет ширину нашего модуля. Итак, нам необходимо определить эту самую ширину, как это можно сделать.
- Если на сайте планируется присутствие блока с постоянной величиной (баннера, видео, иллюстрации и т.д.). Эти блоки имеют фиксированные размеры и зачастую включают в себя несколько модулей. Таким образом, зная их размер, мы можем с легкостью определить ширину модуля, достаточно понимать, что блок должен находиться в пределах ширины модулей.
- Второй способ это когда у Вас есть конкретные задачи, на которые можно опираться. Например, по задаче стоит расположить в линию на всю ширину тела сайта определенное количество блоков, скажем 6. Тогда, зная этот параметр, мы можем прикинуть, что один такой блок включает в себя два модуля по ширине. Соответственно нам подойдет 12 колоночная сетка.
Дополнительно нам необходимо определить расстояние между модулями или колонками. Я в основном использую размер строки шрифтовой сетки, в данном случае это 18 пикселей.
Таким образом, у нас получается ширина модуля равная 63,5 округлим до 63 пикселей. У нас остается по 0,5 пикселей на каждый модуль их у нас 12 итого 6 пикселей, раскидаем их на поля по 3 пикселя, тем самым наши поля увеличатся и станут равные 23 пикселям, а не 20, соответственно и контентная часть станет равная 954 пикс.
Примечание: количество колонок зависит от потребностей и задач и может отличаться. Однако стоит учесть такой факт, что удобнее работать с модулями средних размеров, нежели крупных или мелких. Крупные модули, получаются громоздкими и менее гибкими в обращение, а мелкие очень сильно рассеиваются и теряются, отчего также становится неудобными в работе.
Делаем горизонтальное членение
Тут все просто берем несколько строк и объединяем их в одну линию, далее пропускаем одну строчку и снова объединяем несколько строк. В нашем случае я буду объединять по три. Все линии создаются в полупрозрачном виде, тем самым в местах их пересечения образуются квадраты, которые и будут нашими модулями. Вот в принципе и все модульная сетка создана.
Создаем прототип макета
Теперь на небольшом примере я покажу, как эту сетку можно использовать. Очень часто рисую первым делом эскиз на бумаге, так просто получается быстрее набросать варианты исходя из поставленной задачи, а когда уже есть некая структура, переношу ее на сетку, делаю прототип сайта. Создавая прототип, где необходимо объединяю по несколько модулей в регионы и накидываю плашками все блоки.
Оформляем, детализируем, прорабатываем
А вот так макет выглядит уже без модульной сетки в итоге после всей проделанной работы.
Макет делался исключительно для данной статьи. Для того чтобы показать на примере, как использовать модульную сетку в веб-дизайне. Хочется заметить, что сетку можно использовать в комплексе с направляющими, данный метод еще более эффективен.
И в заключение хочу сказать, использовать сетки в своих работах или нет дело Ваше, я лишь немного хотел рассказать об этом инструменте веб-дизайнера, который мне очень помогает в работе.
Ниже можно ознакомиться с пошаговым процессом создания дизайна от прототипа до готового макета сайта из этой статьи.
Видео процесс по созданию дизайна сайта с использованием модульной сетки:
Модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции страницы (печатной или веб). Делить страницу на модули дизайнеры придумали в середине XX века для того, чтобы упростить и ускорить конструирование макета.
Модульная сетка. На основе модулей строится сетка — вертикальные и горизонтальные линии, разделяющие страницу на прямоугольники. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: заголовки, тексты, изображения.
Пример модульной сетки, использованной для оформления портфолио интерактивного агентства МАНУФАКТУРА.
Дмитрий Провоторов
Сетка задает стандарт расположения элементов: это облегчает выравнивание элементов, добавление новых и поддержку страницы в дальнейшем. Сетка позволяет работать быстрее.
Снижает вероятность ошибок при переносе элементов с одной страницы на другую.
Помогает странице выглядеть более эстетично за счет того, что элементы пропорциональны и структурированы.
Помогает быстрее разобраться в макете новым участникам, так как в сетке всегда есть логика.
Адаптивный дизайн на основе сетки делать проще.
Кроме того, если в дизайне используется сетка, то это потом помогает пользователю быстрее считывать информацию. Сетка создает визуальный порядок и ориентироваться становится легче.
Все, что окружает нас, имеет свои пропорции – точнее, мы ищем пропорции в вещах вокруг. Для чего? Чтобы проще сравнивать предметы, конструировать и проектировать в пространстве. Еще в детстве мультик “38 попугаев” научил нас тому, что все можно поделить на части, равные друг другу (длина удава состояла из 38 попугаев).
Также все мы знаем о том, что рост человека равняется семи его головам, сантиметр состоит из десяти миллиметров, метр из ста сантиметров и так далее. Таким образом, попугай из мультика, голова человека, миллиметр и сантиметр – это модули.
Из всего этого мы можем понять, что модуль – это условная единица, шаг в ритме сетки. А сама сетка являет собой систему пропорций.
Чем же нам поможет эта модульная сетка? Во-первых, она ускорит работу, потому что нам не придется тратить массу времени на попытки гармонично расставить все элементы. Во-вторых, с помощью сетки мы сможем понять, какой кегль нам нужно применить и каких размеров должен быть каждый блок. В целом, модульная сетка является каркасом, который значительно облегчает построение сайта.
Давайте же рассмотрим, какими бывают сетки
1. Самый простой тип – блочная сетка
То есть, она делает грубую разметку, разделяя площадь на блоки.
2. Сетка, разделенная на колонки
3. Модульная сетка
Она имеет не только вертикальное членение, но и горизонтальное – так мы получаем заданный ритм и размер, не вычисляя каждое расстояние в отдельности. Таким образом, то, что получается на пересечениях прямых, и есть модуль.
Модульная сетка
4. Иерархическая сетка,
блоки в ней размещаются интуитивно и не поддаются никаким закономерностям.
Как создать модульную сетку.
1. Для начала нам нужно понять, какую функцию должен будет выполнять наш сайт, выявляем его структуру и состав страниц. Затем определяем, какие страницы будут самыми важными, с них и начнется работа. Для них мы сформируем список функциональности и рассортируем его по приоритетам.
Мы должны описать каждый блок функциональности и детализировать его до мелочей. В итоге должен получиться список, в котором по уровням расписываются блоки и их элементы. Таким образом, у нас теперь есть пазлы, высыпанные из коробки, и нам осталось только собрать их в целостную картину.
2. Далее нам нужно сделать эскиз, в котором мы схематически изобразим все, что есть в нашем списке. Эскиз нужен для того, чтобы впоследствии мы смогли понять размеры модулей и составить сетку.
3. Построение сетки начинаем с определения размеров рабочей области. Затем нам нужно сделать шрифтовую сетку. Для этого выбираем высоту строки, которая должна быть единой для всего макета. В элементах, которые имеют кегль отличный от кегля основного текста, междустрочный пробел должен быть кратным нашей высоте строки.
Таким образом, мы получаем основание нашей будущей сетки. На это основание будет опираться весь текст.
4. Теперь нам нужно решить, какой ширины будет наш модуль. Здесь мы можем оттолкнуться от ширины какого-либо постоянного элемента. Если же у вас есть задача разместить по ширине страницы какие-то одинаковые элементы, то все становится еще проще, ведь вы уже знаете ее размеры.
Для удобства нам нужно определить, каким будет расстояние между модулями. Оно должно быть равно минимум одной высоте строки из прошлого пункта.
Есть один нюанс – нужно правильно выбрать размеры модуля, ведь если они будут слишком большими, то пропадет гибкость сетки, а если же они будут мелкими, то сетка просто потеряется.
5. Горизонтальное членение сделать достаточно просто. Его высота должна быть кратна высоте нашей строки. А уж сколько строк вы вставите в одно членение – это уже зависит от вашего эскиза.
6. Теперь осталось только объединить модули в регионы и создать композицию.
Конечно, модульная сетка весьма помогает в построении сайта, но если композиция будет выглядеть лучше без нее, то никто не вправе вам запретить ее “сломать”. Все таки человеческий глаз иногда воспринимает графическую информацию не такой, какой она является на самом деле.
Для облегчения поисков инструментов построения сеток вот вам несколько ссылок:
1. Guide Guide и GridMaker – плагины для Photoshop.
2. Grid System Generator, Modular Grid Pattern и 960 Grid System – онлайн инструменты, с помощью которых вы можете скачать уже готовую сетку нужных вам размеров.
3. Gridpak – позволяет создать сетку для адаптивного сайта.
Заключение
Итак, что мы поняли. Человек с древних времен тянется к пропорциям – так проще воспринимать информацию. В работе дизайнера, когда макеты состоят из различных элементов, сетка помогает их упорядочить. Модульная выгодно отличается от других типов сетки, потому что позволяет проще сохранять размеры элементов (модулей) на протяжении всего сайта.
В сети полно инструментов, которые помогут вам создать сетку нужного размера – в статье мы даем ссылки лишь на некоторые. Но не забывайте: сетка – не универсальное решение. Если композиция без нее смотрится лучше, не бойтесь “сломать” модульную конструкцию.
Читайте также: