Eğer web tasarım sektöründeyseniz muhtemelen Atomik Tasarım (Atomic Design) denilen sistemi duymuşsunuzdur. Atomik tasarım; web sitesi planını kendi içinde temel bileşenlerine ayırma ve bunları site içerinde tekrar kullanmaya dayalı bir metodolojidir.
1. Bileşenleri karıştırabilir ve eşleştirebilirsiniz
Bileşenleri temel atomlara ayırarak web sitesinin hangi parçalarının tekrar kullanılabileceğini ve bu parçaların moleküller ve hatta organizmalar oluşturabilmek için nasıl eşleştirilebileceğini kolaylıkla görebilirsiniz.
Örneğin web tasarımınızın yalnızca 5 atom içerdiğini düşünelim: Bir küçük resim, büyük resim, paragraf, liste maddesi ve bir link. Moleküller yapmak için bu atomları çoğaltarak ve kombine ederek çok kullanışlı web sayfaları oluşturabilirsiniz.
2. Stil kılavuzu yapmak basittir
Eğer web tasarımınız başından beri atomik tasarım prensiplerine bağlı kalınarak geliştirildiyse web sitesinin tasarımından önce oluşturulan bütün atomlar ve moleküller temel tasarım kılavuzu olarak görev yapabilir. Atomik olarak inşa edilmemiş web tasarımlarında bile temel bileşenleri tahmin etmek ve daha fazla sayfa inşa etmek için onları bir araya getirmek zor değildir. Bunu düşünürsek web tasarımlarını başlangıçtan itibaren atomik olarak geliştirmek, web sitesine atomik tasarımı sonradan dahil etmeye çalışmaktan çok daha iyidir.
3. Anlaşılması kolay bir yapı sunar
Atomik olarak tasarlanmış web sitelerinin kodlarını okumak, genellikle geleneksel olarak tasarlanmış olanların kodlarını okumaktan çok daha kolaydır. Bu yalnızca web sitesi oluşturulurken değil, daha sonra küçük değişiklikler için yapılan kontroller için de geçerli.
Hangi moleküllerin ve organizmaların kullanıldığıyla ve nerede bulunduklarıyla ilgili olan dokümantasyonlar sayesinde kodların her bir parçasının ne için yazıldığını görmek oldukça kolay. Yeni bir web geliştiriciye kod temellerini anlatmanın daha kolay olması da bunun başka bir artısıdır.
4. Kodlar daha tutarlıdır
Atomik tasarım sayesinde yeniden tanımlanmış atomları web sitesinin yapısını oluşturmak için kullanırsınız ve bu sayede web sitenizin farklı parçalarında hangi bileşenlerin kullanıldığını görmek kolaylaşır. Bu da kodları tekrarlama ihtimalinizi düşürür.
Örneğin web sitenizi atomik tasarım kullanmadan oluşturdunuz ve diyelim ki kırmızı bir butona ihtiyacınız var. Bütün bir web sitesini inceleyip bir tane bulmaya çalışmak zorundasınız. Eğer bir tane varsa yeni bir tane üretmek için kodları kopyalamanız ve tekrar kullanmanız gerekecektir. Eğer yoksa yeni bir buton yaratmalısınız. Atomik tasarımla, atomlar listesine göz gezdirip o kırmızı butonu bulmanız çok daha kolay olacaktır.
5. Mükemmel piksel tasarımlarına odaklanmaya gerek yoktur
Atomik tasarımın arkasındaki fikir web tasarımı için bloklar inşa etmede atomları kullanmaktır. Bu web geliştiricilerinin benzer şeyler oluşturmak için birçok atom üretmesi demek değildir. Aslında yalnızca var olan atomların listesine bakıp, eğer ihtiyaç varsa yeni atomlar üretmek için onları düzenleyebilirsiniz.
Bunun için verilebilecek en iyi örnek web sitesindeki başlıklardır. Diyelim ki tasarımcının web sitesi için kullandığı başlıkların bir listesi var: Bir ana başlık, alt başlık ve paragraf başlığı. Web sitesi üzerinde bir süre çalışmadı ve yeni bir mavi başlık eklemek için web sitesine geri döndü. Var olan başlıkların listesine bakıp istenilen sonuç için bir başlığı düzenleyebilir.
6. Daha hızlı prototip yapmanıza olanak verir
Web tasarımından önce atomların bir listesine sahip olmak, sayfalar için hızlı ve kolay bir şekilde prototip oluşturabileceğiniz anlamına geliyor. Yapmanız gereken tek şey sayfa için gerekli elemanları seçmek ve birleştirmek. Bu prototip web sitenizin son hali için düzenlenebilir.
7. Web tasarımını güncellemesi kolaydır
Bir atomu, molekülü veya bir organizmayı değiştirmesi kolay olduğu gibi web sitesi içerisindeki herhangi bir bileşeni de güncellemesi kolaydır. Benzer şekilde istenmeyen bileşenleri tasarımdan kaldırmak da kolaydır.
8. Daha modüler dosya yapısı sunar
Konu biçimlendirmeye (HTML) geldiğinde atomik tasarım oldukça etkilidir. Ayrıca bu teknikler CSS, JavaScript veya web sitesini daha modüler ve tekrar kullanılabilir yapmak için kullanılan diğer diller için de geçerlidir.
9. Genel tasarımda daha az bileşen
Eğer bir tasarımcı, web sitesini tasarlamaya başlamadan önce atomların, moleküllerin ve organizmaların bir listesini çıkardıysa, küçük varyasyonlar için yeni bileşenler oluşturmaktansa var olanı kullanacaktır.
Eğer tasarımın font boyutlarının 4.5em olması isteniyorsa ama var olan atom listesinde 4em başlık boyutu varsa tasarımcı büyük olasılıkla yeni bir başlık oluşturmaktansa 4em font boyutunu kullanacaktır. Bu durum kullanılan atomların çoğu için geçerli olacaktır.