Atomik tasarım metodolojisi: Sistematik bir kullanıcı arayüzü oluşturun ve yeniden kullanın.

Gerçek hayattan bir sorun: "Web sitesi güzel... ama neden her düzeltmeye çalıştığımda başım ağrıyor?"

Bir UI/UX tasarımcısı, ürün yöneticisi veya hatta bir işletme sahibi olarak bunu hiç yaşadınız mı? Bir web sitesini veya uygulamayı ilk başlattığınızda her şey güzel ve düzenli görünür. Ancak zaman geçtikçe... yeni bir özellik eklemek veya bir düğmede küçük bir tasarım değişikliği yapmak istediğinizde, her şey dağılır.

A sayfasındaki butonlar B sayfasındaki butonlara benzemiyor, kayıt sayfasında kullanılan renkler ödeme sayfasındakilerden farklı tonlarda, geliştiriciler birbirine benzeyen bileşenler için tekrar tekrar kod yazmak zorunda kalıyor... Sonuçta ortaya çıkan şey "web sitesi ne kadar büyükse, o kadar dağınık oluyor." Genişletmek veya sürdürmek hem zaman alıcı hem de maliyetli, inanılmaz bir kabusa dönüşüyor.

Eğer başınızı sallıyorsanız, yalnız değilsiniz. Bu, iyi bir "sistem" eksikliğinden kaynaklanan tasarımın klasik "acısı"dır.

İpucu: İki web sitesinin kullanıcı arayüzünün grafiksel karşılaştırması. Sol taraf (Önce), hiç uyuşmayan ve kaotik görünen düğmeler, kartlar ve yazı tiplerini gösteriyor. Sağ taraf (Sonra), tüm öğelerin düzgün ve tutarlı göründüğü bir kullanıcı arayüzünü gösteriyor.

Bu sorun neden ortaya çıkıyor: Sadece "sayfaya" bakan ve "sisteme" bakmayan tasarım

Tüm bu kaosun kökü genellikle yanlış tasarım düşüncesinde yatar. Bize genellikle "ana sayfa tasarımı", "ürün detayları sayfası tasarımı", "iletişim sayfası tasarımı" gibi "sayfa tabanlı" düşünme yöntemleri öğretilir. Bu tür bir düşünce başlangıçta hızlı gelebilir, ancak uzun vadede felaketle sonuçlanabilir.

Çünkü "sayfa" odaklı tasarım yaptığımızda, bu sayfa için yeni öğeler oluştururken, bu öğelerin başka yerlerde kullanılıp kullanılmayacağını düşünmeyiz ve bu da şu sorunlara yol açar:

• Tutarlılık: Farklı tasarımcılar, hatta aynı tasarımcı farklı zamanlarda, farklı sayfalarda farklı tonlara, boyutlara veya gölgelere sahip "mavi düğmeler" oluşturabilir.
• Gereksiz İş: Geliştiricilerin, yalnızca bir kez oluşturulması ve tekrar tekrar kullanılması gereken "kullanıcı profili kutusu" için tekrar tekrar kod yazmaları gerekir.
• Tek bir Gerçeğin Kaynağı Yok: Gerçek "anahtar" düğmesinin neye benzediğini kimse bilmiyor; herkes kendi anlayışına göre hareket ediyor.

Bu tür bir çalışma, şehir planı olmadan bir şehir inşa etmekten farksızdır. Herkes keyfine göre ev inşa eder ve sonunda şehir kalabalıklaşır ve yönsüzleşir.

İpucu: Karikatürde sırt sırta oturan bir tasarımcı ve bir programcı gösteriliyor, her biri kendi "düğmesini" oluşturuyor, oklar aynı web sitesini gösteren bir bilgisayar ekranına işaret ediyor, ancak düğmenin farklı versiyonları tam olarak aynı görünmüyor.

Tedavi edilmezse ne olur: İşletmeleri geriye çeken ve giderek artan "teknik borç"

Web sitenizin veya uygulamanızın sistematik olmayan bir şekilde büyümesine izin vermek sadece çirkin bir görüntü oluşturmaz; aynı zamanda işinizi birçok yönden, hatta fahiş faiz oranlarıyla "teknik borç" biriktirmek gibi korkutucu bir şekilde doğrudan etkiler.

