заголовок + датакнопка
00метрика
00метрика
00метрика
00метрика
часклієнтпослугастатус
__:____________________
__:____________________
__:____________________
__:____________________
Від вайрфрейму до UI: як ми працюємо
Інтерфейс не малюється з першого екрана. Спочатку — для кого він і що людина має зробити; потім — потік, сірі коробки, і лише тоді — колір, типографіка й анімація. Нижче кожен крок із тим, що ви отримуєте на виході.
Шість кроків
Кожен крок закінчується артефактом, який можна подивитись і погодити. Без «покажемо все в кінці».
Before / after: вайрфрейм → інтерфейс
Тягніть повзунок. Зліва — сірий вайрфрейм з кроку 3, справа — той самий екран після UI-кіту та прототипу. Структура не змінилась: усе погоджене на коробках переживає шлях до кольору.
ВайрфреймUI
привітання + аватар
пошук
категорія
категорія
категорія
ціна
ціна
ціна
вкладки: головна · записи · профіль
Доброго дня,Оля 👋
ОК
🔍 Послуга або майстер
Найближчі майстри
ГоловнаЗаписиПрофіль
Головний екран застосунку. Вайрфрейм погоджено за день, UI — за три.
ВайрфреймUI
лого
Огляд
Календар
Записи
Клієнти
● Vizyt
Огляд
Календар
Записи
Клієнти
Сьогодні+ Новий запис
Дашборд адміністратора. Та сама сітка: сайдбар, метрики, таблиця — тільки з токенами й станами.
Що ви отримуєте
Не «картинки в Figma», а набір, з яким розробник починає без питань.
Файл дизайну
- Figma з компонентами й варіантами (auto-layout)
- Усі екрани у світлій і темній темі
- Стани: пусто, завантаження, помилка, успіх
Дизайн-система
- Токени кольорів, типографіки, відступів (JSON/CSS)
- Бібліотека компонентів зі станами
- Іконки одного стилю, сітка, правила адаптиву
Прототип і передача
- Клікабельний прототип для тестів з користувачами
- Специфікації переходів і анімацій
- Карта екранів і потоків, нотатки для розробників
Подивитись прототип ще раз
8 екранів застосунку, дашборд, дизайн-система — усе клікається.