UI Tasarımı
Her ekran aynı sistemin parçası olsun
Sayfalar farklı zamanlarda, farklı ellerden çıkınca buton boyutları, renkler ve boşluklar birbirini tutmuyor; her yeni ekran baştan tartışma açıyor. Arayüzü tek bir görsel dil ve bileşen mantığıyla kuruyor, ekranları bu sistemin üzerine tasarlıyoruz.
- Tek görsel dil, tutarlı ekranlar
- Bileşen ve durum tasarımı
- Duyarlı ve erişilebilir arayüz
- Geliştiriciye hazır ölçü dosyası
UI Tasarımı
UI Tasarımı kapsamındaki hizmetler
UI Tasarımı
Ekranları durumlarıyla tasarlayıp bileşen kütüphanesi ve teslim dosyasıyla geliştirmeye veren çalışma.
Dashboard UI Tasarımı
Veri yoğun yönetim ve raporlama ekranlarını okunur hâle getiren arayüz tasarımı.
SaaS Panel UI Tasarımı
Modül ekleyerek büyüyen SaaS panellerini tek görsel dile bağlayan arayüz tasarımı.
E-Ticaret UI Tasarımı
Listeleme, ürün sayfası, sepet ve ödeme ekranlarını satın almaya göre kuran arayüz tasarımı.
Landing Page UI Tasarımı
Kampanya ve reklam trafiği için tek hedefe odaklanan açılış sayfası tasarımı.
Kurumsal Site UI Tasarımı
Kurumsal sitelerde sayfa tiplerini şablona bağlayan, içerikle büyüyen arayüz tasarımı.
Responsive UI Tasarımı
Arayüzün telefon, tablet ve masaüstünde nasıl davranacağını tanımlayan tasarım çalışması.
Dark Mode UI Tasarımı
Koyu temayı renk değişkenleri ve kontrast kurallarıyla kuran arayüz tasarımı çalışması.
Arayüz tasarımı neyi kapsar
Arayüz tasarımı, ekranın görünen her parçasının kuralını koymaktır. Yazı boyutları arasındaki ilişki, renklerin hangi anlamı taşıdığı, öğeler arasındaki boşluk ritmi, bir butonun basılınca ve beklerken nasıl davrandığı bu işin içindedir. Tek tek güzel duran ekranlar değil, birbirini tekrar eden ve tahmin edilebilir bir düzen hedeflenir.
İşin büyük kısmı da zaten görünmeyen durumlarda geçer. Veri henüz gelmediğinde, hiç kayıt olmadığında, kullanıcının yetkisi yetmediğinde ya da bağlantı koptuğunda ekranda ne göründüğü tasarlanmazsa bu boşlukları geliştirme aşamasında herkes kendi bildiği gibi doldurur. Ürünün dağınık görünmesinin sebebi genelde kötü tasarlanmış ekranlar değil, hiç tasarlanmamış durumlardır.
Yüzey değişince arayüz de değişir
Bir kampanya sayfasında amaç tektir ve ekranda tek bir yol vardır. Bir yönetim panelinde ise kullanıcı gün boyu aynı ekrana bakar, veriyi tarar ve kıyaslar. Bir mağaza sayfasında karar anı öne çıkar, kurumsal bir sitede içeriğin okunabilirliği belirleyicidir. Aynı bileşen kütüphanesi bu yüzeylerin hepsinde kullanılsa da yoğunluk, tipografi ölçeği ve hiyerarşi kararları farklı olur.
Bu yüzden çalışmayı yüzeye göre ayırıyoruz. Dashboard, panel, mağaza, kampanya sayfası, kurumsal site, duyarlı davranış ve koyu tema kendi başlıkları altında ele alınıyor. Her birinin kendi sorunları ve kendi kontrol listesi var.
Sistem kurmak neden ekran çizmekten önemli
Ekranlar biter, ürün bitmez. Yeni bir özellik geldiğinde tasarımcıya dönmek zorunda kalmadan ekran üretebilmek, bileşenlerin adlandırılmış, varyantlanmış ve kurala bağlanmış olmasına bağlıdır. Kurulan sistem hem tasarım tarafında hem kod tarafında aynı adları taşıdığında ürünün görünümü zamanla dağılmıyor.
Bu yüzden teslim ettiğimiz şey bir ekran koleksiyonu değil, kurallı bir kütüphane. İçinde hangi bileşenin nerede kullanılacağı, hangi ölçünün neye göre seçildiği ve yeni bir parça eklenirken nelere bakılacağı yazılı oluyor. Böylece çalışma bittikten sonra da arayüz aynı dili konuşmayı sürdürüyor.
Nasıl çalışıyoruz?
Arayüz envanteri
Mevcut ekranları, tekrar eden bileşenleri ve birbirinden ayrışmış kullanımları çıkarıyoruz. Hangi ekranın yeniden tasarlanacağı, hangisinin sisteme uyarlanacağı bu listeyle belirleniyor.
Görsel dil kararı
Tipografi ölçeği, renk kullanımı, boşluk ritmi, köşe ve gölge kararlarını veriyoruz. Marka kılavuzunuz varsa arayüz bu kılavuzun üzerine kuruluyor, yoksa arayüze özgü kurallar yazılıyor.
Anahtar ekran tasarımı
En çok kullanılan ve en karmaşık ekranları önce tasarlıyoruz. Sistem burada sınandığı için kalan ekranlar daha hızlı ve daha az sürprizle ilerliyor.
Bileşen kütüphanesi ve durumlar
Buton, form alanı, tablo, kart, bildirim gibi parçaları varyantlarıyla kuruyoruz. Her bileşenin dolu, boş, hatalı, yükleniyor ve devre dışı görünümü tanımlanıyor.
Duyarlılık, erişilebilirlik ve teslim
Ekranların dar ekrandaki davranışını, renk kontrastını ve odak sırasını kontrol ediyoruz. Dosya, ölçüler ve davranış notlarıyla birlikte geliştirmeye veriliyor.
UI Tasarımı fiyatını neler belirler?
Ekran ve durum sayısı
Fiyatı belirleyen asıl şey ekran sayısı değil, o ekranların kaç farklı durumu olduğu. Boş, hatalı, yetkisiz ve yüklenirken görünümleri olan bir ekran, tek görünümlü bir sayfadan çok daha fazla iş demek.
Mevcut sistemin olgunluğu
Kurulu bir bileşen kütüphaneniz ve marka kılavuzunuz varsa çalışma uyarlamayla ilerler. Hiçbiri yoksa görsel dilin sıfırdan kurulması kapsama eklenir.
Yüzey türü
Veri yoğun bir panel ile tek amaçlı bir kampanya sayfası aynı emeği istemez. Tablo, filtre ve grafik içeren ekranlar daha çok karar ve daha çok kontrol gerektirir.
Tema ve duyarlılık kapsamı
Koyu tema, çok dilli metin desteği ve geniş kırılım aralığı isteniyorsa her bileşen birden fazla koşulda tasarlanır.
Revizyon ve onay düzeni
Kararı tek bir muhatabın vermesi işi hızlandırır. Geri bildirim birden çok kanaldan ve birbiriyle çelişerek geldiğinde tur sayısı artar.
Sıkça sorulan sorular
UI tasarımı ile UX tasarımı ayrı ayrı alınabilir mi?
Alınabilir. Akışlarınız oturmuşsa ve sorun ekranların görünümü, tutarlılığı ve durum eksiklerindeyse doğrudan arayüz tasarımıyla başlayabiliriz. Akışın kendisi tartışmalıysa önce yapıyı kurmak daha az maliyetli oluyor.
Mevcut ekranlarımızı koruyup yalnız görünümü yenileyebilir misiniz?
Evet. Yapıyı bozmadan tipografi, renk, boşluk ve bileşen düzeyinde bir yenileme yapılabilir. Bu yöntem geliştirme yükünü düşürür, ancak yapıdan gelen sorunları çözmez.
Tasarımı Figma dışında bir formatta teslim ediyor musunuz?
Çalışma dosyası Figma üzerinde yürür. Teslimde ölçü ve değerlere geliştirici görünümünden erişilir, ikon ve görseller dışa aktarılır, kurallar ayrıca yazılı dokümanda toplanır.
Bileşen kütüphanesini kod tarafında da kuruyor musunuz?
Tasarım tarafındaki kütüphaneyi biz kuruyoruz. Kod tarafındaki karşılığı için geliştirme ekibiyle isim, varyant ve durum eşlemesini birlikte çıkarıyoruz, böylece iki taraf aynı adları kullanıyor.
Erişilebilirlik bu çalışmanın içinde mi?
Temel düzeyde içinde. Renk kontrastı, odak görünürlüğü, dokunma alanı ölçüsü ve alan etiketleri tasarım sırasında kontrol edilir. Kapsamlı bir erişilebilirlik denetimi ayrı bir çalışmadır.
Kaç revizyon hakkımız var?
Her aşamada ortak bir revizyon turu planlıyoruz. Geri bildirimleri tek listede topluyor, kapsamı değiştiren istekleri ayrı işaretliyoruz ki hangi talebin süreyi uzattığı görünür olsun.
Geliştirme sırasında destek veriyor musunuz?
Evet. Uygulama sürerken sorulara yanıt veriyor, çıkan ekranları tasarımla karşılaştırıyor ve ayrışan noktaları liste halinde paylaşıyoruz.
UI Tasarımı için ilk adımı atalım
- 1Formu doldurun ya da bizi arayın
- 2Bir iş günü içinde ön görüşme planlayalım
- 3Size özel yol haritası ve teklif hazırlayalım