На менторской программе я прокомментировал множество дизайн-проектов. Если говорить о UI, то большинство комментариев сводилось к трем простым, но важным составляющим интерфейса: сетка, отступы и цвета. Рассмотрим их чуть подробнее.
- Сетка. Контент должен быть выровнен вдоль вертикальных направляющих. То есть элементы, находящиеся друг под другом, должны иметь одинаковый отступ от левого края. В качестве примера посмотрите, как используется классическая 12-колоночная сетка и настройте ее параметры себе в «Фигме».
- Отступы. Элементы должны находится друг от друга на расстоянии, которое соответствует их иерархии. Например, подзаголовок может иметь отступ от заголовка в 8px, а от следующего блока текста в 16px. Ведь подзаголовок в первую очередь относится к заголовку и лишь потом к блоку текста.
- Цвета. Должны фокусировать внимание пользователя на нужных элементах и давать понимание, за что они отвечают. Например, на кнопках или информации. Взгляд пользователя не должен разбегаться по странице из-за большого количество акцентных элементов.
Следуя этим трем правилам можно сделать даже простой текстовый интерфейс эстетичным. В моем новом обучающем продукте я расскажу об этом подробнее, а пока подумайте, соответствует ли ваш последний проект этим рекомендациям.