Projekt z kursu UI/UX

Biblioteka komponentów

Mały system projektowy dla aplikacji „Szkolny chaos”: kolory, typografia, przyciski, pola i karty – gotowe do użycia w Figmie.

Proces

Problem

Przy kolejnych ekranach te same przyciski miały różne rozmiary i kolory. Każda zmiana oznaczała ręczne poprawianie wielu miejsc.

Zrobiłam przegląd wszystkich ekranów i wypisałam powtarzające się elementy: 7 wersji przycisków, 5 odcieni szarości i 4 rozmiary nagłówków.

Ujednoliciłam to do 2 typów przycisków, 6 kolorów w zmiennych i 5 stylów tekstu. Każdy komponent ma stany: domyślny, najechanie, fokus i błąd.

Nowy ekran złożyłam z komponentów w 20 minut zamiast około godziny. Wszystkie pary kolorów sprawdziłam pod kątem kontrastu.

komponenty z wariantami

3×

szybsze składanie nowego ekranu

100%

par kolorów z kontrastem AA

System projektowy to umowa z samą sobą. Nazwy warstw i komponentów po polsku z angielskim w nawiasie bardzo ułatwiły mi pracę.

Współpraca