Mobile or web application is always a tricky deal, whether you are a “freshman” or a true “pro” in UI/UX design. It becomes especially hazardous when business participants start confusing the subtle design development stages, expecting the UI/UX designers to deliver a ready visual prototype at the end of the first stage once they’ve heard the word “wireframes”. In our UX design company, this is a necessity – to recognize such terms as “wireframes”, “mock-ups” and “prototype” from one another. Let’s delve into it.
Wireframes
In a nutshell, wireframes are all about seeing the structure of a future technological product. In this, all that really matters is a general idea and the structure. No details are presented at this point. It’s like a blueprint, where you have the main perceptions organized in a logical way. A wireframe in the world of Web and Mobile app design can be compared to a sketch made by some painter on a real paper.
There is a range of famous tools used to create wireframes, where you can have all the basic elements and instruments needed to create a set of interconnected wireframes in a blink of an eye. Some of the most useful and component-rich are:
- Balsamiq;
- Omnigraffle;
- Axure.
Also, you can check the latest UI-UX trends to be aware of everything or you can use paper, pencil and as much imagination as you can.
Mock-ups
This is an intermediary step between a draft and an interactive visual prototype. The main difference with a prototype is that a mock-up is a static representation of what the app will be. It’s like a gallery of pictures, that demonstrate what the final UI design will look like. While wireframes are about structure and general logic – a skeleton, in one word, mock-ups add “skin and flesh” – all the visual aesthetics, buttons, colorful illustrations, and other graphic elements.
On this step, UI/UX designers take advantage of such specialized software like Adobe Photoshop, Adobe Illustrator and, for example, JustInMind.
One more important thing: make sure that your client also has a clear understanding of the inequality of Mock-ups and a Prototype. In order to avoid failing to meet unrealistic expectations, you should set the things up before the delivery.
Prototype
Now we can talk about real experience and interaction. The prototype is the final step to the border, where software engineering and code writing begins. You may ask “Why not start programming right after the delivery of mock-ups?”. Well, your client will be much happier to see a clickable prototype to test the future app’s usability and responsiveness BEFORE multiple hours of programming will take place and thousands of dollars will be spent. It’s easier to apply some fixes to a prototype, than to a ready-made product.
The greatest value is that a prototype is something that can be shown to the stakeholders, investors, and some end users. You can’t use real data within a prototype, however, it’s enough to see the pros and cons of the UI/UX. This is the closest thing to a real product.
Among the most outstanding solutions for creating interactive prototypes are:
- InVision;
- UXPin;
- Proto.io.
Conclusion
Wireframes, mock-ups, prototypes…to most of the people, not acquainted closely with IT, these words will seem to have identical meanings. However, it’s essential to keep in mind that the three fundamental UI/UX concepts are not equal – your clients should be aware of what to expect. Everyone should have a single vision of the process: wireframes first, then mock-ups and finally – a prototype! Remember this simple flow and you will always be able to make the best presentation of your product or service!