• Kullanıcı Deneyimi (UX) Daha Kötü: Tutarsızlıklar kullanıcıların kafasını karıştırır ve profesyonel hissetmemelerine neden olur. Bankacılık uygulamanızdaki "Doğrula" düğmesinin her bastığınızda görünümü değişse, kendinizi daha güvende hisseder ve kullanmaya devam etmeye daha istekli olur muydunuz?
• Maliyetler tavan yapıyor: Her düzeltme veya ekleme yapıldığında, tasarımcılar ve geliştiriciler aynı sorunları düzeltmek ve gereksiz işler yapmak için zaman kaybediyorlar. Bu kayıp zaman, ödemeniz gereken bir "maliyet".
• Geliştirme hızı düşer: Yeni bir özelliğin yayınlanması büyük bir mesele haline gelir çünkü diğer parçaları nasıl etkileyeceği konusunda endişelenmeniz gerekir. Eskiden bir haftada mümkün olan bir şey artık bir ay sürebilir.
• Zarar Görmüş Marka İmajı: Bir web sitesi, markanızın yüzüdür. Düzensiz ve dağınık görünüyorsa, markanızın tüketicilerin gözündeki güvenilirliği azalacaktır.

Sonunda, bu borç hareket edemeyeceğiniz bir noktaya kadar artacaktır. Rakiplerinizle rekabet etme veya değişen pazarlara yanıt verme yeteneğiniz yavaşlayacak ve bu da potansiyel olarak iş fırsatlarınızı kaybetmenize neden olacaktır.

İpucu: Bu infografik, bu sorunu görmezden gelmenin dört olumsuz sonucunu gösteriyor: kum saati simgesi (zaman kaybı), delikli para kesesi (yüksek maliyet), düşen grafik simgesi (kötü kullanıcı deneyimi) ve çatlak marka kalkanı simgesi (zararlı marka).

İşte bir çözüm: Atomik Tasarım ile kullanıcı arayüzüne bir "kimyager" gibi bakmaya başlayın.

Brad Frost tarafından icat edilen Atomik Tasarım kavramıdır .

Atomik Tasarım, kimyadan bir kavram alıp, atomların birleşerek molekülleri, moleküllerin birleşerek daha karmaşık canlıları oluşturmasına benzer şekilde bileşenleri beş seviyeye ayırarak kullanıcı arayüzü tasarımına uygular.

1. Atomlar: Bunlar renkler, yazı tipleri, simgeler veya tek tek düğmeler gibi en küçük, bölünemez birimlerdir. En temel "hammaddelerdir".
2. Moleküller: Bir işlevsel bileşeni oluşturmak için bir araya gelen "atom" koleksiyonlarıdır, örneğin bir Etiket (Atom) + Giriş Alanı (Atom) + Düğme (Atom) birleşerek bir "Arama Formu" (Molekül) oluştururlar.
3. Organizmalar (organizmalar): "Moleküller" ve/veya "atomlar"ın daha karmaşık ve önemli parçalara birleştirilmesiyle oluşur, örneğin logo (Atom) + gezinme menüsü (Molekül) + arama formu (Molekül) birleştirilerek "Başlık" (Organizma) oluşturulur.
4. Şablonlar: Bunlar, herhangi bir veri girilmeden bir "sayfa taslağı" oluşturmak üzere bir araya getirilen bir dizi "organizma"dır. Her sayfanın ne içermesi gerektiğini tanımlayan bir taslaktır.
5. Sayfalar: Bu, bir "şablon" alıp ona "gerçek içerik" (resimler, metin, video) eklediğimiz son adımdır. Bu, bir kullanıcının web sayfasında veya uygulamada gerçekte ne göreceğine dair bir fikir vererek, tasarım sisteminin doğruluğunu ve etkinliğini test etmemize olanak tanır.

Bu konseptle başlamak, sistematik ve kolayca ölçeklenebilir bir tasarım sistemi oluşturmanıza yardımcı olacaktır, böylece ne kadar çok sayfa oluşturursanız oluşturun, her şey her zaman aynı kurallara uyacaktır.

İpucu: Atomik Tasarımın beş aşamasını (Atomlar -> Moleküller -> Organizmalar -> Şablonlar -> Sayfalar) gösteren güzel bir infografik; her aşama için Atom için Düğmeler, Molekül için Arama Formları, Organizma için Başlıklar vb. gibi açık kullanıcı arayüzü örnekleri.

Gerçek dünyadan başarı örnekleri: GE'nin Tasarım Sistemi ile organizasyonda devrim yaratması

