Modern Web Dünyasında Atomik Tasarım

Websitesi tasarlamak farklı yeteneklerin ve elementlerin bir araya gelip bir uyum içerisinde çalışmasını gerektirir. Bir grup kodlama kısmıyla ilgilenirken, proje sorumlusu içerik yönetiminin nasıl olacağını belirler, bir başkası da içeriğin kendisini oluşturmaya çalışır. Peki Atomik tasarım nedir?

Bütün bu elementler bir şekilde bir araya gelmeli ve hiçbir şey kakafoni içerisinde kaybolmamalıdır. Bunu sağlamak için kullanılan ve hala yeni sayılabilecek yöntemlerden biri ise, atomik tasarımdır.

Atomik Tasarım Nedir?

Atomik tasarımın ögeleri tasarımcı Brad Frost’un kimya bilimi karşısındaki büyülenmesinden gelir: atomlar en küçük yapı birimidir, birleşerek moleküllere dönüşürler, moleküller ise önce kompleks organizmalar ve en nihayetinde evreni oluştururlar.

Atomlar: Temel yapı blokları olan etiketler, form başlıkları, butonlar, renk paleti ve fontlar websitesinin atomları olarak işlev görür. Tek başlarına çok anlamlı olmasalar da, atomlar ilk referans noktalarıdır.

Moleküller: Moleküller atomların çalışmaya başladıkları yerlerdir – tamamlanmış websitesi tasarımının elle tutulabilir şekilde hissedildiği noktalardır. Route 93’ün moleküllerinde renk paleti, fontlar ve ikonlar biraraya gelerek form alanları, görsel katmanları ve butonları oluşturur.

Organizmalar: Bu aşamada websitesi için footer oluşturabiliriz. Bu alanlarda daha önce bahsettiğimiz bütün ögeler çalışabilir ve estetik bir şekilde bir araya gelir.

Arayüz Stoğu: Şu an bütün malzemelere sahibiz. Bütün bunları okunabilir, kullanılabilir bir kaynak haline getirmeye ihtiyacımız var; bir başka deyişle bir arayüz stoğuna.

Atomik tasarımın iş akışı nedeniyle bir tavuk-yumurta dilemması ortaya çıkardığını söyleyebiliriz. Arayüz stoğu bir şekilde anasayfa ve bir sayfanın daha tasarımının şekillenmesinden hemen sonra ortaya çıkar, arada çok fazla zaman geçmez. Bu iki anasayfa şekillendiğinden, tasarımcılar her ikisindeki ögelerin de uyum içerisinde olduğunu garanti ederler. Bundan sonraki bütün sayfalarda stoktaki ögelerden kullanma olanakları vardır. Bu stok bütün proje boyunca görsel stillerin nasıl kullanılması gerektiğini gösteren bir kaynak durumundadır.

Atomik tasarım süreci ile bir arayüz stoğu tasarlayarak, daha ilkel modüllerden başlayıp onları daha gelişmiş ögelere çevirebiliyoruz. Bu süreç verimi, takım elemanları arasındaki iletişimi arttırıyor ve totalde daha güzel bir websitesi ortaya çıkmasını sağlıyor.

Atomik Tasarım Bizim İçin Ne Yapıyor?

Atomik tasarım hem çalıştığımız proje ile ilgili elle tutulur gerçekler keşfetmemize, hem de projenin artistik ve teknik taraflarını kapsayan ortak bir tutum yaratmamıza yardım ediyor. Kullanıcı tasarımını geliştiren daha somut bir sistemi teşvik ediyor ve tasarımcıların, yazılımcıların oluşturduğu öge bazlı rehberlerine yaratıcılığı da koruyarak bağlı kalmasını sağlıyor.

Doğal olarak yazılımcılar kodu sıfırdan oluştururken, tasarımcıların yaklaşımı daha sonraları fonksiyonel bir web sayfasına dönecek olan daha belirsiz bir şekilde başlıyor. Atomik tasarım, tasarımcıların da bütün arayüz ögelerini tutarlı ve amacına uygun yapmaları için sıfırdan çalışmaya başlamalarını gerektiriyor.

Arayüz stoğu ile temsil edilen ortak dil, hem tasarımcıların hem de yazılımcıların daha önce çözülmüş problemler için yeni çözümler üretmemelerini sağlıyor. Örneğin, yeni bir iletişim formu sayfaya eklenecekse, tasarımcı bunu arayüz stoğunda bulunan stili kullanarak oluşturabilir ve bu problem için çok fazla efor sarfetmesine gerek kalmaz. Bu tasarımcıdan iş çalmak değil; aksine yazılımcının tasarım tarafında her yeni öge için wireframe beklemesine gerek kalmadan çözüm üretmesini sağlayan bir sistemdir. Tasarımcı ise sayfalar oluşturulduktan sonra daha çok sanat yönetmenliği tarafına kayar. Bu elle tutulur gerçekler aynı zamanda her konuda tasarımcının bir referans olarak alınması gerekliliğini de ortadan kaldırır. “Bu renk seçimi doğru mu?” veya “Şu öge için hangi rengi kullanmalıyız?” gibi sorular ile son dakika değişiklikleri veya yapılan eklemeler için cevaplar hep Arayüz Stoğu kullanılarak verilebilir.

Ortak dil, aynı zamanda kaliteyi de garantiler. Bir web sayfasını hem içerik hem de fonksiyonlar için test ederken, Arayüz stoğu bir rehber olarak kullanılabilir. Her ne kadar öncelikle bir tasarım, ikinci olarak da bir yazılımcı aracı olsa da, arayüz stoğu takımdaki herkesin tasarım ve tutarlılık konusundaki konuşmalara katılmasını sağlar.

Sonuç

Bir projenin düzgün ilerleyebilmesi için iletişim en önemli noktadır; eğer takımdaki her bir kişi, çok farklı ve birbiriyle bağdaşmayan düşünceler ortaya atıyorsa uygulanabilir olan hiçbir şeyin o takımdan çıkmayacağı kesindir. Atomik tasarım farklı disiplinlerden gelen bu insanlar arasında bir çevirmen görevi görür ve tasarımdaki ana tutarlılığı sağlar. Takım için modüler bir kaynak sağlar, daha az hata yapılmasına ve daha sağlam bir tasarım ortaya çıkmasına yardım eder.

Kaynak: www.webdesignerdepot.com/2016/04/using-atomic-design-in-modern-web-development/