Bir Tasarım Sistemi Oluşturmak İçin Adım Adım Kılavuz

Giriş

Her yerden ve her yere erişilebilen bu çağda, her yerde bulunmak bir norm haline geldi. Bununla birlikte, tutarlılığın güvenilirlik olduğu da iyi bilinmektedir. Kullanıcılar artık daha bilinçli. Hızlı ve sorunsuz bir deneyim, arayüzden bağımsız olarak temel bir beklentidir.

Ayrıca zaman, boşa harcamayı göze alamayacağınız bir varlıktır. Tüm bunlar sizi web sitenizle veya arayüzünüzle daha fazlasını yapmaya sevk etmek için yeterli olmalıdır. Ancak, tasarımdaki 50 farklı bileşenle hatasız bir şekilde tutarlı olmaya çalışmak zor bir iştir.

"Design System" hayatınızıkolaylaştırmak için burada.

Tasarım Sistemi Nedir?

Bir tasarım sistemi, ürün ekibinin dijital deneyimler yaratmak için yararlanabileceği, açıkça belgelenmiş yeniden kullanılabilir bileşenlerden oluşan kapsamlı bir arşivdir. Başka bir deyişle, tasarım sistemlerini bir şirket için tasarımla ilgili tek gerçek kaynağı olarak düşünün.

Stil Kılavuzları veya Kalıp Kütüphanelerinden daha fazlası olan bir tasarım sistemi sürekli gelişir. UX tasarımı da dahil olmak üzere çeşitli varlıklarla ilgili bu kılavuz ekosistemi, tüm bileşenlerin tutarlı olmasını ve markayla eşleşmesini sağlamak için herhangi bir proje için yapı taşlarından oluşan bir çerçeve olarak kullanılabilir.

Yeni başlayanlar, büyüyen işletmeler ve kurumlar için yararlı olsa da, bir tasarım sistemi, bir ürün geliştikçe temel, tartışılmaz bir varlık haline gelir. Ayrıca iş hedeflerini, iş akışını, ekip çalışmasını, kullanıcı deneyimini ve genel marka deneyimini olumlu yönde etkileyebilir.

Bir Tasarım Sisteminin Faydaları Nelerdir?

Bir sistem tasarımının uygulanmasının bazı faydaları şunlardır

1. Zamanı azaltırken verimliliği artırır - Herhangi bir tasarım sisteminin birincil faydası, tasarım ve geliştirme çalışmalarını hızlı bir şekilde oluşturma ve yeniden yaratma yeteneğidir. Ekipler, tekerleği sürekli olarak yeniden icat etme ihtiyacını azaltmak ve tutarsızlık riskini azaltmak için önceden hazırlanmış öğeleri kullanabilir.
2. Sayfalar ve kanallar arasında görsel tutarlılığı artırır - Kurum genelinde bir tasarım sisteminin olmaması tutarsız görsellere, parçalı bir kullanıcı deneyimine veya markadan soyutlanmaya yol açabilir. Uyumlu bir standartlar seti, büyük ölçekli yeniden tasarımların veya görsel markaların yönetilmesine de yardımcı olur.
3. Ortak birdili teşvik eder - Ortak bir tasarım dili, çapraz işlevli ekipler içinde ve arasında iletişimsizlik nedeniyle boşa harcanan tasarım veya geliştirme süresi olasılığını azaltır.
4. Daha karmaşık sorunlara daha iyi odaklanmayı sağlar - Ekipler, basit kullanıcı arayüzü bileşenleri oluşturulduğunda ve netleştirildiğinde bilgi önceliklendirme, yolculuk yönetimi vb. gibi karmaşık sorunları daha iyi çözebilir.
5. Katkıda bulunanlar için bir referans ve eğitim aracı olarak hizmet eder - Bir tasarım sistemi, personel değişiklikleri durumunda işe alım sürecini kolaylaştırır. Ayrıca, yeni bireysel katılımcıların UI UX tasarımına veya içerik oluşturmaya kolaylıkla katılmasına yardımcı olur.
6. Güçlü ve zamansız bir markaya katkıda bulunur - Bir tasarım sisteminin amacı, yolcularının ürünlerinin arkasındaki belirli bir kimliği ve tasarımı iletmektir. Etkili markalar yaratılmasına ve insanların marka deneyimini hatırlamasına yardımcı olur. Bu, insanların bir markaya daha bağlı hissetmelerini ve markaya daha fazla güvenmelerini sağlar.

Bir Tasarım Sistemi Oluşturmak için On Adımlık Kılavuz

Şirketinizin bir tasarım sistemi oluşturmasına yardımcı olmak için on adımlı bir süreç hazırladık.

1. Mevcut Tasarım Sürecinizi iyice analiz edin.

