Wireframe: neyin nerede duracağı
Wireframe, renk ve görsel olmadan, kutular ve çizgilerle çizilmiş bir ekran planıdır. Başlık burada, liste şurada, buton altta. Kâğıda da çizilebilir, Figma'da gri kutularla da.
Amacı tartışmayı içerikte ve düzende tutmak. Renk olmadığı için kimse "bu mavi olmasın" demiyor; herkes "bu buton burada mı olmalı" sorusuna odaklanıyor. Yazılım ekipleri işin en başında, birkaç saatte çok sayıda fikri denemek için kullanıyor.
Mockup: bitince nasıl görünecek
Mockup, tasarımın renkleri, yazı tipleri ve görselleriyle bitmiş halidir. İki anlamda kullanılıyor ve ikisi de doğru:
Birincisi, tasarım ekibinin kendi içinde "yüksek doğruluklu tasarım" dediği şey: ekranın son hali, ama tıklanmıyor.
İkincisi, bu bitmiş ekranın gerçek bir cihazın ya da ortamın içinde gösterilmesi. Bir uygulama ekranını iPhone'un içine yerleştirdiğinde ya da web sitesini bir MacBook'un ekranına koyduğunda yaptığın şey bu. Pazarlama tarafında mockup denince çoğunlukla bu anlaşılıyor ve Mockup Center'ın yaptığı da bu.
Prototip: nasıl çalışacak
Prototip, ekranları birbirine bağlayan, tıklanabilen bir modeldir. Bir butona basınca sonraki ekran açılır, menü kayar. Kod yazılmadan önce kullanıcıların uygulamayı nasıl kullandığını görmek için yapılır.
Figma, ProtoPie ve benzeri araçlarla yapılıyor. Bazı ekipler doğrudan kodla da prototip çıkarıyor.
Hangisi ne zaman kullanılır
Tipik bir projede sıra şöyle ilerliyor:
- Wireframe ile ekranların planı çıkar ve ekip anlaşır.
- Tasarımcı mockup'ları hazırlar, yani ekranların bitmiş halini.
- Mockup'lar bağlanıp prototip yapılır, kullanıcılarla test edilir.
- Uygulama yayına çıkarken ekranlar cihaz mockup'larına yerleştirilir: App Store görselleri, tanıtım videosu, web sitesi.
Son adım çoğu zaman unutuluyor ve en aceleye gelen kısım oluyor. Oysa kullanıcının uygulamayla ilk karşılaştığı yer orası.
Tek cümleyle
Wireframe "nereye", mockup "nasıl görünecek", prototip "nasıl çalışacak" sorusunu yanıtlıyor.