Teori karmaşık görünebilir, ancak General Electric (GE) gibi küresel bir kuruluştan gerçek bir örneğe bakalım. GE'nin çok sayıda dijital ürünü var ve her ekip kullanıcı arayüzünü farklı yönlerde tasarlıyor, bu da kafa karışıklığına ve çok fazla kaynak israfına neden oluyor.

Karşılaşılan sorunlar: Ciddi tutarsızlık, markanın kopuk görünmesi ve yeni ürünlerin geliştirilmesinin gerekenden uzun sürmesi.

Çözüm: GE ekibi, "Predix Tasarım Sistemi" adını verdikleri şeyi yaratmak için atom tasarımına benzer prensipler kullandı. Organizasyondaki herkesin kullanabileceği, renklerden ve simgelerden (Atomlar) veri kartlarına, grafiklere ve karmaşık tablolara (Organizmalar) kadar her şeyi içeren bir "Bileşen Kütüphanesi" oluşturdular.

İnanılmaz Sonuçlar:

• Her şeyi sıfırdan inşa etmek zorunda kalmayarak tasarım ve geliştirme süresini önemli ölçüde azaltın
• birleşik bir kullanıcı deneyimi yaratın , markayı güçlendirin ve güçlendirin.
• Gereksiz işleri azaltarak büyük bütçelerden tasarruf edin

Bu, başlangıçta sistemlere yatırım yapmanın yavaş da olsa uzun vadede karşılığını verdiğini ve kuruluşların sürdürülebilir şekilde büyümesini sağladığını kanıtlıyor.

İpucu: GE uygulamalarının Öncesi ve Sonrası slayt gösterisi. Öncesi tarafında, tamamen farklı 3 uygulamanın kullanıcı arayüzü gösteriliyor. Sonrası tarafında ise, aynı Tasarım Sistemini kullanan 3 kullanıcı arayüzü gösteriliyor ve bu sayede tutarlı ve profesyonel görünüyorlar. "Geliştirme süresi -%60" gibi istatistikler de mevcut.

Takip etmek istiyorsanız, işte yapmanız gerekenler: Kendi Atomik Tasarımınızı oluşturmaya başlamak için kontrol listesi (kullanıma hazır)

Artık başlamaya hazırsınız, değil mi? Öyleyse daha fazla beklemeyin! Bu basit 5 adımlı kontrol listesiyle projeniz için hemen bir atomik tasarım sistemi oluşturmaya başlayabilirsiniz:

1. Varlık Envanteri (Kullanıcı Arayüzü Envanteri) Oluşturun: İlk adım, sahip olduklarınızı incelemektir. Web sitenizin veya uygulamanızın her sayfasının ekran görüntüsünü alın ve her bir öğeyi ayrı ayrı kesip yapıştırın: her düğme, her form, her kart stili, her başlık boyutu. Bu, atomlarınızın ve moleküllerinizin bir "popülasyon araştırması"dır.
2. Atomlarınızı Tanımlayın: Varlık envanterinizden "atomlarınızı" gruplandırmaya ve standartlaştırmaya başlayın; örneğin birincil renk şeması, tipografi ölçeği, aralık sistemi ve simge stili tanımlayın. İşte temel stil kılavuzu tam da bu noktada devreye giriyor.
3. Molekülleri Birleştirme: Sabit atomlarınız olduğunda, bunları "etiketli alanlar", "ikonlu düğmeler", "makale etiketleri" gibi yaygın olarak kullanılan "moleküller" halinde birleştirmeye başlayın.
4. Önemli Organizmalar Oluşturun: Sitenizin daha büyük, daha merkezi öğelerini oluşturarak bir adım daha ileri gidin; örneğin başlık, alt bilgi, kenar çubuğu veya satın alma düğmeli ürün görüntüleme kartı.
5. Bir derleme aracı kullanın: Tüm bu sistemi elle oluşturmak bunaltıcı olabilir. Ekibinizdeki herkesin tekrar tekrar kullanabileceği bir "Bileşen Kitaplığı" oluşturmanıza yardımcı olması için Figma veya Sketch gibi bir tasarım aracı kullanın. Figma, bunu yönetmek için oldukça güçlü araçlar sunar ve daha da ileri gitmek isterseniz, daha hızlı çalışmanıza yardımcı olacak bazı gelişmiş Figma ipuçlarına

İpucu: Atomik Tasarım'a başlamak için 5 adımı gösteren, her adım için simgelerle (büyüteç, bảng màu, molekül, yapı ve Figma logosu) tamamlanmış güzel ve anlaşılması kolay bir kontrol listesi.

İnsanların merak ettiği sorular ve temizlenen cevaplar

