8pt Grid for Web. Или мой Калькулятор.

Dmitry Simberev
Дизайн-кабак
5 min readApr 24, 2017

--

Наверняка вы уже слышали о сетке 8pt Grid, если ещё нет, то самое время это сделать, так как она может упростить жизнь вам и вашим разработчикам. Стало довольно распространенным строить сетки с кратностью равной 8. В этой статье я расскажу о своей методике и поделюсь нужными инструментами в конце статьи.

8pt Grid

Вот некоторые из известных публикаций:

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

Очевидные плюсы

Поговорим о том, что же такого хорошего в этой сетке, жили ведь как-то и без неё. Вот, что она даёт:

  • Оптимизирует работу дизайнеров;
  • Упрощает взаимодействие дизайнеров с разработчиками;
  • Сетка, элементы, поля, отступы — все они кратны 8.

Для дизайнеров: Эффективность, меньше принимаемых решений по размерам элементов, отступам, которые задают качественный вертикальный, горизонтальный ритмы между элементами.

Для команды: Упрощение системы коммуникации между дизайнерами и разработчиками (никто не ссорится из-за пикселей). Разработчик легко может отслеживать размеры и отступы, даже на глаз, вместо того, чтобы проводить измерения каждый раз.

Для пользователей: Подсознательно ощущают эстетику макета, отсутствуют полупиксели на используемых ими устройствах.

Проблема

Если посмотреть на статьи выше, то можно выделить два подхода того, как используют 8pt Grid:

Мобильный дизайн: тут все просто, включают PixelGrid (клетка 8x8) которая идеально справляется с своей задачей — помогает создавать все объекты, соблюдать отступы кратные 8.

Как легко строить мобильные интерфейсы по Grid

Веб: вместо PixelGrid строят Layout для разных брейкпоинтов, где в нашем случае: общая ширина контейнера / ширина колонки / отступы кратны 8.

Ограниченность метода, когда используется только Layout

Но где магия для веб? Чтобы она была, нужно совместить эти два приема. А именно Grid и Layout. А это поверьте не самая легкая задача и в примерах выше никто не показывает как этого добиться, чтобы все колонки сетки ложились в пиксельные клетки 8x8. Весь мой дальнейший рассказ о том, как это делать правильно.

  • Grid помогает без калькулятора, по клеточкам создавать все объекты, соблюдать оступы и придерживаться законам 8pt Grid.
  • Layout основной инструмент дизайнера при проектировании любого пространства.

В Sketch они настраиваются тут View -> Canvas ->

Задача

Таким образом вырисовывается задача:

  1. Выявить законы по которым можно “подружить” на артборде Grid & Layout вместе.
  2. Предусмотреть Centered & Full-width сетки
  3. В идеале это автоматизировать, чтобы не считать вручную.

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

Решение

Базовые разрешения

Первый закон в том, что ширина вашего артборда должна быть кратна 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.

Расчет Layout с помощью эл. таблицы

Теперь достаточно, ввести полученные данные в настройки Sketch. Не пропустите галочку — Gutter on outside.

И на выходе мы получаем идеально совмещенные Grid и Layout. Что касается Full-Width сеток, то на артборд добавляется сайдбар, а контентная сетка смещается с помощью параметра offset на нужную позицию, я не стал подробно это расписывать, проще скачать Sketch файл и посмотреть как я это делаю.

Успешно совмещенные Grid & Layout

Все это я упаковал в бесплатный продукт — 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.

На практике вы сможете пользоваться моим методом, где есть 8 пиксельная сетка только для вертикального ритма и расстояний внутри каких-либо компонентов и между самими компонетами. Но по горизонтали прийдется принебречь пиксель перфект и растягивать / сужать элементы для того чтобы они встали в layout сетку экрана.

Другими словами, игнорируете сетку по горизонтали, но изолировано сохраняете её для элементов внутри компонентов (например поле импута с иконкой слева и текстом плейсхолдера) и расстояние между группой таких импутов тоже делаете кратным 8.

Dmitry Simberev.

Digital Designer with 13 years of experience. UI/UX.

www.simberev.com / blog.simberev.com / Канал в Телеграме

--

--

Дизайн-кабак
Дизайн-кабак

Published in Дизайн-кабак

Cамый большой коллективный блог про дизайн на русском языке

Responses (6)