UI ve UX arasındaki fark
UX, yani kullanıcı deneyimi; kullanıcının sitede nasıl ilerlediği, aradığı bilgiye kaç adımda ulaştığı ve hangi noktada takıldığıyla ilgilenir. Bilgi mimarisi, sayfa akışları ve etkileşim kararları UX'in konusudur. UI, yani kullanıcı arayüzü ise bu akışın görsel karşılığıdır: renkler, tipografi, boşluklar, butonlar, ikonlar ve animasyonlar. İyi bir ürün için ikisi birlikte düşünülmelidir. Önce iskelet doğru kurulur, sonra görsel dil o iskeletin üzerine giydirilir.
Geliştirici gözüyle tasarlamanın avantajı
Yedi yılı aşkın süredir hem tasarlayan hem de kodlayan biri olarak, tasarım ile geliştirme arasındaki kopukluğun bedelini çok gördüm. Kodlanması günler süren ama kullanıcıya bir şey katmayan efektler, her sayfada farklı boyutta butonlar, mobil karşılığı düşünülmemiş karmaşık tablolar... Ben tasarımı yaparken her bileşenin nasıl kodlanacağını, farklı ekranlarda nasıl davranacağını ve içerik değiştiğinde nasıl görüneceğini önceden planlıyorum. Sonuç: hem göze hitap eden hem de bütçe ve takvimi şişirmeden hayata geçirilebilen tasarımlar.
UI/UX sürecim
Araştırma ve hedef tanımı
Kullanıcılarınızın kim olduğunu, siteye neden geldiklerini ve sizin onlardan ne beklediğinizi netleştiriyorum. Rakip sitelerin güçlü ve zayıf yönlerini inceliyorum. Mevcut bir site varsa analitik verilerine bakarak kullanıcıların nerede ayrıldığını tespit ediyorum.
Bilgi mimarisi ve wireframe
Sayfaların hiyerarşisini, menü yapısını ve her sayfanın içerik sırasını renksiz, sade wireframe'lerle kurguluyorum. Bu aşamada görsellere takılmadan akışı tartışmak çok daha verimlidir.
Görsel tasarım
Onaylanan iskeletin üzerine markanıza uygun renk paleti, tipografi ve bileşenler giydiriliyor. Masaüstü ve mobil ekranlar Figma üzerinde ayrı ayrı hazırlanıyor.
Etkileşimli prototip
Ekranlar birbirine bağlanarak tıklanabilir bir prototip oluşturuluyor. Siz ve ekibiniz, kod yazılmadan önce sitenin nasıl çalışacağını deneyimleyebiliyorsunuz.
Tasarım sistemi
Renkler, yazı stilleri, boşluk değerleri, butonlar, form alanları ve kartlar yeniden kullanılabilir bileşenler olarak düzenleniyor. Bu sistem, ileride eklenecek sayfaların da tutarlı kalmasını sağlıyor.
Teslim ettiklerim
- Masaüstü ve mobil için düzenli katmanlara sahip Figma dosyası
- Hover, aktif, hata ve boş durumları düşünülmüş bileşenler
- Tıklanabilir prototip bağlantısı
- Renk, tipografi ve boşluk değişkenlerini içeren tasarım sistemi
- Geliştiriciye devir için notlar ve dışa aktarılmış görseller
Sadece tasarım mı, tasarım ve kod mu?
Tasarımı kendi yazılım ekibinize teslim edebilirim; dosyalar geliştirici dostu şekilde hazırlanır. Ama asıl verimlilik, tasarımı yapan kişinin kodu da yazmasıyla ortaya çıkar. Tasarım ve geliştirmeyi birlikte almak isterseniz web tasarım ya da frontend geliştirme hizmetlerimle tek süreçte ilerleyebiliriz.
Mevcut sitenizin dönüşüm oranı düşükse, sıfırdan tasarım yerine bir UX denetimiyle başlayabiliriz. Kritik sayfalarınızdaki sorunları tespit edip önceliklendirilmiş bir iyileştirme listesi ve yeni ekran önerileri sunarım.
Erişilebilir tasarım
Kullanıcılarınızın bir kısmı görme, motor ya da bilişsel farklılıklara sahip olabilir. Yeterli renk kontrastı, okunabilir yazı boyutları, yalnızca renge dayanmayan durum göstergeleri, dokunmatik ekranlar için yeterince büyük butonlar ve net hata mesajları tasarım aşamasında düşünülür. Erişilebilir bir arayüz yalnızca belirli bir kullanıcı grubuna değil, herkese daha rahat bir deneyim sunar. Örneğin güneş altında telefonuna bakan bir kullanıcı da yüksek kontrastlı bir tasarımdan faydalanır. Bu prensipler aynı zamanda arama motorlarının sayfanızı daha iyi anlamasına da katkı sağlar.
Tasarım tamamlandığında ekibiniz için bileşenlerin nasıl kullanılacağını anlatan kısa bir kılavuz da hazırlıyorum.