Начиная работу над сайтом, следующим этапом после заполнения брифа и маркетингового анализа бизнеса, мы приступаем к дизайну. А неотъемлемой частью дизайна является модульная сетка, которая помогает нам соблюдать пропорции и делать меньше ошибок.
Модульная сетка - это система, которая помогает организовать объекты в пространстве. Ваш текст, картинки, блоки и элементы дизайна располагаются на макете правильно и гармонично. За счет того, что сетка помогает соблюдать расстояние между модулями.
Таким образом мы понимаем, что сетка наш помощник и задает стандарт расположения элементов. А так же:
- Облегчает выравнивание;
- Помогает экономить время при расположении новых элементов;
- Пользователю легче считывать информацию;
- Делает дизайн эстетичным и гармоничным благодаря пропорциям;
- Формирует единый стиль;
- Легче сделать сайт адаптивным.
Понятно? Если не очень, то смотри дальше и вместе разберем на примерах. Но сначала добавлю, что модульные сетки пришли к нам из газет. А встречаются они везде: архитектуре, плакатах, книгах, газетах, градостроительстве, сайтах, дизайне интерьера, создании логотипов. Абсолютно везде где есть необходимость в соблюдении пропорций.
Какими бывают модульные сетки?
Посмотрите на несколько самых распространенных типов модульной сетки.
01. Квадратная сетка
Квадратная сетка начала применяться еще где-то в начале 20 века и легла в основу всей модульной системы.
02. Сетка Макса Била
Макс Билл (1908-1994) родился в Швейцарии, был художником-графиком и дизайнером. Сейчас принято считать, что именно он впервые применил сетку в многополосниках, в проекте издания третьей части книги о Ле Корбюзье (1939). Хотя сам Макс Билл говорил о первом опыте применения сетки с некоторой иронией.
«Сетка получилась нестабильной, скорее абстрактной, изменяемой от страницы к странице» - Макс Билл
Позже в книге «Die Neue Architektur» Альфреда Рота (1940) дизайнером был приведен идеальный пример использования модульных систем.
03. Вилли Флекхауз и его 12-колоночная сетка
Свой вариант сетки предназначенной для больших форматов нам показал Вилли Флекхауз в 1959 году. Она создавалась для журнала Twen, но после начала применяться и в других проектах. Сейчас модульная сетка из 12 колонок самая распространенная из-за своей универсальности
04. Многослойная сетка Карла Герстнера
Если с прошлыми примерами все достаточно просто и понятно, то в этом действительно нужно разбираться. Создавалась она по заказу журнала Capital. А для описания лучше привести цитату Аллена Херлберта.
«Фактически она представляет собой шестиколонник с наложенным на него четырехколонником. Эта сетка также дает возможность выбрать шесть, четыре, три или две колонки, но в придачу предусматривает еще и возможность оригинального пятиколонного макета. Такая сетка требует тщательного изучения, и художнику-оформителю придется немало потрудиться, прежде чем он сможет свободно и творчески ею пользоваться» - Аллен Херлберт
Преимущество такой сетки в том, что она дает возможность использовать не только две, три, четыре или шесть колонок, но и создать макет из пяти колонок.
05. Смешанная модульная сетка
Такую модульную систему используют при верстке и в web-дизайне. Она отлично подходит при создании макетов для сайтов информационного характера из-за необходимости структурировать большое количество текстового материала.
06. Иерархическая модульная сетка
Встречается такая сетка достаточно редко. Она имеет абсолютно интуитивное построение блоков и для использования требует значительный опыт. Применяется в основном на сайтах посвященных моде, искусству и фотографии.
Какую модульную сетку использовать в веб?
Делая первые шаги в веб-дизайне вы скорей всего будете использовать сетку из 12 колонок, она делится на 2,3,4,6, что делает ее универсальной и позволяет создавать блоки с различным количеством элементов в ряду.
Но вот у меня всегда было еще два вопроса. Я не понимал какой лучше ширины использовать сетку и какого размера делать макет. От этого зависело сколько я провожусь с адаптивностью моего будущего сайта.
Если верить статистике сайта screenresolution , то получается, что приоритетными разрешениями экранов будет первая десятка с этого скриншота.
Опираясь на статистику, мне кажется, что разумней использовать ширину сетки не меньше 1170px. Такая рабочая область будет хорошо смотреться на большинстве разрешений мониторов, а подбить адаптивность под 960px не составит особого труда.
Я работаю в Figma и создание модульной сетки там выглядит вот таким образом. А при необходимости видимость сетки можно включать и отключать нажатием Ctrl+Shift+4 (на Windows)
Если вы работаете в Photoshop, то вот несколько сайтов откуда можно скачать нужную вам сетку.
Подведем итог
Модульные сетки необходимо знать и использовать, особенно на ранних этапах своей карьеры. Они научат вас порядку в дизайне. Изучайте применение сетки в плакатах, книгах, журналах, логотипах и на сайтах.
Сели создавать дизайн своего будущего сайта и не знаете какой модульной сеткой воспользоваться? Используйте 12-колоночную с рабочей область 960px, 1170px или 1440px. Это наиболее распространенные варианты. Для меня же оптимальным стал второй.
Придерживайтесь сетки, но если видите, что в некоторых моментах соблюдение ей вредит вашему дизайну, то нарушайте. Она призвана помогать и упрощать работу, но не обязует свято следовать ей в любых ситуациях.