UI/UX tasarım
UI/UX tasarımda kullanıcının ekranda ne göreceğini (UI) ve işini hangi adımlarla bitireceğini (UX) birlikte planlıyoruz. Önce akışı ve ekran iskeletini, sonra tıklanabilir prototipi hazırlıyor, onaylanan tasarımı kodlanabilir bir bileşen sistemine dönüştürüyoruz.
Akış, prototip ve tasarım sistemiİlk görüşme ücretsiz
Kurgusal örnek tasarım
UI/UX tasarım nedir?
UI/UX tasarım, kullanıcının ekranda ne gördüğünü (UI) ve işini hangi adımlarla bitirdiğini (UX) birlikte planlama işidir. Mevcut bir üründe oturum kayıtları, analitik verileri ve destek talepleriyle başlanır; akış ve wireframe, tıklanabilir prototip ve ortak tasarım sistemiyle sürer. E-ticarette renk ve beden seçimi gibi karar anları, panellerde tablo, filtre ve toplu işlem ekranları öne çıkar.
UI ile UX arasındaki fark
UI (kullanıcı arayüzü) ekranda görünen katmandır: renk, yazı, buton, form, tablo ve hata mesajlarının nasıl göründüğü. UX (kullanıcı deneyimi) ise kullanıcının işini bitirmek için izlediği yoldur: hangi ekranla başladığı, hangi bilgiyi ne zaman gördüğü, kaç adımda sonuca ulaştığı. İkisi birlikte çalışır: bir e-ticaret ürün sayfasında renk ve beden seçiminin sırası UX kararıdır, seçili bedenin ekranda yeterince belirgin olması UI kararıdır. Bu yüzden akışı ve görünümü ayrı ayrı değil, birlikte planlıyoruz.
Tasarıma bugünkü kullanımı inceleyerek başlamak
Çalışan bir mağaza ya da panel yeniden tasarlanacaksa ilk adım ekran çizmek değil, bugün nasıl kullanıldığını görmektir. Oturum kayıtları, analitik verileri ve destek talepleri kullanıcının nerede durakladığını, neyi aradığını ve hangi adımda vazgeçtiğini gösterir. Mobilde ve masaüstünde dokunma alanları, metin okunabilirliği ve satın alma ya da işlem alanına ulaşmak için izlenen yol ayrı ayrı incelenir. Yeni bir üründe bu veri olmadığı için kullanıcı senaryoları ve iş gereksinimleri üzerinden ilerlenir.
E-ticarette bir örnek: renk ve beden seçimi
Tarzım Süper'de tasarım önceliklerini oturum kayıtları belirledi: kayıtlar beden seçimini, mobil gezinmeyi ve ürün sayfasındaki karar anlarını gösterdi. Ürün sayfasında renk alternatiflerini görsellerle gösterip bedenleri hemen devamına, beden tablosunu seçimin yapıldığı noktaya yakın yerleştirdik. Renk değiştiğinde o renkte bulunan bedenler güncelleniyor; tükenen bedenler gizlenmiyor, görünür kalıyor ama satın alınamıyor. Böylece müşteri hem ürünün beden aralığını hem de seçtiği renkte kalan seçenekleri sayfadan ayrılmadan görebiliyor.
Aynı projede arama alanına ürünlerin yanında kategori ve beden aramasını, popüler aramaları ve ürün önerilerini ekledik; mobilde menü, ana bölümler ve sepet erişimi sayfanın altında duruyor. Tükenen bedeni gizlemek ya da görünür bırakmak arasında tek doğru yoktur: görünür bırakmak ürünün beden aralığını gösterir, gizlemek yalnız mevcut seçeneklere odaklar.
Panel ve SaaS arayüzlerinde neye bakılır?
Her gün aynı işi yapan kullanıcı için iyi panel, işi az adımda bitirten paneldir. Tablolar, filtreler, toplu işlemler ve durum mesajları burada görselden daha önemlidir: kayıt yokken ne görüleceği, işlem sürerken ne gösterileceği, hata olduğunda kullanıcıya ne söyleneceği tasarımda baştan tanımlanır. Kullanıcı rolleri farklıysa her rolün göreceği ekran ayrıca planlanır.
ikas App Store'da yayında olan uygulamalarımızın panellerini mağaza sahibinin günlük işine göre tasarladık: sekmeli listeler, toplu işlemler, taslak ve yayın durumları, dışa aktarma.
Wireframe, prototip ve tasarım sistemi
Wireframe, ekranın iskeletidir: hangi bilginin hangi sırayla ve nerede duracağını renk ve görsel ayrıntıya girmeden gösterir. Prototip, ekranlar arasındaki geçişleri tıklanabilir hale getirir; kullanıcı ya da süreç sahibi akışı kod yazılmadan dener. Tasarım sistemi ise buton, form, tablo, kart ve uyarı gibi tekrar eden parçaları ortak kurallarda toplar; yeni ekran eklendiğinde arayüz dağılmaz, aynı bileşen kodda da tek yerden yönetilir. Tasarım ve prototipte Figma kullanıyoruz.
UI/UX tasarım süreci
Problem ve kullanıcı
Ürünün kime hizmet ettiğini, kullanıcıların hangi işi yaptığını ve mevcut yapıda nerede zorlandığını çıkarırız.
Bilgi mimarisi ve akış
Ekranları ve içerik gruplarını ilişkilendirir, kritik işlemlerin (satın alma, sipariş yönetme, rapor alma) adımlarını belirleriz.
Wireframe
Renk ve görselden önce ekran iskeletini kurar, içerik önceliğini ve etkileşim noktalarını netleştiririz.
Arayüz ve tasarım sistemi
Yazı, renk, boşluk ve bileşenleri ortak kurallara bağlar, kritik ekranları bu sistemle tasarlarız.
Prototip ve doğrulama
Akışı tıklanabilir prototipte kullanıcılarla ya da süreç sahipleriyle dener, geri bildirime göre düzeltiriz.
Geliştirmeye geçiş
Ekran durumları (boş, yükleniyor, hata), mobil davranışlar ve bileşenler tanımlı olarak koda aktarılır.
Ürününüz için doğru tasarım kapsamını birlikte netleştirelim.
İlk görüşme online ve ücretsiz. Formu doldurabilir ya da WhatsApp'tan yazabilirsiniz.
Erişilebilirlik ve mobil kullanım
Erişilebilirlikte renk kontrastı, klavyeyle kullanım, odak durumları, form etiketleri ve yalnız renge dayanmayan durum göstergeleri tasarım aşamasında ele alınır; referans WCAG yönergeleridir. Mobilde dokunma alanlarının parmakla rahat seçilebilecek büyüklükte olması, ana işlemin kaydırmadan bulunması ve tabloların dar ekranda okunabilir kalması ayrıca tasarlanır. Görsel boyutları ve yüklenirken kayan düzen kullanıcı deneyimini etkilediği için tasarım kararları Google'ın Core Web Vitals ölçütleriyle birlikte düşünülür.
Hangi işlerde UI/UX tasarım yapıyoruz?
E-ticaret mağazaları
Ürün keşfi, filtre, ürün sayfası ve sepet akışı; platforma göre ikas tema tasarımı ya da Shopify tema tasarımı kapsamında.
Uygulama ve yönetim panelleri
Tablo, filtre, form ve toplu işlem ekranları; geliştirme de gerekiyorsa özel yazılım geliştirme ya da özel CRM yazılımı ile birlikte.
Kurumsal siteler
Sayfa yapısı ve içerik hiyerarşisi; kurumsal web tasarım çalışmasının parçası olarak.
Yeni bir ürün ya da mevcut bir arayüz için hangi tasarım kapsamının gerektiğini konuşmak isterseniz proje bilgilerini paylaşabilirsiniz.
UI/UX tasarım hakkında sık sorulanlar
Projeniz için hangi kapsam gerekir?
ikas, Shopify ve özel yazılım projelerini net brief, ölçülebilir hedef ve teknik yol haritasıyla planlıyoruz.