Yeni Dijital Ürün Tasarlayan Girişimler İçin UI/UX Tasarım
Fikir net, kapsam değil. Önce kimin hangi işi yapacağını ve o işin kaç adımda bittiğini çıkarıyoruz; sonra tıklanabilir prototiple gerçek kullanıcıya gösteriyoruz. Geliştirme başladığında ekranlar tartışılmış, akış sadeleşmiş oluyor.
- Figma kaynak dosyaları size ait
- Tıklanabilir prototip ile onay
- Geliştiriciye hazır design system
- Kapsam netleşmeden fiyat vermiyoruz
Ürün henüz yok; ekranlar çoktan çoğaldı.
Yeni ürün tasarlayan ekiplerde en pahalı hata, yanlış ekranı güzel çizmek. Aşağıdakiler, geliştirme başlamadan önce fark edildiğinde birkaç haftalık iş; başladıktan sonra fark edildiğinde birkaç aylık yeniden yapım oluyor.
- Özellik listesi büyüdükçe büyüyorHer görüşmeden yeni bir istek çıkıyor, hiçbiri elenmiyor. İlk sürüm, altı ay sonra bile çıkmayacak bir ürüne dönüşüyor.
- Kimin için yaptığınız iki cümlede anlatılamıyorHedef kullanıcı 'herkes' olduğunda ekrandaki hiçbir karar kendiliğinden verilemiyor; her detay tartışma konusu oluyor.
- Ekranlar var, aralarındaki yol yokTek tek güzel görünen sayfalar, birleştirildiğinde kullanıcıyı çıkmaza sokuyor. Boş durum, hata ve yükleniyor ekranları hiç düşünülmemiş oluyor.
- Karar, en yüksek sesli fikre kalıyorElinizde kullanıcıdan gelen veri olmayınca tartışma zevk meselesine dönüşüyor; her toplantı aynı yerden başlıyor.
- Geliştirme başlıyor, tasarım geriden geliyorEkran hazır değilken yazılan kod, tasarım gelince yeniden yazılıyor. En kıt kaynağınız olan geliştirme zamanı iki kez harcanıyor.
- İlk kullanıcı testine canlıda giriliyorAkıştaki tıkanma yayından sonra fark edilince düzeltmenin maliyeti, prototipte düzeltmenin kat kat üstüne çıkıyor.
Beş adımda, kod yazılmadan doğrulanmış bir ilk sürüm.
Hedefimiz güzel ekran teslim etmek değil; geliştirmeye başlarken elinizde tartışması bitmiş bir akış bırakmak. Her adımın sonunda ekibinizin kullanabileceği somut bir çıktı oluyor.
- Varsayım envanteriÜrünün ayakta durduğu varsayımları tek tek yazıyoruz: kullanıcı kim, bugün bu işi nasıl yapıyor, neden değiştirsin. Hangisi yanlışsa ürünü en çok o sarsar — testi ondan başlatıyoruz.TeslimVarsayım listesiHedef kullanıcı tanımıRisk sıralaması
- Akış ve bilgi mimarisiKullanıcının hedefe ulaşmak için geçtiği adımları çıkarıp kısaltıyoruz. Gereksiz ekran bu aşamada eleniyor; ekran listesi buradan doğuyor.TeslimKullanıcı akış haritasıEkran listesiNavigasyon yapısı
- Wireframe ve tıklanabilir prototipRenk ve tipografiye girmeden yapıyı kuruyor, ardından Figma'da gerçekten gezilebilen bir prototip hâline getiriyoruz. Boş, hata ve yükleniyor durumları baştan planlanıyor.TeslimWireframe setiTıklanabilir prototipDurum ekranları
- Kullanıcı testiHedef profile uyan kullanıcılarla moderasyonlu tur yapıyoruz. Tıkandıkları yeri, yanlış anladıkları etiketi ve vazgeçtikleri adımı not edip akışı düzeltiyoruz.TeslimTest senaryolarıBulgu listesiDüzeltilmiş akış
- Arayüz, design system ve teslimDoğrulanmış akışın üstüne görsel dili kuruyor, bileşenleri token'larla tanımlıyor ve geliştirici teslim dokümanını hazırlıyoruz.TeslimYüksek çözünürlüklü ekranlarDesign systemHandoff dokümanı
İlk sürümünüz kaç ekran eder?
Ürün tipini seçin, ilk sürümde gerçekten gerekli gördüğünüz akışları işaretleyin. Ekranda ekran sayısı, prototipte kurulacak tıklama yolu ve test senaryosu tahmini anında güncellenir. Hiçbir veri kaydedilmez.
- ✓ Kayıt ve girişDoğrulama, şifre sıfırlama ve hata durumlarını da sayın.
- ✓ Karşılama / onboardingİlk sürümde en çok atlanan, en çok geri dönüş getiren akış.
- ✓ Arama ve keşifFiltre, sıralama ve sonuç bulunamadı durumu tek ekran değildir.
- ✓ Detay ve karşılaştırmaKararın verildiği ekran; içerik hiyerarşisi burada belirleyici.
Şu an her şey çekirdekte. Kapsamı küçültmek isterseniz yukarıdan birkaç akışı geri alın.
Rakamlar, benzer kapsamdaki ürün tasarımlarında karşılaştığımız tipik aralıklara dayalı örnek varsayımlardır; sizin sayınız içerik derinliğine, rol sayısına ve platform kararına göre değişir. Süre ve bütçe ancak kapsam netleştikten sonra teklifle verilir.
Yeni ürün tasarımında elinize ne geçiyor?
Aşağıdakiler bir paket değil, bir menü. İlk fazda genellikle akış, prototip ve test bloğu açılıyor; design system ve ikinci platform ürün yön bulduktan sonra ekleniyor.
- KeşifVarsayım ve kullanıcı tanımıHedef profil, bugünkü çözüm yolu ve doğrulanacak varsayımların önceliklenmiş listesi.
- YapıKullanıcı akış haritasıHer hedef için adım adım yol; dallanmalar, hata ve boş durumlar dahil.
- YapıEkran listesi ve önceliklendirmeİlk sürümün çekirdeği ile ikinci sürüme bırakılan ekranların ayrımı.
- ÇekirdekTıklanabilir Figma prototipiSunum ve kullanıcı testi için gerçekten gezilebilen, birden çok yol içeren prototip.
- DoğrulamaKullanılabilirlik test turuSenaryolar, moderasyonlu görüşmeler, bulgu listesi ve düzeltme önerileri.
- ÇekirdekArayüz tasarımı (UI)Doğrulanmış akış üzerine görsel dil; tipografi, renk ve durum tasarımları.
- ÖlçekDesign system ve token'larYeniden kullanılabilir bileşenler, varyantlar ve geliştirmeye hazır token tanımları.
- TeslimGeliştirici teslimiÖlçüler, davranış notları, Dev Mode erişimi ve handoff toplantısı.
Ekranları baştan kontrast, klavye erişimi ve odak sırası gözetilerek kuruyoruz; WCAG 2.1 ölçütlerini tasarım kararlarında referans alıyoruz. Bunu bir uyumluluk belgesi olarak sunmuyoruz: resmî bir uygunluk beyanı, geliştirme tamamlandıktan sonra yapılacak ayrı bir denetim işidir. Tasarım aşamasında yaptığımız, o denetimde çıkacak sorunların büyük bölümünü baştan önlemek.
Teslim Figma üzerinden yapılıyor; bileşen adları ve token yapısı, geliştirme tarafında doğrudan karşılık bulacak şekilde kurgulanıyor. Uygulamayı biz geliştireceksek web yazılım geliştirme veya mobil yazılım geliştirme süreci aynı dosyadan devam eder; mimari kararlarda bağımsız görüş isterseniz teknik danışmanlık tarafımız devreye girer.
Örnek bir altı haftalık ilk tasarım fazı
Aşağıdaki plan, tek platformda orta kapsamlı bir ilk sürüm için hazırlanmış örnektir. Sizin planınız ekran sayısı, rol sayısı ve test turu adedi netleştikten sonra çıkar.
| Hafta | Ne yapılır | Hafta sonunda elinizde ne olur |
|---|---|---|
| 1. hafta | Varsayım envanteri ve kullanıcı tanımı | Varsayım listesi, hedef profil, risk sıralaması |
| 2. hafta | Akış haritası ve ekran listesi | Kullanıcı akışları, navigasyon, kapsam ayrımı |
| 3. hafta | Wireframe ve yapı onayı | Düşük çözünürlüklü ekranlar, paydaş onayı |
| 4. hafta | Tıklanabilir prototip | Gezilebilir prototip, test senaryoları |
| 5. hafta | Kullanıcı testi ve iterasyon | Bulgu listesi, düzeltilmiş akış |
| 6. hafta | Arayüz, design system ve teslim | UI ekranları, bileşen kütüphanesi, handoff |
Geliştirme başladıktan sonra tasarım desteği devam ediyor: çıkan soruları yanıtlıyor, eksik kalan durum ekranlarını tamamlıyor ve ilk kullanıcı geri bildirimlerine göre akışı güncelliyoruz.
- HizmetUI/UX TasarımHizmetin tamamı: araştırma, prototip, design system ve teslim kapsamı.
- HizmetWeb Yazılım GeliştirmeTasarımı çalışan bir ürüne dönüştüren geliştirme tarafı.
- HizmetMobil Yazılım GeliştirmeiOS ve Android tarafında aynı tasarım dilinin uygulanması.
- HizmetGrafik TasarımMarka kimliği yoksa: logo, renk ve tipografi sisteminin kurulması.
- ProjeTuğra AIAltı üretim modunu tek sohbet deneyiminde toplayan kendi ürünümüz.
- RehberMobil uygulama geliştirme süreci: native mi cross-platform mı?Platform kararının tasarım kapsamını nasıl değiştirdiği.
- RehberYazılım firması seçerken dikkat edilmesi gerekenlerTeklif karşılaştırırken sorulacak sorular ve kırmızı bayraklar.
- RehberŞirketlerde yapay zeka: ilk proje rehberiÜrününüze yapay zeka eklemeyi düşünüyorsanız gerçekçi bir başlangıç.
Sık sorulanlar
Kapsam, kullanıcı testi, teslim ve dosya mülkiyeti hakkında en çok sorulanlar.
İlk sürümün kapsamını birlikte küçültelim
Bize ürün fikrinizi ve hedef kullanıcınızı anlatın; ilk görüşmede hangi akışın gerçekten ilk sürümde olması gerektiğini beraber belirleyelim. Keşif görüşmesi ücretsizdir ve sizi bağlamaz.
- ✓ Keşif görüşmesi ücretsiz
- ✓ Kapsam netleşmeden fiyat vermiyoruz
- ✓ Figma dosyaları size ait
Kod yazılmadan önce kullanıcıyla test edilmiş bir ürün
Varsayımları yazıya döküyor, akışı sadeleştiriyor ve tıklanabilir prototiple gerçek kullanıcıya gösteriyoruz. Geliştirme, yön belli hâlde başlıyor.