The images and icons aren’t clickable yet. There are no transitions, animations, interactions, or responsiveness at this stage. It is still static at this stage, vaguely resembling a slideshow of all the screens. It is a middle-to-high fidelity rendition of the design that provides a clear overview of what the app is supposed to look like when completed. This is where you begin to add images and logos, text and details. MockupĪ mockup takes things further from the wireframe. When creating the wireframe, the focus of the activity should be on communicating with the team to set clear goals and get the project on track. At this stage, you are basically creating a blueprint for your app and allocating a place and size to every element on the screen to give the app development team an idea of taking things further. Just the most basic symbols like ‘crossed box’ for the image, a box saying ‘logo goes here’ and ‘lorem ipsum’ for text is enough. The wireframe is a low-fidelity rendition of the design and, hence, you don’t need to add any images, fonts, logos, or even text at this stage. It is the digital equivalent of a sketch on paper. A wireframe is the most basic manifestation of your user interface (UI) design. While that is largely what a wireframe looks like, this simple-looking tool serves a very important purpose.
You are probably imagining a dull and monotonous spread of gray, black and white boxes right now. Let’s now dive into a detailed explanation of each and see how you can use them in your design process. This, in short, is the difference between wireframe, mockup, and prototype. You can very well walk in, take a tour and look around and experience it like a real house before you buy a real one. You cannot, however, live in it.įinally, the prototype would be the display house, or ‘model flat’, as it is called popularly. You can comfortably gauge the beauty, the quality and the utility of the house by looking at the scale model. It would give you a very accurate idea of exactly what the house will look like when built. It tells you exactly what the layout of the house would look like and where every component would go. If an app were a house, the wireframe would be the architectural map or blueprint.
To make a quick comparison, just for better comprehension, let us consider an example. Gaining a clear understanding of each will help you get a better perspective of the design process and make use of each of these features for maximum benefit.
While they are similar in purpose (all three are ways to present a design), each one is a specific step in the design documentation process and serves a distinct purpose. The words ‘wireframe’, ‘mockup’ and ‘prototype’ are often used interchangeably, but that’s not quite the right approach.
0 kommentar(er)
