Bagstar
Strona internetowa marki „Bagstar” została zaprojektowana jako nowoczesna i przejrzysta wizytówka prezentująca ofertę produktów oraz informacje o marce. Serwis w uporządkowany sposób eksponuje kluczowe sekcje – kategorie produktowe, ofertę, realizacje/case studies oraz kontakt. Projekt skupia się na czytelności, dużej typografii, spójnej kolorystyce i prostym dostępie do głównych sekcji, zapewniając profesjonalny i wiarygodny wizerunek marki w sieci.
Podgląd projektu (desktop + mobile)
Przeciągnij lub przewiń
Wyzwanie
Celem projektu było stworzenie nowoczesnej, responsywnej strony, która w czytelny i profesjonalny sposób zaprezentuje asortyment oraz pozwoli szybko dotrzeć do kluczowych informacji. Istotne było zachowanie balansu między charakterem produktowym a estetyką nowoczesnej prezentacji – tak, aby strona była atrakcyjna i funkcjonalna na desktopie i urządzeniach mobilnych.
Rozwiązanie
Opracowano lekką wizualnie kompozycję z naciskiem na hierarchię treści i czytelność. Duże nagłówki, kontrastowe akcenty, harmonijna siatka oraz subtelne animacje przewijania nadają stronie nowoczesnego charakteru. Struktura została zaprojektowana w wariantach desktop i mobile, kładąc nacisk na intuicyjną nawigację i szybkie przejście do sekcji Oferty i Kontakt.
Rezultaty
Nowa warstwa wizualna wspiera wiarygodność marki i porządkuje prezentację treści. Przejrzysty układ, czytelne CTA i dopracowana typografia poprawiają doświadczenie użytkowników oraz ułatwiają nawigację między kluczowymi sekcjami.
Galeria projektu
Widok strony głównej
Sekcja „Oferta”
Proces projektowy
Brief & warsztaty
Zespół stakeholderów Bagstar + warsztat online. Zdefiniowano cele: czytelna prezentacja kategorii produktowych, szybka ścieżka do zapytań oraz spójny język wizualny marki na desktopie i mobile.
Architektura informacji
Uporządkowany IA pod produkt: strona główna → kategorie → listing → karta produktu/case. Priorytety: odnajdywalność kategorii, filtry, czytelne CTA i krótsza droga do kontaktu.
Wireframes (low–mid fidelity)
Makiety w Figmie z naciskiem na hierarchię treści, grid i wzorce nawigacyjne. Testy klikalnych przepływów (menu, filtry, CTA) na małej próbie użytkowników wewnętrznych.
UI kit & makiety hi-fi
Opracowanie bibliotek komponentów (karty produktowe, przyciski, sekcje hero, bloki zaufania). Spójna typografia, kontrast, stany interakcji i mikro-animacje przewijania.
Prototyp i testy użyteczności
Klikalny prototyp Figma. Zadania: „znajdź kategorię X”, „przejdź do zapytania”, „porównaj dwa rozwiązania”. Iteracje na podstawie wniosków (skrót CTA, uproszczone menu, wyższy kontrast linków).
Handoff do dev & QA UI
Handoff w Figmie (style, komponenty, specyfikacje). Wsparcie w trakcie implementacji oraz przeglądy UI (responsywność, dostępność WCAG AA, spójność komponentów).
Design System
Typografia
Nagłówki (hero / sekcje)
Czytelne tytuły kategorii i marek
Tytuły kart
Nazwa produktu / marki + krótki opis
Tekst akapitowy
Parametry, zastosowanie, korzyści — listing i podstrony
Meta / pomocnicze
Status dostępności, warianty, informacje o dostawie
Hierarchia: tytuł → parametry → cena → CTA. Krótkie, rzeczowe etykiety.
Paleta kolorów
#FFFFFF
Tło — sekcje i karty
#111827
Tekst — nagłówki, ceny
#6B7280
Tekst pomocniczy (meta)
#E5E7EB
UI — cienkie linie i obrysy (1px)
#8BC53F
Akcent — brand (logo/CTA)
Akcent zielony używaj oszczędnie: CTA, aktywne stany, mocne wyróżniki.
Komponenty UI
Karta produktu (listing)
Miniatura → tytuł + marka → skrót parametrów → cena → CTA / link do szczegółów.
Sekcja marek
Logo + krótki opis + link do asortymentu; siatka na jasnym tle.
CTA (przykładowe)
Główne CTA wyróżnione zielenią marki; hover = delikatne przyciemnienie.
Spacing & Grid
Listing: 12 kolumn (desktop), 1–2 kolumny (mobile)
Karta: padding 16–24 px; rytm tytuł → parametry → cena → CTA
Sekcje marek/kategorii: równy gutter między kaflami
Neutralny, lekki UI: jasne tła, cienkie obrysy, akcent zieleni tylko tam, gdzie potrzeba.