Wireframes, mockups and prototypes – do you need them all for perfect design?
Captivating, high-quality design is as much important as the back-end part of any software. The first judgment about your product will be made by its appearance. Also, the notion of design no longer includes just a picture. It’s the whole concept and value of your future mobile app or a website. So, let’s find out which steps should be done to create web or mobile app design.
If you simply ask google, what the process of creating a design consists of, you may find scores of variants and definitions, which sometimes don’t give too much clarity. But experience is the best teacher. We believe, that there are 3 the most necessary stages in the design creation. They are – wireframes, mockups and prototypes. Let’s discuss them one by one in a detailed way.
Any project starts with an idea. When some valuable thoughts come to our mind, we write them down and draw some schematic pictures. If we talk about building a new house, we start with defining the style, the number of stores and rooms with their sizes and draw a plan. Simply speaking, a wireframe is a blueprint of the future product design without a deep detalization.
What does wireframe include?
Before you start, think about whom you are going to show it. If it’s not just for your personal usage, but for the client and your team, it should be accurate and clear for understanding.
The wireframe should be illustrative on the following things:
- the logical flows of the future app or a website
- the navigation bar and its elements’ placement
- the location of headings, texts’ blocks, illustrations, their sizes and appearance on the pages;
Why is wireframe handy?
Even very ingenious people make wireframes to start working on their ideas. A wireframe helps to put thoughts into shape and make it illustrative for all the participants of the development process. If the project is small and not long-lasting, you can omit this step and move right to the mockup. But if the project is very massive we strongly advise to take the wireframing stage very seriously because of the following reasons:
- helps to structure ideas and stimulates the new ones during the wireframe creation;
- lets you indicate proportions, change, add or remove elements and try different variants;
- it may look bad but it must show the product’s main tasks and how the product solves them
- assists a lot in the communication process, both in the team and with clients;
- can save a bunch of time and money, because it’s much easier to adjust anything at the early stage of the development process.
After your future house plan is ready, you start choosing materials, colours and work on the design detalization. The task of this stage, in contrast to the wireframing, is to work on all those details, which we were not interested in, while creating the “skeleton” of the idea. The mockup is intended to “dress” the sketchy wireframe in shapes, shades of colours and all possible details.
In other words, a mockup is a static, yet a very detailed model of the future project.
Why is mockup urgent?
Unlikely to the wireframe, where you are pretty free in filling it out, here the attention to all details and high quality is a must. Mainly, because it’s even not just for the team usage. In serious projects mockup is a part of the technical documentation. Moreover, in a vast project with a massive budgets stakeholders (product owners) should clearly see what their product will look like. And only clarity and quality can make them continue the cooperation with the designer or the whole team of developers. Even if the budget isn’t huge, a good mockup is very favorable for those clients, who understand the general idea but have difficulties with the detailed vision.
So how does it help in your work?
- All the team benefits from the detailed mockup, having an unfolded description of the future product;
- both, the team and the clients can see clearly what they are going to get;
- the client can confirm the design or ask to make some changes.
What should you consider creating mockup?
A good quality mockup should cover the following issues:
- Which style is chosen to create the product’s design;
- What are the colors, shapes, fonts, indentations, etc;
- Which UX elements are still missing, like buttons, headings, search fields and which are not needed;
For instance, in comparison to our Themes and Templates, we can take Brixton as an example. I first designed the PSD template in Photoshop as a mockup and after that our developer made a WordPress Blog Theme from the mockup.
In the automotive industry, a prototype of a car is the final design and engineering decision which is used to be tested and find out the feedback of the audience. It may serve as a model for the future series (with some changes) as well as be declined if the audience doesn’t accept it. In the web and app development, it’s a dynamic, ready to use model of the future product, which shows in motion how users will interact with the product and mainly serves to test the product’s interface. A prototype doesn’t include the back-end part.
Why do you make a prototype?
Both clients and developers need a good prototype. Customers can clearly see if they get what they want and it functions and looks as they want. Developers can check if they do what they should and if they do it right. So, the main benefits from prototyping are:
- a vivid model for testing and confirmation;
- an illustrative model for the further work for designers and programmers;
- a time and money saving solution which prevents from unnecessary work directly in the development process.
What to consider before making a prototype?
Usually, a prototype goes after a wireframe and a mockup. But sometimes it can be created without its two ”brothers”. This is called rapid prototyping and is used to make up a model very quickly or the project isn’t big and all requirements are clear. So you should weigh all pros and cons to decide if you need all three steps or it’s possible to make a prototype at once. Before you start, consider these moments:
- What are the most frequently used suitable scenarios for this product?
- What should be the alternation of elements and screens in different scenarios?
- Is it possible to make the UX better?
You can come up with more questions/points to cover, but these are the basic to ask yourself before making a prototype.
Even in the 21st century it still starts with a pencil and paper first. But to work as a professional you will need some of the software, described below.
Axure RP – standard license is $289, PRO license is $589. There is a free 30 days trial term. Axure is a great software for creating static and dynamic prototypes both for mobile apps and websites, but if you are a beginner, it takes some time to master it. There is a free storage for keeping your prototypes to which you can give access to other people. It’s a number one program in UX/UI design today which supports Windows and Mac.
Proto.io – is a web-based software service with a wide range of pricing, from $24 annually for freelancers up to $160 annually for a corporate usage. You can create a static or animated dynamic prototype in this service for all mobile and desktop platforms as well as download a prototype from photoshop and continue with it in Proto.io. The service has libraries with native elements for different platforms to make the design process easier and faster. One more bonus is an app which lets test your prototypes in their native environment.
Mockplus is a software for creating dynamic prototypes for Windows, Mac, Android and IOS from Jongde Software LLC. Its basic version is promised to be forever free, a more professional annual license is $129 and unlimited is $399 per user. Mockplus has rich libraries with pre-designed components for fast and interactive prototyping. The software doesn’t require very deep knowledge to start so can be interesting for beginners, but surely is useful for experienced developers too.
Pidoco is one more web-based platform with a wide range of instruments to create prototypes for websites and apps and test them on the needed environment (IOS, Android). The pricing varies from $12 to $175.
Framebox is a free web-based platform for quick wireframing and sharing it with your friends and colleagues. But, as a free service, it can’t provide you with rich functionality.
The competition in the IT market is really high. And a great design may add your product a huge value among other similar websites or software. A great result comes from a good quality work, so we really advice to follow all the three steps in creating design, rather than having only a mockup or a prototype. If you agree with us that everybody should do his job, do not hesitate to hire professionals!
The author of the article is Olga Anoshyna, a copywriter at Cleveroadю It is web and app development company in Ukraine that successfully implements various projects of any complexity. The main goal of the company is to provide clients with quality and exceptional software.