Atomik Tasarım hakkında birçok kişinin sorduğu soruları derledim ve burada net bir şekilde cevapladım.

Soru 1: Atomik Tasarım küçük projeler veya tek başına çalışan serbest çalışanlar için uygun mudur?
Cevap: Evet, uygundur! Aslında, proje ne kadar küçükse, başlamak o kadar iyidir. Çünkü başlangıçtan itibaren disiplin ve düzen sağlar. Bu, proje ileride büyüdüğünde onu destekleyecek güçlü bir temele sahip olacağınız ve daha sonra düzeltme endişesi yaşamayacağınız anlamına gelir. Sistematik düşünmek, ekip ister küçük ister büyük olsun, her zaman faydalıdır.

Soru 2: Bu, projenin ilk aşamalarını yavaşlatır mı?
Cevap: Evet, başlangıçta biraz daha fazla zamanınızı alacaktır, ancak uzun vadede hızınızda büyük bir artış sağlayacaktır. Dedikleri gibi, "Hızlı gidip tökezlemektense, başlangıçta yavaş ve istikrarlı ilerlemek daha iyidir." Bu, "hızlı gitmek için yavaş gitmenin" en uygun maliyetli yoludur.

Soru 3: Atomik Tasarım ile Stil Rehberi veya Tasarım Sistemi arasındaki fark nedir?
Cevap: Harika bir soru! Şöyle düşünün:

• Stil Rehberi: Genellikle renkler, yazı tipleri, logolar, ikonlar gibi "Atomlar" üzerine yoğunlaşır.
• Atomik Tasarım: Bir Stil Rehberini alıp onu şekillendirerek Moleküller, Organizmalar, Şablonlar ve Sayfalar yaratma "felsefesi" veya "yöntemi"dir.
• Tasarım Sistemi: En eksiksiz "sonuç"tur. Kılavuzlar ve belgelerle birlikte, yeniden kullanılabilir bileşenlerden oluşan bir settir. Atomik Tasarım, bir Tasarım Sistemi oluşturmak için harika bir fikirdir.

Soru 4: Zaten dağınık olan eski bir web sitem varsa, Atomic Design'ı uyarlayabilir miyim?
Cevap: Kesinlikle! Her şeyi bir kerede baştan aşağı yenilemenize gerek yok. Net bir fikir edinmek için önerdiğim "Kullanıcı Arayüzü Envanteri" adımıyla başlayın. Ardından, standart bileşenleri parça parça oluşturun ve her bölümde kademeli olarak değiştirin. Önce en sık ziyaret edilen sayfalarla başlayabilirsiniz.

İpucu: Bir çizgi film karakteri bir kavşakta duruyor. Dağınık ve kaotik bir yol olan "Sayfa Tabanlı Tasarım", pürüzsüz ve düzenli bir yol olan "Atomik Tasarım" ise karakterin kafasının üzerinde bir soru işareti var ve bu, vermesi gereken bir kararı temsil ediyor.

Basitçe söylemek gerekirse: Ev inşa etmeyi bırakın... ve "Lego tuğlaları" inşa etmeye başlayın.

Atomik Tasarım, en basit haliyle, her seferinde "bütün bir ev inşa etmek" zihniyetinden, öncelikle kaliteli "standart bir LEGO seti" inşa etmeye geçiş yapmaktır.

İyi bir LEGO setiniz (Atomlar, Moleküller, Organizmalar) olduğunda, müşterileriniz ister bir "ev", ister bir "kale", isterse bir "uzay gemisi" (Sayfalar) istesin, aynı LEGO parçalarını alıp yeni, güzel ve sağlam şeyler inşa edebilirsiniz; tüm bunlar aynı LEGO evreninin bir parçasıymış gibi görünürken gerçekleşir.

Bugün "sistemlere" yatırım yapmak, yarın "hız" ve "kalite" satın almak demektir. Bu, günümüzün hızlı temposunda büyümeye ve uyum sağlamaya hazır dijital ürünler geliştirmenin özüdür ve UX/UI tasarım her zaman benimsediği yaklaşım da budur.

Tamam...kendi LEGO setlerini inşa etmeye başlamanın zamanı geldi mi?

İpucu: Son güçlü görüntü, bir tasarımcının karmaşık ve güzel bir kullanıcı arayüzü yapısı üzerinde son Lego parçalarını bir araya getirdiğini ve bunun önünde de hızla artan performans büyümesini gösteren bir grafiğin yer aldığını gösteriyor.

‍