Добро пожаловать в "Дизайн-кладовку"!

Меня зовут Андрей Гаврилов, и я рад приветствовать вас в моем новом шоу необычного формата.

Почему такое странное название? Кладовка - это место, где собирается все, что накопил человек, что для него дорого и определяет его как личность.

Давайте вместе каждую неделю складывать в нашу общую дизайн-кладовку один полезный навык, секрет или умение.

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

Эта статья написана в формате конспекта по материалам данного видео:

Сегодня мы разберемся с одним важнейшим вопросом в работе современного веб-дизайнера. Это модульные сетки. Меня ежедневно заваливают вопросами о том, какую сетку использовать? В каких случаях использовать 12 колонок, 14 колонок, 1170рх или 960рх, а может быть, 940рх?  

Сегодня мы разберем все эти вопросы в одном простом уроке.

Поехали...

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

Breakpoint

Первое, что нужно знать - это о таком понятии как breakpoint. Возможно, вы даже о нем и не слышали. Это, так называемая, точка слома. Она характеризует переход сайта от одного состояния к другому, потому как сайт выглядит по-разному на мобильном, планшете или десктопе. Для этого, как раз и существует та самая точка слома «breakpoint», в которой дизайн сайта переходит  от мобильного устройства к планшету, от планшета к маленьким десктопам, от маленьких к большим.

Чтобы увидеть на примере, что такое breakpoint, и как работает адаптивность, можно открыть  любой сайт, который является отзывчивым (адаптивным). Перед вами мой личный сайт andrewgavrilov.me, можете зайти на него и точно также протестировать. На моем десктопе с разрешением 1600рх, сайт выглядит именно так.

Давайте откроем dev tools в Chrome на мониторе. Если вы не знаете, как его запустить, то обязательно погуглите, так как мне бы не хотелось сейчас отвлекаться на такие базовые моменты. Итак, открываем dev tools и смотрим, как выглядит наш сайт на различных устройствах. Этот инструмент позволяет нам тестировать, как будет выглядеть сайт на мобильных устройствах с разрешением 320рх, 375рх в длину и т.д. На маленьких десктопах мой сайт выглядит вот так.

На планшетах 768рх, dev tools нам показывает, что сайт выглядит так.

На больших мобильных устройствах, с разрешением 420рх пикселей в длину, сайт перестраивается, и именно здесь, между двумя данными разрешениями и происходит breakpoint.

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

Bootstrap

Как правило, у сайта существуют всего лишь 2 или 3 breakpoint. Давайте заглянем на сайт самого популярного framework  для разработчиков.

Это стало сегодня настолько популярным, что является, по сути, стандартом. Все разработчики и верстальщики работают именно под данный framework. Я не буду вдаваться в детали и рассказывать, что это такое, скажу только, что именно этот framework ускоряет верстку, и у него есть свои технические характеристики. Поэтому считается нормой, даже стандартом, если вы разрабатываете свой дизайн под модульные сетки, которые соответствуют Bootstrap.

Не пугайтесь, если вы не знали об этом, уже готовите какие-то макеты, и теперь вам придется верстать под Bootstrap. Любую сетку можно переделать под Bootstrap, переконфигурировать, и здесь есть отдельная вкладочка для этого. Первое, что вам нужно понять, даже если ваша сетка какая-то уникальная, ее всегда можно переделать под Bootstrap. Главное, чтобы верстальщик понимал, как это делать.

Перейдем на вкладку CSS и зайдем в раздел Grid System (колоночная система).

Здесь есть такая таблица, в которой рассказывается, какие диапазоны разрешений  по умолчанию из коробки имеет Bootstrap. Скажем так, вы понимаете, что адаптивный сайт - это сайт, который одинаково хорошо отображается на всех мобильных, но, ввиду того, что мобильных устройств очень много и разрешение у всех разное готовить под каждый отдельный телефон макеты мы не можем. Поэтому мы берем диапазоны и готовим макет под каждый из них.

