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