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

Привет! В сегодняшней статье разберёмся с сетками в веб-дизайне.

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

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

Для начала давайте разберёмся, что такое модуль?

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

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

Для чего вообще нужна модульная сетка?

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

По сути вот эти Guides в Photoshop (View —> New Guide) и есть направляющая сетка, именно для веб-дизайна. Чтобы убрать направляющую включаем Rules (линейку), берём Move Tools (V) и перетаскиваем Guide (направляющую линию) на линейку сбоку или сверху в зависимости от того горизонтальный или вертикальный Guide (направляющая линия). Так же можно и получить новую направляющую, нажать на линейке и вытащить её в рабочую область.

Почему просто вот такая сетка не подходит? Иногда бывает набираете «скачать сетку для фотошопа», «grid psd». Скачиваете открываете, а там сама сетка, в таком виде как на скриншоте и если вы нажимаете Ctrl+H, чтобы сетка из Guide lines отображалась, а её нет, значит это просто векторные колонки. Векторные колонки, Карл! Обычная картинка.

Простым языком о модульных сетках 2

Почему именно такая сетка не подходит? Потому что вся прелесть сетки используемой в веб-дизайне в том, что когда мы добавляем выделение или объект, его границы автоматически пристают к направляющим линиям. А в данном случае это просто картинка и она ничего к своим краям не притягивает.
В этом случае можно на глаз поставить, но это никак не гарантирует, что мы попадём пиксель в пиксель, чётко по сетке.

Простым языком о модульных сетках 3

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

Простым языком о модульных сетках 4

Вот как это выглядит без сетки.

Простым языком о модульных сетках 5

Каковы плюсы сетки:

  • Задаёт стандарты расположения объектов — выверенные отступы;
  • Шаблонизирует и снижает вероятность ошибок при отрисовке дополнительных страниц;
  • Делает визуально приятным дизайн, за счёт соблюдения пропорций и структуры;
  • Задаёт логику и облегчает работу целой команды над одним макетом;
  • На основе дизайна построенного на сетках, проще работать над адаптивностью дизайна.

Виды сеток

  1. Блочная — это модуль, его трудно назвать сеткой, просто 1 модуль
    Простым языком о модульных сетках 6
  2. Колоночная — её называют модульной, но это по сути колоночная сетка, состоящая из колонок
    О модульных сетках простыми словами 7
  3. Модульная сетка — в основном в печатной продукции, поскольку есть формат листа. В веб-дизайне не всегда понятно какая будет ширина экрана и высота у пользователя.
    О модульных сетках простыми словами 8
  4. Иерархическая — когда модули располагаются основываясь на своём дизайнерском чютье.
    О модульных сетках простыми словами 9

Что такое 960 Grid?

Называется так, потому что ширина сетки 960px и вся соль её использования в том, что она гарантирует, что ваш дизайн правильно отобразиться и на обычном мониторе и на планшете.

Если вы откроете свой сайт на мониторе 2560px или не дай бог 4K, то он будет ютиться на экране в виде маленькой колоночки.

О модульных сетках простыми словами 10

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

  • 1170px — под обычный формат, под широкие мониторы;
  • 970px — под ноутбуки и старые мониторы;
  • 750px — под планшеты;
  • 480px и 320px — под мобильные телефоны и смартфоны.

Если дизайнер не криворукий, то делая дизайн для 1170px, ему не составит труда отрисовать его и под остальные разрешения 970px, 750px, 480px и 320px.

Практические примеры:

1. Сайт в 3 колонки
О модульных сетках простыми словами 11О модульных сетках простыми словами 12

2. Сайт в 4 колонки
4 колонки. Сайт в чистом виде сетка.
Большая картинка это блок в 2 колонки. И объединяются либо левые 2 колонки, либо правые.
О модульных сетках простыми словами 13

А чуть ниже видно, что дизайнер разбивает ритм и берёт 2 центральные колонки.
О модульных сетках простыми словами 14

Проверяем адаптивность. Для широкого формата это 6 колонок, примерно на широкоформатном мониторе:
О модульных сетках простыми словами 15

4 колонки. Такое отображение будет для планшета:
О модульных сетках простыми словами 16

3. 18-ти колоночная сетка
Если не накидывать сетку, то кажется, что используется 3 колонки.
О модульных сетках простыми словами 17

При этом в 12 колонок какие-то элементы вписывают, а какие-то нет, поэтому 12 колонки не подходят. :
О модульных сетках простыми словами 18

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

4. 12-ти колоночный макет.
4 большие, каждая из 4-х делится на 3 внутри. Всё абсолютно линейно. Даже кнопочки меню и то попадают в эту сетку. И хотя меню не в ритме (ритм в данном случае по 3 колонки), но всё таки они в ширину сетки попадают.
О модульных сетках простыми словами 20

При подготовке статьи использовались материалы из видео «Основы веб дизайна #1 — модульные сетки (Grid Systems)» Youtube канал PsForceRu.

FacebookTwitterGoogle+VKПоделиться