Модульные сетки

1.Сетки и направляющие

Первое, что нужно знать – это чем отличаются сетки и направляющие
Сетка – это статичная структура, которая работает на всем макете и всех его страницах

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

2.Какие бывают сетки?

Сетки – это обще название. На самом деле “сетки” бывают трех видов: вертикальные, горизонтальные и, собственно, сетки(как в тетрадке в клетку). Иногда выделяют “модульные сетки”, на самом деле – это комбинация горизонтальных и вертикальных сеток.

Когда ты слышишь слово “сетка” в 99% случаев имеется ввиду вертикальная(колоночная) система сеток(как на примере выше).

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

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

Что же касается самих сеток(клеток), то это базовая структура макета. В фигма по умолчанию она стоит в размере 10/10 пикселей. Этого достаточно в 99% случаев. Для новичков, так и вообще во всех 100%.

Опытные дизайнеры используют свою базовую сетку 8/8 6/6 и тд. более подробно о базовых сетках описано в прикреплённой статье. Опять же, эта тема на этапе обучения веб дизайну опциональна. Прочитать статью для ознакомления можно и нужно, но сильно углубляться в это не стоит. Придет время, когда твой опыт перешагнет определенную планку и тогда настанет время углубляться в кастомные базовые сетки. Пока что об этом рано говорить, чтобы не путаться.

Далее в статье слово “сетка” = колоночная система сеток.

Колоночная система сеток выглядит примерно вот так.


Не пугайся словосочетания «система сеток». На самом деле – это просто несколько вертикальных колонок с одинаковыми расстояниями между ними.

Зачастую это 12 колонок, потому что 12 имеет наибольшее число делителей : 1, 2, 3, 4, 6, 12. При этом ее гармонично можно разделить на блоки по 8/4 колонок, 9/3 и тд. В общем, 12 – то самый удачный вариант. То есть, работая с такой сеткой ты можешь разместить указанное число блоков в одну строку.

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

Нет правильных или не правильных сеток/колонок.

Зачастую система сеток создается одна и та же для 90% твоих проектов. То есть ты привыкнешь к определённым настройкам и будешь постоянно создавать одну и ту же сетку.

Как сетки создаются в фигме ты уже знаешь из соответствующего урока в этом курсе.

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

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

https://www.figma.com/file/TQKFnpxOLbWRgO7lVz40ZtNa/Bootstrap-4-grid-system.-Figmaweb.ru?node-id=0%3A1

Возможно ты слышал определение – система сеток бутстрап в которой то же 12 колонок. Тут кроется дьявол. Не всякая 12 колоночная система сеток – система под бутстрап. Но всякая система сеток бутстрап имеет 12 колонок. Это важно понимать.

3.Зачем нам нужны сетки?

Удобство. С ними очень удобно и приятно работать. Ты в разы упрощаешь свой труд. + твоя работа становится более систематизированной.

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

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

4.Когда использовать сетку? – всегда!

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

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

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

5.Настройки системы сеток бутстрап

Выше в статье у тебя есть ссылка на файл Figma в котором уже настроена и готова к использованию система сеток под бутстрап. Если вкратце – настройка системы сеток под бутстрап таковы: ширина колонки 65рх, расстояние между колонками 30рх. Выходит, что общая ширина контента твоего дизайна должна уместиться в 1110рх.

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

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

Конечно же, прелести работы с сетками можно понять только работая с ними.