Красивые картинки, по которым нельзя собрать продукт
Разработчик открывает файл и не находит ни пустого состояния, ни ошибки, а отступы на каждом экране разные. Остальное додумывает по-своему — и продукт расходится с макетом.
Дизайн UI/UX приложения — от исследования до готового интерфейса
Пользовательские сценарии, вайрфреймы, дизайн-система и кликабельный прототип. Макеты, готовые к разработке, без дорогих переделок на этапе кода. Работаем и без последующей реализации — если кодит ваша команда, вы получаете полный комплект материалов и права на проект.
С чем к нам приходят
Пользователи не доходят до цели
Трафик есть, регистраций нет, а онбординг, форму и экран оплаты никто не прошёл по живому сценарию. Непонятно, на каком шаге люди отваливаются — правите вслепую.
Каждый новый экран рисуется с нуля
За год в продукте три оттенка одной кнопки и четыре варианта одной таблицы. Добавить функцию дольше — потому что вид согласуете заново.
Что входит в объём
Исследование и сценарии
Задачи пользователей и пути, которыми они их решают
Информационная архитектура
Структура экранов, навигация и разделение по ролям
Вайрфреймы
Каркасы ключевых экранов, без цвета и графики
Интерфейс (UI)
Экраны на сетке, с контрастом по порогам WCAG
Дизайн-система
Цвета, типографика, шкала отступов и компоненты с состояниями
Кликабельный прототип
Основные сценарии, соединённые переходами, на телефоне и десктопе
Что вы получаете
- Вайрфреймы ключевых экранов, вместе с пустым состоянием и ошибкой
- UI-экраны для телефона и десктопа, с состояниями
- Дизайн-система: цвета, типографика, шкала отступов и библиотека компонентов
- Исходный файл и права на проект на вашей стороне
Как мы работаем
Разговор и объём
1–2 дняОпределяем цель продукта, кто им пользуется, какие есть технические ограничения и бюджет. Фиксируем и то, на каких устройствах продукт должен работать и с чем обязан совпадать: с существующим брендом, готовой библиотекой компонентов или требованиями сторов. На выходе — список экранов для проектирования, срок и цена.
Исследование и сценарии
2–4 дняРазбираем текущий продукт, решения конкурентов и данные аналитики. Фиксируем задачи пользователя и места, где он сегодня останавливается.
Архитектура и вайрфреймы
3–5 днейСобираем структуру, навигацию и каркасы экранов. Уже на эскизах решаем, что пользователь видит при пустых данных и после ошибки, чтобы эти экраны не дорисовывались потом в спешке. Замечания собираем на эскизах, пока нет графического слоя — тогда правка стоит меньше всего.
UI и дизайн-система
5–10 днейПроектируем экраны и параллельно собираем библиотеку компонентов. Проверяем контраст, размер зон нажатия и читаемость на маленьких экранах. Экраны отдаём частями, каждые несколько дней, поэтому вы видите направление сразу и не копите замечания до конца этапа.
Прототип и тесты
2–3 дняСоединяем экраны в кликабельный прототип и проходим по нему сценарии. Замечания собираем в одном месте, в комментариях рядом с экранами, и отмечаем после внесения. Правки идут в макеты, а не в готовый код.
Передача команде
1–2 дняПриводим файл в порядок, описываем компоненты и спецификацию, отдаём доступы. Проходим по файлу вместе с разработчиками на общей встрече: где лежат компоненты, как читать переменные и откуда брать экспорты. Остаёмся на связи по вопросам во время разработки.
Что получает команда разработки
Именно здесь чаще всего ломается работа с дизайнером. Ниже — то, что реально переходит к разработчикам, независимо от того, внедряем мы или ваша команда.
Упорядоченный файл Figma
Отдельная страница на каждый поток, названные слои, экраны в порядке сценария. Черновики отделены от утверждённых версий.
Компоненты с состояниями
У каждого элемента есть варианты: обычный, наведение, активный, выключенный, загрузка и ошибка. Названия вариантов совпадают с пропсами в коде.
Дизайн-система, а не стопка экранов
Цвета, типографика и отступы записаны переменными, названными по назначению. Правка в библиотеке расходится на все экраны.
Спецификация отступов, типографики и брейкпойнтов
Шкала отступов, стили текста с названиями и ролью, сетка для телефона, планшета и десктопа. Разработчик читает значения, а не меряет пиксели на скриншоте.
Кликабельный прототип как ориентир
Переходы, порядок шагов и поведение после ошибки видны в прототипе. Передаём его ссылкой, которая открывается в браузере и на телефоне.
Экспорт и названия ресурсов
Иконки в SVG и графика в форматах для web, iOS и Android, названные так же, как в проекте. Разработчик ничего не экспортирует вручную.
Краевые сценарии и доступность
Пустой список, нет интернета, отклонённая оплата, истёкшая сессия — у каждой ситуации есть экран и текст сообщения. Контраст и зоны нажатия проверены по WCAG.
Инструменты
- Figma
- Auto Layout
- Переменные и токены
- Прототипирование в Figma
- FigJam
- WCAG 2.2
- Apple HIG
- Material Design 3
- React
- TypeScript
Проекты, где это видно
Частые вопросы
Сколько стоит UX/UI проект приложения?
После разговора об объёме — цену называем до старта работ. На неё влияют количество экранов и ролей, количество платформ и наличие готовой дизайн-системы. Исследования и тесты с пользователями считаем отдельно.
Сколько длится проектирование?
2–4 недели от утверждения объёма: несколько дней на исследование и архитектуру, неделя-две на UI и дизайн-систему, несколько дней на прототип. В рамках MVP дизайн умещается в 3–5 недель после согласования объёма.
Проектируете без последующей разработки?
Да. Исходный файл, дизайн-система и права на проект ваши — можете передать их своей команде или другому подрядчику. Мы остаёмся на связи по вопросам во время разработки.
Что получает команда разработки?
Упорядоченный файл Figma, библиотеку компонентов с состояниями, переменные цветов и типографики, спецификацию отступов и брейкпойнтов, экспорт иконок и кликабельный прототип. Плюс краевые сценарии: пустой список, ошибка сети, истёкшая сессия.
Делаете аудит существующего приложения?
Да. Проходим основные сценарии и собираем проблемы навигации, форм, контраста, состояний и текстов ошибок. Список упорядочиваем по влиянию на конверсию, а для самых важных пунктов отдаём готовые макеты.