Modern Web Geliştirmede Atomik Tasarım Kullanımı
Bir teknoloji şirketi için çalışmayı öğrendiğim bir şey varsa, bir web sitesi (gerçekten harika, güzel ve yüksek işleyen bir web sitesi) oluşturmak için, farklı yeteneklerin ve öğelerin bir araya gelip uyum içinde çalışması gerekir. Bazen Babil Kule üzerinde çalışmak gibi hissedilebilir: Bir kişi altıgen kodları bir palet aracılığıyla eleme, odadaki çocuklar farklı kodlama kısaltmalar bir alfabe çorbası kapalı çürütüyor ve hesap yöneticisi bana telefonda yanında Bir makaleyi bir müşteriye nasıl kullanacağımı açıklarken, bu makaleyi sade bir İngilizcede yazmaya çalışıyorum.
Bu unsurların hepsi, kakofoni içinde kaybolmadan bir araya gelmek için bir yola ihtiyaç duyuyor ve bir takım olarak daha iyi çalışmamıza gerçekten yardımcı olan nispeten yeni bir konsept var: tasarımcılar, geliştiriciler, test ediciler… herkes.
Denir Atomik Tasarım .
Atomik Tasarım Nedir?
Atomik Tasarımın bileşenleri tasarımcıdan alınmıştır. Brad Frost Kimya ile hayranlığı; En küçük birim olan atomlar, moleküllere bağlanırlar, bu da sonuç olarak evrendeki tüm maddeleri yaratırken daha karmaşık organizmalar oluşturur.
Yani, Uluslararası Uzay İstasyonundaydık, tüm projeye bir bütün olarak baktığımızda, Atomic Design'ı uygulamış olduğumuz yeni bir proje için tamamlanmış ana sayfa sanatı, Route 93 Pizza Değirmeni :
Route 93 Pizza'nın ana sayfası, birleşik, işlevsel bir web sitesi olarak tüm öğelerimizden oluşmaktadır. Şimdi, eğer siteyi bir mikroskop altına yerleştirirsek, granül bileşenlerini görebiliriz:
Atomlar: Route 93 Pizza Mill'in web sitesinin atomları aşağıdadır. Atomlar, etiketler, form etiketleri, düğmeler, renk paleti ve yazı tipleri gibi temel yapı taşlarıdır. Kendi başlarına çok kullanışlı olmasa da, atomlar sizin ön referans noktanızdır - yaratımınızın başlangıcı.
Moleküller: moleküller, tamamlanmış web sitesi tasarımının somut hissetmeye başladığı atomların işe yaradığı yerdir. Route 93'ün moleküllerinde, renk paletini, yazı tiplerini ve ikonografiyi form alanları, görüntü bindirmeleri ve düğmeler olarak bir araya getirebilirsiniz. Onlar, Frost'un söylediği gibi, sizin aracınızın “bir şey yapmasını ve iyi yapmasını” sağlar.
Organizmalar: Organizmalara ulaştığımız zaman, Route 93 için tüm altbilgiyi oluşturabiliriz. Yukarıda belirtilen tüm bileşenleri çalışılabilir, estetik bir web sitesinde birleştiririz.
Arayüz Envanteri: Artık tüm malzemelere sahip olduğumuza göre, bunları sindirilebilir bir şey haline getirmek için elle tutulur bir menüye ihtiyacımız var; Yukarıdaki öğelerin tümünü okunabilir, kullanılabilir bir kaynak olarak gösteren bir belge - bir arayüz envanteri.
Bazı kuruluşlar bunu bir Kalıp Kütüphanesi veya Stil Kılavuzu olarak adlandırır ve mevcut bir web sitesinde yapmış oldukları bir denetime atıfta bulunmak için özellikle Arabirim Envanterini kullanırlar. Arayüz Envanterini kendi projelerimiz için (diğer sitelerin denetimlerinin yanı sıra) kullanırız. Sürekli değerlendirme sürecinin bir parçası.
Atomik Tasarım'ın iş akışı, tavuk veya yumurta türü bir ikilemi biraz taklit ettiğinden, arayüz envanteri genellikle ana sayfanın ve web sitesinin başka bir sayfasının oluşturulmasından sonra biraz organik olarak şekillenir, ancak bundan sonra çok uzun süre geçmez. Bu iki ilk sayfa şekillendikçe, tasarımcı her iki öğenin de tutarlı olmasını sağlar. Daha sonra tüm sayfalar için, envanterden çizim yapabilecekler. Bu, görsel stillerin proje boyunca nasıl uygulanacağı, düz bir İngiliz dili, basit İngilizce, onaltılık kodlar, düğme stilleri, dolgu genişlikleri vb. İçin geliştiricilerin - ve tüm ekibin - başvurabildiği gibi bir kural kaynağı oluşturur.
Atomik Tasarım süreciyle bir Arayüz Envanteri tasarlayarak, ilkel modüller ile başlayabilir ve bunları tamamlanmış elemanlarla birleştirebiliriz. Bu süreç, ekip üyeleri arasındaki etkinliği ve iletişimi geliştirir ve genel olarak daha güzel bir web sitesi oluşturur.
Atomik Tasarım bizim için ne yapar?
Atomik Tasarım, hem üzerinde çalıştığımız projenin tasarımına dair sağlam “gerçekleri” keşfetmemize hem de sanatsal ve teknik yönleri arasında ortak bir kelime hazinesi oluşturmamıza yardımcı oluyor. Bu, UX'i geliştiren ve yaratıcılığı korurken tasarımcıların geliştiricilerin bileşen tabanlı yönergelerine uymaları için bir metodoloji sağlayan daha sağlam bir sistemi teşvik eder.
Doğal olarak, geliştiriciler zeminden kodlarken, bir sanatçının yaklaşımı genellikle daha nebze bir formda başlar, bu da bir miktar kalıplamanın ardından işlevsel bir web sayfasına katılaşır. Atomik Tasarım, tüm arayüz bileşenlerini mümkün olan en düşük seviyede tutarlı ve amaca uygun hale getirmek için tasarımcıların da zeminden çalışmasını teşvik eder ve gerektirir.
Arabirim Envanteri tarafından temsil edilen bu ortak dilin kurulması, tasarımcıların ve geliştiricilerin halihazırda çözülmüş olan sorunlara yeni çözümler üretmemesini sağlar. Örneğin, bir projeye yeni bir iletişim formu eklendiyse, bu formu oluşturmak için gerekli olan stiller zaten var ve sayfanın oluşturulmasında kolayca kullanılabilir ve tasarımcı için ek çaba sarf etmesine gerek kalmaz. Her zaman tasarımcıdan iş almayı gerektirmez, aksine tasarımcıların her sayfayı ya da organizmayı ilk önce alay etmesini gerektirmek yerine, geliştiricilerin hızla çözüm üretmesini kolaylaştırır. Tasarımcının rolü, sayfalar oluşturulduktan sonra sanat yönü gibi bir şeye kaydırıldı. Bu somut “gerçekler”, tasarımcıyı hakem olarak kullanma ihtiyacını da ortadan kaldırıyor. “Bu tasarım tercihi kasıtlı mıdır?” Veya “bu eleman üzerinde hangi rengi kullanmalıyız?” Gibi sorular ile bir sayfaya son dakika değişiklikleri veya eklemeler Arayüz Envanteri tarafından cevaplandırılmaktadır.
Ortak dil, kalite güvencesine de devam eder. Bir web sayfasını hem içerik hem de işlevsellik açısından test ederken, Arabirim Envanterini ekranımda bir kılavuz olarak yukarı çekiyorum. Her ne kadar bir tasarımcı aracı ve ikincisi bir geliştirici aracı olsa da, ekibimizin herkesin kusursuz ve müşteriye teslim etmeye hazır olduğundan emin olduğumuzdan, tasarım ve tutarlılık konusundaki görüşmelerde ekibin güvenine katılmasına izin veriyor.
Sonuç
Bir projenin düzgün bir şekilde uygulanmasını sağlamak için, özellikle kendimizle uğraştığımız daha büyük olanların bir kısmı, iletişimin anahtarıdır; Birbirinden farklı bir dizi fikirleri birbirinizle paylaşıyorsanız, hiçbir şey mümkün olmayacaktır. Atomik Tasarım, bu farklı bölümler ve tasarımda tutarlılığı korumak için onlarla birlikte gelen “diller” için bir çevirmen olarak hareket etmeye yardımcı olur. Takım için modüler bir kaynak oluşturur, tutarlılık ve verimli geri dönüş, daha az hata ve daha parlak bir bitmiş ürün sağlar.