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