Atomik Tasarım (Atomic Design) Nedir?
Kısa tanım
Atomik tasarım, Brad Frost'un ortaya koyduğu ve arayüzleri beş seviyeli bir hiyerarşiyle kurmayı öneren tasarım sistemi metodolojisidir: atomlar, moleküller, organizmalar, şablonlar ve sayfalar. Kimyadan ödünç alınan bu model, en küçük parçalardan (etiket, input, buton) başlayıp bunları giderek daha karmaşık bileşenlere ve gerçek içerikli sayfalara birleştirmeyi anlatır. Doğrusal bir iş akışı değil, bir zihinsel modeldir.
Diğer adları: atomic design, atomik tasarım metodolojisi, Brad Frost atomic design
Kimyadan arayüze bir benzetme
Brad Frost, yaklaşımı ilk kez 2013'te bir blog yazısında anlattı, 2016'da da aynı adlı bir kitaba dönüştürdü. Çıkış noktası şuydu: web ekipleri hâlâ "sayfa" tasarladığını düşünüyordu, oysa gerçekte birbirine bağlı parçalardan oluşan sistemler üretiyorlardı. Kimyadaki atomların moleküllere, moleküllerin de daha karmaşık organizmalara dönüşmesi, bu parçaların nasıl birleştiğini anlatmak için kullanışlı bir dil sağladı.
Frost'un özellikle altını çizdiği nokta, atomik tasarımın adım adım ilerleyen bir süreç olmadığıdır. Ekip aynı anda hem tek bir butonla hem de bütün bir sayfa şablonuyla çalışabilir; model, o an hangi seviyede düşünüldüğünü adlandırmaya yarar.
Beş seviye ve örnekleri
| Seviye | Tanım | Örnek |
|---|---|---|
| Atom | Daha fazla bölünemeyen temel arayüz öğesi | Etiket, metin kutusu, buton, ikon |
| Molekül | Birlikte tek bir iş gören basit atom grubu | Etiket + input + butondan oluşan arama formu |
| Organizma | Arayüzün belirgin bir bölümünü oluşturan karmaşık bileşen | Logo, menü ve arama formunu içeren site başlığı |
| Şablon | Bileşenleri bir düzene yerleştirip içerik yapısını gösteren iskelet | Blog yazısı şablonu: başlık, kapak alanı, gövde, ilgili yazılar |
| Sayfa | Şablona gerçek içerik yerleştirilmiş, varyasyonları gösteren son hâl | Uzun başlıklı, görselsiz gerçek bir yazı sayfası |
Atom seviyesi, büyük ölçüde HTML öğelerine karşılık gelir. Bu yüzden atomları doğru anlamsal HTML öğeleriyle kurmak, üst seviyelerdeki erişilebilirlik sorunlarının çoğunu baştan önler.
Şablon ile sayfa arasındaki fark neden önemli?
Şablon, içerik yapısını gösterir: başlık burada, görsel şurada. Sayfa ise o yapının gerçek içerikle sınandığı yerdir. Üç kelimelik bir başlıkla kusursuz görünen bir kart, altmış karakterlik bir ürün adıyla taşabilir; görseli olmayan bir haber, şablondaki kapak alanını boş bırakabilir. Sayfa seviyesi, bu varyasyonları bilinçli olarak üretip şablonun ve altındaki bileşenlerin dayanıklılığını test etmek içindir. Bu yönüyle wireframe aşamasında başlayan "gerçek içerikle çalış" ilkesinin devamıdır.
Pratikte nerede zorlanır?
- Sınıflandırma tartışmaları. "Bu kart molekül mü, organizma mı?" sorusu ekipleri saatlerce meşgul edebilir. Seviye etiketleri bir iletişim aracıdır; kesin bir taksonomi gibi savunulmamalıdır.
- Kod klasörlerini seviyelere göre bölmek.
atoms/,molecules/,organisms/yapısı küçük projelerde iş görür, büyüdükçe bir bileşenin seviyesi değiştiğinde dosya taşımak gerekir. Birçok ekip kodda daha düz bir yapı seçip seviyeleri yalnızca dokümantasyonda kullanır. - İsimlerin yabancı kalması. Tasarım dışındaki ekip üyeleri için "organizma" sezgisel bir kelime değildir. Bazı ekipler aynı fikri "temel öğeler, bileşenler, bölümler, şablonlar" gibi kendi terimleriyle uygular.
Token'lar ve bileşenlerle ilişkisi
Atomik tasarım atomların da altında bir katmandan söz etmez, ama günümüz uygulamalarında renk, boşluk ve tipografi değerleri atomlardan önce gelen design token'lar olarak tanımlanır; bazı ekipler bunlara "atom altı" katman der. Atomlardan organizmalara kadar her seviye kodda bir UI bileşeni olarak yaşar ve bu bileşenler, yönergeler ve yönetim süreciyle birlikte bir tasarım sistemini oluşturur. Metodolojinin özgün anlatımı kitabın ikinci bölümünde ücretsiz okunabilir.