Hierarchia
Spaceship Design System jest zbudowany warstwowo, z każdą kolejną warstwą wnoszącą jasność, strukturę i cel. Tworzą one hierarchię, która prowadzi nas w projektowaniu, budowaniu i skalowaniu produktów — od najmniejszej decyzji wizualnej po najszerszą ścieżkę użytkownika.
Kierując się zasadami Atomic Design, uporządkowaliśmy nasze główne zasoby w następujące kategorie, aby ułatwić wszystkim zespołom korzystanie z nich.
Fundamenty
Określają podstawowe zasady naszego języka wizualnego — kolory, typografię, odstępy, siatki, ruch i tokeny. Dają nam spójną bazę do pracy.
Komponenty
Ożywiają zasady fundamentów w postaci wielokrotnego użytku elementów interfejsu, które rozwiązują codzienne problemy projektowe.
Szablony
Pokazują, jak komponenty i wzorce współpracują ze sobą w kontekście, zapewniając gotowe struktury dla kompletnych stron i doświadczeń.
Wzorce
Utrwalają sprawdzone rozwiązania i najlepsze praktyki, zapewniając, że nasza praca pozostaje spójna, dostępna i zorientowana na użytkownika w każdym punkcie styku.
Fundamenty
Podstawowe atomy Spaceship Design System. Określają wizualne i strukturalne zasady, na których opiera się każdy komponent i wzorzec.
Kolor
Definiuje palety marki i funkcjonalne, które zapewniają harmonię, dostępność i elastyczność w różnych produktach.
Typografia
Ustanawia hierarchię i przejrzystość dzięki skali typograficznej, która sprawia, że treści są łatwe do czytania i skanowania.
Odstępy
Zapewniają systematyczną skalę dla marginesów, dopełnień i rytmu układu, aby utrzymać spójne interfejsy.
Siatki
Tworzą responsywne układy, które dostosowują się do różnych urządzeń, zachowując przy tym strukturę i wyrównanie..
Ruch
Wykorzystuje przejścia i animacje, aby kierować uwagę, komunikować status i sprawiać, że interakcje wydają się naturalne.
Design Tokens
Przekładają podstawowe wartości na kod, służąc jako jedno źródło prawdy i jednocześnie ułatwiając szybkie oraz łatwe aktualizacje.
Jasno określone fundamenty oznaczają mniej barier, większą inkluzywność i więcej czasu poświęconego na rozwiązywanie rzeczywistych problemów zamiast zaczynania od zera.
Komponenty
To wielokrotnego użytku elementy Spaceship Design System. Każdy z nich rozwiązuje konkretny problem interfejsu — od przycisków i pól wejściowych po nawigację i komunikaty zwrotne. Każdy komponent jest dostępny, responsywny i łatwo dostosowuje się do różnych kontekstów lub urządzeń.
Komponenty wielokrotnego użytku sprawiają, że każdy tworzony przez nas produkt jest dostarczany szybciej i wydaje się częścią większej całości.
Szablony
Szablony są pomostem między elementami składowymi a doświadczeniem użytkownika. Łączą fundamenty i komponenty w pełne konteksty stron, pokazując, jak system działa w praktyce.
Szablony stron produktowych
Wysokopoziomowe struktury stron docelowych i produktowych, w których projektanci głównie aktualizują treści i dostosowują moduły do każdego kontekstu.
Komponenty do udostępniania
Bardziej złożone struktury wielokrotnego użytku, takie jak tabele porównawcze czy karty cenowe, są projektowane tak, aby spójnie obsługiwać określone scenariusze w różnych produktach.
Dzięki gotowym strukturom, od których można zacząć, zespoły mogą mniej skupiać się na decyzjach dotyczących układu, a bardziej na odpowiadaniu na rzeczywiste potrzeby użytkowników.
Wzorce
Wzorce gromadzą to, czego nauczyliśmy się dzięki testom, opiniom i rzeczywistemu użytkowaniu, przekształcając te doświadczenia w wielokrotnego użytku, ustandaryzowane rozwiązania. Każdy wzorzec opiera się na intencji użytkownika, niezależnie od tego, czy chodzi o uproszczenie procesu płatności, obsługę błędów, czy prowadzenie użytkowników przez formularze.
Dzięki definiowaniu sprawdzonych rozwiązań wzorce nadają naszej pracy cel, zapewniając, że każde doświadczenie jest nie tylko funkcjonalne, ale także przemyślanie zaprojektowane.