Автор: Саша Окунев Уровень: для профи
Делюсь недавним негативным опытом, как я использовал 12-колонную сетку на интерфейсном проекте. Я не продумал некоторых нюансов, что ухудшило опыт моих пользователей. В конце рассказываю, как исправил ситуацию.
Я делаю систему управления товарами Озона, и в этом мне помогает замечательный дизайнер Андрей Ковалёв. Без его вклада этой системы бы не получилось.
В самом начале проекта мы задались вопросом, какое разрешение используют наши контент-менеджеры, чтобы на основе него понять стандарт ширины для наших макетов. Выяснил, что у нас в офисах Москва Сити и ещё одном городе с компьютерами всё хорошо: мониторы имеют разрешение минимум 1920 по ширине, а у некоторых вообще 4K. Поэтому, я стремился сделать систему, которая выгодно смотрится в первую очередь на больших экранах.
В полноэкранном режиме интерфейс на них неизбежно разъезжается. Если ничем не ограничивать текстовый контент, он разворачивается в строку и выглядит как размазанная по щекам манная каша.
За эту небрежность к типографике я недолюбливаю дизайн Confluence и Slack, дизайнеры которых не обращают на длину строки никакого внимания и отводят контенту столько места, сколько есть на экране:
Slack: когда ширина экрана становится злом.
Как правильно заметил маэстро Эмиль Рудер в своей книге «Типографика», такие строки быстро утомляют, потому что их сложно дочитать до конца.
Полосу текстового набора нужно контролировать по ширине и не допускать ситуации, когда в одной строке больше 10-12 слов.
Подход бесконечно тянущейся вёрстки хорошо работает только в интерфейсах, где на первый план выходит работа с медиа: редакторах вроде Figma, Cinema 4D, Premiere Pro и подобных. В парадигме интерфейса-редактора он является единственно возможным вариантом. Рабочая область в нём получает максимум пространства, а различные панели жмутся по краям, стремясь быть как можно меньше. В таких продуктах не может быть мест, где встречаются широкие полосы.
Наша сетка имела максимальную ширину модульной системы в 1560 px, после которой 12-колонник переставал растягиваться по ширине и красиво держал форму по центру экрана, образуя пустоты по бокам. Вёрстка при этом смотрелась плотно и подтянуто. 12-колонник — мощное оружие. Он сразу вносит порядок в поведение блоков при изменении ширины окна.
Подход 1560/12 работал в банке, где никогда не было большого количества контента. Всего в вёрстке было два основных блока: слева сайдбар для вертикального меню банковских продуктов, справа основная страница текущего продукта и ленты его операций.