Ми розробляємо web B2B SaaS проект для управління бізнесом надання послуг в сфері ІТ.
Проект зараз на стадії розробки, користувачів немає, але є приклади робочих сторінок, які слугуватимуть еталоном інформаційної архітектури та користувацьких потоків — вам потрібно адаптувати/переробити їх у діловий, стриманий, читабельний системний дизайн із спільним стилем всіх сторінок.
Що потрібно розробити
1. Головні розділи:
- Dashboard — аналітика, ключові метрики, статуси проектів
- Проекти — картки проектів, детальні сторінки, таймлайн
- Задачі — канбан-дошка, списки, фільтрація, пріоритети, картка задачі
- Клієнти — CRM-картки клієнтів, контактні особи, історія взаємодій
2. Оренда ресурсів:
- Договори оренди — список договорів, деталі, статуси
- Ресурси — каталог ресурсів для оренди (обладнання, приміщення, тощо)
- Тарифи оренди — налаштування тарифних планів, історія ціноутворення
3. Сервіс
- Договори сервісного обслуговування — список договорів, деталі, статуси
- Журнал робіт - логування виконання завдань обслуговування клієнітів в рамках тарифних планів
- Замовлення оренди — управління замовленнями, календар бронювань
4. Фінанси:
- 🧾 Інвойси — виставлення рахунків, шаблони, історія платежів
- 💳 Тарифікація роботи — облік робочого часу виконавців, розрахунок вартості
- 📈 Фінансова звітність — графіки, таблиці, експорт даних
5. Клієнтський портал:
- 👤 Кабінет клієнта — особистий кабінет для кінцевих клієнтів
- 📊 Статус замовлень — відстеження прогресу
- 📧 Комунікація — месенджер, коментарі, нотифікації
6. Додаткові інтерфейси:
- ⚙️ Налаштування хабу — кастомізація, інтеграції
- 👥 Управління командою — ролі, права доступу
- 📖 Історія активності — audit log, зміни
Це не весь функціонал, детально все потрібно обговорити окремо, робити все відразу - не потрібно, приоритет - обговорюється окремо.
Проект використовує універсальну систему карток (CardShell), де кожна сутність (проект, задача, клієнт, тощо) відображається як картка з уніфікованою структурою. Усі картки використовують систему табів:
- Основна інформація
- Пов'язані сутності (наприклад, у Проекті → таби: Деталі, Задачі, Фінанси)
- Активність/Коментарі
- Налаштування
Вимоги до дизайну
Стиль
- Діловий професійний стиль (B2B SaaS)
- Чистий та мінімалістичний — без зайвих декорацій
- Функціональний — фокус на зручності використання
- Сучасний — актуальні UI тренди 2025 року
Колористика
- Потрібно запропонувати нову професійну палітру
- Підтримка світлої та темної теми (light/dark mode)
- Акцентні кольори для статусів, пріоритетів, тривог
Типографіка
- Чітка ієрархія (H1-H6)
- Читабельність на різних екранах
- Системні шрифти або вебфонти (Geist, Inter, або аналоги)
Компоненти
- Використовується Tailwind CSS та shadcn/ui компоненти (Radix UI primitives)
- Потрібен дизайн стану компонентів: default, hover, active, disabled, error
- Іконки: Lucide Icons (shadcn/ui стандарт)
Технічні вимоги до Figma проекту
- Cover (опис проекту)
- Design System (кольори, типографіка, компоненти)
- Dashboard
- Projects (Проекти)
- Tasks (Задачі)
- Clients (Клієнти)
- Contracts (Договори)
- Rental Resources (Ресурси для оренди)
- Rental Pricing (Тарифи оренди)
- Invoices (Інвойси)
- Settings (Налаштування)
Обсяг роботи
- ~15-20 унікальних екранів (сторінки списків, детальні картки)
- ~30-50 компонентів (кнопки, форми, картки, таблиці)
- Design System (кольори, типографіка, стилі)
- Light + Dark theme
- Адаптивність desktop (1920px, 1440px, 1280px мінімум)
