Дизайн интерфейса

В разговоре дизайн часто сводят к «красиво или нет», но для сайта и приложения важнее, понятно ли, куда нажать, что произойдёт и где ошибка. Дизайн интерфейса отвечает на эти вопросы ещё до вёрстки: какой элемент главный на экране, как форма сообщает о неверном вводе, как выглядит каталог на телефоне. В профессиональной среде различают UX — логику и сценарии — и UI — визуальную часть: цвет, шрифты, отступы, иконки.

Этапы и что получается на выходе

1. Структура и сценарии — какие страницы есть, как пользователь проходит путь от входа до заявки.
2. Прототипы — схемы экранов без оформления, на которых проверяют расположение блоков.
3. Макеты — финальный вид экранов для нескольких ширин; подробнее — в статье «Макет-мокап».
4. UI-кит или дизайн-система — набор кнопок, полей, карточек и правил их применения, чтобы новые страницы собирались из готовых деталей.

Пример: чек-лист состояний для макета

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

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

Каждый пропущенный пункт верстальщик додумает сам, и результат может разойтись с замыслом. Когда список закрыт, вёрстка по макету идёт без лишних согласований.

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