Модульные сетки в работе UX-дизайнера
Инструкция по применению


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

ускоряет работу с макетом

снижает вероятность ошибок

макет выглядит более эстетично, элементы пропорциональны и структурированы
Блочная или манускриптная сетка
Колоночная сетка
Модульная сетка
Иерархическая
Принципы построения модульной сетки!
Почему 8-пиксельная?
Почему не 10?
8,16,24,32,40,48,56,64,
72,80,88,96,104,112,120

15 рамеров




10,20,30,40,50,60,70,
80,90,100,110,120

12 размеров


Понятия Hard и Soft сеток
Вертикальный ритм
Колоночная сетка
Почему так популярна 12-колоночная сетка?
Точки перехода (breakpoints)
Пример расчета сетки для точки перехода в 1280 пикселей.
1280px = (85px*12)+(20px*11)+(20px+20px)
Дизайнерская МОДУЛЬНАЯ сетка
Не начинайте поиск дизайн решения с построения сетки. Сначала необходимо:
  • определиться со структурой страницы и сделать её грубый набросок, можно даже на бумаге;
  • привести наиболее приоритетные блоки к единообразию;
  • затем построить черновую сетку под вашу дизайн-идею;
  • привести к сетке блоки, расположение которых не принципиально.
Можно начать прорабатывать сетку:
  • выберите шаг базовой сетки, основываясь на типографике, которую будете использовать и размерах базовых элементов: кнопок, полей ввода, чекбоксов и т.д. Вы можете ограничится поддержкой только вертикального ритма на основе высоты строки базового шрифта;
  • определите оптимальное количество колонок в зависимости от структуры контента;
  • выберите количество точек перехода, которые вы будете поддерживать;
  • постройте колоночную сетку и попробуйте расположить ключевые элементы интерфейса;
  • определите размер модуля, который позволит вам создавать контентные блоки (этот шаг вы можете опустить, на практике его редко используют из-за трудоемкости поддержки).
Важно!
Сетка должна не диктовать, а помогать в дизайне.
Вертикальный ритм
Что же такое вертикальный ритм и почему он так важен
«Повторение порождает осведомленность. Оно имеет способность создавать ощущение, будто вещи должны быть вместе. Начинает казаться, что кто-то все продумал, что это — часть плана». — Зелл Лью.
Что такое сетка базовых линий?
Как измерить высоту строки
В примере выше, правый абзац имеет font-size 16px и значение line-height может быть записано как 24px, 1.5, или 150% в CSS.
Если типографику
возможно измерить двумя разными способами, какой использовать
Создание вертикального ритма
Вариант «А». Подход «от строки»
Допустим, вам нужно сверстать на листе А4 список лучших работников месяца.
А как же быть с размером шрифта?
По всё той же логике «правила внешнего и внутреннего»
Вариант «Б». Подход «от кегля»
В общем случае, ваш базовый кегль для десктопных версий сайта окажется в диапазоне от 14 до 22 пикселей.