Аккуратность интерфейса держится на сетке и единой системе отступов. Сетка — это невидимые направляющие (например, колонки), по которым выравнивают элементы. Когда блоки выровнены по сетке, макет выглядит собранным; когда «гуляют» на пару пикселей — неряшливым, даже если человек не понимает почему.
Отступы задают не «на глаз», а по шкале, кратной базовому шагу — часто 8 пикселям: 8, 16, 24, 32… Такая система делает расстояния согласованными по всему продукту и ускоряет работу: не нужно каждый раз решать, сколько места оставить. Связанные элементы располагают ближе, несвязанные — дальше; расстояние само сообщает о структуре.
Выравнивание — мощный и дешёвый инструмент порядка. Элементы, выровненные по одной линии (левому краю, общей оси), воспринимаются как единое целое. Хаотичное выравнивание — частая причина ощущения «дёшево и кустарно», даже при хороших цветах и шрифтах.