01
Баланс
Визуальная устойчивость и равновесие макета: вес элементов распределён так, что композиция не заваливается на один край.
Визуальная грамотность
Девять правил, по которым макет читается как единое целое: от равновесия и контраста до иерархии и движения взгляда. Коротко, с примерами и понятными иллюстрациями.
Как натренировать глаз
Поэтому хороший макет так трудно разобрать: в нём нечего заметить. Быстрее учиться на плохом — там всё названо вслух.
Перед тем как сдать макет
Быстрая проверка своими глазами: пройтись по списку занимает минуту, а ловит большую часть того, что потом назовут «что-то не так».
01
Прищурьтесь. Остаётся ровно один акцент?
Если конкурируют два — зритель выберет случайный.
02
К чему привязан каждый элемент?
Если ни к чему — он выглядит забытым, а не свободным.
03
Сколько групп видно, если не читать?
Столько смыслов и получил зритель. Совпадает с задуманным?
04
Куда взгляд идёт первым и куда вторым?
Этот маршрут вы построили — или он получился сам?
05
Что будет, если убрать половину декора?
Обычно — станет лучше. Это и есть проверка на воздух.
→
Ни один вопрос не про красоту.
Все пять — про то, понял ли зритель, куда смотреть.
Частый вопрос
Элементы — материал
То, из чего собран макет, — сырьё, которое можно перечислить.
ЛинияФормаЦветТекстураПространствоОбъёмТон
Существительные
Принципы — организация
Как этот материал расставлен: что рядом с чем, что крупнее, что первым, куда идёт взгляд.
БалансКонтрастВыравниваниеПовторениеБлизостьАкцентВоздухИерархияДвижение
Глаголы
А если выбирать один главный принцип — это иерархия: она задаёт порядок чтения, а все остальные на неё работают.
Где это в работе
В продуктовом дизайне принципы перестают быть теорией и превращаются в конкретные решения — вот самые частые.
Близость
Группирует поля формы и пункты меню.
Половина «непонятных» форм чинится отступами, а не текстом.
Иерархия
Ведёт к целевому действию.
Одна главная кнопка на экран — остальное тише.
Контраст
Это читаемость, а не украшение.
И требование доступности: WCAG задаёт минимум по контрасту текста.
Выравнивание
Даёт ощущение, что интерфейсу можно доверять.
Кривая сетка читается как небрежность продукта в целом.
Повторение
Превращает экраны в систему.
Компоненты — это повторение, оформленное в правила.
Воздух
Снижает нагрузку на внимание.
Плотный экран утомляет быстрее, чем длинный.
Итог
Принципы не делают за вас макет. Они дают язык, на котором можно объяснить решение — себе, команде и заказчику.
Девять принципов
Тест прищуром
Пять вопросов перед сдачей
Продолжение разбора · 12 слайдов
Принципы выше работают внутри одного экрана. Сюжет — уровень выше: кто здесь продукт и в каком порядке идут экраны. Листайте кликом по слайду, стрелками или свайпом.
С телефона слайды мелкие: разверните во весь экран и поверните телефон горизонтально.