Модульные сетки в веб-дизайне

Автор /  Ita Babayan

24 ноября 2017

Модульные сетки в веб-дизайне

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

 

 

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

 

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

 

 

 

grid

 

 

 

Преимущества использования модульных сеток

 

 

 - Задает порядок расположения объектов, выступы становятся аккуратными и выверенными.

 

 - Снижает вероятность ошибки при отрисовке страниц.

 

 - Делает дизайн более приятным визуально, за счет соблюдения пропорций.

 

 - Дает общую логику, с которой проще работать командно.

 

 - Дает хорошую базу для создания адаптива.

 

 - Это не просто картинка. Когда мы добавляем объект, его границы автоматически пристают к направляющим линиям.

 

 

 

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

 

 

Для начала, нужно определиться с шириной рабочей области. Как правило, она составляет 960px. Если ширина больше (например, 1200px), то увеличивается расстояние между колонками.  Отметим, что под мобильные форматы идут сетки поменьше. 750px — под планшеты, 480px и 320px — под мобильные телефоны и смартфоны.

 

Количество колонок подбирается в зависимости от контента. Самый распространенный вариант — 12, потому что это число удобно делить и на 2, и на 3, и на 4. Дизайн становится более гибким.

 

Если взять значения 960px и 12 колонок, мы получаем ширину одного модуля в 80px. В нее входят ширина колонки и расстояние до следующей колонки. Распространенное соотношение колонки и межколонника: 60px и 20px. Но возможны и другие варианты: 64px и 16px, 68px и 12px, 70px и 10px.

 

 

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

 

 - 12 колонок по 60px.

 - 11 межколонников по 20px.

 - 2 интервала слева и справа по 10px.

 

Такое распределение позволяет гибко работать с элементами разных размеров.

 

 

 

modular grid 

 

 

 

Элемент не укладывается в сетку: что делать?

 

 

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

 

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

 

 

 

#Заметка

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