Design System (Tasarım sistemleri), UX tabanlı uygulamalar oluşturmak için tercih edilen, belirli standartları olan ve dilediğin zaman yeniden kullanabileceğin bileşenlerin özel bir koleksiyonudur. Çok yönlü bir şekilde kurgulanabilen ve güncel UI öğelerini içinde barındıran design system, tasarımcıların ve geliştiricilerin her şeyi kolayca organize edebilmelerine, tasarım kararlarının neden ve nasıl alındığını görmelerine yardımcı olur. Tasarım sistemlerinin önemini anlamana ve kendi projeni hayata geçirmene yardımcı olacak önemli noktalara yakından göz atalım.
Bu İçerikte Yer Alan Ana Başlıklar:
• Design System (Tasarım Sistemleri) Nedir?
• Design System Neden Önemlidir?
• Design System Nasıl Yapılır?
• Atomik Tasarım Nedir?
• Jr.UX Designer 5. Sezon
Design System (Tasarım sistemleri), sayfa düzeni içinde yer alan varlıkları, farklı tasarımcıların ortak bir şekilde kullanmaya olanak tanıyan bir belgeler bütünüdür. Tasarım kitaplığı veya hazır kütüphane gibi isimlerle de bilinen design system kavramı, ekip üyelerinin ortak kullanımı için organize edilebilen, merkezi bir alanda toplanarak belirli kurallar ve standartlar dahilinde yönetilebilen bir rehberdir. Ölçek üzerinde çizilen veya illüstrasyon programları ile tasarlanılan çıktılar bir tasarım sistemine dönüşürken onlarca problemle karşılaşabilirsin. Google Material Design System veya Apple Design System gibi parçadan bütüne doğru uzanan komponent temelli bir tasarım sistemi kullandığında ise işlerin sırasıyla nasıl tamamlandığı görebilirsin. Design system yaratmanın amacı da zaten budur, tasarım sürecindeki yükü azaltmak.
Tasarım sistemleri neden bu kadar önemli? Bu durumu daha iyi anlamak için yakından bakalım.
•Design System uygun şekilde kullanıldığında tasarım ekibine çok sayıda fayda sağlar.
•Tasarım şablonları sayesinde hızlı, tekrarlanabilir, geliştirilebilir ve ölçeklenebilir projeler üretebilmek mümkündür.
•Büyük ölçekli projelere, karmaşık yapılara odaklanırken tasarım kaynaklı sorunları ve bu sorunların yaratabileceği baskıyı ortadan kaldırır.
•Tasarım ekipleri arasındaki entegrasyonu güçlendirerek farklı birimler ile iş birliği yapabilmeye yardımcı olur.
•Dil birliği sağladığı için farklı kanallar arasındaki görsel tutarlılığı da garanti eder.
•Tasarımın inceliklerine ve front-end yazılım tecrübesine sahip olmayan ön yüz tasarımcıları, editörler ve medya üreticileri tarafından kolaylıkla kullanılabilir.
Design System yaparken doğru planlama oldukça önemlidir. Eğer farklı bir sıralama ile gidilirse sürekli değiştirilmesi gerekilebilir bu da tasarım sürecine zarar verir, bu yüzden doğru bir sıralama ile adımları takip etmek oldukça önemlidir.
Mevcut Tasarım Sürecini Gözlemle
Tasarım sistemi, mevcut tasarım sürecinin analiz edilmesiyle başlar. Uygulamayı düşündüğün tasarım sisteminin yapısını ve özelliklerini daha iyi kavrayabilmek için şirketinin mevcut tasarım yaklaşımını iyi bir şekilde analiz etmen gerekir.
Tasarım Dilini Belirle
Renk paletleri, fontlar, animasyonlar, şekiller ve ses efektleri gibi marka dili öğeleri ile markanın tasarım dilini ve stil kılavuzlarını tanımlayabilirsin.
Kullanıcı Arayüzü Oluştur
Ürün tasarımındaki en can alıcı konulardan biri de parçalanmaya ve tutarsızlığa yol açan tasarım tekrarlarıdır. Tasarım tekrarlarının önüne geçebilmek için farklı birimler arasında ortak olarak kullanılabilen benzer stile sahip bir arayüz oluşturabilirsin.
Tasarım İlkelerini Tanımla
Tasarım kararlarının arkasındaki neden sonuç ilişkisini anlamak, benzersiz bir kullanıcı deneyimi oluşturabilmek için büyük önem taşır. Tutarlı ve çok yönlü tasarım kuralları belirleyerek işlerini kolayca organize edebilirsin.
Tasarım Sistemini Güncel Tut
Tasarım sistemi, statik bir eserler topluluğu değildir, ürün tasarımının bir yan ürünü olarak zaman içinde değişim gösterir. Tasarım sürümleri ve aşamaları için geliştirilen güncellemeler ile stabil ve kullanıcı dostu bir dizayn sistemi oluşturabilirsin.
Parçadan Bütüne Doğru İlerle
Stil hakkında genel bilgileri edindikten sonra temel bileşenleri inceleyebilirsin. Brad Frost'un atomik tasarım metodolojisini kullanarak komple bir tasarım için gerekli olan tüm ögeleri gruplar halinde kullanmaya başlayabilirsin.
Modern arayüzlerin nasıl kurgulanması gerektiğini gösteren atomik tasarım, birbirinden bağımsız komponentlerin tıpkı lego parçaları gibi ufaktan büyüğe doğru birleştirilmesini sağlayan en güncel tasarım sistemlerden biridir. Brad Frost tarafından geliştirilen atomik tasarım, sayfa arayüzlerinin daha açık bir düzen ve hiyerarşi içinde oluşturulabilmesine olanak tanıyan bir tekniktir. Atom tasarım metodolojisi, maddenin bileşiminin incelenmesini temel alır. Periyodik element tablosunu örnek alan atom tasarım dizilimi, atomik elementlerden ilham alınarak oluşturulur. Kimya ile aranız iyiyse atomik tasarım düzenini öğrenmek çok daha kolay olacaktır. Örneğin; kimyada oksijen ve hidrojen, bağımsız özelliklere sahip iki element iken birleştiklerinde kendilerine özgü özellikleri olan bir molekül oluşturur. İki hidrojen ve bir oksijen bir araya geldiğinde su bileşenini oluşturur. Tasarım dünyasında da durum, bu bileşenlerle benzerlik gösterir.
Atom tasarım sisteminin 5 farklı aşaması vardır. Bu tasarım sisteminin ilk üç adımı kimya derslerinden aşina olduğun temel atom sistemine göre modellenir. Her seviyede, bir önceki seviyenin ögeleri toplanarak bir sonraki bütün üzerine eklenir. Bunlar;
1- Atomlar
2- Moleküller
3- Organizmalar
4- Şablonlar
5- Sayfalar
Atomlar, tıpkı kimyada olduğu gibi tasarım sisteminin de en küçük yapı taşını oluşturur. Küçük elementlerin yerini menü simgeleri, ikonlar, butonlar ve etiketler gibi ufak tasarım ögeleri alır. Küçükten büyüğe doğru ilerleyen bir formülü takip etmek tasarımını formüle edebilmek ve desen kalıpları oluşturabilmek açısından da büyük önem taşır.
Birbirinden bağımsız atomik tasarım öğeleri, kendi özelliklerini taşıyan bir üst molekülü oluşturur. Çok sayıda atom parçası kendi imzasını ve yapısal özelliklerini de moleküle aktarır. Örneğin; bir profil avatarını ele alalım. Avatarı oluşturan atom parçaları; çerçeve, profil görseli, H2/H3 alt başlıkları ve görsel arka planı şeklinde belirlenebilir. Tüm bu atom parçalarını birleştirerek profil blokları oluşturabilirsin.
Moleküllerin birleşmesinden oluşan organizmalar sayesinde iç içe geçmiş tasarım alanları hazırlayabilirsin. Atom ve molekül bileşenlerinden daha komplike bir yapı kurmak istediğinde organizmalara başvurabilirsin. Örneğin; molekül seviyesinde oluşturduğun profil şablonunu daha da geliştirerek komple bir kullanıcı detay veya yorum alanı hazırlayabilirsin. Hali hazırda oluşturmuş olduğun profil şablonuna özel efektler, arka planlar ve içerikler ekleyebilirsin.
Şablon, organizmaları ve diğer tasarım parçalarını uyumlu ve düzenli bir tasarıma dönüştürmeye başlayabileceğin ilk yerdir. Organizmaları hazırlarken tüm alt tasarım öğelerinin atom ve moleküllerden yararlanılarak işlevsel içerik bloklarına dönüştürüldüğünü ve bu blokların da farklı sayfalarda kullanılabilecek bir tasarım kalıbı oluşturmaya başladığını bu aşamada görebilirsin. Gelecekte oluşturduğun tüm sayfalarda daha önceden oluşturduğun şablonları kullanabilirsin. Farklı organizmaların bir araya geldiği şablonlar sayesinde sayfa içindeki kullanıcı yorumları, marka logoları, istatistiksel verileri ve iletişim bilgileri gibi temel alanları UX yapısına uygun olarak düzenleyebilirsin.
Şablon örneklerinin yan yana veya aşağı doğru sıralandığı alanlar bütünü, sayfaları oluşturur. Atomik tasarım metodolojisinin son aşaması olan sayfalar, site içindeki alanları daha düzenli şekilde kullanıcılarına sunmaya ve içeriklerini dinamik bir yapıya kavuşturmaya da olanak tanır. Sayfalar içerisinde atomik tasarım unsurlarının tamamını kullanabileceğin gibi sayfa düzeni için sadece belirli organizmaları ve şablonları kullanmak da tercih edilebilir.
Atomik tasarım ilkelerini takip etmek, iyi bir tasarımcı olmak isteyen herkese tasarımını formüle etme ve sağlam bir yapı içinde birleştirme olanağı sunar. Atomik tasarım, devasa ölçekteki projeleri dahi, bir düzen ve uyumluluk içinde hazırlamak için en ideal metodolojilerden biridir. Kullanıcı öncelikli bir yaklaşım için de harika olan Atomic Design sayesinde farklı bileşenleri bir arada rahatlıkla kullanabilirsin. Atomu temsil eden en küçük tasarım parçalarından, molekülü simgeleyen tasarım bileşenleri hazırlayabilirsin. Tasarım bileşenlerinden şablonlara ve oradan da sayfalara geçme fikrini aklında tutarak tasarımının tamamını kendi ellerinle kurgulayabilirsin. Tasarım sürecinde ihtiyaç duyulan tüm ögelerin haritasını çıkarabilir, kendi kütüphaneni oluşturarak dizayn çalışmalarının her aşamasında kusursuz bir bütünlük sağlayabilirsin.
UX ve UI tasarımcılarının sıklıkla kullandığı, tasarımların ortak bir dile sahip olmasına yardımcı olan Design System (Tasarım Sistemleri) hakkında daha fazla bilgi sahibi olmak için Online gerçekleşen UI Eğitimimize göz atabilirsiniz. Jr.UX Designer 5. Sezondaki konu başlıklarından biri olan Design System (Tasarım Sistemleri) dersini izlemek ve Jr.UX Designer’a katılarak kendinizi geliştirmek istiyorsanız, derslere ve ilgili çalışmaya buradan ulaşabilirsiniz.
-min.jpg)
