Atomic Design Nedir?

“Atomic Design”, Web Designer olan Brad Frost’un 2016'da yazdığı bir kitapla ortaya çıkardığı bir düşünce, bir tasarım mimarisidir. Çoğu mimari gibi “Atomic Design” da doğadan ilham alınarak oluşturulmuştur.

Bir arayüzü 5 parçaya bölerek ele alır.

1- Atom

2- Molekül

3- Organizma

4- Şablon

5- Sayfa

1. Atomlar

Ekranda görünen en küçük birimlerdir. Buton, icon, label, input alanları atomlara örnek olarak verilebilir.

2. Molekül

Atomlardan meydana gelir. Örnek olarak bir icon ile label yan yana geldiğinde molekülü oluşturur veya input ile buton.

3. Organizma

Moleküllerin birleşmesiyle oluşur. Navigation bar bir organizmaya örnek olarak verilebilir.

4. Şablon

Organizmalar’ın birleşmesiyle meydana gelir. Sayfanın parçalarıdır. Klasik bir web sayfasını düşünecek olursak header, body ve footer bölümleri şablona örnek olarak verilebilir.

5. Sayfa

Son olarak şablonların birleşmesiyle de sayfalarımızı elde ederiz.

Sayfayı Neden Atomic Olarak Düşünmeliyiz?

Böl, parçala, yönet… Her mimari düşünce gibi Atomic Design da bir yönetimsel ihtiyaçtan ortaya çıkmıştır.

Günümüz teknolojisinin gelişmesiyle beraber ekran boyutları oldukça çeşitlilik kazandı. Eskiden sadece bilgisayarlardan erişilen web sayfaları bugün tablet, telefon ve televizyon gibi birbirlerinden çok farklı boyutlardaki ekranlardan görüntülenir hale geldi. Bu da responsive tasarımlarımızı yönetebilmeyi oldukça zorlaştırdı.

Eğer tüm sayfayı tasarlamak yerine birbirlerine sökülüp takılabilen parçalar tasarlar ve bu parçaları birleştirirsek tüm platformlara uygun tasarımlar ortaya çıkarabilir, sayfanın responsive’liğini de daha rahat yönetebiliriz.

Bu düşüncenin ortaya çıkışındaki temel motivasyon da budur. Yönetim. Sadece responsive özelliğini yönetmemizi kast etmiyorum. Tasarımı ve kodunu yönetmek. Tasarımı parçalardan bütüne doğru düşünmek bize tasarlarken daha efektiflik sağlar. Ayrıca tasarımı bu haliyle koda dökmek çok daha kolay ve anlaşılırdır. Hem bu birimler ile oluşturulan yapılarla kod tekrarının önüne geçilir hem daha okunaklı hale gelir hem de test edilebilir kodlar ortaya çıkar.

Zaman ayırıp okuduğunuz için teşekkür ederim. :)