Strateji oluşturmanın ve herhangi bir süreci başlatmanın ilk adımı, şu anda nerede olduğunuzu anlamaktır. Kuruluşunuzun mevcut tasarım sürecini gözden geçirmek ve analiz etmek, markanız için en uygun sistem tasarımını daha iyi anlamanıza yardımcı olabilir. Kendinize aşağıdaki soruları sorun:

• Kuruluşunuzun mevcut tasarım yaklaşımı nedir?
• Kuruluşunuzun kullandığı mevcut araçlar nelerdir?

Ürün ekibinin tasarım olgunluk seviyesini değerlendirdiğinizden emin olun. Bu, yeni sistemi kuruluşunuzda uygulamak için gereken süreye kabaca erişmenize yardımcı olacaktır.

2. Markanızın Alfabesini Belirleyin

Bir markanın alfabesi, marka kimliğine, yani marka ve ürün değerlerine ve marka diline yol açacaktır. Marka dili şekiller, yazı tipleri, renkler, animasyonlar, ses ve tondan oluşur.

Tasarımcılar, markanın alfabesi tarafından tanımlanan görsel bir dil kullanacaklardır. Marka kılavuzlarını gözden geçirmek ve paydaşlarla konuşmak marka kimliğini ve dilini anlamanıza yardımcı olabilir.

3. Mevcut Ürün AI için Denetim Gerçekleştirin

Mevcut ürün için bir kullanıcı arayüzü denetimi gerçekleştirmek, ürün tasarımında karşılaşılan önemli bir zorluğun üstesinden gelmenize yardımcı olacaktır: tasarım tekrarları. Denetim iki hedefe ulaşmayı amaçlar

• Ürün içinde önemli tutarsızlıkların olduğu alanlara dikkat çekin.
• Ürünün en çok kullanılan ve temel unsurlarını ayırt edin.

UI denetimi çok adımlı bir süreçtir. Temel kullanıcı arayüzü özelliklerini ve bunların bileşenlerdeki kullanımını belirlemek ve analiz etmek çok önemlidir. Stil sayfalarınızdaki benzersiz renklerin ve yazı karakterlerinin sayısını görmek için mevcut araçları kullanabilirsiniz. Daha sonra her web sitesi tasarımını ayrı ayrı öğelere ayırabilirsiniz.

4. Sisteminizin Tasarım İlkelerini Belirleyin

Mükemmel bir kullanıcı deneyimi yaratmak için tasarım kararlarının arkasındaki nedenleri anlamak zorunludur. Ayrıca, net bir hedefler dizisi, tasarım ilkelerini tanımlamayı ve ekiplerle koordinasyonu kolaylaştırır.

Bir tasarım sistemi sürecine sahip olmak ister misiniz? Bu sorularla başlayın:

• Ne yaratıyorsunuz?
• Neden bunu yapıyorsun?
• Nasıl inşa edeceksiniz

Tasarım ilkelerinin marka değerlerinizi ve vizyonunuzu yansıtması gerekir.

5. Bir Bileşen Kitaplığı Oluşturun

Desen Kitaplığı olarak da bilinen bu kitaplık, kullanıcı arayüzünüzün tüm işlevsel ve dekoratif unsurlarını içermelidir. Bileşenleri projeye, kullanıcı ihtiyaçlarına ve iş hedeflerine göre değerlendirin ve ihtiyacınız olanları elinizde tutun.

6. Kuralların Oluşturulması

Tasarım sistemleri, tasarımcıları belirli bir tasarım yönüyle kısıtlamak için inşa edilmemiştir. Aksine, sadece tasarımcılara ve geliştiricilere yaratıcı yönü genişleten ve yeniliğe yer açan temel bir çerçeve sağlaması beklenir.

Alla Kholmatova'nın kitabında da belirtildiği gibi, bunlar Tasarım Sistemi kurallarına yönelik iki yaklaşımdır:

• Katı Kurallar - Tasarımcılar ve geliştiriciler yeni kalıpları veya bileşenleri tanıtmak için titiz bir süreç izler.
• Gevşek Kurallar - Bu kurallar, tasarımcıların ve geliştiricilerin daha iyi tasarımla sonuçlandığına inandıkları takdirde katı kısıtlamalara bağlı kalmadan yaratmalarına izin verir.

Hayatın diğer birçok alanında olduğu gibi, bu kurallar arasında doğru dengeyi bulmak çok önemlidir, böylece ürün yaratıcı olurken tutarlı da olabilir.

7. Yönetişim Modelinizi Seçin

Dinamik, sürekli gelişen tasarım sistemleri, değişiklikleri onaylamak ve uygulamak için basit bir süreç gerektirir. Üç yönetişim modeli vardır:

