Alışveriş sepetiniz şu an boş
Tüm eğitimlere göz atarak ilgi duyduklarını sepetine ekleyebilirsin.
Makaleler
Tasarım Sistemleri Rehberi II: “Design system” nasıl oluşturulur?
Tasarım sisteminin ne olduğunu ve neden önemli olduğunu rehberin ilk bölümünde öğrendik. Şimdi ise, bir tasarım sisteminin nasıl oluşturulduğuna göz atacağız.
Geçen hafta, Tasarım Sistemleri Rehberi’nin “Design system” nedir ve neden önemlidir? başlıklı ilk bölümünde, tasarım sistemlerinin ne olduğuna ve neden önemli olduğuna değinmiştik. Bu bölümde ise tasarım sistemleri oluşturmak için nelerin gerekli olduğuna ve bir tasarım sisteminin nasıl oluşturulduğuna göz atıyoruz.
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ş.
Bu makale, InVision Inside Design'ın izniyle, Will Fanguy tarafından kaleme alınan A comprehensive guide to design systems başlıklı makaleden Türkçeye çevrilmiştir.
Bir tasarım sistemi oluşturmanın temel adımları ve faydaları nelerdir?
- Bir görsel tasarım analizi gerçekleştirin
Bir uygulama, bir websitesi ya da başka bir dijital ürün olsun, bir tasarım sistemi oluşturmanın ilk adımı, mevcut tasarımın detaylı bir analizini gerçekleştirmektir. Kullandığınız CSS’in ve elementlerin görsel kalitesinin envanterini çıkarmak, bu sürecin ne kadar efor gerektireceğini öngörmenizi mümkün kılar.
- Bir görsel dil oluşturun
Görsel dil, bir tasarım sisteminin çekirdeğidir ve dijital ürününüzü oluştururken kullanacağınız görülebilir bileşenlerden meydana gelir. Görsel dil, aşağıdaki 4 ana kategoriden oluşur ve tasarlanacak ekranlardaki her bileşenin görsel unsurlarının hangi rolü üstleneceğini değerlendirmeniz gerekir.
Renk
Tasarım sistemlerindeki ortak renkler, markanızı temsil eden 1-3 ana renkten meydana gelir. Ancak, tasarımcılara birkaç farklı seçenek daha sunabilmek adına bu ana renklerin açık ve koyu alternatiflerini de tasarım sisteminize katmak isteyebilirsiniz.
Tipografi
Çoğu tasarım sisteminde sadece 2 font bulunur: Başlıklar ve paragraflar için 1 tane, yazılım ve kod blokları için de monospace bir tane. Kullanıcıyı yormamak ve ona aşırı yüklenmemek için işleri sade tutmakta her zaman fayda vardır. Fontların sayısını düşük tutmak tipografik tasarım için en iyi pratiklerden biri olmanın yanı sıra, fazla çeşitte font kullanımının ortaya çıkarabileceği performans problemlerini de önlemenizi sağlar.
Boyut ve boşluklandırma
Boşluklandırma ve boyutlandırma amacıyla kullandığınız sistem kendini en çok tasarımınızda ritm ve denge olduğunda ortaya çıkarır. 4’lük tabanlı ölçekler, iOS ve Android standartlarına, ICO boyutlandırmalarına hatta standart tarayıcı font büyüklüklerine uyum sağlaması açısından her geçen gün daha yaygınlaşıyor.
İmgeler
İmgeler konusunda başarıya ulaşmanın anahtarı, bir plan oluşturmak ve ona bağlı kalmaktır. İllüstrasyonlar ve ikonlar için bir kılavuz oluşturun ve duruma (ihtiyaca) en uygun görsel formatını kullanın. - Bir arayüz (UI)/patern kütüphanesi oluşturun
Tasarım elementlerinizin görsel kalitesini incelediğiniz görsel tasarım analizinin aksine, bu adım tasarlanacak arayüzün gerçek bileşenlerine odaklanır. Yayında olan ve halihazırda kullanılan tasarımın bütün parçalarını ve bileşenlerini toplayın. Butonları, formları, modal pencereleri ve görselleri; kısaca, arayüzü oluşturan her şeyi. Birleşebileceğini düşündüğünüz bileşenleri birleştirin, ihtiyaç duymadıklarınızı ise çıkarın.
- Bileşenlerin ne olduğunu ve ne zaman kullanılacağını belgeleyin
Bu aşama çok önemli. Standartları belirlemek ve belgelemek, patern kütüphaneleri ile tasarım sistemlerini birbirinden ayıran şeyin ta kendisidir.
Tasarım sisteminiz üzerinde çalışmaya başlamadan önce, biraz durup, bunu hayata geçirmek için ihtiyaç duyacağınız takımı düşünün. Bu sürece kimlerin dahil olması gerekiyor.
**spoiler** Bunun için tasarımcılardan daha fazlasına ihtiyaç duyacaksınız. **spoiler**
Jina Anne, Salesforce
Tasarım sisteminizi oluşturmaya başlamanın en iyi yolu, Sketch’te Design System Manager‘ı kullanmak.
Dosyalarınızı takımınız içinde senkronize edebilmek amacıyla, yaptığınız değişiklikleri paylaşımdaki kütüphanenize gönderebilir, sembolleri, metin ve renk stillerini takımınızla paylaşabilirsiniz. Eğer kütüphanenizi Dropbox ya da başka bir paylaşımlı klasör üzerinden paylaşırsanız, buluttaki varlıklarınıza yönelik güncellemeler konusunda bildirimler alabilirsiniz. Hatta bu değişiklikleri almak için tek tuşa basmanız yeterli olur. Design System Manager ile ilgili daha fazla bilgi için şu destek makalesine göz atabilirsiniz.
Tasarım sistemi oluşturma pratikleri ve takımınızın ürün kalitesini artırırken “tasarım borcu”nu azaltmasını nasıl sağlayabileceğiniz hakkında detaylı bilgi için InVision’un Design Systems Handbook belgesine göz atabilirsiniz.
Design System Manager ile yapabileceklerinize kısaca göz atalım:
- Tek ve merkezi bir belge oluşturun
Tüm marka ve kullanıcı deneyimi (UX) bileşenlerinizi tek yerden yönetin ve takım üyeleri arasında senkronizasyon sağlayın. - Kolayca tasarlayın
Kütüphanelere direkt Sketch ya da InVision Studio içinden ulaşın, varlıklardan iç içe geçen sembollere tüm değişiklikleri tek tıkla gönderin ve alın. - Tasarım iterasyonlarınızı güvenle oluşturun ve yönetin
Değişiklikleri bütün takımla paylaşın böylece tasarımcılar en güncel versiyonu kullanabilsin ya da önceki versiyonlara diledikleri zaman dönebilsin. - Güncellemeleri iş birliği içinde yönetin
Roller ve yetkiler sayesinde hangi kütüphaneyi kimin görüntüleyebileceğini ya da kimin düzenleyebileceğini belirleyin. - Harici takımlarla paylaşın
Otomatik olarak oluşturulan ve istendiği gibi düzenlenebilen web portalı sayesinde proje paydaşlarının tasarımları, dokümantasyonu ya da kodu önizlemesini ya da kullanabilmesini sağlayın. - Kodu güncel tutun
Manuel güncellemelere ya da zaman harcayan spesifikasyon güncellemelerine ihtiyaç duymadan, yazılımcıların DSM API yardımıyla canlı kodu entegre edebilmesini sağlayın. - Gizli bilgileri koruyun
Büyük organizasyonlar için sunulan SSO, Özel Bulut ve daha fazla özellik sayesinde, şirketin stratejik varlıklarını korumaya alın.
Tasarım sistemi oluşturma metodları ile ilgili değerli içerikler
Design systems: Zero to one
Pivotal Labs — Paul Farino, bu videoda bir tasarım sistemi oluşturmanın yaşam döngüsünü ve iteratif inşa sürecini, iç paydaşların dahil edilmesine ve bir tasarım sistemini ölçeklendirmenin ve yönetmenin inceliklerine değinerek anlatıyor.
Promoting a Design System Across Your Products
A List Apart — Tasarım sistemlerini bir sprint olarak değil, bir maraton olarak düşünün. Yoğun bir eforun temelini oluşturuyorsunuz. Organizasyonunuzu ürün portfolyosu üzerinden analiz ederek, önemli bir köşe taşını — tasarım sistemini — güçlendirerek daha kuvvetli bir deneyim elde edin.
A List Apart makalesini okuyun →
Each screen isn’t a special snowflake
Brad Frost, InVision Blog — Bir sistemi zaman içinde yönetmek ve ayakta tutmak oldukça zordur. Örneğin, yatay tab bileşeninde bir hata oluştuğunda ne olacak? Kart paterninin tasarımı elden geçirildiğinde ne olacak? Veri tabloları paterni takımın ihtiyaçlarının %90’ını karşılıyor fakat beklentileri tamamen karşılayabilmek için bazı düzenlemelere ihtiyaç duyuyorsa? Bu süreçleri daha sistem tamamlanmadan netleştirmek, devam eden başarı için çok önemlidir.
Selling a Design System at Your Company
UXDesign.cc — Bir fikri ya da tasarımı satmak, genellikle bir toplantıdan daha fazlasını gerektirir. Öğretim ve eğitim fırsatları oluşturun. Hikaye anlatıcılığınızı kullanın. Takımınıza, daha iyi bir yöntemin var olduğunu gösterin. Dikkat çekici bir sunumla insanların heyecanlanmasını sağlayın. İçinizdeki Don Draper’ı ya da 2007’deki Steve Jobs’ı keşfedin.
Şirketinizde bir tasarım sistemi oluşturun →
Designing a Design System
Jina Anne, Salesforce, ‘You Gotta Love Frontend’ Conference 2016 —
Bu konuşmadaki başlıklar, etkili bir tasarım sistemi için yaklaşım, tasarım ve üretim stratejilerini barındırıyor. Faydanın sürekliliğini nasıl sağlayacağınızı ve tasarım sistemlerini sürdürülebilir kılmak için hangi öğelerin kritik olduğunu Jina Anne’in konuşmasında öğrenin.
Boyut ve boşluklandırma bölümdeki “4’lük tabanlı ölçekler” den kast edilen tam olarak nedir? Google’da aratmama rağmen konuyla ilgili net bir kaynağa ulaşamadım.
Merhaba! Orijinal makalede “4-based scale” olarak geçen bu terim, arabirim öğelerinin boyutlarında, grid sistemlerindeki sütunlar ve boşluklarını belirlerken artık yaygın olarak 4’e kalansız bölünebilen rakamlar kullanılmasını ifade ediyor. Bunun başlıca nedeni, akıllı telefon ve bilgisayar gibi yaygın olarak kullanılan cihazlarda ekran ölçülerinin de 4’e bölünebilen rakamlar olması.