Hiyerarşi
Spaceship Tasarım Sistemi katmanlar halinde inşa edilmiştir, her biri açıklık, yapı ve amaç katar. Bunlar, en küçük görsel karardan en geniş kullanıcı yolculuğuna kadar ürünleri nasıl tasarladığımızı, oluşturduğumuzu ve ölçeklendirdiğimizi yönlendiren bir hiyerarşi oluşturur.
Atomic Design ilkelerini takip ederek, ana kaynaklarımızı aşağıdaki kategoriler altında yapılandırdık ve böylece tüm ekiplerin bunları daha kolay kullanmasını sağladık.
Temeller
Görsel dilimizin temel kurallarını tanımlar — renkler, tipografi, boşluklandırma, ızgaralar, hareket ve token'lar. Bunlar bize üzerinde çalışabileceğimiz tutarlı bir temel sağlar.
Bileşenler
Temel kuralları, günlük tasarım sorunlarını çözen yeniden kullanılabilir arayüz öğelerinde hayata geçirir.
Şablonlar
Bileşenlerin ve desenlerin bağlam içinde birlikte nasıl çalıştığını gösterir; eksiksiz sayfalar ve deneyimler için hazır yapılar sunar.
Desenler
Kanıtlanmış çözümleri ve en iyi uygulamaları yakalayarak çalışmalarımızın her temas noktasında tutarlı, erişilebilir ve kullanıcı odaklı kalmasını sağlar.
Temeller
Spaceship Design System'in temel atomları. Her bileşenin ve desenin üzerine inşa edildiği görsel ve yapısal kuralları tanımlarlar.
Renk
Ürünler genelinde uyum, erişilebilirlik ve esneklik sağlayan marka ve işlevsel paletleri tanımlar.
Tipografi
İçeriğin kolay okunmasını ve taranmasını sağlayan bir yazı ölçeğiyle hiyerarşi ve netlik oluşturur.
Boşluklandırma
Tutarlı arayüzleri korumak için kenar boşlukları, iç boşluklar ve düzen ritmi adına sistematik bir ölçek sunar.
Izgaralar
Yapıyı ve hizalamayı korurken cihazlar arasında uyum sağlayan duyarlı düzenler oluşturur..
Hareket
Dikkati yönlendirmek, durumu iletmek ve etkileşimlerin doğal hissettirmesini sağlamak için geçişleri ve animasyonu kullanır.
Design Tokens
Temel değerleri koda dönüştürür; hızlı ve kolay güncellemeleri mümkün kılarken tek bir doğruluk kaynağı olarak hizmet eder.
Net temeller, daha az engel, daha fazla kapsayıcılık ve sıfırdan başlamak yerine gerçek sorunları çözmeye daha fazla zaman ayrılması anlamına gelir.
Bileşenler
Bunlar, Spaceship Design System'in yeniden kullanılabilir öğeleridir. Her biri belirli bir arayüz sorununu çözer — düğmelerden ve giriş alanlarından gezinmeye ve geri bildirim mesajlarına kadar. Her bileşen erişilebilir, duyarlı ve farklı bağlamlara veya cihazlara kolayca uyarlanabilir.
Yeniden kullanılabilir bileşenler, oluşturduğumuz her ürünün daha hızlı yayına alınmasını ve daha büyük resimle bağlantılı hissettirmesini sağlar.
Şablonlar
Şablonlar, yapı taşları ile kullanıcı deneyimi arasındaki köprüdür. Temelleri ve bileşenleri tam sayfa bağlamlarında bir araya getirerek sistemin pratikte nasıl çalıştığını gösterir.
Ürün Sayfası Şablonları
Tasarımcıların çoğunlukla içeriği güncellediği ve modülleri her bağlama uyacak şekilde ayarladığı açılış ve ürün sayfaları için üst düzey sayfa yapıları.
Paylaşılabilir bileşenler
Karşılaştırma tabloları veya fiyatlandırma kartları gibi daha karmaşık, yeniden kullanılabilir yapılar; ürünler genelinde belirli senaryoları tutarlı şekilde ele alacak biçimde tasarlanır.
Başlangıç için hazır yapılar sayesinde ekipler, düzen kararlarına daha az, gerçek kullanıcı ihtiyaçlarını ele almaya ise daha fazla odaklanabilir.
Desenler
Desenler, testlerden, geri bildirimlerden ve gerçek dünya kullanımından öğrendiklerimizi yakalayarak bunları yeniden kullanılabilir, standartlaştırılmış çözümlere dönüştürür. Her desen, ister ödeme sürecini basitleştirmek, ister hataları ele almak, ister kullanıcıları formlar boyunca yönlendirmek olsun, kullanıcı niyetine dayanır.
Kanıtlanmış çözümleri tanımlayarak desenler, çalışmalarımızı amaçlı hale getirir ve her deneyimin yalnızca işlevsel değil, aynı zamanda düşünülerek tasarlanmış olmasını sağlar.