What are main difference wireframing, prototyping and mockuping?

Uff, there is lot of confusion between prototype, wireframe and mockup. Individual people have different views on this trilogy. Today, this post explains what main difference between three is.

Beginning with a wireframe

Wireframe is most important part of any website process. Wireframe is a sketch of a website or application before any kind of design element take place. We can say in other words it’s a backbone of any design.
It is basic visual representation the main elements with gray boxes, it’s not represent graphics elements. With the help of the wireframe we have a quick idea about design where we put the element on the website or application.
• Wireframes visualize the essential components of an online page.
• The Layout of content
• Pages are not connect or link
• Wireframes is typically created in ADOBE MUSE.
One wireframe pages are connected or linked with each other’s it becomes prototyping

Where Wireframe becomes prototyping?

In prototype we represented the flow of final products. Prototype is all about behavior and functionality. Linking wireframe to each other enable the user to expertise and check their flow through the interface.
In a prototype main focus will be on any combination of the many totally different properties, as well as however not restricted to make, function, visuals and materials.

In my opinion the most worth of prototypes is that they assist answer queries (what can the product do? And how product is working? ).

Both Wireframe and prototype are different than mockup. Mockups are skin and visual aspect.

Then what is Mockup?

Now, we know that wireframes are “Where elements are placed?” and prototypes are “how product flow is working?”, Then what is mockup? Mockups are created in the adobe Photoshop according to the structure, or wireframe. Mockups are consists of several pictures, vectors, graphics, typography, colors, icons etc. Mockups are typically created in abode Photoshop, adobe illustrator, Gimp etc.


  • WireFrame:Sketch of interface, blueprints.
  • Prototype:Flow and functionality of final products.
  • Mockup:Convert wireframe into actual visual design.

Leave a Comment.