Difference Between Wireframes and Mockups
Wireframes and mockups are terms that are often used synonymously, and they are indeed quite confusing.
Wireframes and mockups actually represent the different stages of design flow.
Wireframe
A
wireframe is a low-fidelity way of showing a design. It’s the graphic
representation of an app or a website containing the most essential
elements and the content. A wireframe is like a blueprint of a building.
When someone wants to build a massive building, they don’t start right
away, right. Instead, they sketch, draw, make the blueprints, calculate,
etc.
The
same happens with website and app design. You cannot just start right
away because you may undergo the risk of overlooking something or
missing a vital element. In this respect, a wireframe will help gather
things together and see the big picture. A few characteristic features
of a wireframe are the following:
- It shows the main chunks of content
- It draws the outline and the layout structure
- It depicts the most basic UI
There
different ways one can create a wireframe. One way is to sketch it in a
notebook. Another way is to use wireframing tools like UXpin, Balsamiq,
etc. There are plenty of tools you can use!
One
huge advantage of creating a wireframe is that it is not expensive and
it fast to complete. You can show it to potential users and ask for
feedback which is great because people will pay more attention to the
functionality and user experience than the aesthetics. You are going to
fine-tune the aesthetics later on anyways.
Mockup
A
mockup is a visual way of representing a product. While a wireframe
mostly represents a product’s structure, a mockup shows how the product
is going to look like. But still, a mockup is not clickable (just like
the wireframe). As opposed to a wireframe, a mockup is either a mid or
high-fidelity display of design.
Mockup enables UI/product designers to collect the feedback on part of visual look of product in a quick way.
A
mockup helps you make final decisions regarding a product’s color
schemes, visual style, typography. With a mockup, you can allow yourself
to experiment with the visual side of the product to see what looks the
best. Here again, you can ask your potential users for feedback and
make the necessary changes right away. This will save you way more time
than getting back and making adjustments to the UI after you have
launched the product.
As
opposed to a wireframe, you cannot sketch the mockup. You might need to
use a mockup tool. There are plenty of them, too. You might want to try
Marvel, InVision, or Moqups.
Conclusion
Wireframe
and Mockup each of them has its own characteristic and usage scenarios
in a specific stage. How they are used might depends on your specific
needs. To know when to use which one is essential for a qualified
product manager or product designer,should be one of the basic literacy
for them. Anyway, always remember: don’t ever wireframe or mockup a
website or mobile app without the user in mind.
Comments
Post a Comment