Terminology used in design process is being used so loosely that sometimes it is very confusing to differentiate the phases of the process.
(1) While it might seem innocent enough, referring to a mockup as a wireframe is like a carpenter referring to a hammer as a screwdriver.
So the first thing is that there are three phases of design process i.e. Wireframes, Mockups and Prototype.
Wireframes are created in early step of the process, it’s like blueprint of design scheme. Most of the time spent during wire framing is deciding layout and organization of content, before going for any visual details. It doesn’t mean that wireframes not concern with visuals but you enough details like required space between element, positioning.
Source: Stack Exchange
The wireframes can be shown to stakeholders who want to see the results early on and thus can reveal potential edit before wasting time developing them further.(1)
(2)Professor Tingbin Tang’s says in his Design classes series at San Jose State University ‘Wireframes are created by user experience professionals called “Interaction Designers” . The interaction designers who have broad backgrounds in visual design, information architecture and user research, create wireframes for the purpose of arranging elements to best accomplish a particular purpose’.
To get deep into Wireframes follow up this video by Kiersten Bonifant, Web Designer at Evolve Creative Group :- https://www.youtube.com/watch?v=T0vt3nLZKks
Yisela (Graphic Designer SE) has accurately differentiated between wireframes and mockups. You can read here:
Mockups do for visuals what wireframes do for structure. They represent how the final product should look like. Mockups offers chance of deciding color scheme, typography and styles. As explained
In Guide to Mockups (https://www.uxpin.com/studio/ebooks/guide-to-mockups/) Mockups fill in the visual details that wireframes neglect adding skin to the bones. As visual displays they can be either mid- or high-fidelity, depending on your time and resources.’
Source: Google Images
The same way that wireframes set aside time to decide structure in the same way mockups set aside time for visuals. Wireframes require viewers to use their imagination, but mockups are much closer to the final product design.
Giving a product directly into the hands of user without any real interaction and testing is absolutely begging for a failure. Prototyping is the first where we can interact with our product UI and raise usability and other problem if any.
Thus, this makes Prototyping an important phase of design phase and can reduce the chances of product failure.
Source: Google Images
Important Mention: Balasmiq Mockup is a tool used for making ‘Wireframes’, not be confused with the name of software and call wireframes as mockups. As on official site of Balasmiq Mockup also they say it clearly, ‘Balsamiq Mockups is a rapid wire framing tool that helps you Work Faster & Smarter. It reproduces the experience of sketching on a whiteboard, but using a computer’. It can confuse us by the terminology of low-fidelity and high-fidelity mockup, one may consider a high-fidelity wireframe.
This is what Vipor Cipan(CEO UX Passion) says about High-fidelity and Low-fidelity wireframes (https://www.quora.com/What-is-the-difference-between-high-fidelity-and-actual-design). But the fact to keep in mind is that Wireframe and Mockup totally serve different purposes.
Thanks for reading, will be back with more. 🙂
- Shivam Kumar