Atomik Tasarımda UI Bileşenleri

0
17

Atomik Tasarım: Bir zamanlar belirsiz bir kavram, son yıllarda popülerlik kazandı. Ve iyi bir nedenden ötürü sıcak bir tasarım trendi. Doğru yapıldığında, Atomic Design ekiplerin gerçekten benzersiz tasarım sistemlerini konuşlandırmasına olanak tanır. Dahası, bu tasarım sistemleri, hem kullanıcılara hem de geliştiricilere fayda sağlayan benzersiz, yüksek kaliteli, tutarlı bir kullanıcı arabirimi sunar.

Bu yazıda, Atomik Tasarımın tüm ayrıntılarını ve içindeki UI bileşenleri hakkında bilmeniz gerekenleri tartışacağız.

İçeri girelim.

Atomik Tasarımın 5 UI Bileşeni

Atomik Tasarım, Brad Frost’un öncülüğünü yaptığı bir web tasarım teorisidir. Bir kimya öğrencisi olan Frost, teoriyi geliştirmek için atomun temelini kullandı. Kimyada, birkaç atom bir araya gelerek tek bir molekül oluşturur ve bu daha sonra bir dizi giderek daha büyük organizmalar ve moleküller halinde birleştirilebilir.

Frost, bu süreci Atomik Tasarım yaklaşımının temeli olarak uyarlar.

Temelde Atomik Tasarım, birbiri üzerine inşa edilen beş elementten oluşur. Bunlar aşağıdaki gibidir:

Atomlar. Atomik Tasarımda, kimyada olduğu gibi, atomlar her şeyi bilgilendirmeye yardımcı olan temel unsurlardır. Web uygulamaları dünyasında atomlar, HTML etiketleri, yazı tipleri, animasyonlar ve renk paletleri gibi temel unsurlardır. Web tasarımı “atomlar” da daha az somut olabilir. Örnekler arasında düğmeler veya formlar bulunur. Moleküller, besin zincirindeki bir sonraki en büyük yapı taşıdır. Farklı atomların birleşmesiyle yaratılan moleküller, doğaları gereği karmaşıktır. Çeşitli atomların ürünleri oldukları için, onları kavramsal olarak sindirimi daha kolay bir şeye bölmek mümkündür. Web tasarım moleküllerinin örnekleri, form etiketleri veya giriş alanları gibi daha büyük tasarım sisteminin omurgası haline gelen şeyleri içerir. Atomlar moleküller oluşturmak için birleşir ve moleküller organizma oluşturmak için birleşir. Atomik Tasarım dünyasında organizmalar, bir web sitesinin hem görünümünü hem de işlevselliğini şekillendiren unsurlardır. Ayrıca kullanıcı arayüzünü etkilemeye başlayan unsurlardır. Bir geliştiricinin molekülleri düzenleme şekli, saha deneyimini ve bitmiş ürünün karmaşıklığını bildirir. Organizma örnekleri arasında logolar, arama alanları ve ana gezinme yer alır. Atomik Tasarım sürecinin bu aşamasında, kimya analojisinden kopmaya ve bir bütün olarak web geliştirme sözlüğüne geri dönmeye başlıyoruz. O halde şablonlar, sayfalar veya bitmiş ürünler oluşturmak için bir araya getirilmiş “organizmalardır”. Şablonlar, çevrimiçi atomlar, organizmalar ve moleküller oldukça somuttur. Daha soyut parçaların sığması için sabit bir bağlam sağlarlar ve siteyi nihai biçimine benzer bir şeye çekmekten sorumludurlar. Bir HTML tel kafes, bir şablonun mükemmel bir örneğidir. Son olarak sayfalar, Atomik Tasarımın son unsurudur. Frost’un kendisine göre sayfalar, şablonların belirli örnekleridir. Sayfalar en somut unsurdur ve kullanıcıların zamanlarının çoğunu geçirdikleri yerlerdir. Ayrıca, sayfaların son yinelemesinden, geliştiricilerin tüm tasarım sisteminin etkili olup olmadığını gördüklerinden, Atomik Tasarım sürecinin en önemli aşamalarından biridir. Kısacası, sayfaların son görünümü, sitenin başlatılmaya hazır olup olmadığını veya geliştiricinin geri dönüp önceki tasarım öğelerinde değişiklik yapması gerekip gerekmediğini belirler.

Atomik Tasarımın Faydaları

Artık Atomik Tasarımın temel UI bileşenlerini tartıştığımıza göre, bu bileşenlerin neden faydalı olduğunu ve neden bu kadar popüler bir tasarım sistemi olarak ortaya çıktığını daha derinlemesine inceleyelim.

Atomik Tasarım, “karıştır ve eşleştir” yaklaşımına izin verir

Atomic Design ile geliştiriciler, site öğelerini tek seferde hareket etmesi gereken tek bir tuğla yerine bağımsız olarak alabilir. Bu, geliştiricilerin sitenin yeni organizmalar oluşturmak için yeniden kullanılabilen, yeniden kullanılabilen veya diğer öğelerle eşleştirilebilen bölümlerini tanımlamasına olanak tanır.

Atomik Tasarım, basit düzenler üretir

Bu hem geliştiriciler hem de son kullanıcılar için geçerlidir. Geliştiriciler için, Atomic Design ile oluşturulan sitelerin kodunu okumak ve anlamak daha kolaydır. Kullanıcılar için atomik olarak tasarlanmış sitelerde gezinmek daha kolaydır ve daha sezgiseldir. Geliştiricilerin değişiklik yapmak için siteye geri dönmeleri gerektiğinde ve gerektiğinde, Atomic Design, her bir öğeyi ve neyi temsil ettiğini belirlemeyi ve buna göre şeyleri değiştirmeyi kolaylaştırır.

Atomik Tasarım genel olarak daha basit siteler oluşturur

Atomik Tasarımın temelleri karmaşık görünse de, gerçek şu ki, Atomik Tasarımın bir yerinden oluşturulan siteler genel olarak daha az bileşen içeriyor.

İşte nedeni:

Geliştiriciler, bir site oluşturmaya başlamadan önce mevcut olan bileşenlerin bir listesine (atomlar, moleküller ve organizmalar dahil) sahip olduklarında, gereksiz yere yeni unsurlar oluşturmak yerine mevcut altyapıyı kullanma olasılıkları daha yüksektir.

Sonuçta daha az bileşen olması daha yalın, kullanımı daha kolay siteler sağlar.

Atomik Tasarım UI Bileşenlerini Geliştiriyor

Web tasarımı dünyası şu anda yoğun bir şekilde UI odaklıdır ve bunun iyi bir nedeni var. Müşteriler daha gelişmiş ve anlayışlı hale geldikçe, web geliştirmenin devam etmesi gerekir. Neyse ki Atomic Design yapar. bunu yapmak çok kolay. Aksi halde karmaşık olan web geliştirme görünümlerini basitleştiren Atomic Design, geliştiriciler için iş akışlarını kolaylaştırır ve son kullanıcılar için daha iyi kullanıcı arayüzlerini destekler.

Tasarım iş akışında basitliği korumak için, paylaşmayı, yorum bırakmayı ve ayrıntılı özellikleri otomatik olarak listelemeyi sağlayan özelliklerle geçişi kolaylaştıran bir tasarım aracı da düşünmelisiniz. Tasarım sürecinizi nasıl iyileştireceğinizi görmek için UXPin’i 14 günlük ücretsiz deneme ile deneyin.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz