Design Tips / Difference between wireframe, mockup and prototype
Resource slide 1
Resource slide 2
Resource slide 3
Resource slide 4
Resource slide 5
Resource slide 6
Resource slide 7
Resource slide 8
Resource slide 9
Resource slide 10
Difference between wireframe, mockup and prototype
from @konstantinzhuck - Do you get confused when talking about wireframes and prototype? Don’t know what «mockup» exactly means?⠀ .⠀ I will help you to get this clear. I was confused too! I thought that the prototype and the wireframe is the same thing. But it’s not right. Let me explain.⠀ ⠀ 1) The wireframe is a «blueprint» of the future design. It’s a structure of a page/screen made with simple blocks. Without any graphics. It’s one of the UX design steps. You should place all text and elements in the proper way based on your UX research. The wireframe can be low, medium and high fidelity.⠀ ⠀ 2) The mockup is a final version of the UI design. But there is one more meaning. The mockup is also a device or a place where you can put your design. For example iPhone XS mockup or Billboard mockup. I recommend using the term «design mockup» when you are talking about your UI design.⠀ ⠀ 3) Prototype. I always was confused about it. So, the prototype is not a wireframe :) Prototype shows how the website/app works. Like a simulation of a real product. It could be animated or just build with InVision or Marvel app. So! The prototype is not a wireframe. The prototype shows how the design flows.⠀ ⠀ That’s all! Hope my post helped us to figure it out.