8pt Grid for Web. Или мой Калькулятор.
Наверняка вы уже слышали о сетке 8pt Grid, если ещё нет, то самое время это сделать, так как она может упростить жизнь вам и вашим разработчикам. Стало довольно распространенным строить сетки с кратностью равной 8. В этой статье я расскажу о своей методике и поделюсь нужными инструментами в конце статьи.
8pt Grid
Вот некоторые из известных публикаций:
- Bryn Jackson’s 8-Point Grid.
- Anthony Collurafici’s post — автор замечательнго плагина Nudg.it, который облегчает работу с 8pt Grid.
- Design Inc.’s visual design & base metrics — Joel Beukelman.
- Material Design от Google, там 8pt Grid в основе всей дизайн-системы.
Кто не хочет углубляться в детали, может сначала посмотреть процесс на видео, но все же рекомендую изучить статью. 👇
Очевидные плюсы
Поговорим о том, что же такого хорошего в этой сетке, жили ведь как-то и без неё. Вот, что она даёт:
- Оптимизирует работу дизайнеров;
- Упрощает взаимодействие дизайнеров с разработчиками;
- Сетка, элементы, поля, отступы — все они кратны 8.
Для дизайнеров: Эффективность, меньше принимаемых решений по размерам элементов, отступам, которые задают качественный вертикальный, горизонтальный ритмы между элементами.
Для команды: Упрощение системы коммуникации между дизайнерами и разработчиками (никто не ссорится из-за пикселей). Разработчик легко может отслеживать размеры и отступы, даже на глаз, вместо того, чтобы проводить измерения каждый раз.
Для пользователей: Подсознательно ощущают эстетику макета, отсутствуют полупиксели на используемых ими устройствах.
Проблема
Если посмотреть на статьи выше, то можно выделить два подхода того, как используют 8pt Grid:
Мобильный дизайн: тут все просто, включают PixelGrid (клетка 8x8) которая идеально справляется с своей задачей — помогает создавать все объекты, соблюдать отступы кратные 8.
Веб: вместо PixelGrid строят Layout для разных брейкпоинтов, где в нашем случае: общая ширина контейнера / ширина колонки / отступы кратны 8.
Но где магия для веб? Чтобы она была, нужно совместить эти два приема. А именно Grid и Layout. А это поверьте не самая легкая задача и в примерах выше никто не показывает как этого добиться, чтобы все колонки сетки ложились в пиксельные клетки 8x8. Весь мой дальнейший рассказ о том, как это делать правильно.
- Grid помогает без калькулятора, по клеточкам создавать все объекты, соблюдать оступы и придерживаться законам 8pt Grid.
- Layout основной инструмент дизайнера при проектировании любого пространства.
В Sketch они настраиваются тут View -> Canvas ->
Задача
Таким образом вырисовывается задача:
- Выявить законы по которым можно “подружить” на артборде Grid & Layout вместе.
- Предусмотреть Centered & Full-width сетки
- В идеале это автоматизировать, чтобы не считать вручную.
Потому что создать пару вариантов с такими сетками не так сложно, но если ты работаешь с разными разрешениями, не хочешь привязываться к одной и той же сетке (которую заранее просчитал), а мы знаем, что по хорошему сетка должна разрабатываться под каждый проект индивидуальная, с учетом его контента, блоков, респонсива и тд.. Вот и подходим к самому интересному. 😃
Решение
Базовые разрешения
Первый закон в том, что ширина вашего артборда должна быть кратна 8, чтобы правильно строилась Grid. Для веб-проектов у меня получается следующий набор разрешений:
- 320 (Mobile)
- 768 (Tablet)
- 1024 (Desktop)
- 1360 (Desktop)
- 1920 (Desktop HD)
Layout
И вот весь секрет! Путем проб и ошибок, я пришел к следующей формуле:
(12 columns * Width) + (11 Gutters * Width) + Gutter = Total Layout Width
Есть несколько правил построения:
- Количество колонок не ограничено;
- Ширина колонки (width) кратна 8;
- Расстояние между колонками (Gutter) кратно 16.
Чтобы не сидеть с калькулятором, я создал удобную электронную таблицу, которая помогает очень быстро оперировать этой формулой, самостоятельно приводит к ближайшим кратным числам. Все данные вводите в блок Input Data, а результат получаете в одноименном блоке Result.
Теперь достаточно, ввести полученные данные в настройки Sketch. Не пропустите галочку — Gutter on outside.
И на выходе мы получаем идеально совмещенные Grid и Layout. Что касается Full-Width сеток, то на артборд добавляется сайдбар, а контентная сетка смещается с помощью параметра offset на нужную позицию, я не стал подробно это расписывать, проще скачать Sketch файл и посмотреть как я это делаю.
Все это я упаковал в бесплатный продукт — 8pt Grid for Web в который входят уже просчитанные и часто используемые мной сетки для всех базовых разрешений + электронная таблица с формулой, которую вы можете залить в Google и иметь у себя всегда под рукой.
Не забудьте установить плагин — Nudged, чтобы установить шаг равный 8, это меняет весь Workflow.
UPD:
Что делать с текущими устройствами у которых не четное разрешение экрана:
- iPhoneX: 375 x 812
- iPhone 8: 375 x 667
- iPhone 8 Plus: 414 x 736
К сожалению, для них перфект-пиксель решения сделать нельзя. Авторы 8pt grid советуют использовать так называемый Soft Grid метод. Когда нет жесткой привязки к сетки, а выдерживается лишь расстояние и отступы между самими элементами, а сам элемент растягивается насколько нужно, чтобы встать в сетку.
Some screens have apparently difficult sizes to adjust for (the iPhone 6 is 375 x 667 points), but the solution is actually quite simple. Keep your padding and margin dimensions consistent and reduce/increase the size of the block element to fill the remaining space. It’s OK to have an oddly-sized element if it keeps the grid consistent. Keep in mind that your users will likely never see the actual measurements you use.
Spec · 8-Point Grid
Using multiples of 8 to define dimensions, padding, and margin of elements
spec.fm
На практике вы сможете пользоваться моим методом, где есть 8 пиксельная сетка только для вертикального ритма и расстояний внутри каких-либо компонентов и между самими компонетами. Но по горизонтали прийдется принебречь пиксель перфект и растягивать / сужать элементы для того чтобы они встали в layout сетку экрана.
Другими словами, игнорируете сетку по горизонтали, но изолировано сохраняете её для элементов внутри компонентов (например поле импута с иконкой слева и текстом плейсхолдера) и расстояние между группой таких импутов тоже делаете кратным 8.
Dmitry Simberev.
Digital Designer with 13 years of experience. UI/UX.