Гарні картинки, за якими неможливо зібрати продукт
Розробник відкриває файл і не знаходить ані порожнього стану, ані помилки, а відступи на кожному екрані різні. Решту домислює по-своєму — і продукт розходиться з макетом.
Дизайн 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, бібліотеку компонентів зі станами, змінні кольорів і типографіки, специфікацію відступів і брейкпойнтів, експорт іконок та клікабельний прототип. Плюс межові сценарії: порожній список, помилка мережі, завершена сесія.
Чи робите аудит наявного застосунку?
Так. Проходимо основні сценарії й збираємо проблеми навігації, форм, контрасту, станів і текстів помилок. Список упорядковуємо за впливом на конверсію, а для найважливіших пунктів віддаємо готові макети.