• Yalnız model - Bir birey veya bir grup birey tasarım sistemi sürecini doğrudan "yönetir".
• Merkezi model - Tek bir ekip sorumludur ve sistemin gelişimine rehberlik eder.
• Federe model - Çeşitli gruplardan birden fazla kişi sistem tasarım sürecini yönetir.

Bu modellerin her birinin artıları ve eksileri olsa da, özellikle tekli model, sorumlu bir kişinin birçok görevin yerine getirilmesinde darboğaz oluşturmasına yol açabilir. En iyisi, ihtiyaçlarınıza uygun olarak farklı modellerin bir kombinasyonunu kullanmaktır.

8. Bileşen Yapısını Tanımlama

İşlevsel bileşenlerin çoğaltılması tasarım sistemlerinde önemli bir zorluktur. Bu, esnek olmayan bir sistemle sonuçlanır ve tasarımcıların (ve geliştiricilerin) her yeni senaryoda yeni öğeler oluşturmasını gerektirir.

Başarılı sistem tasarımları yüksek oranda yeniden kullanılabilir ve kullanıcıların bunları kendi ürünleri için temel olarak kullanmalarına olanak tanır. Bu nedenle, farklı içeriklerde yeniden kullanılabilecek unsurların geliştirilmesi tavsiye edilir.

Yeniden Kullanılabilir ve Ölçeklenebilir Bileşenler için Kriterler:

• Modüler - Bağımsız bileşenler ve değiştirilebilir elemanlar.
• Birleştirilebilir - Yeni bileşenler oluşturmak için mevcut bileşenleri birleştirin
• Özelleştirilebilir - Çok sayıda bağlamda çalışan özelleştirilebilir bileşenler.

9. Tüm Ekiplerin Ortak Bir Dil Kullandığından Emin Olun

Bir tasarım sisteminin amacı, sorunsuz ekip çalışmasını kolaylaştırmayı içerir. Bu nedenle, sistemin ekiplerin iş akışına entegre edilmesi hayati önem taşır. Ekip üyelerine değer sunarken üretkenliği artırır.

İlk entegrasyon sürecinde çeşitli kişilerin tasarım sistemini nasıl kullandığını daha iyi anlamak, sistemi buna göre değiştirmenize yardımcı olabilir.

10. Değişiklikleri Düzenli Olarak İletin

Bir tasarım sistemi süreci kuruluşla birlikte gelişir ve statik olamaz. Bu nedenle, sistemi kuruluşunuza tanıttıktan sonra, tüm değişiklikleri bildirmek ve kuruluşu güncel tutmak çok önemlidir.

Özlü ve bakımlı bir değişiklik günlüğü, kullanıcıların çeşitli yükseltmeleri ve bunların işlerini nasıl etkileyeceğini anlamalarına yardımcı olabilir.

Başlamanıza Yardımcı Olacak Üç Örnek

Atlassian Tasarım Sistemi

(https://atlassian.design/)

Avustralyalı ünlü bir kurumsal yazılım şirketi olan Atlassian Design System, dünya çapında çevik, dağınık ekipler arasında sorunsuz işbirliği sağlamayı amaçlamaktadır.

Atlassian'ın yaygın olarak kullanılan işbirliği araçlarından ikisi olan Trello ve Jira, şirketin tasarım felsefesini tam olarak yansıtıyor. Bu felsefe, ekiplerin ve bireysel ekip üyelerinin üretkenliğini ve genel potansiyelini artırmak için dijital deneyimden yararlanmakla ilgilidir.

Bununla birlikte, Atlassian Tasarım Sistemi, çevik teknikler ve ürün planlamasından teslimata kadar bir projenin her aşamasının etkili bir şekilde izlenmesini sağlar. Bu da nihayetinde ürünlerin yaratılması ve teslim edilmesinde faydalı sonuçlar doğurur. Tasarım sistemleri temel olarak şunları içerir:

1. Tasarım Kılavuzları
2. Marka Standartları
3. Ürün
4. İllüstrasyon
5. Prototipleme
6. Pazarlama
7. Kişilik

IBM Tasarım Sistemi

(https://carbondesignsystem.com/migrating/guide/design)

IBM, küresel olarak faaliyet gösteren ve kendi tasarım sistemini takip eden büyük bir BT kuruluşunun en iyi örneğidir.

Yetenekleri arasında iş danışmanlığı ve finansmandan yazılım oluşturmaya, BT barındırma/yönetimine ve yazılımı donanıma bağlayan çözümlere kadar her şey bulunmaktadır.

IBM'in temel ilkesi, ister insan toplumu ister bir marka olsun, bilimi, aklı ve zekayı kullanarak sürekli ilerleme sağlamaktır.

IBM'e göre iyi bir tasarıma sahip olmak sadece bir gereklilik değil, aynı zamanda kullanıcılara karşı bir taahhüttür. İşte Adobe, Axure ve Sketch ile çalışan geliştiricilere ve tasarımcılara zengin araçlar ve kaynaklar sağlayan Carbon Design System'in öne çıkan özelliklerinden bazıları:

1. Veri Görselleştirme
2. Desenler
3. Bileşenler
4. Kılavuz İlkeler
5. Öğreticiler

Uber Tasarım Sistemi

(https://baseweb.design/)

Hepimiz en az bir kez Uber'e binmişizdir. Amerikan teknoloji şirketi, yemek teslimatı, araç çağırma, eşler arası yolculuk paylaşımı ve scooter ve elektrikli bisiklet kullanan mikro hareketlilik dahil olmak üzere harekete dayanıyor.

Uber'in bu tür bir hizmetin tüm alt markalar, dahili markalar, ürünler ve projeler genelinde kusursuz bir şekilde işlemesi için verimli bir sistem tasarımına ihtiyacı vardır.

Uber Tasarım Sistemi'nin başlıca özellikleri şunlardır:

1. Marka Mimarisi
2. Kompozisyon
3. Ses Tonu
4. Hareket
5. İllüstrasyon
6. Fotoğrafçılık
7. İkonografi
8. Renk
9. Logo
10. Tipografi

İlk Tasarım Sisteminizi Oluşturmadan Önce Bilmeniz Gerekenler

1. Erken, Açık İletişim Yeni En İyi Arkadaşınızdır

İç tüketicilerinizi hemen sürece dahil etmek karmaşık olabilir. Aslında, geri bildirimleri belirsizse, alfa veya beta sürüm döngüsünde çok erken verilmişse veya yararlı değilse süreci engelleyebilir.

Müşterilerinize, tasarım sistemi kullanıcılarına, yapıcı geri bildirim aldığınızdan emin olmak için neye ihtiyacınız olduğunu söyleyin. Erken bir yayın öncesi döngüdeyseniz, tam olarak istediğiniz girdi konusunda dürüst ve net olun. Bu, ürünün en önemli kusurlarını aradığınızı ve yüksek doğrulukta eleştiriler istemediğinizi gösterir.

Aşırı düşünmeye, zihninizi soldurmaya dikkat edin ama aşırı iletişim kurmaktan da çekinmeyin.

2. Takip etmeniz gereken tek şey ayak izleriniz değil

Önceliklendirmenin önemli bir eksik parçası, genellikle tasarım sistemlerinin kullanımını izlemektir. Sistemin nerede, kim tarafından, ne sıklıkla kullanıldığını ve güncelleme sıklığını anlamak zorunludur.

Hangi ekiplerin kütüphanenin tam olarak hangi sürümlerini kullandığına dair bazı günlük istatistiklerin uygulanması, benimseme, yükseltme ve düşürme oranlarının adil bir şekilde anlaşılmasını sağlar.

Nadiren güncelleme yapan ekipleri belirlediğinizde, yükseltmeyi engelleyen sorunları bilmek ve daha sonra bunları düzeltmek için hareket edebilirsiniz.

3. Geri Bildirim Mekanizmaları GOT'taki Rhaeghal kadar hafife alınıyor

Sisteminizin sadece kullanıcılar için değerli değil, aynı zamanda kendilerini bir parçası hissettikleri ve aktif olarak katkıda bulundukları bir şey olmasını sağlamak için, insanların geri bildirimde bulunmaları (Slack, e-posta vb.) ve sisteme katkıda bulunmaları için basit ama anlaşılır yollara sahip olmak önemli bir parça olacaktır.

Her zaman mümkün olduğunca çok alanda nasıl ve nerede geri bildirimde bulunulacağına dair talimatlar verin ve hiçbir zaman, özellikle de bir kullanıcının bunu en belirgin olduğunu düşündüğünüz yerde bulacağını varsaymayın.

Bir Tasarım Sistemi Kuruluşunuzun İhtiyacı Olan Kutup Yıldızıdır

Başarılı, iyi hazırlanmış bir tasarım sistemi şirketin omurgasının bir parçası haline gelir ve tutarlı ve güçlendirilmiş deneyimlerle sonuçlanır. Buna ek olarak, tasarımcılar ve geliştiriciler temel yapı taşlarını bir araya getirmek zorunda kalmak yerine ürünün amacını daha iyi iletme fırsatı bulurlar.

Herhangi bir genel uzman, bir tasarım sunma konusunda ortağınız olabilir, ancak yalnızca bir tasarım uzmanı, özellikle sizin için bir tasarım sistemi oluşturmak üzere mevcut sorunları, zorlukları ve istekleri belirler. Şimdi bekleme zamanı değil. Bir tasarım sisteminin nasıl oluşturulacağına dair bu kapsamlı kılavuz sayesinde, üretim sürecinizin tamamen dönüştürülmesinden sadece bir girişim uzaktasınız.

Referanslar

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081