Atomik tasarım

Atomik tasarım, bir tasarım sistemini en verimli şekilde oluşturmaya yönelik bir kullanıcı arayüzü tasarım metodolojisidir. Bu kavram, arayüz tasarımcısı Brad Frost tarafından, Stephen Hay’in şu sözünü alıntılayarak ortaya atılmıştır: “Sayfalar tasarlamıyoruz, bileşenlerden oluşan sistemler tasarlıyoruz.” Başka bir deyişle, bir arayüz sayfasını tek seferde tasarlamak yerine, onu parça parça bir araya getirmek daha mantıklıdır. En küçük öğeler birleştirilerek daha büyük öğeler oluşturulur ve böylece, ilgili öğenin kaldırılması veya değiştirilmesi yoluyla herhangi bir yerde ve herhangi bir ölçüde kolayca değiştirilebilen modüler sayfalar ve bloklar ortaya çıkar.

Atomlar, bir arayüzü oluşturan temel yapı taşlarıdır (HTML öğeleri). İşlevsel anlamlarını kaybetmeden daha küçük parçalara bölünemezler. Bunlar arasında düğmeler, simgeler, giriş alanları, renk paletleri ve animasyonlar yer alır. Tıpkı doğada olduğu gibi, arayüz atomları tek başlarına var olamazlar ve ancak birbirleriyle bir araya geldiklerinde anlam kazanırlar. Bunlar, bir desen kütüphanesi işlevi görür.

Moleküller, tek bir işlevsel birim olarak birlikte çalışan en basit atom gruplarıdır. Bu tür bir birim, arayüzün işlevine ihtiyaç duyduğu her yere bir bütün olarak eklenebilir, taşınabilir ve kopyalanabilir. Moleküller, tek bir arayüz içinde birçok kez yeniden kullanılmak üzere tasarlandıkları için tasarım sistemlerinin temelini oluşturur. Çalışmak için eksiksiz yapı taşları oluştururlar ve organizmalar bunlardan inşa edilir.

Organizmalar, bir arayüzün nispeten karmaşık ve birbirinden ayırt edilebilir bölümlerini oluşturan, atom ve moleküllerden oluşan daha karmaşık gruplardır. Bunlar, aynı ve/veya farklı türde moleküllerden oluşabilir. Örneğin, bir web sitesinin başlık organizması birçok farklı bileşeni içerebilir: bir logo, gezinme menüsü, bir arama formu ve bir sosyal medya bağlantıları bloğu. Öte yandan, bir ürün tablosu organizması, örneğin ürün fotoğrafı, adı ve fiyatını içeren, birçok kez tekrarlanan tek bir molekülden oluşur. Bu aşamada tasarım, arayüzün görsel stilini şekillendirmek, değişiklikler yapmak ve bunu müşteriyle görüşmek için yeterince somut hale gelir.

Kimya ile yapılan bu benzetme burada sona erer ve kullanıcı arayüzü tasarımının kendine özgü unsurları başlar. Şablonlar, çoğunlukla gerçek içerik barındırmayan sayfa düzenlerini oluşturmak üzere bir araya getirilmiş organizma gruplarından oluşur. Şablonlar, organizmaların ve içeriğin arayüz sayfalarında nasıl yerleştirildiğini şematik olarak gösterir: boyutları, biçimleri vb. Şablonlar, nispeten soyut moleküller ve organizmalarla yapılan çalışmaya somutluk katar ve onlara bir yapı kazandırır.

Sayfalar, gerçek içerikle doldurulmuş şablonların somut örnekleridir. Bu aşama, tasarım sisteminin bütününün etkinliğinin en belirgin şekilde ortaya çıktığı aşamadır. Gerçek bir sayfa, önceki aşamalarda yapılan hataları ortaya çıkarır; atomik tasarım ilkeleri üzerine kurulu bir tasarım sistemi ise bu hataların atom, molekül veya organizma düzeyinde hızlı, kesin ve sorunsuz bir şekilde düzeltilmesini mümkün kılar.