Web Sitenizde Atomik Tasarım Kullanmanız İçin 9 Neden

Atomik tasarımın arkasındaki fikir web tasarımı için bloklar inşa etmede atomları kullanmaktır.

Eğer tasarımcıysanız muhtemelen Atomik Tasarım (Atomic Design) denilen sistemi duymuşsunuzdur.

Atomik tasarım; Web sitesi planını kendi içinde temel bileşenlerine ayırma ve bunları site içerinde tekrar kullanmaya dayalı bir metodolojidir.

Atomik tasarımın temelleri nelerdir? Neden bu yöntemi kullanmamız gerekir?

1. Bileşenleri Karıştırabilir ve Eşleştirebilirsiniz

Bileşenleri temel atomlara ayırarak web sitesinin hangi parçalarının tekrar kullanılabileceğini ve bu parçaların moleküller ve hatta organizmalar oluşturabilmek için nasıl eşleştirilebileceğini kolaylıkla görebilirsiniz.

Örneğin sitenizin yalnızca 5 atom içerdiğini düşünelim: Bir küçük resim, büyük resim, paragraf, liste maddesi ve bir link. Moleküller yapmak için bu atomları çoğaltarak ve kombine ederek çok kullanışlı web sayfaları oluşturabilirsiniz.

2. Stil Kılavuzu Yapmak Basittir

Eğer web sitenizde arayüz tasarımı başından beri atomik tasarım prensiplerine bağlı kalınarak geliştirildiyse web sitesinin tasarımından önce oluşturulan bütün atomlar ve moleküller temel tasarım kılavuzu olarak görev yapabilir. Atomik olarak inşa edilmemiş web sitesi tasarımlarında bile temel bileşenleri tahmin etmek ve daha fazla sayfa inşa etmek için onları bir araya getirmek zor değildir. Bunu düşünürsek tasarımları başlangıçtan itibaren atomik olarak geliştirmek, web sitesine atomik tasarımı sonradan dahil etmeye çalışmaktan çok daha iyidir.

3. Anlaşılması Kolay Bir Yapı Sunar

Atomik olarak tasarlanmış web sitelerinin kodlarını okumak, genellikle geleneksel olarak tasarlanmış olanların kodlarını okumaktan çok daha kolaydır. Bu yalnızca web sitesi oluşturulurken değil, daha sonra küçük değişiklikler için yapılan kontroller için de geçerlidir.

Hangi moleküllerin ve organizmaların kullanıldığıyla ve nerede bulunduklarıyla ilgili olan dokümantasyonlar sayesinde kodların her bir parçasının ne için yazıldığını görmek oldukça kolaydır. Yeni bir web geliştiriciye kod temellerini anlatmanın daha kolay olması da bunun başka bir artısıdır.

4. Kodlar Daha Tutarlıdır

Atomik tasarım sayesinde yeniden tanımlanmış atomları web sitesinin yapısını oluşturmak İçin kullanırsınız ve bu sayede web sitenizin farklı parçalarında hangi bileşenlerin kullanıldığını görmek kolaylaşır. Bu da kodları tekrarlama ihtimalinizi düşürür.

Örneğin web sitenizi atomik tasarım kullanmadan oluşturdunuz ve diyelim ki kırmızı bir butona ihtiyacınız var. Bütün bir web sitesini inceleyip bir tane bulmaya çalışmak zorundasınız. Eğer bir tane varsa yeni bir tane üretmek için kodları kopyalamanız ve tekrar kullanmanız gerekecektir. Eğer yoksa yeni bir buton yaratmalısınız. Atomik tasarımla, atomlar listesine göz gezdirip o kırmızı butonu bulmanız çok daha kolay olacaktır.

5. Mükemmel Piksel Tasarımlarına Odaklanmaya Gerek Yoktur

Atomik tasarımın arkasındaki fikir tasarım için bloklar inşa etmede atomları kullanmaktır. Bu web geliştiricilerinin benzer şeyler oluşturmak için birçok atom üretmesi demek değildir. Aslında yalnızca var olan atomların listesine bakıp, eğer ihtiyaç varsa yeni atomlar üretmek için onları düzenleyebilirsiniz.

