Her tasarımcının kendine ait geliştirdiği bir tasarım sistemi vardır. Bu tasarım sisteminin, sizin, müşterilerinizin ve kullanıcılarınızın ne kadar ihtiyacını karşılayıp, karşılamadığı önem kazanıyor. 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öylenmiştir. 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ı. Buyrun, birlikte inceleyelim!
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:
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
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
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.
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.
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.
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.
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.
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.
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ı.
Ş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…
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.
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.
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.
Merhaba,
Bu güzel anlatım için teşekkür ederim.
Diğer yazılar başlığında kırık linkler var.
http://chatrjr.name/web/atomic-design-makes-me-feel-like-a-chemist/
http://smm.zoomquiet.io/data/20110511083224/index.html
Merhaba! Geri bildiriminiz için çok teşekkürler. Belirttiğiniz kırık linkleri güncelledik. Keyifli okumalar!