Arayüz tasarım sistemleri için 10 öneri
Okuma Süresi:
3
dk.
20 Ağu 2024
Tasarım Sistemi (Design System)
Sisteminizde kısa ve anlaşılabilir isimler kullanın
Uzun ve karmaşık isimlendirmelerden kaçının. Böylece hızlı okumayı ve olası problemlerde çözüme giderken işinizi oldukça kolaylaştıracaktır. Ayrıca kullandığımız araçların arayüz panelleri içerisinde üç noktaya düşmesinin de önüne geçmiş olursunuz.
Değişkenlerinizi anlaşılabilir koleksiyonlara dönüştürün
Değişkenlerinizi atomic yapıyla ayrıştırmanız daima işinizi kolaylaştırmakla birlikte ekibinize yeni katılacak olan tasarımcılar için de oryantasyonu kolay olacaktır. Aynı zamanda ekranlarınızı oluştururken de değişkenler arasında kaybolmayacaksınız.
Değişkenlerinizin kapsamını belirleyin
Koleksiyonlarınızda bulunan değişkenlerinizin kapsamını(scope) belirleyin. Böylece ayrıştırdığınız değişkenleri ilgili bölümlerde gözükmesini sağlayın.
Font’larınızı değişkenlere çevirin
Web sitelerinizi inşa ederken responsive yapılar için yeniden font size belirmek veya ayrı bir stil oluşturmak yerine mutlaka değişken kullanın.
Zemin renklerinizi ayrıştırın
Renk modları arasında yüzey renkleri modlar arasında çakışmaya sebep olacaktır. Light versiyonuzda tasarımınızda problem çıkarmazken dark versiyonunda bu durum tasarımınızı etkileyebilir. Bunun için ön plan renklerinizi ve yüzey renklerinizi daima ayrıştırın.
Koleksiyon modları ile esnekliği ve otomasyonu sağlayın
Değişkenlerinizi modlara ayırarak bileşenlerinizin erişimine ve iş gücünden, zamandan tasarruf sağlayın.
Bileşenleri detaylandırın
Bileşenlerinizi daima özelliklerine ayırın böylece çalışma performansınızı arttırmaya yardımcı olacaktır. Yeni bileşenler yapmanızında önüne geçeceği gibi zamandan da tasarruf sağlayacaktır.
Her bir bileşeni ayrı sayfalara ayırın
Kullandığınız tüm bileşenleri muhakkak ayrı sayfalara ayırmanız size ekranlarınızı tasarlarken kolaylık sağlayacaktır. Sayfalarınızı alfabetik sıraya göre sıralamanız ise aradığınız bileşene hızlıca ulaşabilirsiniz.
Bileşenlerinize açıklamalar ekleyin
Kütüphaneniz genişledikçe kendi yaptığınız bileşenleri bazen bulmakta zorlanacaksınız. Bunun için bileşenlerinize açıklamalar yazabilirsiniz. Böylelikle Figma’da arama yaparken bu açıklamalarıda dahil edecektir.
Bileşen özelliklerinin tümü görünsün
Bazı tasarımcılar buna görünmesin derken bazı tasarımcılar da benim gibi görünmesi gerektiğini düşünüyor. Ben şu an için tüm bileşenlerin gözükmesinden yanayım. Bileşenleri gizlediğimizde olası hatalarda veya geliştirme aşamalarında problem ne/nerede/ne oluyor şeklinde sorgulamalar yaparak hata payımı arttırdığını ve geliştirme yapmayı zorlaştırdığını düşünüyorum.