Arayüz (UI/UX) Tasarımı

UI ve UX arasındaki fark nedir?

UX, kullanıcının hedefine ulaşmak için izlediği yoldur: hangi ekrandan başlıyor, kaç adımda bitiriyor, nerede duraksıyor. UI ise bu yolun görünen yüzüdür: düzen, tipografi, renk, buton ve form tasarımı. İkisi ayrı iş olmadığı için tek bir süreç olarak yürütülür, ancak sıraları önemlidir. Akış netleşmeden ekran çizmek, sonradan çöpe giden tasarım demektir.

Çalışma kullanıcı akışıyla başlar. Bir e-ticaret sitesinde ürün bulmadan satın almaya, bir panelde giriş yapmadan işlem tamamlamaya kadar olan adımlar tek tek yazılır. Bu aşamada hiçbir renk ya da yazı karakteri konuşulmaz; sadece adım sayısı, kararlar ve hata durumları ele alınır.

Ardından tel çerçeve çizilir. Gri kutulardan oluşan bu düzenler, içeriğin hiyerarşisini görsel etkiden bağımsız değerlendirmeyi sağlar. Onay tel çerçeve üzerinden alındığında, görsel tasarım aşamasında yapılan tartışmalar akış değil biçim üzerine olur; bu da süreci belirgin biçimde kısaltır.

Neler dahil?

• Kullanıcı akışıAna görevler adım adım çıkarılır; hata ve boş durum senaryoları da tanımlanır.
• Tel çerçeveTüm ana ekranlar renk ve görsel olmadan, içerik hiyerarşisi üzerinden çizilir.
• Arayüz tasarımıOnaylanan tel çerçeveler marka diline göre görsel olarak tasarlanır; masaüstü ve mobil ayrı ele alınır.
• Tıklanabilir prototipEkranlar birbirine bağlanır; kod yazılmadan önce akış gerçek kullanıcıyla denenebilir.
• Bileşen kütüphanesiButon, form, tablo, kart ve bildirim gibi tekrar eden öğeler durumlarıyla birlikte tanımlanır.
• Geliştirici teslim dosyasıÖlçüler, boşluklar, renk ve tipografi değerleri ile dışa aktarılmış görseller geliştirici erişimine açılır.

Kimler için uygun?

Yeni bir web sitesi ya da uygulama yaptıracak firmalar için tasarım aşaması, geliştirmeden önce gelmesi gereken adımdır. Kod yazıldıktan sonra yapılan arayüz değişiklikleri hem daha pahalıdır hem de takvimi uzatır. Prototip üzerinde alınan kararlar bu maliyeti baştan düşürür.

İkinci grup, kullandığı panel ya da yazılımın karmaşıklığından şikâyet eden firmalardır. Burada iş sıfırdan tasarım değil, mevcut akışın sadeleştirilmesidir; hangi adımların birleştirilebileceği ve hangi bilgilerin ekrandan çıkarılabileceği önce ölçülür.

Üçüncü grup, mobil kullanımı artan ama arayüzü masaüstüne göre kurulmuş sitelerdir. Mobilde form doldurmak, tablo okumak ve filtre kullanmak masaüstünden farklı bir düzen gerektirir; bu genellikle küçültme değil yeniden kurgulama işidir.

Teslim edilen dosyalar

Tasarım dosyaları Figma üzerinde, geliştiricinin ölçü ve renk değerlerini doğrudan okuyabileceği şekilde teslim edilir. Dosyaya erişim size verilir; proje sonrasında da dosya sizde kalır ve başka bir geliştirici ekiple çalışmanız durumunda sorun çıkmaz.

Bileşen kütüphanesi, tekrar eden öğeleri tüm durumlarıyla içerir: normal, üzerine gelinmiş, tıklanmış, devre dışı ve hata durumu. Bu, geliştirme sırasında ortaya çıkan "bu durumda ne görünecek" sorularını baştan yanıtlar.

İkonlar SVG olarak, görseller uygun formatlarda dışa aktarılır. Erişilebilirlik açısından metin ve zemin arasındaki kontrast oranları kontrol edilir, dokunmatik hedef alanları mobilde parmakla kullanıma uygun ölçülerde tutulur.