Atomik Tasarım: Kullanmanız için 10 neden

Atomik Tasarım
(Resim kredisi: Jim McCauley)

Bir süredir ön uç geliştirme topluluğundaysanız muhtemelen Atomic Design'ı duymuşsunuzdur. Atomik Tasarım, kimyadan esinlenen bir metodolojidir. Tıpkı tüm maddelerin moleküller oluşturmak için birleşen ve daha karmaşık organizmaları oluşturan atomlardan oluşması gibi, Atomic Design da bir web sitesini temel bileşenlerine ayırmayı ve oradan bir site oluşturmak için çalışmayı içerir.

Atomik Tasarım kullanmanın birçok faydası vardır; hayatınızı neden kolaylaştıracağına dair 10 nedeni keşfetmek için okumaya devam edin.



Web siteleri oluşturmayla ilgili genel bir tavsiye almak isterseniz, mükemmel olanı nasıl oluşturacağınıza ilişkin yazımıza bakın. web sitesi düzeni artı bizim favorimiz web sitesi kurucuları .



manga sayfası nasıl yapılır

01. Bileşenleri karıştırıp eşleştirebilirsiniz

Bileşenleri temel atomlara ayırarak, sitenin hangi bölümlerinin yeniden kullanılabileceğini ve diğer molekülleri ve hatta organizmaları oluşturmak için nasıl karıştırılabileceğini ve eşleştirilebileceğini görmek kolaydır.

Atomik Tasarım: elementler



Bu beş temel öğe, bir dizi sayfa oluşturmak için yeniden karıştırılabilir

Örneğin, bir sitenin yalnızca beş atom içerdiğini varsayalım: küçük bir resim, büyük resim, paragraf, liste öğesi ve bir bağlantı. Moleküller yapmak için bu atomları kopyalayıp birleştirerek çok kullanışlı bir web sayfası oluşturabilirsiniz.

02. Bir stil kılavuzu oluşturmak basittir

Başlangıçtan itibaren Atomik Tasarım ilkelerine göre bir site oluşturulursa, site kurulmadan önce oluşturulan tüm atomlar ve moleküller temel bir stil kılavuzu görevi görebilir. Atomik olarak oluşturulmamış siteler için bile, temel bileşenleri tahmin etmek ve daha fazla sayfa oluşturmak için bunları bir araya getirmek zor değildir. Bununla birlikte, Atomik Tasarım ilkelerini daha sonra bir siteye tanıtmaya çalışmak yerine, bir siteyi en baştan atomik olarak oluşturmak her zaman en iyisidir.

03. Anlaşılması kolay düzen

Atomik tasarıma sahip bir web sitesinin kodunu okumak, genellikle daha geleneksel bir yolla oluşturulmuş bir web sitesine göre çok daha kolaydır. Bu sadece oluşturma sırasında değil, gelecekte bir siteye referans veya küçük değişiklikler için tekrar bakıldığında geçerlidir.



Hangi atom moleküllerinin ve organizmaların nerede kullanıldığına dair dokümantasyon nedeniyle, kodun her bir parçasının neyi temsil ettiğini görmek kolaydır. Bunun bir başka avantajı da kod tabanını yeni bir geliştiriciye açıklamayı kolaylaştırmasıdır.

04. Kod daha tutarlıdır

Atomik Tasarım: Desen Laboratuvarı

Pattern Lab, Atomik Tasarımı kolaylaştıran bir araç koleksiyonudur

Atomik Tasarım ile site düzenini oluşturmak için önceden tanımlanmış atomları kullanırsınız, sitenin farklı bölümleri için hangi bileşenlerin kullanıldığını görmek kolaydır. Bu, yinelenen kod yazma olasılığını azaltır.

Örneğin, birisi Atomik Tasarım kullanmadan bir site oluşturuyorsa ve diyelim ki kırmızı bir düğmeye ihtiyaç duyuyorsa, mevcut bir siteyi denemek ve bulmak için tüm siteye bakmaları gerekir. Bu olsaydı, bu kodu kopyalayıp yeni örneğe yapıştırmaları gerekirdi. Kırmızı düğme olmasaydı, yeni bir tane oluşturmaları gerekirdi. Bununla birlikte, Atomik Tasarım ile, atomlar listesine geri dönmek ve tam olarak bu kırmızı düğmeyi bulmak kolaydır.

Bu, Pattern Lab kütüphanesi dahil edildiğinde çok daha kolay bir süreç haline gelir. Desen Laboratuvarı Atomik Tasarımı kolaylaştıran araçlar koleksiyonudur. Örneğimizde, atomlar için bir arama çubuğu sağlar ve bu tam olarak bu kırmızı düğmeyi aramayı ve bulmayı kolaylaştırır.

