Ієрархія
Система дизайну Spaceship побудована шарами, кожен з яких додає ясності, структури й призначення. Вони утворюють ієрархію, що визначає, як ми проєктуємо, створюємо й масштабуємо продукти — від найменших візуальних рішень до найширшого користувацького шляху.
Дотримуючись принципів Atomic Design, ми структурували наші основні ресурси за такими категоріями, щоб усім командам було простіше ними користуватися.
Основи
Визначають основні правила нашої візуальної мови — кольори, типографіка, відступи, сітки, анімація та токени. Вони забезпечують нам послідовну базу для роботи.
Компоненти
Втілюють основні правила у багаторазових елементах інтерфейсу, що вирішують щоденні дизайнерські задачі.
Шаблони
Демонструють, як компоненти та патерни працюють разом у контексті, надаючи готові структури для повних сторінок і досвідів.
Патерни
Фіксують перевірені рішення та найкращі практики, забезпечуючи послідовність, доступність і орієнтацію на користувача на кожному етапі.
Основи
Основні атоми Spaceship Design System. Вони визначають візуальні та структурні правила, на яких будується кожен компонент і патерн.
Колір
Визначає брендовані та функціональні палітри, що забезпечують гармонію, доступність і гнучкість у всіх продуктах.
Типографіка
Встановлює ієрархію та зрозумілість за допомогою типографічної шкали, що полегшує читання й перегляд контенту.
Відступи
Забезпечують системну шкалу для відступів, полів і ритму макета, щоб підтримувати послідовність інтерфейсів.
Сітки
Створюють адаптивні макети, які підлаштовуються під різні пристрої, зберігаючи структуру та вирівнювання.
Анімація
Використовує переходи та анімацію для привернення уваги, передачі статусу та створення природних взаємодій.
Дизайн-токени
Перетворюють базові значення у код, слугуючи єдиним джерелом правди та спрощуючи швидке й легке оновлення.
Чіткі основи означають менше бар'єрів, більше інклюзивності та більше часу на вирішення реальних проблем, а не на початок з нуля.
Компоненти
Це багаторазові елементи Spaceship Design System. Кожен вирішує конкретну задачу інтерфейсу — від кнопок і полів введення до навігації та повідомлень зворотного зв'язку. Кожен компонент доступний, адаптивний і легко налаштовується під різні контексти чи пристрої.
Багаторазові компоненти забезпечують швидший запуск кожного продукту та відчуття єдності з загальною картиною.
Шаблони
Шаблони є містком між будівельними блоками та досвідом користувача. Вони поєднують основи та компоненти у повноцінні сторінки, демонструючи, як система працює на практиці.
Шаблони сторінок продукту
Високорівневі структури для лендінгів і сторінок продуктів, де дизайнери переважно оновлюють контент і налаштовують модулі під кожен контекст.
Компоненти для спільного використання
Більш складні, багаторазові структури, такі як таблиці порівнянь або картки цін, створені для послідовного вирішення конкретних сценаріїв у різних продуктах.
Завдяки готовим структурам команди можуть менше зосереджуватися на макетах і більше — на вирішенні реальних потреб користувачів.
Патерни
Патерни фіксують наш досвід із тестування, відгуків і реального використання, перетворюючи його на багаторазові стандартизовані рішення. Кожен патерн базується на намірах користувача — чи це спрощення процесу оформлення замовлення, обробка помилок або проведення користувача через форми.
Визначаючи перевірені рішення, патерни роблять нашу роботу цілеспрямованою, забезпечуючи, щоб кожен досвід був не лише функціональним, а й продуманим.