01Sorun ve çözüm
UI/UX arayüz geliştirme hizmetimizde tasarımı ve kodlamayı ayrı firmalara bölmüyoruz. Kullanıcıların nerede takıldığını görüşme, kullanım verisi ve test oturumlarıyla tespit ediyor, bilgi mimarisini ve ekran akışlarını yeniden kuruyor, Figma'da tasarlıyor ve ardından aynı ekip olarak ön yüz koduna dönüştürüyoruz. Böylece tasarım dosyasında görülen ile canlı üründe çalışan arasında fark kalmıyor.
Devamını okuDaha az göster
Sıfırdan bir ürün için de, yıllardır kullanılan bir uygulamanın kademeli yenilenmesi için de çalışıyoruz.
02Kimler için
UI/UX arayüz tasarımı kimlere gerekir
Kullanıcı sayısı büyüdükçe arayüzdeki küçük sürtünmeler destek yükü ve kayıp kullanıcı olarak geri döner.
- Kayıt veya satın alma adımında kullanıcı kaybettiğini analitik verilerinde gören SaaS ve e-ticaret ekipleri
- Geliştiricilerin tasarımcı olmadan ekran eklediği ve tutarlılığı kaybolmuş iş uygulamaları
- Masaüstü dönemde tasarlanmış ve mobilde kullanılması zorlaşmış web tabanlı yönetim sistemleri
- Kamu kurumlarına ya da erişilebilirliğe önem veren kurumsal müşterilere ürün satan yazılım şirketleri
- Yatırım görüşmesi öncesinde ürününün ilk izlenimini güçlendirmek isteyen girişimler
03İhtiyaçlar
Arayüz yenilemesinde ele alınan sorunlar
Görsel tazelik tek başına sorunu çözmez; asıl iş, kullanıcının görevi daha az adımda ve daha az hatayla bitirmesidir.
- 01
Karmaşık gezinme
Menü yapısı şirket içi departmanlara göre değil, kullanıcıların yapmaya çalıştığı işlere göre yeniden gruplanır. Kart sıralama ve ağaç testi gibi yöntemlerle yeni yapı uygulanmadan önce denenir.
- 02
Uzun ve hata veren formlar
Gereksiz alanlar çıkarılır, alanlar mantıklı adımlara bölünür, hata mesajları alanın yanında ve ne yapılması gerektiğini söyleyerek gösterilir.
- 03
Tutarsız bileşenler
Aynı işi yapan üç farklı buton ya da tablo stili tek bir bileşene indirilir. Bu, hem kullanıcının öğrenme yükünü hem de geliştirme maliyetini düşürür.
- 04
Erişilebilirlik eksikleri
Yetersiz renk kontrastı, klavyeyle ulaşılamayan menüler ve ekran okuyucuya etiketlenmemiş butonlar WCAG kriterlerine göre listelenir ve giderilir.
04Özellikler
UI/UX arayüz tasarımı çalışmasının çıktıları
Her proje aynı adımları gerektirmez; mevcut ürününüzün durumuna göre ağırlık değişir.
- 01
Kullanıcı araştırması özeti
Görüşmeler, destek kayıtları ve kullanım verilerinden çıkan sorunlar önem sırasına göre listelenir; hangi ekranın neden yeniden tasarlandığı bu belgeye dayanır.
- 02
Akış ve tel kafes taslakları
Görsel tasarıma geçmeden önce ekran akışları gri tonlu taslaklarla üzerinde anlaşılır; renk ve süs tartışması içerik kararlarını gölgelemez.
- 03
Figma tasarımı ve tıklanabilir prototip
Masaüstü, tablet ve mobil kırılımlar, boş durumlar, yükleniyor ve hata ekranlarıyla birlikte hazırlanır; kullanıcı testleri bu prototiple yapılır.
- 04
Kodlanmış bileşen kütüphanesi
Tasarım; React, Vue ya da mevcut ön yüz teknolojinize uygun, belgelenmiş ve yeniden kullanılabilir bileşenler olarak koda aktarılır.
05Entegrasyonlar
Tasarım ve geliştirme sürecinde kullanılan araçlar
Araç seçimi ekibinizin mevcut düzenine uyarlanır; amaç tasarım ile kod arasındaki kopukluğu azaltmaktır.
- 01
Figma ve tasarım değişkenleri
Renk, tipografi ve boşluk değerleri tasarım değişkeni (token) olarak tanımlanır ve koddaki tema dosyasıyla eşleştirilir.
- 02
Storybook
Kodlanan bileşenler tek tek görüntülenip test edilebilen bir katalogda toplanır; ürün ekibi yeni ekranı bu katalogdan seçerek kurgular.
- 03
Analitik ve oturum kayıtları
Google Analytics 4 olay takibi ile Microsoft Clarity gibi ısı haritası araçları, değişiklik öncesi ve sonrası davranışı karşılaştırmak için kullanılır.
- 04
Mevcut ön yüz kod tabanı
Yeni arayüz, çalışan uygulamanızın içine ekran ekran yerleştirilebilir; tüm ürünü baştan yazmak zorunlu değildir.
06Süreç
UI/UX arayüz tasarımı hizmeti nasıl ilerler?
Adım 01
Analiz
İş akışınızı, kullanıcılarınızı ve mevcut sistemlerinizi dinleriz; kapsamı, öncelikleri ve kabul ölçütlerini yazılı hâle getiririz.
Adım 02
Tasarım
Ekran akışlarını ve veri modelini çıkarırız. Arayüzü sizinle gözden geçirip onay almadan geliştirmeye geçmeyiz.
Adım 03
Geliştirme
Kısa döngülerle çalışırız; her döngü sonunda çalışan bir sürümü test ortamında görürsünüz.
Adım 04
Test
İşlevsel testler, entegrasyon testleri ve temel güvenlik kontrolleriyle hataları yayından önce yakalarız.
Adım 05
Yayın
Sunucu, alan adı, yedekleme ve izleme ayarlarını yaparak canlıya alırız; ekibinize kısa bir kullanım eğitimi veririz.
Adım 06
Bakım
İsterseniz bakım ve destek anlaşmasıyla güncellemeleri, izlemeyi ve yeni geliştirmeleri sürdürürüz.
07Teknoloji
UI/UX arayüz tasarımı projelerinde kalite ölçütleri
Arayüzü mobil öncelikli tasarlıyor, dokunma hedeflerini parmakla rahat basılacak büyüklükte tutuyor ve her bileşeni klavye ile ekran okuyucuyla deniyoruz. Hedef, WCAG 2.2 AA düzeyindeki kontrast, odak ve etiketleme kriterlerini karşılamaktır.
Devamını okuDaha az göster
Güzel görünen ama yavaş açılan bir ekran iyi bir deneyim sunmaz. Görseller uygun boyut ve biçimde sunulur, fontlar sınırlı tutulur, büyük tablolar sayfalanır ya da sanal kaydırmayla çizilir. Core Web Vitals metrikleri teslimden önce gerçek cihazlarda ölçülür.
Yeniden tasarımda büyük patlama yerine kademeli geçişi öneriyoruz: en çok kullanılan ya da en çok sorun çıkaran akış önce yenilenir, kullanıcı tepkisi izlenir, sonra sıradaki ekrana geçilir.
08Çalışma modelleri
Bu hizmette çalışma modelleri
- 01
Proje bazlı
Sabit kapsam, sabit fiyat ve belirli teslim tarihi
Kapsamı belli, teslim tarihi olan işler için.
- Yazılı kapsam ve kabul ölçütleri
- Sabit fiyat ve belirli teslim tarihi
- Teslim ve kabul adımları sözleşmede
- 02
Bakım ve destek
Aylık sözleşmeli, SLA'lı bakım, destek ve geliştirme saati
Yayındaki bir sistemin sürekliliği için.
- Aylık sözleşme ve SLA
- İzleme, güncelleme ve hata düzeltme
- Aylık geliştirme saati
09Sık sorulan sorular
UI/UX arayüz tasarımı hakkında sık sorulan sorular
UI/UX arayüz tasarımı fiyatları neye bağlı?
Ekran ve akış sayısı, kullanıcı araştırmasının kapsamı, kaç cihaz kırılımı tasarlanacağı ve tasarımın koda da aktarılıp aktarılmayacağı belirleyicidir. Sadece Figma teslimi ile kodlanmış bileşenlerin teslimi farklı kapsamlardır.
UI ile UX arasındaki fark nedir?
UX, kullanıcının bir işi hangi adımlarla, ne kadar zorlanarak tamamladığıyla ilgilidir; akış, içerik ve bilgi mimarisini kapsar. UI ise bu akışın görsel katmanıdır: renk, tipografi, bileşen ve yerleşim. İkisi ayrı düşünülürse güzel ama kullanışsız ekranlar ortaya çıkar.
Mevcut uygulamamızın kodunu değiştirmeden tasarım yenilenebilir mi?
Görsel katman büyük ölçüde stil dosyalarıyla güncellenebilir, ancak akış ve form değişiklikleri ön yüz kodunda düzenleme gerektirir. Kod tabanınızı inceledikten sonra hangi kısmın ne kadar değişeceğini yazılı olarak paylaşırız.
Kullanıcı testlerini kimlerle yapıyorsunuz?
Tercihen gerçek kullanıcılarınızdan ya da hedef kitlenize uyan kişilerden küçük gruplarla, uzaktan ekran paylaşımıyla yapılır. Kayıt alınacaksa katılımcıdan KVKK kapsamında açık rıza alınır.
UI/UX arayüz tasarımı yapan firmanın yöntemini nasıl değerlendirebilirim?
Tasarım kararlarını hangi veriye dayandırdığını, erişilebilirliği nasıl test ettiğini ve tasarımın koda aktarılmasını kimin üstleneceğini sorun. Tasarım ve kodlama farklı ellerdeyse aradaki teslim sürecinin nasıl işleyeceği netleşmelidir.
Tasarım dosyalarının sahibi kim olur?
Figma dosyaları, bileşen kütüphanesi ve kaynak kod proje sonunda size teslim edilir; kullanım hakları sözleşmede yazılır. Çalışmayı kendi Figma hesabınızda yürütmeyi de tercih edebilirsiniz.
10İlgili hizmetler