AuraPura
Od założeń marki do design systemu
- Rola
- UX/UI designer
- Typ
- Projekt koncepcyjny, kurs Design System Intro
- Narzędzia
AuraPura to koncepcyjny design system dla e-commerce, przygotowany w ramach kursu Design System Intro. Przełożyłam brief i materiały marki na tokeny, komponenty oraz responsywne widoki mobile, tablet i desktop.
- Problem
- Przełożenie materiałów marki na spójne zasady projektowania, które sprawdzą się w różnych komponentach i wielkościach ekranu.
- Cel
- Zbudowanie podstaw systemu, który pozwala rozwijać interfejs bez definiowania tych samych rozwiązań od początku.
- Efekt
- Biblioteka oparta na tokenach core i alias, Figma Variables oraz komponentach wykorzystanych w widokach na trzy wielkości ekranu.
Proces
Zaczęłam od analizy briefu i assetów marki. Na ich podstawie określiłam paletę, typografię i kierunek wizualny. Następnie uporządkowałam te decyzje w strukturę tokenów, która stała się podstawą komponentów.
Pracowałam od fundamentów do ich zastosowania. Najpierw wspólne wartości i ich role, następnie komponenty, a na końcu responsywne layouty. Pozwoliło mi to prześledzić, jak decyzje na poziomie systemu wpływają na gotowy interfejs.
Fundamenty systemu
Paletę i typografię wynikające z materiałów marki przełożyłam na wartości wykorzystywane w całej bibliotece. Rozdzieliłam je na tokeny core, przechowujące wartości bazowe oraz aliasy opisujące ich zastosowanie.
Taki podział oddziela konkretną wartość od jej funkcji w interfejsie. Komponent korzysta z przypisanej roli, dzięki czemu zmiany można wprowadzać na poziomie tokenów zamiast poprawiać każdy element osobno.
Komponenty i responsywność
Komponenty budowałam na wspólnych tokenach i zmiennych. Figma Variables wykorzystałam zarówno do wariantów kolorystycznych, jak i wartości dostosowanych do różnych breakpointów. Dzięki temu mogłam adaptować elementy do mobile, tablet i desktop bez mnożenia osobnych wariantów dla każdej szerokości.
Bibliotekę zastosowałam następnie w layoutach e-commerce. Widoki pokazują, jak wspólne zasady zachowują spójność wizualną przy zmieniającej się przestrzeni i układzie treści.
Rezultat i wnioski
Powstała podstawa design systemu obejmująca tokeny, zmienne, komponenty i responsywne widoki. Najważniejszą lekcją było dla mnie to, że spójność systemu zaczyna się przed projektowaniem komponentów. Struktura tokenów, nazewnictwo i przypisane role wpływają później na każdy ekran.
Rozwijając projekt dalej, skupiłabym się na dokumentacji zastosowań i dostępności komponentów, uzupełnieniu biblioteki według rzeczywistych potrzeb oraz zasadach wprowadzania zmian. Kolejnym etapem byłoby również powiązanie tokenów z kodem i sprawdzenie systemu w pracy zespołowej.