Bunun için verilebilecek en iyi örnek web sitesindeki başlıklardır. Diyelim ki içerik editörünün web sitesi için kullandığı başlıkların bir listesi var: Bir ana başlık, alt başlık ve paragraf başlığı. Web sitesi üzerinde bir süre çalışmadı ve yeni bir mavi başlık eklemek için web sitesine geri döndü. Var olan başlıkların listesine bakıp istenilen sonuç için bir başlığı düzenleyebilir.

6. Daha Hızlı Prototip Yapmanıza Olanak Verir

Web sitesinin tasarım elemanlarından önce atomların bir listesine sahip olmak, sayfalar için hızlı ve kolay bir şekilde prototip oluşturabileceğiniz anlamına geliyor. Yapmanız gereken tek şey sayfa için gerekli elemanları seçmek ve birleştirmek. Bu prototip web sitenizin son hali için düzenlenebilir.

7. Web Sitesini Güncellemesi Kolaydır

Bir atomu, molekülü veya bir organizmayı değiştirmesi kolay olduğu gibi web sitesi içerisindeki herhangi bir bileşeni de güncellemesi kolaydır. Benzer şekilde istenmeyen bileşenleri tasarımdan kaldırmak da kolaydır.

8. Daha Modüler Dosya Yapısı Sunar

Konu biçimlendirmeye (HTML) geldiğinde atomik tasarım oldukça etkilidir. Ayrıca bu teknikler CSS, JavaScript veya web sitesini daha modüler ve tekrar kullanılabilir yapmak için kullanılan diğer diller için de geçerlidir.

9. Genel Tasarımda Daha Az Bileşen

Eğer bir tasarımcı, web sitesini tasarlamaya başlamadan önce atomların, moleküllerin ve organizmaların bir listesini çıkardıysa, küçük varyasyonlar için yeni bileşenler oluşturmaktansa var olanı kullanacaktır.

Eğer tasarımın font boyutlarının 4.5em olması isteniyorsa ama var olan atom listesinde 4em başlık boyutu varsa tasarımcı büyük olasılıkla yeni bir başlık oluşturmaktansa 4em font boyutunu kullanacaktır. Bu durum kullanılan atomların çoğu için geçerli olacaktır.

İnternette Evrensel Bir Tasarım Sistemi Olmalı Mı?

Tasarım sistemleri, daha birbirine bağlı ürünler oluşturabilmek ve kullanımı kolaylaştırmak adına, uygulamalar arasında tutarlılık sağlamak zorunda.

Mobil uygulamalardan farklı olarak, web siteleri için tasarımcıların başvurabileceği bir klavuz yok. Onun yerine elimizde, doldurulması gereken bomboş bir tuval var.

Bu, elemanları arasında tek bir bağlantı bile kurulamayan, kapsamlı platformda, kullanıcı deneyimi diye bir parça var. Web siteleri içerisindeki navigasyonlar; yerleşimden, yapıdan ve tasarımın geri kalanından çok farklı. Yerleşimler genişlikleriyle düzenlenliyorlar. Metin boyutları ve yapıları için çeşit çeşit binlerce seçenek var. Ayrıca oldukça geniş çaplı etkileşim birimleri ve kullanıcı arayüz elemanları var ve bunları bir standart haline getirebileceğimiz bir tasarım sistemi yok.

Bu var olmayan tasarım sistemi, doğası gereği açık kaynak ve anonim olmalı. Hiçbir şirket ya da organizasyonun sistemin standartlarını değiştirme yetkisi olmamalı. Örneğin Google için, hiçbir şey veya hiç kimse, arama sonuçlarımızı etkileyecek faktörleri (kullanıcı deneyimleri gibi), sonuçların duyarlılığını ve kod yapılarını değiştiremez. Diğer yandan, iOS ve Android gibi mobil işletim sistemleri, uygulama yapılarını, kullanıcı deneyimi pratiklerini ve standartları değiştirme gücüne sahip. Tasarım sistemleri, daha birbirine bağlı ürünler oluşturabilmek ve kullanımı kolaylaştırmak adına, uygulamalar arasında tutarlılık sağlamak zorunda. Bu durum ulaşılabilirliği arttırdığı gibi, performansı ve optimizasyonu da yükseltiyor.

