Opracowujemy projekt webowy B2B SaaS do zarządzania biznesem usług IT.
Projekt jest obecnie w fazie rozwoju, nie ma użytkowników, ale są przykłady stron roboczych, które będą służyć jako wzór architektury informacji i przepływów użytkowników — musisz je dostosować/przerobić na biznesowy, stonowany, czytelny systemowy design z jednolitym stylem wszystkich stron.
Co należy opracować
1. Główne sekcje:
- Dashboard — analityka, kluczowe metryki, statusy projektów
- Projekty — karty projektów, szczegółowe strony, oś czasu
- Zadania — tablica kanban, listy, filtrowanie, priorytety, karta zadania
- Klienci — karty CRM klientów, osoby kontaktowe, historia interakcji
2. Wynajem zasobów:
- Umowy najmu — lista umów, szczegóły, statusy
- Zasoby — katalog zasobów do wynajęcia (sprzęt, pomieszczenia itp.)
- Cenniki wynajmu — ustawienia planów taryfowych, historia ustalania cen
3. Serwis
- Umowy serwisowe — lista umów, szczegóły, statusy
- Dziennik prac - logowanie wykonania zadań serwisowych klientów w ramach planów taryfowych
- Zamówienia wynajmu — zarządzanie zamówieniami, kalendarz rezerwacji
4. Finanse:
- 🧾 Faktury — wystawianie rachunków, szablony, historia płatności
- 💳 Rozliczanie pracy — ewidencja czasu pracy wykonawców, obliczanie kosztów
- 📈 Raportowanie finansowe — wykresy, tabele, eksport danych
5. Portal klienta:
- 👤 Konto klienta — osobiste konto dla klientów końcowych
- 📊 Status zamówień — śledzenie postępu
- 📧 Komunikacja — komunikator, komentarze, powiadomienia
6. Dodatkowe interfejsy:
- ⚙️ Ustawienia hubu — personalizacja, integracje
- 👥 Zarządzanie zespołem — role, prawa dostępu
- 📖 Historia aktywności — dziennik audytu, zmiany
To nie jest cały funkcjonalność, wszystko należy omówić osobno, nie trzeba robić wszystkiego od razu - priorytet - omawiane osobno.
Projekt wykorzystuje uniwersalny system kart (CardShell), gdzie każdy byt (projekt, zadanie, klient itp.) jest wyświetlany jako karta z ujednoliconą strukturą. Wszystkie karty korzystają z systemu zakładek:
- Podstawowe informacje
- Powiązane byty (na przykład w Projekcie → zakładki: Szczegóły, Zadania, Finanse)
- Aktywność/Komentarze
- Ustawienia
Wymagania dotyczące designu
Styl
- Biznesowy profesjonalny styl (B2B SaaS)
- Czysty i minimalistyczny — bez zbędnych dekoracji
- Funkcjonalny — skupienie na wygodzie użytkowania
- Nowoczesny — aktualne trendy UI 2025 roku
Kolorystyka
- Należy zaproponować nową profesjonalną paletę
- Wsparcie dla jasnego i ciemnego motywu (light/dark mode)
- Kolory akcentowe dla statusów, priorytetów, alarmów
Typografia
- Wyraźna hierarchia (H1-H6)
- Czytelność na różnych ekranach
- Systemowe czcionki lub czcionki webowe (Geist, Inter lub analogi)
Komponenty
- Wykorzystywane są Tailwind CSS oraz shadcn/ui komponenty (prymitywy Radix UI)
- Potrzebny design stanu komponentów: domyślny, hover, aktywny, wyłączony, błąd
- Ikony: Lucide Icons (standard shadcn/ui)
Wymagania techniczne dotyczące projektu Figma
- Okładka (opis projektu)
- System designu (kolory, typografia, komponenty)
- Dashboard
- Projekty
- Zadania
- Klienci
- Umowy
- Zasoby do wynajmu
- Cenniki wynajmu
- Faktury
- Ustawienia
Zakres pracy
- ~15-20 unikalnych ekranów (strony list, szczegółowe karty)
- ~30-50 komponentów (przyciski, formularze, karty, tabele)
- System designu (kolory, typografia, style)
- Motyw jasny + ciemny
- Responsywność desktop (1920px, 1440px, 1280px minimum)
