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.
Stosując zasady Atomic Design, uporządkowaliśmy nasze główne zasoby w następujące kategorie, co ułatwia korzystanie z nich wszystkim zespołom.
Podstawy
Określają podstawowe zasady naszego języka wizualnego — kolory, typografię, odstępy, siatki, ruch i tokeny. Zapewniają nam spójną bazę do pracy.
Komponenty
Ożywiają zasady podstawowe w postaci wielokrotnego użytku elementów interfejsu, które rozwiązują codzienne problemy projektowe.
Szablony
Pokazują, jak komponenty i wzorce współpracują w kontekście, dostarczając gotowe struktury dla kompletnych stron i doświadczeń.
Wzorce
Gromadzą sprawdzone rozwiązania i najlepsze praktyki, zapewniając spójność, dostępność i zorientowanie na użytkownika w każdym punkcie styku.
Podstawy
Podstawowe atomy Spaceship Design System. Określają zasady wizualne i strukturalne, na których opiera się każdy komponent i wzorzec.
Kolor
Określa 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 ułatwia czytanie i przeglądanie treści.
Odstępy
Zapewnia systematyczną skalę dla marginesów, wypełnień i rytmu układu, aby utrzymać spójność interfejsów.
Siatki
Tworzy responsywne układy, które dostosowują się do różnych urządzeń, zachowując strukturę i wyrównanie.
Ruch
Wykorzystuje przejścia i animacje, aby przyciągać uwagę, komunikować status i sprawiać, że interakcje wydają się naturalne.
Tokeny projektowe
Przekładają wartości podstawowe na kod, stanowiąc jedno źródło prawdy i umożliwiając szybkie oraz łatwe aktualizacje.
Jasne podstawy oznaczają mniej barier, większą inkluzywność i więcej czasu na rozwiązywanie rzeczywistych problemów zamiast zaczynania od zera.
Komponenty
To są wielokrotnego użytku elementy Spaceship Design System. Każdy z nich rozwiązuje konkretny problem interfejsu — od przycisków i pól wprowadzania po nawigację i komunikaty zwrotne. Każdy komponent jest dostępny, responsywny i łatwo dostosowywany do różnych kontekstów lub urządzeń.
Wielokrotnego użytku komponenty zapewniają, że każdy produkt, który tworzymy, powstaje szybciej i jest spójny z całościową wizją.
Szablony
Szablony są pomostem między elementami budulcowymi a doświadczeniem użytkownika. Łączą podstawy i komponenty w pełne konteksty stron, pokazując, jak system działa w praktyce.
Szablony stron produktowych
Struktury stron na wysokim poziomie dla stron docelowych i produktowych, gdzie projektanci głównie aktualizują treści i dostosowują moduły do każdego kontekstu.
Udostępniane komponenty
Bardziej złożone, wielokrotnego użytku struktury, takie jak tabele porównawcze czy karty cenowe, są zaprojektowane tak, aby konsekwentnie obsługiwać określone scenariusze w różnych produktach.
Dzięki gotowym strukturom zespoły mogą mniej czasu poświęcać na decyzje dotyczące układu, a więcej na zaspokajanie rzeczywistych potrzeb użytkowników.
Wzorce
Wzorce gromadzą wiedzę zdobytą podczas testów, opinii i rzeczywistego użytkowania, przekształcając ją w powtarzalne, standaryzowane rozwiązania. Każdy wzorzec opiera się na intencjach użytkownika, niezależnie od tego, czy chodzi o uproszczenie procesu zakupu, obsługę błędów czy prowadzenie użytkowników przez formularze.
Definiując sprawdzone rozwiązania, wzorce nadają naszej pracy sens, zapewniając, że każde doświadczenie jest nie tylko funkcjonalne, ale i przemyślane.