UI-дизайн

Простыми словами

UX решает, какие шаги проходит человек. UI решает, как эти шаги выглядят: где главная кнопка, какого она размера, что происходит при наведении, как показана ошибка. Плохой UI ломает хороший сценарий: если кнопку не видно, шаг не сработает.

Что входит

Сетка и отступы. Шрифтовая пара и размеры. Палитра, включая цвета состояний: успех, ошибка, предупреждение. Иконки. Состояния элементов: обычное, наведение, нажатие, отключено, загрузка. Поведение на разных ширинах экрана.

Почему состояния важнее картинки

Макет с одной кнопкой в спокойном состоянии выглядит опрятно. В жизни у неё пять состояний, а у формы ещё и ошибки валидации. Если их не нарисовали, решения примет разработчик, и обычно они получатся разнобойными.

Дизайн-система

Когда экранов становится много, элементы собирают в библиотеку компонентов с правилами. Это ускоряет сборку новых экранов и держит продукт в одном стиле. На проекте из десяти экранов система избыточна, на сорока уже окупается.

Как принимать работу

Смотрите на реальных данных и на телефоне. Длинное название товара, пустой список, длинная фамилия в форме. Красивый макет на трёх коротких заголовках рассыпается именно на этом.

Про доступность

Контраст текста к фону, читаемый размер шрифта, зона нажатия не меньше сорока четырёх пикселей, видимый фокус при работе с клавиатуры. Это не благотворительность: больше половины трафика приходит с телефона, часть людей смотрит на экран на солнце, и мелкий серый текст теряют все без исключения.

Что запрашивать у подрядчика

Макеты в редакторе с доступом, а не картинки в презентации. Собранные компоненты. Прописанные состояния и поведение на трёх ширинах. Экспортированные иконки и шрифты с лицензией. Без этого разработчик додумывает недостающее сам, и собранный интерфейс расходится с тем, что утверждали.