Design Language System nedir, neden ihtiyaç var ve nasıl oluşturulur?

Hamza ERBAY
Feb 26, 2018 · 6 min read

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)

Büyük teknoloji firmalarının son 5 yıldaki tasarımcı-yazılımcı oranı. (TechCrunch)

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ı;

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:


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:

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:

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:

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


Türkçe Yayın

Düşünce ve fikir hürdür. 'Türkçe Yayın' her düşünce ve fikri duyurmayı amaçlayan özgür blog platformudur.

Hamza ERBAY

Written by

Senior Software Engineer@Udemy. UI/UX Designer. https://www.hamzaerbay.com http://www.dribbble.com/hamzaerbay

Türkçe Yayın

Düşünce ve fikir hürdür. 'Türkçe Yayın' her düşünce ve fikri duyurmayı amaçlayan özgür blog platformudur.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade