Projekt akademicki realizowany w ramach zajęć na Uniwersytecie SWPS w Krakowie.
O projekcie:
Projekt skupiony na budowie zaawansowanego systemu projektowego (Design System) dla marki biżuteryjnej. Celem było połączenie luksusowej estetyki z techniczną precyzją, przy wykorzystaniu nowoczesnych funkcji narzędzia Figma.
Moja rola: Samodzielnie opracowałam logikę UX, układ strony oraz pełną warstwę UI, w tym architekturę zmiennych i bibliotekę komponentów.
Kontekst i Wyzwanie
Celem było zaprojektowanie e-commerce dla marki biżuteryjnej, łączącego luksusową estetykę z techniczną dyscypliną. Samodzielnie opracowałam architekturę informacji (Home, Listing, PDP, automatycznie przełączany dark/light mode), dbając o intuicyjną nawigację i ekspozycję detali. Priorytetem była strona techniczna: budowa zaawansowanego Design Systemu w oparciu o zmienne (Variables) oraz skalowalną bibliotekę komponentów.
Design System i Variables
Całość oparta na metodzie Atomic Design. Wdrożyłam zaawansowaną strukturę zmiennych (Variables) dla kolorów, typografii i odstępów, co zapewnia pełną skalowalność projektu i łatwość wprowadzania zmian globalnych.
Adaptacyjność: Dark Mode
Wykorzystując mechanizm Color Tokens, zaprojektowałam w pełni funkcjonalny tryb ciemny (Dark Mode).
Precyzja: Każdy kolor został zmapowany tak, aby zachować odpowiedni kontrast i luksusowy charakter marki w obu wersjach kolorystycznych.
Technika: Przełączanie trybów odbywa się automatycznie dzięki poprawnie skonfigurowanym trybom zmiennych (Modes).
Finalny rezultat
Powstał spójny system projektowy oraz makiety High-Fidelity kluczowych sekcji sklepu: strony głównej, menu, listy produktów oraz karty produktu. Całość została zaprojektowana w sposób modułowy, co gwarantuje łatwą skalowalność interfejsu i najwyższą jakość wizualną końcowego produktu.
Wniosek
Projekt był sprawdzianem z budowy zaawansowanej architektury systemowej.
Skalowalność: Zastosowanie metodologii Atomic Design pozwoliło mi stworzyć bibliotekę, która jest odporna na błędy i łatwa w rozbudowie.
Automatyzacja UI: Praca na zmiennych (Variables) i tokenach umożliwiła błyskawiczną adaptację interfejsu do różnych trybów (Light/Dark Mode).
Techniczna dyscyplina: Potwierdziłam, że kluczem do profesjonalnego UI jest „czysty” plik projektowy, w którym zaawansowana logika systemowa idzie w parze z luksusową estetyką.
