Atomik tasarım: arayüzü küçük parçalardan kurma yaklaşımı

Atomik tasarım nedir?

Atomik tasarım (atomic design), bir arayüzü tek seferde ekran ekran çizmek yerine, kimyadaki maddenin yapısına benzetilen bir hiyerarşiyle küçük parçalardan büyüğe doğru kurma yöntemidir. Yaklaşım, Brad Frost tarafından tasarım sistemlerini anlatmak için ortaya atılmıştır. Fikir basittir: en küçük yapı taşlarını tanımla, onları birleştirerek daha büyük parçalar elde et ve sonunda gerçek ekranlara ulaş.

Yöntemin değeri bir görsel stil önermesinde değil, ortak bir dil sağlamasındadır. Tasarımcı, geliştirici ve ürün yöneticisi bir düğmeden bir sayfa şablonuna kadar her parçanın adını ve sınırını aynı biçimde kullandığında, tekrar eden iş azalır ve arayüz tutarlı kalır.

Beş aşama: atomdan sayfaya

Atomik tasarım beş aşamadan oluşur ve her aşama bir öncekinin üzerine kurulur.

• Atomlar: Bir arayüzün bölünemeyen temel öğeleri. Form etiketi, giriş alanı, düğme, renk ve yazı tipi gibi parçalar buraya girer. Tek başına anlamlı bir iş görmez ama her şeyin hammaddesidir.
• Moleküller: Birlikte tek bir işi yapan basit atom grupları. Bir etiket, bir arama alanı ve bir düğmenin birleşmesiyle oluşan arama formu klasik örnektir.
• Organizmalar: Moleküllerden, atomlardan ya da başka organizmalardan oluşan, arayüzün ayırt edilebilir bir bölümünü kuran karmaşık bileşenler. Sitenin üst bilgi alanı ya da ürün ızgarası örnektir.
• Şablonlar: Bileşenleri sayfa düzeyinde yerleştiren ve içeriğin iskeletini gösteren yerleşimler. Henüz gerçek içerik yoktur.
• Sayfalar: Şablonun gerçek ve temsilî içerikle doldurulmuş hali. Tasarımın gerçek veriyle ne kadar dayandığı burada sınanır.

Bu beş aşama doğrusal bir sıra değil, düşünme modelidir. Ekip parça ile bütünü aynı anda ele alır; sayfada fark edilen bir sorun atoma kadar geri götürülebilir.

Küçük bir örnek: arama kutusu

Bir e-ticaret sitesinin arama alanını ele alalım. Atom düzeyinde bir metin girişi, bir düğme ve bir simge vardır. Üçü bir araya geldiğinde arama kutusu denen molekül oluşur. Bu molekül, logo ve gezinme bağlantılarıyla birleşince üst bilgi organizmasını kurar.

Üst bilgi, ürün listesi ve alt bilgi bir sayfa şablonunda yerleştirilir. Şablona gerçek ürün adları ve görseller koyulduğunda ortaya bir sayfa çıkar. Arama kutusunun düğme rengi değiştirilmek istendiğinde değişiklik yalnızca düğme atomunda yapılır; arama kutusunu kullanan her yer kendiliğinden güncellenir.

Bu örnek atomik tasarımın pratik kazancını gösterir: tek bir yerde yapılan düzeltme tüm üst katmanlara yayılır, aynı bileşeni her sayfada baştan çizme ihtiyacı ortadan kalkar.

Tasarım sistemi ve bileşen kütüphanesiyle ilişkisi

Atomik tasarım tek başına bir araç değildir; tasarım sistemini düzenlemenin bir yoludur. Tasarım sistemi renk, boşluk ve tipografi kurallarının yanında bileşenlerin davranışını ve kullanım ilkelerini de içerir. Atomik tasarım, bu bileşenlerin hangi katmanda yaşadığını ve birbirine nasıl bağlandığını netleştirir.

Kodda karşılığı bileşen kütüphanesidir. React, Vue ya da başka bir çerçevede düğme, giriş alanı ve kart gibi bileşenler yazılır, daha büyük bileşenler bunlardan türetilir. Tasarım araçlarındaki bileşen kütüphanesi ile koddaki kütüphane aynı hiyerarşiyi paylaştığında, tasarımdan geliştirmeye geçişte anlam kaybı azalır. Renk, boşluk ve yazı boyutu gibi değerlerin ortak adlandırması için tasarım token yaklaşımı da bu yapıyı tamamlar.

Sık yapılan hatalar ve sınırları

En yaygın hata, sınıflandırmayı amaç haline getirmektir. Bir bileşenin molekül mü organizma mı olduğu tartışması saatlerce sürebilir; oysa yöntemin amacı tutarlılık ve yeniden kullanım sağlamaktır, etiket doğruluğu değil. Sınır belirsizse ekibin üzerinde anlaştığı pratik bir karar yeterlidir.

Bir başka hata, bileşenleri gereğinden fazla soyutlamaktır. Yalnızca tek yerde kullanılan ve değişmeyecek bir parçayı genel bir bileşen olarak tasarlamak bakım yükü yaratır. Sonraki hata ise gerçek içerikle sınamamaktır: uzun bir ürün adı ya da eksik bir görsel, düzgün görünen bir şablonu bozabilir. Bu nedenle sayfa aşaması, yöntemin en çok gözden kaçan ama en öğretici adımıdır.

Yöntem özellikle çok sayfalı ürünlerde ve birden fazla ekibin ortak arayüz kurduğu yerlerde fayda sağlar. Tek sayfalık ve kısa ömürlü bir tanıtım sitesi için bu kadar katmanlı bir yapı gereksiz olabilir.

Mindset programlarında nerede çalışılır?

Mindset kataloğundaki "Component-Driven Development ve Atomik Tasarım" eğitimi bu konuya doğrudan odaklanır. Müfredat modülleri bileşen odaklı geliştirme ve hiyerarşi, bileşen API tasarımı ve varyantlar, belgeleme, test ve kütüphane yönetimi başlıklarından oluşur.