Atomik Tasarım: Web Tasarımı Hakkında Bildikleriniz Hakkında Düşündüğünüzü Kayboluyor
Esnekliğin kontrol dışı ile aynı olduğu, yaratıcı olmak için kontrolden çıkmanız gerektiğine dair genel bir inanç haline geldi. Bununla birlikte, projeyi, özellikle de web tasarımı kadar karmaşık olan projeleri tamamlamak için, gerçek yapıyı yapmak size daha fazla esneklik sağlayabilir. Bir çerçeveye ihtiyacınız var – müzakere edilemez. Gerçekten ilham verici ve işlevsel ve gerçekçi bir tasarım üretme özgürlüğüne sahip olduğunuz sanatsal ve yaratıcı kaslarınızı esnemek. Atomik tasarım metodik bir yaklaşımdır ve yine de size bir çerçevede deney yapma fırsatı veren bir web tasarımı için mantıklıdır.
Tasarımcı tasarım sistemleri sadece web sayfaları yapmakla kalmaz; Bir tasarım sistemi yaparlar. Tasarım sistemi şunları içerir:
Renk
Kafes
Doku
Tipografi
Vb.
UX Planet’teki Jack Strachan’ın tasarım sistemini nasıl açıkladığını seviyorum: “Kısacası, tasarım sistemi, yeniden kullanılabilen, bir dizi uygulama oluşturmak için birlikte monte edilebilen net bir standart tarafından yönlendirilebilen bir bileşen koleksiyonudur. Tasarım sistemi, farklı temas noktaları üzerinde çalışırken ürün boyunca tutarlı görsel deneyim ve dili çevirmek için bir yöntemdir. ” Tasarım öğeleri öznel olabilir ve hızla aşırı ve kaotik olabilirler. Kategorize etmek için tasarım daha metodik bir şekilde görülmelidir. Web tasarımcısı Brad Frost bunu yaptı.
Atomik tasarımın doğuşu, Brad’in atomik bir tasarım yaptığıdır: “İlham ve hizalama bulurken kimyaya dönmeye devam ediyorum. Onun düşüncesi, tüm malzemelerin (katı, sıvı, gaz, basit, karmaşık vb.) Atomlardan oluşmasıdır. Atom birimleri, moleküller oluşturmak için birbirine bağlıdır, bu da sonunda evrenimizdeki tüm malzemeleri yaratmak için daha karmaşık bir organizmaya katılır. ” Arayüzün yapı taşlarına kategorize edilebilecek bileşenlerden oluştuğunu açıklamaya devam etti. Aşağıda en küçük olandan en büyüğü olan dizi: atom
Molekül
organizma
Şablon
sayfa
Kaynak: bradfrost.com
2. Moleküller moleküller atomlardan daha karmaşıktır, ancak bir bütün olarak karmaşık değildir. Çok yararlı olmayan atomları gruplandırdığınızda, daha kullanışlı bir molekülünüz var: Etiket arama formu + giriş + düğmesi (atom) = tam arama formu (molekül) 3. Organizmalar Molekülleri gruplandırdığınızda, öncekilerden daha karmaşık olan organizmalar elde edersiniz: Logo + Navigasyon + Arama Formları + Sosyal Medya Simgeleri (Moleküller) = MASTHEAD (Organizma) Komple İdeal olarak, organizmaları web sitelerinde veya farklı web sitelerinde yeniden kullanabilirsiniz, genel düzeni koruyabilir ve farklı metinlere ve görüntülere ayarlayabilirsiniz. Örneğin, tasarladığınız tüm web sitelerinde aynı tür masthead kullanabilir veya ürün sayfasında tekrarladığınız özel bir ürün organizması (resim + başlık + fiyat) oluşturabilirsiniz. Bu, web arayüzünün gerçekten benzersiz ve ayarlanmış bir şekilde oluşmaya başladığı zamandır. Daha önce, arayüzünüz sadece sıradan bir unsur koleksiyonuydu. Organizma aşamasında web sitesi daha görsel hale geliyor.
Sürecinizi müşterilerle paylaşırsanız, bu, “Ah, anlıyorum” diye gidecekleri bir bölümdür. Bu, müşterinin daha ileri gitmeden önce size geri bildirim verebilmesi için tel çerçevelemeye başlama veya bir maket derleme zamanıdır. 4. Şablonlar Organizmaları gruplandırdığınızda bir şablonunuz vardır. Bu, aslında bir araya gelen avlunun gövdesidir. Moleküller ve organizmalar kendi iç düzenlerine sahipken, şablon aşaması, birbirlerini nasıl tamamladıklarını ve etkileşime girdiklerini görmeye başladığınız zamandır; birbirleriyle ilişkili olarak yerleştirilirler; Ve bir bütün olarak nasıl aktıkları. Şablonlar moleküler bağlamlar ve organizmalar sağlar. Şablonun özel veya orijinal içeriğe değil, yer tutucu içeriğine sahip olduğunu unutmayın. Kaynak: bradfrost.com
5. Sayfa, yer tutucu içeriğini gerçek içerikle değiştirerek şablonu bir sonraki seviyeye getirir. Bu son içerik olmayabilir, ancak tasarım ve son içeriği daha fazla temsil edecektir. Şu anda yüksek kaliteli kalıcı içerik eklemek boşuna olabilir, çünkü web sitesi hala test edilmeli, gözden geçirilmeli ve değiştirilmelidir. Yine de, tamamlanan içeriği girme olasılığınız vardır – bu süreçte nerede olduğunuza bağlıdır. Bu, web sitesinin en katı denetim altında olacağı aşamadır. Aldığınız incelemelere ve geri bildirimlere bağlı olarak, moleküller, organizmalar ve şablonlar değiştirilebilir. Bu aynı zamanda tasarım varyasyonlarını test etmek için doğru zamandır.
