Etui projektowe Aurora

Dec 07 2022

Jak wiesz, kilku projektantów może być zaangażowanych w tworzenie rozwijających się i złożonych projektów w różnym czasie. Bardzo wygodnie jest korzystać ze zorganizowanego systemu elementów i zasad ich używania, kontynuując pracę nad czyimś projektem.

To jest dokładnie ta metoda, która była potrzebna w jednym z naszych projektów, Aurora. Naszym zadaniem było stworzenie koncepcji podstawowych elementów, aby dalej zbudować z nich pełnowartościowy interfejs dla platformy z zakresu zarządzania e-commerce.

Klient dostarczył jako przykład system Carbon, który obejmuje zestaw projektowy, kolory, czcionki, przypadki użycia i wiele więcej. Jak również analog ich produktu. Dodatkowo skupiłem się na przykładach Material Design, ponieważ ich strona internetowa zawiera opcje komponentów, które mogą być przydatne w rozwoju.
W trakcie prac zaproponowano przede wszystkim czcionki, ikony oraz główne kolory projektu. Jednocześnie stworzyłem przykładowe przyciski i dane wejściowe, aby pokazać, w jaki sposób wybrane czcionki i ikony wchodzą ze sobą w interakcję. Na tej podstawie klient wybrał czcionki, kolory i wygląd ikon. Tak więc jeden z kolorów logo, różowy, jest używany jako kolor podstawowy, a drugi, szary, jako kolor drugorzędny.

Wszystkie użyte style czcionek z zaznaczonymi rolami są zapisywane w stylach projektu Figma i można je wybrać z listy.

Kolory są zachowywane w podobny sposób. Ale są one podzielone na foldery w sekcji Style kolorów: Podstawowe i Dodatkowe. Aby rozszerzyć paletę kolorów, zastosowałem metodę dodawania czerni i bieli do wybranego koloru w różnych proporcjach sekwencyjnie (20%, 40%, 60% itd.). Ramka z układem kolorystycznym wskazuje również zamierzone role kolorystyczne.

Dodatkowo dodano kilka opcji cieni do wyboru z gotowego zestawu oferowanego przez klienta.

Następnie wybrano wygląd przycisków, wejść, rozwijanego menu oraz przycisku wyboru języka. Wszystkie przyciski to komponenty, których wygląd można zmieniać bezpośrednio w projekcie, w zależności od przeznaczenia. Ikonę w przycisku można również zmienić w menu Układ automatyczny.

Wygląd rozwijanego przycisku wyboru języka został nieznacznie zmieniony (stał się bardziej zwarty) po utworzeniu przeze mnie przykładowej strony logowania.

Wejście ma 9 opcji i może być używane z ikoną lub bez niej. Pole wprowadzania hasła ma więcej opcji, ponieważ może być używane w różnych sytuacjach i ma swoje specyficzne właściwości. Na przykład skala pokazująca siłę hasła i elementy podświetlone na zielono, jeśli użytkownik wprowadził wymaganą liczbę znaków. Zrobiłem również osobny komponent dla pola wprowadzania kodu weryfikacyjnego.

Następnie utworzono komponenty dla checkboxa i toggle, a także komponenty dla tych samych elementów z tekstem. Dodatkowo dodałem awatary o różnych rozmiarach, komponenty z grupami, podpowiedzi i przykłady użycia wraz z listą rozwijaną.

Aby pokazać, jak elementy i tekst działają w prawdziwym życiu, stworzyłem ekrany logowania, uwzględniając życzenia klienta. Później dodano ciemny motyw, dla którego stworzyłem osobne komponenty.

Aby skonfigurować komponenty dla ciemnego motywu, użyłem gotowego układu logowania i dobrałem odpowiednie kombinacje kolorów i przezroczystości. Niektórych elementów nie trzeba było zmieniać. Na przykład dla przycisku Główny.

Tym samym w dość krótkim czasie klient otrzymuje prosty UI-kit z możliwością edycji elementów w Figmie. To świetny sposób na zaprezentowanie głównego stylu projektu bez wydawania dużych pieniędzy.