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

Наверняка вы уже слышали о сетке 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.


Dmitry Simberev.

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

www.simberev.com

blog.simberev.com

Канал в Телеграме