Когда программа состоит из десяти экранов, нет проблем нарисовать и проверить каждый. Но когда экранов сотни, рисовать и проверять их вручную — долго, дорого и мучительно. Продукт не сможет быстро развиваться. Пока экраны будут отрисованы и утверждены, пройдёт полгода, и фичи, нарисованные в них, устареют.
1:44
С развитием продукта дизайнеры систематизируют и стандартизируют решения, чтобы не придумывать одно и то же много раз. Начинают с мелких кирпичиков: шрифтов, отступов, цветов, иконочек.
1:44
Сетка. Для начала в продукте может появиться сетка. Стандартная сетка Андроида:
Элементы интерфейса вписываются в клетки и по ним ровняются. Некоторым элементам разрешается встать на половину клетки, как кружку с плюсиком. Его диаметр — 5 модулей, а его центр расположен на границе тёмного и светлого блоков, поэтом кружку приходится занимать 2,5 модуля сверху и снизу. Текстовые блоки тоже могут стоять базовой линией на половине модуля. Остальные конструкции выравниваются по сетке.
Кегли шрифтов тоже неслучайные. Набор возможных размеров стандартизирован, и дизайнер не может использовать размер не из набора. Нужно определить иерархию и то, какой из кеглей используется в конкретном случае, — от этого возникает порядок.