Photo by UX Store on Unsplash

Faydalı Bilgiler

Sketch, Wireframe, Mockup, Prototype arasındaki fark nedir?

Arayüzü olan Web, Mobil, Desktop uygulamaları geliştirirken UI kodlamaya başlanmadan önceki süreçte gerçekleştirilen adımlar nelerdir? Ve bu adımların sonucunda nasıl çıktılar oluşur?

Ürün arayüzü geliştirme sırasında kodlamaya geçilmeden önce uygulanmasında faydalı olan bazı adımlar/aşamalar vardır. Bu adımları ne kadar hakkıyla uygulayabilirseniz bu sizin projenizde sonradan çok maliyetli olacak değişiklikleri önceden öngörebilmenizi sağlar. Bu adımları ve neleri içerdiklerini aşağıda anlatmaya çalışacağım;

Sketch → Wireframe → Mockup → Prototype

Sketch: Projenin en başlarında fikrinizi hızlı bir şekilde anlatmanızı sağlayan karalamalar, çizimler. (MindMap ’te kullanabilirsiniz)

Wireframe: Projeniz ilerlemiş fonksiyonel akışlar belirlenmiş bu yönde projenizi anlatmanızı ve tasarım seviyesine geçmenizi sağlar. Ekranlar yinede değişiklik gösterdiği için bu aşamada tasarım ile uğraşmamak daha anlamlıdır.

Mockup: Projenizde yer alan sayfaların görsel tasarımına yönelik , renk paletleri , bileşen görsellikleri üzerine yapılan çalışmadır.

Prototype: Bileşenler ve sayfalar ile kullanıcının etkileşimi test edebilmek için yapılan çalışmadır.

Referanslar

• https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/
• https://www.farshore.com/blog/what-is-the-difference-between-a-sketch-wireframe-mockup-and-prototype/

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.