Как сделать сетку сайта

Обновлено: 08.07.2024

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

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

Сетка по умолчанию способствует соблюдению ряда принципов дизайна, таких как правила внешнего и внутреннего, теорию близости.

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

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

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

Ниже на примере слева мы видим сайт со скролом, а справа без.

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

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

Давайте поговорим о структуре сетки подробнее. Как мы уже говорили колоночная сетка состоит из вертикальных колонок, в которые встраиваются модули, где каждый модуль является основой для вложение в него контента (текста, изображений и элементов интерфейса). И в свою очередь горизонтальные колонки регулируют отступы между этими модулями. Внешние поля в сетке нужны, чтобы элементы не прилипали к краю экрана. Они могут быть 15px с каждой из сторон от самой сетки, как в нашем примере ниже. И гораздо шире, в зависимости от задумки дизайна. Например, в макете с сеткой на 1280px, ширина рабочей области может быть 1440px.

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

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

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

Разрешение экрана — это размер видимого изображения измеряемое в пикселях. Например, 1920х1080px, 1280x1024px, 1024x768px, 768х1024px, 320х480px и т.д. Разрешение зависит от технических характеристик экрана устройства. Важно! У изображения есть еще один параметр dpi. Для веба используется 72dpi. Об этом мы поговорим в следующих уроках.

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

В 90% проектов используется сетка на 12 колонок. Это связано с тем, что число 12 делится на: 12, 6, 4, 3, 2, 1, делая сетку гибкой, позволяя органично вписывать в нее блоки практически любого количества или ширины. Давайте рассмотрим пример сеток для устройств с разными экранами.

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

Модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции страницы (печатной или веб). Делить страницу на модули дизайнеры придумали в середине XX века для того, чтобы упростить и ускорить конструирование макета.

Модульная сетка. На основе модулей строится сетка — вертикальные и горизонтальные линии, разделяющие страницу на прямоугольники. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: заголовки, тексты, изображения.

Пример модульной сетки, использованной для оформления портфолио интерактивного агентства МАНУФАКТУРА.

Дмитрий Провоторов

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

Снижает вероятность ошибок при переносе элементов с одной страницы на другую.

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

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

Адаптивный дизайн на основе сетки делать проще.

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

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

Что такое модульные сетки

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

Пример стандартной модульной сетки

Зачем нужна модульная сетка?

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

Из истории вопроса

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

Модульными сетками люди начали пользоваться задолго до изобретения интернета. Попытки подкрепить интуитивное чувство пропорции строгими математическими расчётами характерны для всех культур и времён.

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

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

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

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

Пример многослойной модульной сетки Карла Герстнера

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

На данный момент существует множество видов сеток, мы рассмотрим основные.

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

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

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

Красным цветом отмечен модуль, а зеленым — микромодуль

Модульные сетки используются везде

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

Модульная сетка помогает соблюдать правило третей при композиции кадра в кино.

Что касается айдентики, логотип Twitter также строится на основе модулей, однако, они не обычной квадратной формы, а круглые. На основе модулей выполнен и логотип Apple. Редизайн логотипа немецкого концерна Braun также сделан на основе сетки.

Как рассчитать сетку?

Высчитывать сетку самостоятельно на данный момент не имеет никакого смысла. В сети вы найдёте множество калькуляторов сеток, например:

В такие инструменты, как Sketch и Figma сетки уже встроены в редактор. Также есть специальные плагины для графических редакторов. Например, плагины для Adobe Photoshop и Adobe Illustrator.

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

Система сеток – это часть дизайн-системы продукта

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

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

Пример использования принципа 5х5 px в студии Area 17

Area17 жёстко следуют принципу 5×5 px – строят все макеты на основе микромодуля шириной в 5 px. Как ни странно, это помогает работать с макетами каждый раз по-разному, сохраняя собственный стиль.

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

Пример из дизайн-системы Material Design

Тренды в модульных системах

Сломанная сетка

На сегодняшний день — это один из наиболее популярных подходов к созданию сайта.

Диагональные сетки

Разделённый экран

Далеко не новый, но всё ещё актуальный тренд базируется на разделении экрана и основного изображения на две зоны. Здесь можно посмотреть, как разделённый экран работает не только с изображением, но и скроллом на странице.

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

UX/UI-дизайнер с нуля до PRO

Научитесь создавать пользовательские интерфейсы
с нуля за 15 месяцев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Минимальным разрешением чаще всего принимаются разрешения монитора в 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 пикс.

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

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

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

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

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

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

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

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

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

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

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

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

Публикация: 27.07.2018 07.08.2018 Kirill Lipovoy

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

Зачем использовать модульную сетку

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

Модульные сетки в веб-дизайне дают следующие преимущества:

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

Как использовать модульную сетку

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

Когда концепция будет готова, опишите все блоки страниц веб-сайта и разместите элементы.

Откройте или создайте модульную сетку в редакторе изображений.

Разместите блоки на модульной сетке.

Левая и правая границы блоков всегда начинаются и заканчиваются на столбцах. Границы всегда совпадают с границами столбцов, как показано выше.

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

Как сделать модульную сетку

Определите ширину рабочей области

Подсказка: общая ширина рабочей области составляет 960 пикселей. Но в настоящее время существует множество пользователей широкоэкранного монитора, пользователей планшетов и пользователей смартфонов. Таким образом, команда, создавшая front-end framework Bootstrap, рекомендует увеличить общую ширину рабочей области:

1200 пикселей и для широкоэкранного монитора;
970px для монитора по умолчанию;
768 пикселей для экрана планшета;
480px и ниже для экрана телефона;

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

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

Вычислите ширину столбцов и отступы между ними.

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

Пример. У вас рабочая область 1200px и вы решили использовать 12 столбцов.

1200px / 12 = 100px для каждого столбца

Добавить 30px для отсупов. Теперь это 12 колонок с шириной 70 пикселей и 11 оступов с шириной 30 пикселей.

100px = 70px + 30px

Крайние левый и правый отступ равны 15px.

1200px = (70px * 12) + (30px * 11) + (15px * 2)

Нарисуйте сетку шрифтов

Сетка шрифта — это горизонтальные строки, которые определяют вертикальный ритм и местоположение шрифта. Расстояние между строками сетки шрифтов равно высоте строки основного шрифта.

Пример. Если вы используете шрифт 15px для основного текста, высота линии и расстояние между линиями будут 24px.

Подсказка. Чтобы рассчитать высоту линии, используйте Калькулятор типовой шкалы Golden Ratio.

Объединить строки сетки шрифтов в группы

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

С этого момента у вас есть полная модульная сетка и вы можете ее использовать.

Читайте также: