Atomik Tasarım ve Daha Fazlası…

Atomik Tasarım ve Daha Fazlası…

Her tasarımcının kendine ait bir tasarım sistemi vardır. Bu tasarım sisteminin, sizin, müşterilerinizin ve kullanıcılarınızın ihtiyacını ne kadar karşılayıp, karşılamadığı önem kazanır. Birçok küçük parça ile dengeyi nasıl sağladığı ve hangi aşamalar ile işe yarayan tek bir bütün haline geldiği analiz edilmesi gereken noktaların başında gelir.

Tasarım sistemleri hakkında çok şey söyleniyor. En çok renkler, tipografi, grid sistemleri, texture gibi birçok tasarım kuralı üzerine odaklanılıyor. Son zamanlarda tasarım sistemleri üzerine daha çok düşünülmeye ve yazılmaya başlandı.

UX Alive’ın 1.gününde, konuşmacılar arasında Smashing Magazine kurucularından Vitaly Friedman’ın özenle hazırladığı konu başlığı, Brad Frost’un tasarladığı, deneyimlediği ve kitabını yazdığı “Atomik Tasarım” sistemiydi.

Brad Frost, atomik tasarımın temel özünü örneklendirerek detaylıca anlatmış. Atomik Tasarım’ın, Frost’u “okul anılarına taşıdığı” hikayeyi ayrıca okumanızı öneririm.

Biz, web sayfaları için basit koleksiyonlar oluşturmak yerine, düşünceli tasarım sistemlerinin geliştirilmesi ihtiyacını kabul ediyoruz.” -Brad Frost

Jush Ducks’ın web tasarımcılarına HTML olarak sunduğu büyük bir kaynak:

Screen-Shot-2012-11-13-at-5.15.05-PM

Atom Öğeleri Periyodik Tablo

Atomik Tasarım Nedir?

Atomik tasarım, tasarım sistemleri oluşturmak için bir yöntemdir.

Atomik tasarımın 5 ayrı aşaması vardır:

  • Atomlar
  • Moleküller
  • Organizmalar
  • Şemalar
  • Sayfalar

atomic-design-1

Gelin daha detaylı olarak her bir parçasını inceleyelim.

Atomlar

Atom bilinen evrendeki tüm maddenin kimyasal ve fiziksel niteliklerini taşıyan en küçük yapıtaşıdır.

Atomlar da renk paletleri, yazı tipleri ve animasyonlar gibi daha soyut unsurlar içerebilir.

atomic-design-atoms

Bildiğiniz gibi atom soyut bir kavramdır ve tek başına kullanılamaz. Birbiriyle uyumlu elementleri bir araya getirdiğiniz noktada ortaya “yararlı” veya “işlevsel” bir şeyler koyarsınız.

Atomlar maddenin temel yapı taşlarıysa eğer, arayüzdeki atomlar nedir?
Web arayüzleri için uygulanan HTML atom etiketleri:

  • form elemanları(input, textarea vb. gibi),
  • etiketler,
  • butonlar gibidir.

atoms

  • Atom tanımı: temel etiketleri ve diğer tasarım öğeleri daha fazla bozulamaz.
  • Neden Atomlar: tüm arayüz stilleri bir bakışta soyutlanmış vb.
  • Faydalı olmak için çok soyut, vb.

Moleküller

Molekül birbirine bağlı gruplar halindeki atomların oluşturduğu kimyasal bileşiklerin en küçük temel yapısına verilen addır.atomic-design-molecules

Atomları birleştirerek başladığınızda daha ilginç ve soyut şeyler almaya başlıyorsunuz. Moleküller, atomların birbirine bağlanmış grupları ve küçük bir bileşiğin temel birimlerdir. Bu moleküller belkemiği tasarım sistemlerimiz ve kendi özellikleri olarak hizmet vermektedir.

Örneğin; yalnızca bir form etiketi, giriş veya buton ile çok yararlı değildir, gerçekten onları bir form olarak bir araya getirince bir anlam ifade eder.molecule

  • Molekül tanımı: Atomlar birbirine nispeten, basit bir modül şeklinde katılmış gruplardır.

Organizmalar

Organizma: Fonksiyonlarını yaşama mümkün olduğunca uyum sağlayarak sürdüren basit yapılı moleküllerin veya karmaşık organlar sistemlerinin bir araya gelmesiyle oluşan varlıklar için kullanılan bir kavramdır.
Organizmalar moleküllerin biraraya gelerek nispeten karmaşık bir arayüze, ayrı bir bölüm şeklinde katılmış gruplarıdır.atomic-design-organisms

