Design System — Part I
Yalnız değilsin
Neredeyse her gün üzerinde çalıştığımız ürün için yeni özellikler geliştiriyoruz, prototip hazırlıyoruz ve sprintlerde birbirini kovalarken tutarlı kalabilmek, yazılımcılar ile handoff a hazırlanmak pek kolay olmuyor. Çok iyi anlıyorum.
Bunun üstesiden gelmenin bir yolu var; “Design System”
Kast ettigim şey ”hadi butun form elemanlarını bir Figma dosyasında toplayalım” demek değil. Organizasyonun temelde neye ihtiyacı var ve bunu nasıl tutarlı hale getiririz.
Bastan söylemeliyim bir Design System oluşturmak kolay bir iş degil ve bu bazen saçınızı başınızı yolmanıza yol acabilir. Paylaşacaklarım bütün şirketler için bir kutsal kitap niteliğinde olmayacak ama bu seride ben işime yarayan, çalıştığını gördüğüm şeyleri paylaşacağım.
Unutmadan bu yazıda inputların variantları nasıl yapılır veya nasıl UI kit hazırlarım üzerine pek bir şey olmayacak, bunlardan yeterince var.🙂
Yeni bir şirkete alışırken
iyzico ve Garanti’de işe başladığım ilk günlerde sorduğum soruları hatırlıyorum daha dün gibi:
- Markanın renkleri nedir? (Hayır broşürlere basılan renkler değil)
- Bu componentin son hali mi?
- CTA lerde bu metni kullanmak zorunda miyim?
- Neden 4 farklı inputumuz var?
- Lanet olası logomuzun SVG hali nerede 🤯
Ve devamında yer aldığım ilk projelerde yazılımcılar ve ürün yoneticilerinden aldığım sorular:
- Burada neden yeni form elemanları var?
- Assetlere nereden ulaşabilirim?
- MVP’i ne zaman biter?
- Bu alandaki geçişler nasıl olacak gösterebilir misin?
- …
Şu konuyu bi netleştirelim mi?
Bu devirde tasarımcının en büyük işi soru sormak degil mi? O zaman sunlarla baslayabiliriz;
- Design System ile neyi hedefliyoruz?
- Bunu kimler kullanacak?
- Nasıl yardimci olacak?
- Arayüz tutarlı görünecek mi?
- Bunun icin ne kadar kaynak ayırabilirsiniz?
Ve biraz daha is yükümüze bakarak:
- Bu gereksiz tasklara ne kadar zaman harcıyoruz?
- Yazılım ve tasarım icin bize yarattığı teknik borç ne kadar?
Aynı sayfada mıyız?
Hayal kırıklığı yaratmak istemiyorum. Aslında Design System bize ne mi getirecek?
Rehber — Belirli standartlarla birlikte tekrar kullanılabilen componentler.
İşbirliği — Yeni başlayan tasarımcıdan en deneyimli yazılımcıya.
Verimlilik — Ayni isleri tekrar ve tekrar yapmamiza gerek yok.
Artık hangi componentin güncel olduğunu konuşmak yerine daha onemli şeylere zaman ayırabilirsiniz. Mesela gerçek kullanıcı ihtiyaçları veya ürünün problemleri. 🙂
Hazır mıyız?
Evren hareketi alkışlar, düşünceyi değil. Üzerine yeterince düşündük ve konuştuysak başlayalım. Başlamadan once bu heyecan ile Amazon, Oracle ya da diger devleri kopyalamaniza gerek yok. Ihtiyaclariniz ve imkanlariniz muhtemelen tamamen farkli. Ornek vermem gerekirse suan mendix’te Developer, Designer ve PM rollerinde 6 kisilik bir design system takimiyla calisiyorum.
Devamında takip edeceğimiz ilk iki adımda yapacağımız mevcut durumun tespitini yapmak olacak. 👇
Adım 1 — Eteğimizdeki taşları dökelim
Şirkete yeni başlayanlar hem ürün hem de tasarım elementleri konusunda boşlukları görmeye çok daha meyilli çünkü henüz körleşmediler. Benzer bir yaklaşım ile üründeki tüm tasarım öğelerini gözden geçirmekle başlayın.
🎯 Burada amaç, neyi verimsiz yapıyoruz, nerelerde tutarsızız, bunu görmek.
- Marka kimliği nasıl görünüyor?
- Formları terk etme oranı neden bu kadar yüksek?
- Tasarladığımız akışları kullanıcılar neden tamamlamıyor?
- Renk, tipografi ve arayüz bileşenleri tüm üründe tutarlı mı?
Bu aşamada twitterdan ürününüze kötü sözler eden bir personaya bürünebilirsiniz, bunu yapmaktan çekinmeyin.
Adım 2— Her şeyi toparlamakla başlayalım
Evet tum form elemanları, butonlar, farklı yazı tipleri, bannerlar.
Figma, Sketch, Miro — Görsel assetlerinizi burada toplayın.
Tella, Loom — Browserdan ürünü incelerken videolar kaydedin.
Ben bu asamda ekran görüntüleri almayı seviyorum. Ürüne para kazandıran onemli kullanıcı akışlarının videolarını kaydediyorum. Aynı zamanda kotu performans gösteren, dönüşüm oranı düşük, garip akışlarıda kaydetmek iyi oluyor.
Biraz daha fikir vermek ve aklınızda canlandırmak adına nelerden bahsettigimi sıralamak istiyorum:
🏡 Ana sayfa ve Navigasyon
🏛 Bilgi mimarisi
🔎 Arama fonksiyonu
🕵️ Kategori ve Urun Detayları
💰 Odeme Sayfası
💸 Dönüşüm Oranı
🤷♂️ Kullanıcı bilgileri, ayarları
🌪 Funnellar
Tasarım elementlerine gelecek olursak sunlar:
- Banner
- Button
- Checkbox
- Dropdown
- Forms
- Charts
- Input Fields
- List
- Navigation
- Modals
- Tables
- Tooltips
İlk kısmın sonuna geldik, mevcut ürününüzden Desing System’e giden yolda önemli bir adım kaydettiniz ve farkındalığınız arttı, tebrikler.
Bir sonraki yazıda Design System’i inşa etmeye başlayacağız.
