Tasarımcılar İçin Atomik Tasarıma Giriş

Modülerlik, tekrar kullanılabilirlik ve ölçeklenebilirlik yalnızca kodlama kavramları değil, aynı zamanda daha iyi optimize edilmiş tasarım sistemleri oluşturmak için kullanılabilir.
Atomik tasarım, bir kimya benzetimi kullanarak, etkili UI’leri alttan inşa etmek için yeni bir metodolojidir.

Web sayfalarının koleksiyonlarını tasarlamak yerine, atom tasarımı, atomlar (butonlar, menü öğeleri vb.) adı verilen en basit UI bileşenleri ile başlar ve tüm UI’yı dört aşamalı olarak oluşturur: moleküller, organizmalar, şablonlar ve sayfalar.

Atomik tasarım hiyerarşisi

Atomik tasarım temelde tasarımcıların web sayfalarını yeniden kullanılabilir bileşenlerin hiyerarşisi olarak düşünmesini sağlayan zihinsel bir modeldir. Atomik tasarım hiyerarşisi beş aşamadan oluşur; Her aşama önceki aşamadaki bir grup bileşenden yapılır. Beş aşamada açık ve mantıksal bir arayüz tasarım sistemi eklenir. Bunlar aşağıdaki gibidir:

• Atomlar
• Moleküller
• Organizmalar
• Şablonlar
• Sayfalar

1. Atomlar

Tıpkı kimyada olduğu gibi, atomlar daha fazla parçalanamayan en küçük yapı taşlarıdır. Bu nedenle, atomlar, web sayfasının en küçük birimlerini sağlayan düğmeler, etiketler ve giriş alanları gibi temel HTML öğeleridir.

Elbette, tüm HTML öğeleri atom değildir, örneğin bölümleme öğeleri (article, section vb.) bir web sayfasının en küçük birimleri değildir.Atomlar sadece HTML öğeleri değil aynı zamanda yazı tipleri, renkler, boyutlar ve diğer CSS stili kurallarıdır. Brad’in kendi sözleriyle, atomlar “tüm temel stillerinizi bir bakışta gösterirler”.

Önerilen yayınların başlıkları bir atom türünü açıklayabilir; Aynı HTML ve CSS kodunu kullanırlar ve içeriğin geri kalanından kolaylıkla ayırt edilebilirler.

2. Moleküller

Bir molekül, bir grup atom tarafından oluşturulur. Moleküller, atomik tasarım hiyerarşisinde bir sonraki aşamayı oluşturmaktadır. Zaten çok sayıda HTML öğesinden (örneğin, arama çubuğu veya kenar çubuğunda önerilen bir yazı) yapılmış basit kullanıcı arabirimi öğeleri buna birer örnektir.

Bir molekül halinde organize olmak her bir atom için bir amaca sahiptir. Daha büyük bir grupta (molekül), atomlar birbirlerini desteklemeli ve tamamlamalıdır; kullanışlı bir tasarım oluşturmak için birlikte iyi çalışmalıdırlar.

Örneğin, aşağıda gördüğünüz tavsiye postunu bir molekül olarak görebilirsiniz. Bir post molekülü 3 atomdan oluşmuştur. Bir başık, resim ve yazar adı.

3. Organizmalar

Organizmalar, bir grup molekül, atom (ve bazen diğer organizmalar) ‘dan oluşur. Web tasarımında, organizmalar, üstbilgi, altbilgi veya kenar çubuğu gibi sayfanın kesin bölümlerini temsil eden daha karmaşık kullanıcı arabirimi bileşenleri.

Aşağıdaki resimdeki kenar çubuğu bir organizma olabilir. Bir arama çubuğu (bir tür molekül, yalnızca bir kez görüntülenir) ve birkaç önerilen posta (birçok kez görüntülenen başka bir molekül türü) içerir.

Bununla birlikte, kenar çubuğu organizması bir molekülün (arama çubuğu) kompozisyonu ve bir başka organizma (birkaç tavsiye edilen yayınla birlikte önerilen post widget’ı) olarak da görülebilir. Atomik tasarım esnek bir modeldir, kurallar çok katı değildir, bu nedenle bu yapı bloğunu hem bir molekül hem de bir organizma olarak tanımlayabiliriz.

4. Şablonlar

Atomik tasarım hiyerarşisinde bir sonraki aşama şablonlardır. Şablonlar organizmalardan oluşur. Bunlar, sayfa düzeyinde nesnelerdir ancak nihai içerik içermezler. Şablonların amacı, altta yatan içeriğin yapısını temsil etmektir.

Şablonlar, farklı atomların, moleküllerin ve organizmaların “düzen” bağlamında “birlikte nasıl çalıştığını” gösterir. Temel olarak bir sayfanın iskeletini temsil ediyorlar.

Bir örnek için yer tutucu resimler ve lorem ipsum metin blokları içeren bir ana sayfa şablonu düşünün.

Aşağıda, Atomik Tasarım kitabından bir örnek görebilirsiniz. TimeInc dergisinin ana sayfa şablonu. Atomlar, moleküller ve organizmalar yerinde ancak sadece şematik içeriğe sahipler.

5. Sayfalar

Sayfalar atomik tasarım hiyerarşisinin son aşamasını temsil eder. Sayfalar “belirli şablon örnekleri” dir. Sayfa aşamasında, şablonlar gerçek kullanıcı arayüzünde göründükleri gibi gerçek içerikler (kopyalama, mikroskopik görüntü, resim, video vb.) ile doludur.

Sayfalar, tasarımcıların nihai kullanıcı deneyiminin neye benzeyeceğini, tasarımın gerçek kullanıcılar ile nasıl test edileceğini ve kullanışlılık, dönüşüm, erişilebilirlik ve diğer metrikler açısından ne kadar iyi performans gösterdiğini ölçmelerine izin verir.

Sayfa aşamasının bir diğer amacı, şablon çeşitlemelerini mümkün kılmaktır. Temel şablon aynıysa ancak doldurulan içerik (biraz) farklı olduğunda şablon varyasyonları hakkında konuşuruz. Örneğin, farklı kullanıcı gruplarına (ör. Ziyaretçiler ve oturum açmış kullanıcılar) farklı bir içerik göstermek istiyorsanız veya bir başlık diğerlerinden çok daha uzun olduğunda.

Tutarlı ve esnek kullanıcı arabirimleri oluşturmak istiyorsanız, şablon varyasyonlarını kullanmak çok önemlidir. Daha küçük bileşenler (atomlar, moleküller, organizmalar) farklı senaryolarda iyi çalışmalıdır.

Örneğin, etrafında çevreleyen öğelerle bir düğmenin tıklanabilir olması gerekir. Belli bir varyasyonda işlem yapılabilir görünmüyorsa, düğme atomunu tüm kullanım durumlarına uyana dek yeniden tasarlamanız gerekir.

Aşağıda, önceki TimeInc ana sayfa şablonunun sayfa aşamasını görebilirsiniz. Farklı görünüyor ha? Ancak bu sadece bir şablon varyasyonudur. Etkili bir kullanıcı arabirimine sahip olmak için, tasarım ekibi gerçek sitende nelerin değişebileceğini çok düşünmek zorundadır. Ardından, şablon varyasyonunun (sayfa) tasarımını da test etmeleri gerekir.

Bu makalede Atomik web tasarıma giriş yaptık. Atomik Tasarım hakkında görüşlerinizi yorum yaparak bizlerle paylaşabilirsiniz.