Визуальную часть проверяют вопросами «почему так» и маленькими расчётами. Интервьюер хочет услышать, что ваши решения опираются на систему, а не на «на глаз».
Гештальт
- Близость: близкие элементы воспринимаются группой. Подпись ближе к своему полю, чем к соседнему.
- Сходство: одинаковые по виду элементы кажутся одинаковыми по смыслу. Все ссылки одного стиля.
- Общая область: фон или рамка объединяют элементы.
- Непрерывность: глаз следует за линией, например в индикаторе шагов.
- Фигура и фон: модальное окно отделяется затемнением.
- Замыкание: мозг достраивает незамкнутые формы.
Пустое пространство это инструмент: оно группирует и создаёт фокус без рамок.
Иерархия
Средства: размер, насыщенность, контраст, положение, воздух. Цвет помогает, но не может быть единственным средством. Проверка: прищурьтесь и посмотрите на экран. Главное должно читаться первым.
Сетки
Колоночная сетка: колонки, межколонники (gutter) и поля (margin). Ширина колонки:
col = (W - 2·M - (N - 1)·G) / N
Пример: контейнер 1200 px, 12 колонок, межколонник 24, полей нет: (1200 - 11 × 24) / 12 = 78 px. Блок на 4 колонки: 4 × 78 + 3 × 24 = 384 px. Мобильный: 360 px, поля 16, 4 колонки, межколонник 16: (360 - 32 - 48) / 4 = 70 px.
Модульная сетка добавляет ряды, базовая (baseline) задаёт вертикальный ритм текста.
Сетка 8pt: отступы и размеры кратны 8 (иногда 4 для мелочей). Плюсы: предсказуемость, меньше споров, целые пиксели на плотностях 1x, 1.5x, 2x, 3x.
Типографика
- Кегль основного текста обычно 16 px на вебе. Меньше 14 px только для служебного.
- Интерлиньяж 1.4-1.6 для абзацев: 16 px текст и 24 px строка. WCAG 1.4.12 требует, чтобы интерфейс выдерживал интерлиньяж 1.5, отступ между абзацами 2 кегля, межбуквенный 0.12 и межсловный 0.16.
- Длина строки 45-75 знаков, иначе глаз теряется или ритм рвётся.
- Модульная шкала: размеры заголовков умножаются на коэффициент. Для 16 px и 1.25: 20, 25, 31.25.
- Гарнитуры: одна, иногда две. Иерархию делают размером и начертанием.
Оптическая компенсация
Геометрический центр не всегда выглядит центром. Треугольник «play» сдвигают вправо, круглые иконки делают чуть больше квадратных. Это нормальная практика, а не ошибка.
Частые ошибки
- Случайные отступы: 13, 7, 19 px.
- Цена или главное действие мельче второстепенного.
- Серый текст на сером фоне ради «воздушности».
- Текст на всю ширину экрана 1440 px.
- Пять шрифтов на одном экране.
Что спросят на собесе
- Почему здесь такие размеры и отступы?
- Посчитайте ширину колонки или блока в сетке.
- Какой интерлиньяж и длина строки комфортны и почему?
- Какие принципы гештальта вы использовали?
- Как вы проводите дизайн-критику?