Bootstrap считает, что очень маленькие устройства - это телефоны с разрешением менее 768рх, поэтому в диапазоне от 0 до 768 мы готовим первый макет. Далее маленькие  устройства - планшеты, у них разрешение больше, чем 768рх, но меньше, чем 992рх, далее от 992рх начинаются средние устройства (десктопы). А устройства, у которых разрешение больше, чем 1200рх считаются большими устройствами (большими десктопами).

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

Открою вторую тайну, которая вас успокоит - нет никаких норм. Если мы покрываем диапазон, к примеру,  от 320рх до рх - вы сможете подготовить макет под 320рх, под 768рх, под 322рх, под 327рх.

Понимаете, в чем суть? Разницы нет никакой.

Именно поэтому я специально для вас подготовил файлы, модульные сетки, с которыми вы будете работать. Такие модульные сетки я использую в своей работе. Вы так же можете скачать подобные.

Для вас главное, чтобы ваш макет, длина холста которого примерно 480рх, попадал в диапазон, который покрывает данная конкретная сетка. В этой сетке уже можете работать как вам угодно. Кстати, для того, чтобы включить или выключить направляющие надо использовать комбинацию клавиш ctrl+H.

Направляющие формируют сетку, и вы сами можете их выдвигать, но поскольку это очень долго и неудобно, то проще всего скачивать такие шаблоны, которые я вам и предоставляю.

Вот шаблон для маленьких девайсов, которые больше, чем 768рх.

Средние устройства больше 992рх.

И большие, больше 1170рх.

Эту величину в макете я использую, что на 1170рх, что на 1200рх - неважно, потому что это ширина устройства, а не сетки. Т.е. сетка может быть любой под эту ширину устройства. Не заморачивайтесь и просто используйте эти сетки в своей работе.

Я использую, как правило, сетки extra small, small devices и large devices. Это три диапазона, которые я покрываю,  и это две точки слома - переход от мобильных к планшетам, от планшетов к десктопам.

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

Работа с модульными сетками

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

Основные принципы такие: здесь есть такой слой, который я иногда скрываю, иногда показываю, но чаще он скрыт.

Синие полосы - это колонки, мы работаем в них. Между ними есть промежутки, в которые мы не имеем права залазить. Но мы туда входим, и я покажу в какие моменты. Главное, чтобы наш элемент никогда не начинался между двумя колонками,

Его край не может начинаться внутри промежутка, только внутри колонки. Идеальное состояние, когда элемент начинается у края какой-нибудь колонки.

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

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

Чтобы не быть голословным, я покажу небольшой пример, который снимет у вас большинство сомнений. Я подготовил стандартную картину, которую можно наблюдать в "шапке" любого сайта - логотип, строка с меню, телефон и любая кнопка.

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

Проблема будет, если вы сделаете вот так:

Это уже не очень хорошо. Меню начинается в промежутке, телефон начинается в промежутке. Не проблема, что он заканчивается в промежутке, но вот что начинается там - это действительно проблема. Конечно, все это можно обыграть в верстке. Но это все равно неграмотно и непрофессионально. Следите, чтобы в вашей работе таких моментов не было.

Не стоит сильно заморачиваться по этому поводу, все придет с опытом. Просто многих пугает наличие модульной сетки, что надо трястись над каждым пикселем. Да, перфекционизм  - это хорошая вещь в нашем деле, но не следует чересчур усердствовать в угоду модульным сеткам.

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

В заключение

Увидимся с вами через неделю, в новом видео, в новом выпуске "Дизайн-кладовки". А для того, чтобы я понимал, что вам нравится этот формат, насколько полезно это видео - ставьте пальчики вверх, подписывайтесь на канал и оставляйте свои комментарии. Тогда я буду знать, что вам интересно и буду отвечать на ваши вопросы.

Пока!