UI/UX Tasarım
İyi arayüz süs değil hız demektir: personelin günde bin kez bastığı ekran bir saniye kazandırıyorsa, tasarım kendini ödemiştir.
Görünmeyen tasarım, hissedilen hız
Tema token'ları, göz kararı değil
Renk, boşluk ve tipografi tek tek ekranlarda değil, merkezî tasarım token'larında tanımlanır; açık ve koyu tema aynı token setinden türer. Bu sitenin kendisi bu prensiple çalışır — koyu panel, buton ve vurgu rengi her sayfada aynı kaynaktan gelir.
- Tek token seti, iki tema
- Tutarlılık kod seviyesinde zorunlu
Çok dillilik ve RTL sonradan eklenmez
Bir arayüz Arapça gibi sağdan sola akan bir dile sonradan uydurulduğunda çoğu zaman kırılır. Bu sitenin kendisi dört dilde (tr/en/de/ar) yayında; Arapça sürümde yerleşim, ikon yönü ve okuma akışı baştan RTL'e göre tasarlandı.
- 4 dilde yayın, RTL dahil
- Yerleşim baştan RTL'e göre kurulur
Bileşen kütüphanesi, tekrar eden iş değil
Buton, kart, form alanı gibi tekrar eden parçalar bir kez tasarlanıp bileşenleştirilir; yeni bir ekran bu kütüphaneden kurulur. 46 sektörel ürünümüzün panelleri aynı bileşen mantığından beslenir — her ekran sıfırdan çizilmez.
- Tasarımdan koda tutarlı bileşen
- 46 ürün panelinde paylaşılan mantık
İyi arayüz süs değil hız demektir
Bir personelin günde bin kez bastığı ekran bir saniye kazandırıyorsa, tasarım kendini fazlasıyla ödemiştir. Bir müşterinin ilk on saniyede ne yapacağını anlayamadığı bir arayüz ise en pahalı özelliği bile görünmez kılar. Vosetu'da tasarım, ürünün en sona bırakılan katmanı değil, ekranın kime ne kadar hızlı hizmet ettiğini ölçen bir disiplindir.
Bunu iddia olarak değil, kullandığımız araçla söylüyoruz: Figma'da tasarlar, tıklanabilir prototiple erken test eder, sonra Tailwind ve tasarım token'larıyla kodda birebir aynı sonucu üretiriz. Tasarımla kod arasındaki fark, ekranın tasarımcının elinden çıktığı hâliyle kullanıcıya ulaşıp ulaşmadığıdır — biz bu farkı kapatırız.
- Figma'dan koda birebir tasarım
- Erişilebilirlik ve RTL baştan dahil
- 46 ürün panelinde paylaşılan bileşen dili
- Ölçülen hız, hissedilen sadelik
Tasarımın altında yaşayan alt hizmetler
Sıfırdan bir ürün de, var olan bir ekranın yenilenmesi de aynı disiplinden geçer.
Ürün arayüzü tasarımı (web + mobil)
Web ve mobil için tutarlı bir görsel dille ekranları tasarlarız; platform farkları bilinçli ele alınır.
Prototipleme & kullanıcı akışları
Tıklanabilir prototiple akışı gerçek kullanıcıyla erken test eder, kodlamadan önce sorunları yakalarız.
Tasarım sistemi & bileşen kütüphanesi
Renk, tipografi ve bileşenleri token'lara bağlarız; yeni ekran sıfırdan değil kütüphaneden kurulur.
Mevcut ürünün arayüz yenilemesi
Çalışan bir ürünün arayüzünü, iş kuralına dokunmadan modernize ederiz.
Erişilebilirlik & çok dillilik (RTL dahil)
Klavye erişimi, kontrast ve okunabilirliği; Arapça gibi RTL dilleri baştan tasarıma dahil ederiz.
Kullanıcı testi turları
Tasarımı gerçek kullanıcıyla test eder, geri bildirimi bir sonraki iterasyona taşırız.
Tasarım dilimizin çalıştığı yerler
Aynı token, bileşen ve erişilebilirlik ilkeleri farklı ürünlerin arkasında aynı disiplinle çalışıyor.
Bu site: vosetu.com
Şu an gezindiğiniz halka açık site, 4 dilde ve RTL dahil aynı tasarım sisteminin canlı örneğidir.
Yönetim panelleri
Angular ile kurulan yönetim panelleri, halka açık taraftan farklı yoğunlukta ama aynı görsel dilde çalışır.
46 sektörel ürün
Farklı sektörlerdeki panellerin hepsi aynı bileşen kütüphanesinden ve token setinden beslenir.
Bir arayüzü nasıl tasarlıyoruz
Keşif & akış çıkarma
Kullanıcının ekranda ne yapmak istediğini ve mevcut akıştaki sürtünmeyi çıkarırız.
Wireframe & prototip
Önce iskelet, sonra tıklanabilir prototip; içerik ve akış erken test edilir.
Görsel tasarım & tasarım sistemi
Figma'da nihai görseli üretir, token ve bileşenleri tasarım sistemine kaydederiz.
Koda aktarım & kullanıcı testi
Tasarım Tailwind ve token'larla kodda birebir üretilir, gerçek kullanıcıyla test edilerek iyileştirilir.
Her tasarım projesinde standart gelenler
Üzerine kurduğumuz teknoloji
- Figma
- Tailwind
- tasarım token'ları
- Tıklanabilir prototip
- Kullanıcı testi turları
Arayüzünüzü birlikte hızlandıralım
Ekranlarınızı ve kullanıcılarınızı dinleyip nereden başlanacağını birlikte çıkaralım. İlk görüşme bağlayıcı değildir.