UI Tasarımı ve Geliştirici Teslimi
Ekranlar bitsin, geliştirme tahmin etmeden başlasın
Tasarım dosyası eksik teslim edildiğinde boşlukları geliştirme ekibi kendi bildiği gibi doldurur; aynı buton üç ekranda üç farklı ölçüde çıkar, hata ekranı hiç çizilmediği için hiç yapılmaz. Ekranları bütün durumlarıyla tasarlıyor, bileşenleri adlandırıyor, ölçüsü ve davranışı yazılı bir dosyayla teslim ediyoruz.
- Bütün ekranlar, bütün durumlar
- Adlandırılmış bileşen kütüphanesi
- Ölçülü geliştirici teslim dosyası
- Uygulama sonrası fark kontrolü
Birlikte çalıştığımız markalar
UI Tasarımı kimler için?
Akışı belli, ekranı eksik ürünler
Hangi ekranın ne yapacağına karar vermiş, ancak tasarımı olmayan ekipler. Bu çalışmada yapıyı yeniden tartışmıyor, kararlaştırılmış akışı ekrana çeviriyoruz.
Kendi geliştirme ekibi olan şirketler
Yazılım tarafı içeride, tasarım tarafı boş olan şirketler. Teslim dosyası geliştiricinin soru sormadan ilerleyebileceği ayrıntıda hazırlanıyor.
Zamanla dağılmış arayüzler
Yıllar içinde farklı kişilerce eklenen ekranlar yüzünden tutarlılığını kaybetmiş ürünler. Önce ortak bileşen seti kuruluyor, ekranlar bu sete göre yeniden çiziliyor.
Kapsam ve teslimatlar
Ekran tasarımları
Listede anlaşılan ekranların son hâlleri, gerçek metin ve gerçek veri örnekleriyle tasarlanır. Yer tutucu metinle ilerlemeyiz, çünkü uzun başlık ve uzun isim düzeni bozan asıl şeydir.
Durum tasarımı
Her ekranın dolu, boş, hatalı, yükleniyor ve yetkisiz görünümü ayrı ayrı çizilir. Bu görünümler tasarlanmadığında geliştirme aşamasında herkes kendi yorumunu uygular.
Bileşen kütüphanesi
Buton, form alanı, tablo satırı, kart, bildirim gibi parçalar varyantlarıyla kurulur ve adlandırılır. Yeni ekran ihtiyacında iş sıfırdan başlamaz.
Ölçek ve değerler
Tipografi basamakları, renk değerleri, boşluk ritmi, köşe yarıçapı ve gölge kuralları tek yerde toplanır.
Geliştirici teslim dosyası
Ölçüler, aralıklar, etkileşim notları ve dışa aktarılmış ikon ile görseller tek pakette verilir. Kod tarafındaki bileşen adlarıyla eşleme birlikte çıkarılır.
Uygulama kontrolü
Yayına çıkan ekranlar tasarımla karşılaştırılır, ayrışan noktalar ekran görüntüsüyle listelenir.
Geliştiricinin sorduğu soru, tasarımın eksik yerini gösteriyor
Bir tasarım dosyasının ne kadar hazır olduğu, uygulama başladıktan sonraki ilk günlerde anlaşılıyor. Gelen sorular hep aynı yerlerden çıkıyor: bu başlık en fazla kaç karakter olabilir, listede binlerce kayıt varken ne oluyor, bu alan zorunlu mu, bağlantı koptuğunda ekranda hangi cümle yazıyor, iki kişi aynı kaydı aynı anda açarsa ne görüyor.
Bunlar ilk bakışta tasarım sorusu gibi durmuyor, ama cevapları ekranın görünümünü doğrudan belirliyor. Cevap dosyada yoksa kararı geliştirici veriyor ve doğal olarak en hızlı çözülen biçimde veriyor.
Bu yüzden bu soruları teslimden önce biz soruyoruz. Her ekranın yanına sınır değerlerini, beklenmedik durumları ve metin uzunluklarını yazıyoruz. Yazılan cevaplar bazen ürün tarafında bir kararı da tetikliyor; bu karar uygulama başlamadan önce verildiğinde çok daha ucuza mal oluyor.
Aynı listeyi geliştirme ekibiyle birlikte gözden geçirmek de işe yarıyor. Onların bildiği teknik kısıtlar bazı ekranların baştan farklı kurulmasını gerektiriyor; bu bilgi tasarım sürerken geldiğinde çizim bir kez yapılıyor.
Dosyada hangi ekranın güncel olduğu belli olmalı
Tasarım dosyaları zamanla birikiyor. Aynı ekranın birkaç denemesi, vazgeçilen bir yön, sunum için hazırlanmış bir kopya ve üzerine not düşülmüş bir sürüm yan yana duruyor. Dosyayı kuran kişi hangisinin geçerli olduğunu biliyor, dosyayı sonradan açan kişi bilmiyor.
Bunun sonucu doğrudan koda yansıyor. Geliştirme ekibi yanlış çerçeveyi referans alıyor, iş bittikten sonra fark ediliyor ve ekran ikinci kez yapılıyor. Kaybedilen zaman tasarımdaki bir eksikten değil, dosyadaki belirsizlikten çıkıyor.
Bu yüzden dosyayı devredilebilir bir belge gibi düzenliyoruz. Güncel ekranlar tek bir bölümde duruyor, denemeler arşive alınıyor, her önemli değişiklikte kısa bir not düşülüyor. Uygulamayı yapan kişi böylece hangi ekranın geçerli olduğunu sormak zorunda kalmıyor.
Bu düzen teslimden sonrası için de gerekiyor. Ürün yaşadıkça ekranlar değişiyor ve dosya tek kaynak olmaktan çıkarsa ekip kısa sürede kodu referans almaya başlıyor. Dosyanın güncel tutulma sorumluluğunu da teslimde açıkça belirliyoruz.
Nasıl çalışıyoruz?
Ekran listesi ve öncelik
Tasarlanacak ekranları tek listede çıkarıyoruz. En çok kullanılan ve en karmaşık olanları başa alıyoruz, çünkü sistem orada sınanıyor.
İlk tasarım turu
Anahtar ekranları tasarlayıp görsel dil kararlarını sizinle netleştiriyoruz. Bu turda karar verilen kurallar kalan ekranlara aynen uygulanıyor.
Durum ve varyant tamamlama
Onaylanan ekranların boş, hatalı, yükleniyor ve yetkisiz görünümlerini tamamlıyor, bileşenleri kütüphaneye taşıyoruz.
Kontrol turu
Renk kontrastı, odak sırası, dokunma alanı ölçüsü ve dar ekran davranışı kontrol ediliyor. Bulunan sorunlar teslimden önce kapatılıyor.
Teslim ve uygulama takibi
Dosyayı ölçüleri ve notlarıyla devrediyoruz. Geliştirme sürerken soruları yanıtlıyor, çıkan ekranları tasarımla karşılaştırıyoruz.
Kullandığımız araçlar ve platformlar
- Figma
- FigJam
- Figma Dev Mode
- Storybook
- Stark
UI Tasarımı fiyatını neler belirler?
Ekran ve durum sayısı
Asıl yükü ekran sayısı değil, o ekranların kaç farklı durumu olduğu belirler. Tek görünümlü bir sayfa ile beş durumu olan bir liste ekranı aynı iş değildir.
Mevcut kütüphanenin durumu
Kullanılabilir bir bileşen setiniz varsa çalışma uyarlamayla ilerler. Set yoksa kütüphanenin kurulması kapsama eklenir.
Teslim ayrıntısı
Yalnız ekran dosyası mı, yoksa yazılı kural dokümanı, ikon paketi ve uygulama kontrolü de mi isteniyor.
Onay düzeni
Kararı tek muhatabın vermesi tur sayısını düşürür. Geri bildirim dağınık ve birbiriyle çelişkili geldiğinde iş uzar.
Sıkça sorulan sorular
Akışlarımız hazır değil, yine de bu hizmeti alabilir miyiz?
Alabilirsiniz ama önce yapıyı kurmak gerekir. Ekranların sırası ve içeriği belli değilken tasarım yapmak, sonradan çoğunu yeniden çizmek anlamına gelir. Böyle durumlarda kısa bir akış çalışmasını öne alıyoruz.
Kaç ekran tasarlanacağını nasıl belirliyoruz?
Başlangıçta ekran listesini birlikte çıkarıyoruz. Liste, kullanıcının yapacağı işlere göre kuruluyor; aynı işin farklı durumları ayrı ekran değil, aynı ekranın varyantı olarak sayılıyor.
Tasarımı mevcut kod yapımıza uygun mu çiziyorsunuz?
Geliştirme ekibinizle baştan konuşuyoruz. Kullandığınız bileşen kütüphanesi, ızgara yapısı ve teknik kısıtlar varsa tasarım bunların üzerine kuruluyor, böylece teslimden sonra yeniden çizim çıkmıyor.
İkon ve görselleri siz mi hazırlıyorsunuz?
İkon setini tasarımın parçası olarak seçiyor ya da çiziyoruz ve dışa aktarılmış hâlde teslim ediyoruz. Fotoğraf ve illüstrasyon ihtiyacı varsa kapsamı baştan konuşuyoruz.
Teslimden sonra değişiklik isteyebilir miyiz?
Evet. Küçük düzeltmeler teslim sonrası destek içinde yapılır. Yeni ekran ya da yeni bileşen ihtiyacı ayrı bir kapsam olarak değerlendirilir.
Geliştirme sonrası ekranların tasarıma uyduğunu kim kontrol ediyor?
Biz kontrol ediyoruz. Yayına çıkan ekranları tasarımla karşılaştırıp ayrışan noktaları ekran görüntüsü ve açıklamayla listeliyoruz. Bu liste geliştirme ekibinin doğrudan kullanabileceği biçimde hazırlanıyor.
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