UI/UX designer (Figma) dla platformy B2B SaaS

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)