Creating design is a multi-step process that requires careful analysis and good planning. Best practices show that design takes about 30% of total development time. This indicates the complexity of the process that cannot be performed at a heat. In view of this, many designers follow generally accepted approaches that are based on wireframes and mockups.
There are different points of view concerning the above concepts. If you ask Google about the difference between them, you will receive literally hundreds of thousands of results. Having read all the information, you may still be unclear about what is what.
What is wireframe?
A wireframe is neither more nor less than a draft of the product. When painting a picture, an artist firstly draws a sketch. It works the same way with mobile and web design.
Wireframe introduces a general scheme of the app or site and shows the layout of its components. It is usually the first step in the design process. For better understanding, imagine a building plan. It maps out the number of rooms in the flat, their deposition and measurements, you can see whether accommodation has a separate kitchen and which way the doors and windows are located.
Wireframes may differ depending on the level of detalization. However, all of them reflect a basic view of app or site with a proper placement of buttons, tabs, icons, and other elements.
What is mockup?
Let’s get back to the picture and the artist. Having composed a sketch, the master starts lending colors to the image. In the case of mobile and web design, you get a full imagination of the nature of the product. Not only can you understand how the objects are going to be arranged, but see their shapes, fonts, and, sometimes, colors. If wireframes tend to skip all the tiny details, mockups, on the contrary, aim to illustrate them at full length.
You should take mockup as a static representation of the final product. It is not just a blueprint but the end look of the application or website. Here, the designer decides on the buttons names, icons form, fonts sizes and types. He / she also sets a spacing between the elements and determines intervals and gaps. Wording and terminology are being selected at this stage. Also, designer starts picking up images that will appear on the site.
Mockups serve both for the team and the client. The first uses it as a detailed instruction for the development, the second – as a clear example of the finished product.