Atomic Design Metodu Nedir?
Tasarım sistemleri oluşturma konusunda çok fazla şey söylenmiş durumda ve birçoğu renk, tipografi, grid ve dokunun temellerini oluşturmaya odaklanıyor. Bu şekilde bir yapı oluşturmak kesinlikle önemli fakat Brad Frost bu konuda farklı düşünüyor. Ona göre tasarımın bu ögeleri her zaman subjektif olacaktır. Brad Frost bu nedenle düzenli bir tasarım sistemi oluşturmak adına farklı bir bakış açısı arayışına girmiş. Bu arayışta birçok kez kimyaya dönen Brad Frost, Atomic Design adını verdiği bir method oluşturur. Kimyada tüm maddeler atomlardan oluşur. Atomlar bir araya gelerek molekülleri ve sonunda daha karmaşık organizmaları oluşturarak evrendeki tüm maddeleri oluştururlar.
Buna benzer olarak, arayüzler de kendinden daha küçük bileşenlerden oluşur. Bu demek oluyor ki bir arayüzü en temel yapı taşlarına kadar parçalayabilir ve oradan çalışmaya başlayabiliriz. Atomic Design’ın temellerini bu bakış açısı oluşturmaktadır.
Şu ana kadar ele aldıklarımıza bakarak Atomic Design’ın tasarım sistemleri oluşturmak için bir metodoloji olduğunu söyleyebiliriz. Atomic Design’a ait 5 belirgin seviye tanımlamak mümkündür:
- Atomlar
- Moleküller
- Organizmalar
- Şablonlar
- Sayfalar
Atomlar
En temel yapı taşını atomlar oluşturur. Buna örnek olarak butonlar, label ve input’lar verilebilir. Ayrıca atomlar, renk paletleri, fontlar ve hatta arayüzün görünmez yönü animasyonlar da olabilirler. Atomlar, doğada olduğu gibi tek başına kullanıldıklarında genel olarak kullanışlı olmayabilir. Fakat, global style olarak tasarımınızın genel yapısını atomlara bakarak oluşturabilirsiniz.
Moleküller
Atomlar bir araya gelerek molekülleri oluştururlar. Molekülleri, tasarım sisteminin iskeleti olarak ele alabiliriz. Atomları kullanarak oluşturulan moleküllerin temelde, tek bir görevi olur. Karmaşık bir yapıda da olabilecekleri gibi genellikle atomların basit kombinasyonlarıdır. Örnek olarak, site arama barı, görsel kartları, menu’ler verilebilir.
Organizmalar
Moleküller birleşerek nispeten karmaşık olan ve arayüzün belirli bir kısmını oluşturan organizmalar üretirler. Organizmalar, moleküllere göre daha somut bir izlenim verirler. Müşteriler tasarım sisteminin molekülleri ile çok ilgilenmese de organizmalar sayesinde arayüz şekil almaya başladığı için önemli yapılardan birini oluşturur. Örnek olarak bir websitesinin header bölümü molekülleri içeren bir organizmadır. Tasarımın moleküllerden organizmalara doğru oluşturulması daha sonra yeniden kullanılabilecek bileşenler yaratmak için de fırsat olarak görülebilir.
Şablonlar
Bu aşamada, müşterilere daha mantıklı olarak görünen bir dille son çıktıya yakın bir şablon ile kimya benzetmesinden çıkılan bir noktaya ulaşırız. Şablonlar genel olarak sayfaları oluşturacak olan organizma gruplarından oluşur. Tasarım bir bütün olarak ele alınır ve layout ortaya çıkar. Şablonlar nispeten soyut olan molekül ve organizmaların somut olarak algılanmasını sağlar. Şablonlarda tek eksik tasarımda yer alacak olan gerçek içeriktir. Layout ile ilgili fikir vermesi ve genel yapının planlanması için kullanılır.
Sayfalar
İçeriğin şablon ile buluştuğu aşama sayfaların oluşturulduğu aşamadır. Tasarımın tam olarak nasıl göründüğünü bu aşamada gözlemleyebiliriz. Bu aşama son kullanıcının deneyimleyeceği yapıya en yakınıdır ve genel olarak tasarımın en zaman alan kısmıdır. Sayfalar ile tasarım sisteminin etkilerini ölçümlemek mümkündür. Buna göre geriye dönük olarak değişiklikler yapmak ve test gerçekleştirmek mümkündür.
Her ne kadar üzerine çok düşünmesek de aslında tasarımları yapış şeklimiz zaten bu methoda benzerlik göstermekte. Atomic Design, bu noktada net bir method sunarak daha geniş bir çerçevede bakış açımızı netleştiriyor.
Atomic Design methodunu doğrusal olarak ele almak zorunda değiliz. Öncelik organizmalardan ya da şablon ve sayfalardan başlamak ve daha sonra temel aşamalara dönmek de mümkün. Çünkü, öncelikle atomları tasarlayarak belki de tasarımdaki genel yapıyı görmek mümkün olmayabilir. Beklediğimiz sonucu elde edemeyebiliriz. Öncelikle birkaç sayfanın tasarımını gerçekleştirdikten sonra, sonucun tatmin ettiği noktada bir tasarım sistemi elde etmeye yaklaşmışız demektir ve geriye dönerek atomları, molekülleri ve organizmaları oluşturabiliriz. Bunları tamamladıktan sonra farklı ve karmaşık sayfalar ve akışlar için bile hazır hale gelmiş oluruz çünkü bu karmaşık yapıları oluşturacak temel tasarım sistemimiz hazır olacaktır.
Tasarım sistemindeki boşlukları dolduran bu method sayesinde özellikle karmaşık yapıya sahip uygulamalar ve websitelerini sistemli bir şekilde tasarlamak daha kolay bir hale gelecektir. Tasarım sisteminin bu şekilde bir yapıya sahip olması aynı zamanda geliştirmesini yapacak olan Frontend geliştiriciler için de benimseyebilecekleri sistemli bir yapı sunar. Sonuç olarak tüm aşamalara yayılan bu method ile bir sonraki projenizi daha kontrollü olarak hem tasarlayabilir hem de geliştirebilirsiniz.
Daha fazlası için: https://atomicdesign.bradfrost.com/table-of-contents/