İOS ve Android'de belirli bir uygulama tasarım klavuzu olmasına rağmen, tasarımcılar hala renkleri, yapıyı ve tasarım detaylarını değiştirmek gibi yöntemlerle birbirlerinden ayrılmanın yollarını arıyorlar. Bu şekilde hem belirli bir klavuza uyup, hem de farklı tasarımlar ortaya koymak mümkün olabiliyor.

Yukarıda değindiğimiz gibi, internet gerçekten boş bir tuval. Yani istenilen yönde bir kullanıcı deneyimi yaratmak için tasarım yapma imkânımız var. Bir yandan, bu durum interneti çekici, farklı ve verimli yapıyor ama diğer yandan, çoğu insanın kafası karmakarışık olabiliyor. Ulaşılamaz, tutarsız ve yalnızca tahminlere dayalı karanlık kullanıcı deneyimi pratikleri.

iOS ve Android, bu kadar nizam ve katı kurallar altında bile bir platformun ne kadar zengin ve farklı olabileceğini bizlere gösteriyorlar.

Bu durum bizlere, web platformu için açık kaynak bir tasarım klavuzun mümkün olup olmayacağını düşündürüyor. Böyle bir durum mümkün olursa, bir yandan internet genelinde kullanışlılık ve ulaşılabilirlik yükselirken, bir yandan da değişik tasarımlar geliştirilebilir. Tasarımcılar ve kullanıcı deneyimi uzmanları bunu açık kaynak bir proje olarak düşünüp, birlikte interneti bir adım ileri götürmeye yönelik çalışmalar yapabilirler.

Bu sistem yalnızca web uygulamaları için değil, aynı zamanda bloglar, portfolyo siteleri, açılış sayfaları ve bilgi kütüphaneleri gibi platformlar için de geçerli olmalı. Bu tip web sitelerinin de, navigasyon, renk paletleri ve metin geliştirmeleri gibi kullanıcı deneyimi pratiklerine ciddi olarak ihtiyaçları var. Bazı şirketler bu elemanları reddediyor, yanlış değerlendiriyor, ve gerekli önemi vermiyor olsa da bazı şirketler için bunlar hala önemli. Bu sistem parçalı bir sistem ve herkes için aynı ölçüde çalışmayabilir. Buna engelliler, görme bozukluğu olanlar ve inteneti kullanma yetisi olmayanlar da dahil. Tasarım ilk olarak bu tip kullanıcılar için geliştirilmeli.

Bunlar bir yana, web sitelerinde en önemli kaygı, tasarımın farklı, etkileyici ve göz alıcı olması. Bu istekler bazen tasarımın kafa karıştırıcı ve alışılmamış navigasyon çözümlerine sahip olmasına sebep olabiliyor. Bunu engellemek, web platformlarında tutarlılık yakalamakla mümkün olabilir.

Örneğin Google, bir klavuz geliştirdi ve bu klavuzu hem mobile hem de web platformlarına inanılmaz bir tutarlılıkla uyguladı. Yani, eğer iPhone'da Google Keep ve internette Google Drive kullanıyorsanız, kullanıcı deneyimleri ve tasarım elemanları tutarlı demektir.

Hatta Google bunu bir adım daha ileri taşıdı ve web tabanlı uygulamalar yapıp, bunların hem Android sistemlerinde hem de bilgisayarlarda kullanılabilmesini sağladı. Örneğin Chromebooks.

Sonuç olarak bahsettiğimiz şeyin en başarılı uygulamalarını mobil sistemlerde görüyoruz ve aynı başarıyı internette de yakalayabilirsek kullanıcılar olarak yaşantımız çok daha kolay olabilir.