Hierarchie
Spaceship Design System je postaven ve vrstvách, z nichž každá přidává jasnost, strukturu a účel. Tyto vrstvy tvoří hierarchii, která určuje, jak navrhujeme, vytváříme a škálujeme produkty — od nejmenšího vizuálního rozhodnutí až po nejširší uživatelskou cestu.
Dodržováním principů Atomic Design jsme naše hlavní zdroje uspořádali do následujících kategorií, aby je všechny týmy mohly snáze používat.
Základy
Definují základní pravidla našeho vizuálního jazyka — barvy, typografii, rozestupy, mřížky, pohyb a tokeny. Poskytují nám konzistentní základ, ze kterého můžeme vycházet.
Komponenty
Uvádějí pravidla základů do života v podobě znovupoužitelných prvků rozhraní, které řeší každodenní designové problémy.
Šablony
Ukazují, jak komponenty a vzory fungují společně v kontextu, a poskytují hotové struktury pro kompletní stránky a zkušenosti.
Vzory
Zachycují ověřená řešení a osvědčené postupy a zajišťují, že naše práce zůstává konzistentní, přístupná a zaměřená na uživatele v každém kontaktním bodě.
Základy
Základní atomy Spaceship Design System. Definují vizuální a strukturální pravidla, na kterých je postavena každá komponenta a vzor.
Barva
Definuje značkové a funkční palety, které zajišťují harmonii, přístupnost a flexibilitu napříč produkty.
Typografie
Stanovuje hierarchii a jasnost pomocí typografické škály, díky níž se obsah snadno čte a skenuje.
Rozestupy
Poskytují systematickou škálu pro okraje, vnitřní odsazení a rytmus rozvržení, aby byla rozhraní konzistentní.
Mřížky
Vytvářejí responzivní rozvržení, která se přizpůsobují různým zařízením při zachování struktury a zarovnání..
Pohyb
Využívá přechody a animace k upoutání pozornosti, sdělování stavu a k tomu, aby interakce působily přirozeně.
Design Tokens
Převádějí základní hodnoty do kódu, slouží jako jediný zdroj pravdy a zároveň usnadňují rychlé a snadné aktualizace.
Jasně definované základy znamenají méně překážek, větší inkluzivitu a více času věnovaného řešení skutečných problémů namísto začínání od nuly.
Komponenty
Jedná se o znovupoužitelné prvky Spaceship Design System. Každý z nich řeší konkrétní problém rozhraní — od tlačítek a vstupních polí po navigaci a zpětnovazební zprávy. Každá komponenta je přístupná, responzivní a snadno přizpůsobitelná různým kontextům nebo zařízením.
Znovupoužitelné komponenty zajišťují, že každý produkt, který vytváříme, je dodán rychleji a působí jako součást většího celku.
Šablony
Šablony jsou mostem mezi stavebními bloky a uživatelskou zkušeností. Kombinují základy a komponenty do kontextů celých stránek a ukazují, jak systém funguje v praxi.
Šablony produktových stránek
Struktury stránek na vysoké úrovni pro landing pages a produktové stránky, kde designéři převážně aktualizují obsah a upravují moduly tak, aby odpovídaly každému kontextu.
Sdílené komponenty
Složitější znovupoužitelné struktury, jako jsou srovnávací tabulky nebo cenové karty, jsou navrženy tak, aby konzistentně řešily konkrétní scénáře napříč produkty.
Díky hotovým strukturám, od kterých lze začít, se týmy mohou méně soustředit na rozhodování o rozvržení a více na řešení skutečných potřeb uživatelů.
Vzory
Vzory zachycují to, co jsme se naučili z testování, zpětné vazby a používání v reálném světě, a převádějí to do znovupoužitelných standardizovaných řešení. Každý vzor vychází ze záměru uživatele, ať už jde o zjednodušení procesu placení, řešení chyb nebo provádění uživatelů formuláři.
Definováním ověřených řešení dávají vzory naší práci jasný smysl a zajišťují, že každá zkušenost není jen funkční, ale také promyšleně navržená.