Модуль — единица измерения с фиксированной высотой и шириной, самая маленькая составляющая дизайна сайта. На основе модулей строится модульная сетка — горизонтальные и вертикальные линии, которые делят всю страницу на прямоугольники. Модульная сетка — одна из первых вещей, с которой сталкивается любой веб-дизайнер. Она служит каркасом для всех страниц сайта, задает правила расположения элементов: заголовков, текстов и изображений. Сетка призвана сделать процесс удобным, а результат — аккуратным и цельным. Она может быть простой или сложной, гибкой или строгой — главное, что она задает единые правила для всего сайта.
Преимущества использования модульных сеток
- Задает порядок расположения объектов, выступы становятся аккуратными и выверенными.
- Снижает вероятность ошибки при отрисовке страниц.
- Делает дизайн более приятным визуально, за счет соблюдения пропорций.
- Дает общую логику, с которой проще работать командно.
- Дает хорошую базу для создания адаптива.
- Это не просто картинка. Когда мы добавляем объект, его границы автоматически пристают к направляющим линиям.
Как рассчитать сетку?
Для начала, нужно определиться с шириной рабочей области. Как правило, она составляет 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.
Такое распределение позволяет гибко работать с элементами разных размеров.
Элемент не укладывается в сетку: что делать?
Подбирайте модульную сетку в зависимости от контента, а не наоборот. Помните, что сетка должна не мешать, а помогать в дизайне. Если упорно не получается уместить элементы, подберите другие параметры для колонок и расстояний между ними. Мы разрабатываем шаблоны Ucraft, опираясь на модульные сетки, и результат получается аккуратным, чистым и привлекательным. Попробуйте поработать с ними: на практике дизайн усваивается гораздо легче и быстрее!