Pellet4Future
Dla marki „Pellet4Future” przygotowałem projekt graficzny serwisu e-commerce z naciskiem na przejrzystość, hierarchię informacji i szybkie ścieżki konwersji. Moim zakresem był wyłącznie wygląd (UI) i układ treści: makiety low/high-fidelity, styleguide (typografia, kolor, siatka), komponenty kart ofert oraz warianty ekranów desktop i mobile. Celem było stworzenie spójnego, wiarygodnego interfejsu, który ułatwia użytkownikom porównanie ofert opału i sprawne przejście do zakupu.
Pogląd projektu
Przewiń myszką
Wyzwanie
Zaprojektować czytelny i lekki wizualnie UI dla platformy sprzedażowej, który skaluje się na wiele kategorii i ofert. Priorytety: jasna hierarchia treści, wyraźne ceny i CTA, porządek w kartach produktów oraz pełna responsywność.
Rozwiązanie
Opracowałem system projektowy w Figmie: siatka, tokeny UI oraz komponenty (header, filtry, karty ofert, elementy koszyka). Przygotowałem makiety high-fidelity dla kluczowych ekranów i prototyp mobilny do testów użyteczności.
Rezultaty
Spójny design i czytelne CTA ułatwiają szybkie porównanie ofert i prowadzą użytkownika do zakupu. Komponenty są skalowalne — łatwo dodać nowe kategorie lub warianty produktów.
Galeria projektu
Lista ofert pelletu
Widok karty produktu
Proces projektowy
Brief & research
Warsztat produktowy i analiza konkurencji e-commerce. Cele: szybkie porównanie ofert, widoczność cen i dostawy, minimum kliknięć do koszyka.
Architektura informacji
Kluczowe ścieżki: Strona główna → Listing → Karta produktu → Koszyk → Checkout. Priorytet: przejrzyste parametry pelletu i mocne CTA.
Wireframes
Makiety low-fi i mid-fi: duże karty, krótkie opisy, widoczne ceny jednostkowe oraz informacje o dostawie. Wersje mobilne z uproszczonym menu i sticky przyciskiem.
UI kit
Komponenty: karty ofert, filtry, selektory ilości, bloki informacyjne, nagłówek i stopka. Zaprojektowane stany interakcji (hover, active, error).
Makiety hi-fi + prototyp
Kluczowe widoki: strona główna, listing, karta produktu, koszyk. Prototyp pozwolił zoptymalizować kolejność CTA i widoczność filtrów.
Handoff
Specyfikacja komponentów, opisy interakcji i eksport ikon w Figmie. Projekt przygotowany do skalowania o kolejne produkty.
Design System
Typografia
Nagłówki sekcji / listingów
Pellet drzewny — nagłówki kategorii i listingu
Tytuły kart produktów
Nazwa produktu • Certyfikat • Skrót parametrów
Cena i meta
Cena palety • Dostawa do kodu • Dostępność
Filtry / chipy
„Certyfikat”, „Okazja”, „Gęstość nasypowa ≥ …”
Priorytet: czytelność tytułu i ceny, krótka meta (dostawa, dostępność), spójne etykiety filtrów.
Paleta kolorów
#FFFFFF
Tło — karty/listingi
#111827
Tekst — nagłówki, ceny
#E5E7EB
UI — obrysy/separatory (1px)
#292C43
Akcent — CTA „Sprawdź ofertę”
#9CA3AF
Stan — „Brak w magazynie” (muted)
Akcent CTA zgodny z przyciskami: rgb(41 44 67) → #292C43.
Komponenty UI
Karta produktu (listing)
Miniatura → tytuł + certyfikat → skrót parametrów → cena → CTA „Sprawdź ofertę”.
Filtry i chipy
„Certyfikat”, „Okazja”, „Gęstość nasypowa ≥ …” • reset filtrów.
Cena / dostawa
Pola: kod pocztowy, ilość → cena z dostawą lub brak dostawy.
CTA
Spacing & Grid
Listing: 12 kolumn desktop (3–4 karty), 1–2 kolumny mobile
Karta: padding 16–24 px, stałe odstępy tytuł → cena → CTA
Filtry: równy gutter między chipami, wyraźne grupy
Układ promuje szybkie skanowanie: nazwa → parametry → cena → CTA.