Selçuk Aker
← Tüm Yazılar

UI & UX Tasarım — · Güncellendi:

Design System Tesliminde Bileşenlerin Yanında Ne Olmalı?

Design system, yalnızca aynı görünüme sahip düğmelerden oluşmaz.

Arayüz bileşenleri, düğme durumları, renk örnekleri ve tasarım sistemi dokümanları
Yazı için hazırlanmış temsili görsel.

Yaklaşık 2 dakika okuma

Design system, yalnızca aynı görünüme sahip düğmelerden oluşmaz. Bir bileşenin nerede kullanılacağını, hangi durumlara sahip olduğunu ve değiştiğinde hangi ekranları etkileyeceğini de tarif eder. Kütüphane büyüklüğünü başarı ölçüsü yapmak yerine ekibin tekrar eden kararlarını ne kadar azalttığına bakmak daha kullanışlıdır.

Durumları birlikte tasarlayın

Bir form alanının boş, dolu, odaklanmış, hatalı ve devre dışı durumları farklı ihtiyaçları karşılar. Hata mesajının yeri ve uzunluğu, başarılı ekran kadar düşünülmeli. Düğmenin yükleme sırasında yeniden tıklanıp tıklanamayacağı gibi davranışlar tasarım ile geliştirme arasında açıkça konuşulmalı.

İsimleri kullanım amacıyla ilişkilendirin

Bir renk tokenını yalnız görünen rengiyle adlandırmak yerine rolünü belirtmek, tema ve ürün değişikliklerini yönetmeyi kolaylaştırır. Metin, yüzey, sınır ve durum renkleri birbirine karışmamalı. Aynı ilke boşluk, köşe ve tipografi kararları için de geçerlidir. Gereksiz varyantlar kütüphaneyi kullanmayı zorlaştırabilir.

Gerçek bir ekranla teslim provası yapın

Geliştirici veya ikinci tasarımcıdan mevcut bileşenlerle bir ekran hazırlamasını isteyin. Sürekli kopya bileşen oluşturması gerekiyorsa sistem ihtiyaçları yeterince karşılamıyor olabilir. Dokümantasyonda kullanım örneği, karşı örnek ve davranış notu bulunması bu aşamada işe yarar.

Son olarak değişiklik sorumlusunu ve sürüm duyuru yöntemini belirleyin. Kütüphanedeki bir güncellemenin ürün koduna otomatik geçtiğini varsaymayın. Tasarım dosyası ile çalışan arayüz arasındaki farklar takip edilmediğinde, iyi düzenlenmiş bir Figma dosyası bile zaman içinde uygulamadan uzaklaşabilir.

Sık sorulan sorular

Design system tesliminde sadece bileşen çizimleri yeterli mi?

Bileşenlerin kullanım amacı, durumları, içerik kuralları ve örnekleri de gerekir. Ekip hangi durumda hangi bileşeni seçeceğini anlayamıyorsa görsel kütüphane tek başına yeterli değildir.

Bir tasarım sisteminin işe yaradığını nasıl sınayabiliriz?

Gerçek içerikli bir ekranı sistemin bileşenleriyle kurmayı deneyin. Eksik durumları, çakışan kuralları ve belirsiz isimleri not ederek teslimden önce düzeltin.

Tasarım sistemi uzmanı seçerken kullanım örneğini sorun

Tasarım sistemi tasarımcısı, bileşenlerin görünümü kadar kullanım kurallarını da açıklamalıdır. Düğmenin hangi durumda seçileceği, form hatasının nasıl gösterileceği ve bileşenin dar ekranda ne yapacağı teslimde anlaşılmalıdır. Çok sayıda çizilmiş parça tek başına kullanılabilir bir sistem oluşturmaz.

Selçuk Aker ile design system tasarımını mevcut ürününüzün tekrar eden ihtiyaçlarından başlayarak planlayabiliriz. Yazılım bileşen kütüphanesi ayrıca geliştirilecekse isim, durum ve sürüm düzeni geliştiriciyle eşleştirilmelidir. UI tasarımcısı rehberi ekran ve bileşen tesliminin ilişkisini açıklar.

Paylaş
SA

Freelance Grafiker · Marka & Tasarım

BİR SONRAKİ ADIM