Design Language System nedir, neden ihtiyaç var ve nasıl oluşturulur?
Daha önce yayınladığım Design Language System yazısının Türkçe çevirisidir.
Bir teknoloji ürünü geliştirilirken, ürün, tasarım ve mühendislik takımları çeşitli proje yönetim metodları kullanırlar. Projeler ve takımlar büyüdükçe, yönetim de gittikçe zorlaşır. Bu gibi durumlarda design language sistemlerinin nasıl hayatı kolaylaştırdığını hep birlikte inceleyelim.
Günümüzde büyük pazar payına sahip şirketler ya yazılım üretiyor ya da yazılımı gelirinin büyük bir parçası olarak kullanıyor. Design in Tech 2017 raporuna göre son 12 ayda büyük firmalar tasarım takımlarını ortalama %65 oranında arttırmış. (design in tech 2017)
Tutarlılık kullanıcı deneyiminde önemli konulardan birisidir. Büyük projelerde tutarlı yapıyı korumak genelde başlı başına bir sorun olmaya başlamaktadır.
Proje kapsamı büyümeye başladığında, verimliliği ve hızı olumsuz yönde etkileyen bazı problemler ortaya çıkabiliyor. Bunlardan bazıları;
- Ürün, tasarım ve mühendislik takımları arasındaki iletişim sorunları.
- Tasarım çıktıları arasında oluşan farklılıklar.
- Yazılımda tekrarlayan kod parçaları nedeniyle oluşan karmaşık kod yapısı ve performans sorunları.
Genellikle proje yönetimlerinde mühendislik takımları verimliliği arttırmak ve standart oluşturmak icin agile, kod kalitesini korumak ve iyileştirmek için ise code review, code coverage ve unit/integration test metodlarını kullanıyor.
Fakat tasarım daha soyut olduğu için geliştirme sürecinde çok fazla kontrol ya da kısıtlama yapılamıyor. Bazı standartları belirlemek için pattern library ya da style guide kullanılıyor.
Projeye dahil olan her yeni tasarımcı herhangi bir style guide ya da pattern library olmadığında tasarım çıktılarında farklılıklar oluşmaya başlıyor. (renk, gölge, tipografi, animasyon hızı, …).
Sonuç olarak tasarım takımından çıkan farklı tasarımlar doğrultusunda mühendislik takımlarından çıkan kod kendini tekrar edecek ve farklı özelliklere sahip animasyon, komponent, etkileşim olarak kullanıcıya sunulacaktır.
Ürün tarafında ise:
- Kötü kullanıcı deneyimi
Ürün içerisindeki tutarsızlıklar kullanıcıda güven algısını etkileyecektir. - Performans
Tekrarlayan kod, sayfa veya uygulama hızını olumsuz yönde etkileyecektir.
Design language system
Arayüzün tekrar kullanılabilen fonksiyonel elemanlarının (buton, form öğeleri, …) ve daha betimleyici olan kısımlarının (ikon stilleri, renk, tipografi, animasyon, …) belirli standartlara uygun olarak tanımlanmasıdır. Diğer bir şekilde ifade etmek gerekirse, markanın kendisini ifade etme biçimi olarak da tanımlanabilir.
Iyi bir design language kullanıldığı tüm platformlarda bir harmoni oluşturur. Standartların (Renk, pattern, animasyon ve etkileşim, …) korunması kullanıcılar üzerinde güven ve aşina olma hissi uyandırır.
Temelleri
Design language’ i gerçek bir dil olarak kabul edebiliriz. Design language birdenbire oluşturulamaz, zaman içerisinde marka ile birlikte adım adım gelişir.
Gelişim sürecinde tutarsız kısımları görüp geriye dönük düzenlemeler ya da yeni uygulanacak kısımları mevcut yapıyla tutarlı bir şekilde geliştirmek gerekmektedir. Bazı temel ilkeler ve pratik yolları takip ederek, sistemin tutarlı bir şekilde geliştiğinden emin olabiliriz.
Terminoloji
Tasarım standartları oluşturmak için değişik kavramlar birbirleri yerine kullanılabilmektedir. Karmaşayı biraz açıklığa kavuşturacak olursak:
- Functional pattern, Component: Tekrar kullanılabilen somut elementler. Buton, form öğeleri, navigasyon, …
- Perceptual pattern, Styles: Duygusal olarak mesaj algısını güçlendirecek functional patterne göre daha soyut standartlar. Renk, Tipografi, Animasyon hızı, …
- Pattern library: Functional ve Perceptual pattern’ lerin tanımlandığı dokümantasyon
- Style guide: Pattern library’i kullanarak markaya uygun standartların belirlendiği dokümantasyon. Örneğin; logo kullanımı, boşluk ayarlamaları, pratik kullanımlara dair örnekleri kapsayan ve geliştirme süreçleri hakkında bilgilendirmeler içerir.
Paylaşılabilir olmalı
Projenin bir bütün ve tutarlı olarak ilerleyebilmesi için design language’ in takımlar arasında anlaşılır olması gerekiyor. Bunu aynı dili konuşanların birbirlerini rahatça anlayabilmeleri olarak da düşünebiliriz.
Design language, proje süresince tasarım ve mühendislik takımları arasında sıklıkla sorulan şu soruların cevaplarını bize verecektir:
- Bu rengin kodu nedir?
- Logomuz nerede?
- Bu elementi daha önce kullanmış mıydık?
- Burada buton kaç piksel olacak?
- Margin ve padding ayarları ne kadar verilmeli?
- Daha önce böyle bir komponentimiz var mıydı?
- Bu sayfa tasarımdaki boyutlara göre entegre edilmemiş tekrar yapabilir misin?
- Bizim komponentlerimiz nerede?
Iyi bir design language system organizasyonu için ürün, tasarım ve mühendislik takımlarını kapsayan style guide kullanılması gerekmektedir. Bunun için aşağıdaki kriterlere dikkat edilmelidir:
- Verimlilik (Efficiency)
Komponent, renk ve element tanımlamaları kolay anlaşılabilir olmalı. Bunun için visual loudness ya da metafor isimlendirmeler yapılabilir. - Örnek uygulama (Best practices)
Takımlar arasında en efektif kullanımlar kod örnekleri ile belirlenmeli. - Marka duygusu (Brand emotion)
Markanın kullanıcıya yansıtmak istediği duygu. (Enerjik, Samimi, Kararlı , Sakin,…) Buna uygun olarak animasyonlara ve renk kullanımlarına karar vermek işi biraz daha kolaylaştıracaktır. - Renk & Ikonografi & Tipografi
Verilmek istenen mesajı görsel olarak desteklemek için renk, tipografi ve ikon kullanımı önemlidir. Marka duygusuna uygun ikonlar tasarlamak mesajın anlamını güçlendirecektir. - Pattern Library
Tüm komponent ve elementlerin birbirleriyle kullanım durumları belirlenmeli. - Animasyon
Animasyon standartları belirlenmesi marka duygusunu yansıtmak için önemli yollardan birisi. - Takım erişilebilirliği
Dokümantasyonun herkes tarafından erişilebilir olmalı. Mümkünse ofis ortamında çıktı alınıp herkes tarafından kolay görünebilir bir yerde sergilenebilir. Bu takım üyeleri tarafından eksik tarafların görülmesi ve aşina olma hissini güçlendirir. - Kullanıcı erişilebilirliği
Renk seçimi ve komponent entegrasyonu yapılırken erişilebilirlik standartlarına uygun olarak oluşturmak daha geniş bir kitleye ulaşmanızı sağlar. - Rehber
Takımın nasıl katkıda bulunacağı, süreçler acıkça belirtilmelidir.
Nereden başlamalı?
Şimdiye kadar her şey kulağa hoş geliyor fakat süreçleri ve yapıyı iyi bir şekilde planlamazsanız bir süre sonra karmaşık bir yapıyı çözmekle uğraşmak zorunda kalabilirsiniz.
Kendi sisteminizi oluştururken takım kültürünüze göre hareket etmekte fayda var. Bu konu ile alakalı bazı kriterler belirleyebilirsiniz.
Kurallar belirleme (Keskin — Serbest)
Sıkı kurallar: Belirlenen kurallardan sapma olmaz ve süreçlere uyulması durumunda tasarım tutarlılığı hat safhada olabilir.
Serbest kurallar: Marka duygusunu ve görsel tutarlılığı on planda tutar.
Katkıda bulunma (Merkezi — Dağınık)
Merkezi model: Kurallar ve süreçler bir grup tarafından yönetilir.
Dağınık model: Süreçlere tüm paydaşlar katkıda bulunabilir.
Inşaa (Modüler — Entegrasyon)
Modüler yapı tüm platformlara uygun, hızlı ürün çıkartmak için bire bir ve tamamen mühendislik takımlarıyla organize çalışma imkânı sunmaktadır. Eğer mesaj algısı güden konsept tasarımlar yapıyorsanız, entegrasyon yöntemi daha faydalı olacaktır.
Son notlar
Design language system, markanın hem mutfak kısmındaki takımlar arası iletişimi için bir standart oluşturuyor, hem de marka imajını belirlemenize olanak sağlıyor.
Illustrasyonlar için Turgay Mutlay’ a teşekkür ederim ;)
Kaynaklar
Design Language — Wikipedia
How to Monetize Happiness — Harvard Business School
Using Visual Loudness for Better Wayfinding — Tom Osborne
Animation in Design Systems — Sarah Drasner
Integrating Animation into a Design System — Alla Kholmatova
Building a Visual Language — Airbnb
Contrast Checker — Webaim.org
w3.org — Web accessibility initiative
Accessibility Developer Tools — Chrome extension by Google