05. Piksel açısından mükemmel tasarımlara odaklanılmıyor

Atomic Design'ın arkasındaki fikir, site oluşturma için yapı taşları olarak atomları kullanmak olduğundan, bir web geliştiricisinin benzer bir şey için birçok atom yaratması daha az olasıdır. Bunun yerine, mevcut atomların listesine bakabilir ve gerekirse yeni atomlar oluşturmak için ince ayar yapabilirler.

Bunun harika bir örneği, bir sitedeki başlıklar olabilir. Bir içerik oluşturucunun site için kullanılan ve tamamı siyah renkte bir başlık listesi olduğunu varsayalım: bir ana başlık, alt başlık ve paragraf başlığı. Sitede bir süredir çalışmadılar ve yeni bir mavi başlık eklemek için siteye geri dönmeleri gerekiyor. Zaten var olan başlıklara bir göz atabilir ve arzu ettikleri sonucu elde etmek için bunlardan birini özelleştirebilirler.

photoshop'ta belirli alanların seçimi nasıl kaldırılır

06. Daha hızlı prototipleme

Site oluşturma başlamadan önce bir atom listesine sahip olmak, sayfaları hızlı ve kolay bir şekilde modelleyebileceğiniz anlamına gelir - tek gereken, sayfa için gerekli öğeleri seçip birleştirmektir. Mockup daha sonra nihai site için özelleştirilebilir ve iyileştirilebilir.

07. Sitenin bölümlerini güncellemek ve kaldırmak daha kolay

Herhangi bir anda yalnızca bir atom, molekül veya organizma değiştirildiği için, bir bileşende yapılan herhangi bir güncellemenin site içindeki diğer tüm örneklere taşınmasını sağlamak kolaydır. Benzer şekilde, istenmeyen bileşenler kolayca çıkarılabilir.

08. Daha modüler dosya yapısı

Atomik Tasarım, işaretleme (HTML) söz konusu olduğunda çok yaygın olsa da, bu tekniklerin CSS, JavaScript veya genel kodu daha modüler ve yeniden kullanılabilir hale getirmek için bir site oluşturmak için kullanılan diğer diller için de kullanılabileceğine inanıyorum.

Ben kendim oluşturduğum web siteleri için atomik CSS kullanıyorum ve bu yaklaşıma büyük faydalar sağladım. Bununla birlikte, HTML bileşenleri gibi şeylerin gelişiyle, bir atoma özgü CSS ve JavaScript'i HTML ile birlikte kendi klasörüne ayırmanın anlamlı olacağına inanıyorum, bu nedenle herhangi bir şeyin güncellenmesi veya silinmesi gerekiyorsa, tam olarak nereye gideceğinizi ve neyi değişmek.

09. Genel olarak daha az bileşen

Bir yaratıcı, site oluşturma başlamadan önce kendilerine sunulan atomların, moleküllerin ve organizmaların bir listesine sahipse, küçük varyasyonlar için yeni bileşenler oluşturmaktan çok, zaten var olanı kullanma olasılığı daha yüksektir.

Bir tasarım için yazı tipi boyutu 4.5em olan bir başlık gerekliyse, ancak atom listesinden zaten 4em boyutunda bir başlık varsa, bir yaratıcı, tamamen yeni bir başlık oluşturmak yerine 4em'i seçecektir. Bu, genel olarak daha az atomun kullanılmasına neden olarak daha temiz ve daha yalın bir web sitesi oluşturacaktır.

10. Pattern Lab'i Keşfedin

Atomik Tasarım: Desen Laboratuvarı

siyah cuma 2017 ipad mini 4
Pattern Lab, yine Brad Frost'tan statik bir site oluşturucudur

Bu gerçekten Atomik Tasarımın pek bir avantajı değil, ancak Brad Frost (Atomik Tasarım terimini kim icat etti) ve Dave Olsen sürece yardımcı olmak için. Esasen, şablonlar için bıyık ve etkileşim için bir JavaScript görüntüleyici kullanan statik bir site oluşturucusudur. Sayfaları yeniden boyutlandırma, sitenin bölümlerine yorum ekleme ve kod parçacıkları seçenekleri göz önünde bulundurularak mobil öncelikli tasarım ile oluşturulmuştur.

Orijinal sürüm PHP ile yazılmıştır, ancak iki Node sürümü vardır: biri yutkunma, diğeri Grunt için. Demo ile uğraşmanızı şiddetle tavsiye ederim. Desen Laboratuvarı nasıl çalıştığını ve genel olarak Atomik Tasarım hakkında size daha iyi bir anlayış sağlamak için site.

Daha fazlasını öğrenmek ister misin? Brad Frost'un şu konudaki orijinal gönderisini okuyun: Atomik Tasarım .

İlgili Makaleler: