Дизайн — второй ключевой этап после аналитики. Он включает в себя проработку пользовательского опыта (UX) и визуальной оболочки интерфейса (UI). Ниже — наш практический подход к созданию дизайна для веб-сервисов и мобильных приложений: этапы, принципы и важные детали.
Работа над UX обычно начинается ещё на стадии предпроектной аналитики. После подписания договора проект передаётся проджект-менеджеру: аналитики проводят подробный бриф, формируют общую концепцию и анализируют конкурентов.
Основные UX-решения рождаются во время изучения аудитории и выстраивания структуры. Результаты аналитики затем переходят к дизайнерам и становятся основой для прототипа — следующего шага в процессе.
Прототип — это интерактивная модель будущего продукта. На нём можно «пройти» пользовательские сценарии до начала разработки: проверить логику, выявить узкие места и внести корректировки.
Мы делаем прототипы преимущественно в монохроме, чтобы не отвлекать внимание на графику и цвета. В этот момент важно сосредоточиться на навигации, последовательности действий и удобстве интерфейса. По желанию клиента прототип собирается интерактивным — так можно открыть макет на телефоне и пройти весь путь пользователя.
После согласования прототипа переходим к визуальной части.
Дизайн-концепция задаёт внешний вид всего продукта через один или несколько ключевых экранов. Дизайнер собирает требования и предпочтения клиента, готовит мудборд и проводит ideation с командой.
Мудборд и ключевые экраны показывают направление визуала — цветовую гамму, типографику, настроение. Перед официальной презентацией концепции команда проводит внутреннюю проверку, чтобы устранить очевидные недочёты и подготовить чистую презентацию для клиента.
Если концепция не срабатывает на первых показах, мы продолжаем итерации — важно, чтобы визуал находил отклик у клиента с самого начала.
Ориентировочно: неделя на прототипы, две недели на проработку ключевых экранов; далее — масштабирование дизайна на остальные экраны в зависимости от объёма проекта.
До перехода к массовой отрисовке экранов мы собираем UI-кит — библиотеку всех компонентов интерфейса: шрифты, заголовки, цвета, кнопки, формы, иконки, карточки и таблицы. UI-кит работает как конструктор: из готовых блоков быстро собираются новые экраны.
Наличие UI-кита экономит время и делает внешний вид проекта однородным. Без него одинаковые элементы могут визуально расходиться — разработчики реализуют похожие вещи по-разному, и пользователь теряет ясность интерфейса.
Для крупных или долгосрочных продуктов мы превращаем UI-кит в полноценную дизайн-систему с документированными правилами и кодовыми примерами компонентов.
В рамках концепции мы также работаем над логотипом и базовыми фирменными элементами, если это требуется. Иногда старый логотип не соответствует новой визуальной идее — в таких случаях предлагаем быстрые варианты («быстролога»), которые передают характер бизнеса и легко интегрируются в интерфейс.
После утверждения визуальной концепции запускаются параллельные этапы: подготовка бэклога / ТЗ и верстка макетов. Дизайнеры передают UI-кит, экспортированные активы и спецификации для разработчиков, а также участвуют в технической приемке, чтобы сохранить соответствие дизайна и продукта.