Giderek daha somut bir hal almaya başlıyor. Bir istemci, moleküllerle çok fazla ilgileniyor olabilir ama bir tasarım sisteminin organizmaları ile son arayüzün şekil almaya başlıdığını görebiliriz.organism2 organism-examples

Organizmalar benzer ve/veya farklı bir molekül türü içerebilir. Ama bir “ürün grid”i organizması tekrar tekrar tekrarlanan (muhtemelen ürün görseli, ürün adı ve fiyatı) aynı molekülden oluşabilir.

  • Organizma tanım: (ve muhtemelen atomu) molekül grupları, bir arayüzün ayrı bölümünü oluşturmak üzere bir araya gelmiştir.
  • Organizmalar Neden: atom ve moleküllerin çok daha somut yeniden kullanılabilir bir arayüz bileşenleri, taşınabilirlik vb.

Şablonlar

Şablonlar, çoğunlukla sayfaları oluşturmak için bir araya getirilmiş organizma gruplarından oluşur. Tasarım bir araya gelecek ve eylem planı gibi bazı şeyleri  görmeye başlamamız gereken yer burası.atomic-design-templates

Şablonlar çok somut ve tüm bunlar nispeten soyut moleküller ve organizmalara bağlam sağlamaktadır. Müşterilerinize o deneyimi daha şablon noktasındayken yaşatmak, daha da sağlıklıdır. Öncelik wireframe görmeleri…template1

  • Teslimat kapsamı içine almak için kimya benzetme dili
  • Şablon tanımı: sayfa düzeyinde nispeten soyut bu moleküller ve canlılar için bağlam sağlayan belgeler ve içerik yapısına odaklanmak
  • Neden şablon: İçeriğe odaklanmak, wireframe çalışmak zaman kazandırır, daha sonra geliştirmek için zamanınız olur ve hızlı ilerlersiniz vb.

Sayfalar

Sayfa şablonları spresifik örneklerdir. Sayfa şablonları, spesifik örnekleri olan ve bir kullanıcının ne göreceğini doğru şekilde anlatması amaçlanan sayfalardır.atomic-design-pages

Sayfa sahne tasarımı sisteminin etkinliğinin test nerede olduğu önemlidir. İncelenen moleküller, canlılar, ve şablonlar daha iyi tasarımı gerçek bağlamlarda değiştirmek için döngü sağlar.
Sayfalar da şablon değişimleri için yer vardır. Örneğin, 40 karakter içeren bir başlığın neye benzediğini ifade etmek istiyorum, ama aynı zamanda 340 karakter içeren bir metnin neye benzediğini de göstermek istiyor olabilirim.page1

  • Sayfa tanımı: bir şablon belirlileyen örneklerdir. Gerçek temsilci içerik ile içerik yapısını değiştirir.
  • Sayfalar neden: Test sisteminin esnekliği, içerik yapısı test varyasyonları, son derece somut, müşteri odaklanarak doğru kararlar verebilir vb.

2013 Beyond Tellerand konferansında konuşmacı olan Frost’un tasarladığı Atomik Tasarım Sistemi videosunu izlemelisiniz.

Brad Frost Kimdir?

Brad Frost bir fornt-end tasarımcısı ve Pittsburgh’de yaşayan danışman ve konuşmacıdır. O bir Responsive deneyimi yaratıcısıdır. Pattern kolleksiyoncusu olmakla beraber, insanların duyarlı web deneyimleri oluşturmasına yardımcı olmak için kaynaklar ve haber olanakları sunar. Atomik Tasarım yaratıcısıdır.

Bizler sayfaları tasarlamıyoruz, bizler bileşenlerden sistemleri tasarlıyoruz.

Stephen Hay

Atomik tasarım ile ilgili diğer yazılar:

Makalenin derlenmesinde bradfrost.com’dan ve yine yaratcısı Brad Frost olan atomicdesign.bradfrost.com’ın Chapter 2 yazısından yararlanılmıştır.

1372242240504016021214

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

SENİN İÇİN ÖNERİYORUZ
Girişimciler için ilham verici TED konuşmaları girisimciler-icin-ted

Girişimciler için ilham verici TED konuşmaları

Gizle
KEŞFETMEYE DEVAM ET
Doğrulama önyargısı (confirmation bias) nedir ve kararlarımızı nasıl etkiler?

Doğrulama önyargısı (confirmation bias) nedir ve kararlarımızı nasıl etkiler?

Gizle