Skip to main content

How to Make Right & Rapid Prototyping?

Sketches, wireframes, design drafts, high-resolution visuals: Prototypes are indispensable for the development of interactive applications. We explain the differences and say which type is suitable for which task.

In the development of digital products, no way leads to prototypes. Their goal and purpose are to create a graphical representation of ideas, functions and content to get feedback and improve the product. The most important challenge in interactive design is usually the interface: it should be user-friendly, intuitive, best self-explanatory.

The development process constantly raises questions, which must be clarified by means of prototyping: What elements does the user perceive? How does an object react to it and what is the logic behind the whole system? Is this logic easy for the user? Prototypes help to find realistic answers based on experience values, in this way making the best design decision.

But what kind of prototype is suitable for which phase of an interactive project? What makes it? Should it be as elaborated as possible or is a simple, fast execution? Are simple prototypes possibly overtaken, where you can also quickly click on interactive prototypes with the right tool? Is it the designer, the developer or the UX expert, who takes care of their production?

Testing by all means from low to high fidelity

Prototypes have a different degree of fidelity in terms of appearance and functions. Sketches or scribbles are usually sufficient for the first sketches. In this category of the Low-fi prototyping also monochrome wireframes still keep rough, which are usually already digitally created, it can however already bring structure and functionalities in the focus. These schematic sketches do not have to be colorful and fancy at all, visual elements mostly remain outside, and Lorem-ipsum texts are common.

With Axure, Balsamiq, Justinmind or Mockplus, there are a few tools with a large selection of elements (buttons, links, menus and cetera) that allow you to quickly create an interface. By integrating further design elements, the wireframes can then also be refined into sophisticated click-dummies.

In the phase of Hi-fi prototyping, a project occurs as soon as mockups are made

These are detailed design drafts, in which colors, shapes, textures, distances and fonts are added. There is no technical standard for this, a mockup can be created as a PowerPoint presentation, as an HTML design (with one of the prototyping tools mentioned) or as a graphic. For example, you can use Photoshop to approach the visual design you are looking for. If website or app is animated, video dummies, for example in the animation software After Effects, demonstrate to the customer as well as the programmer specifically where the trip should go.

Team discussions and concept tests do not need bling-bling

However, the process is not so straightforward as it is in practice, since the type of prototype that is best suited depends on several factors: the target group and its technical background, the interest in knowledge, and the development phase.

"There is nothing better than simple sketches by hand," says Miriam Scheibe, self-employed UX designer in Hamburg, "to gather ideas or to move between the concept and the developer like ping-pong.” Scribbles can also be used to display behavior and interactions by grouping several screens as flows and hanging a few sheets side by side, for example, to show what happens when the user goes through a check-out process. Since in this early phase only the concept is verified, there is no need for visual design. "The vaguer an idea is, the simpler the prototype should be", Miriam Scheibe said. And for those Scribbles are too far away from the product because they need a more specific form for early testing, they can also capture their paper templates and turn them into a simple interactive website or app prototype using a prototyping app.

Detail Internal, Eye Candy for the official

Wireframes serve internal communication in order to convey the information of architecture between design, visual design and development. Although this can be done with a rigid PDF file, many tools offer far more: instead of a lavish task that no one can read, more and more agencies are creating interactive wireframes that simulate the application's behavior. Rapid prototyping tools such as Mockplus help a lot.

Visual work is necessary wherever it is not only communicated internally and at a common professional level. "If the team has agreed in the concept phase and wants to get an OK from the head of product or department manager, the presentation form has to become more concrete," explains Miriam Scheibe. "Because these people usually do not have much time, you have to bring the idea over like an elevator pitch. In the absence of time and budget for the Photoshop design, wireframes can also be embeded by integrating backgrounds, graphics, fonts, or colors."

Even if agencies present their customers or start-ups in front of venture capital donors, it is better to rely on Hi-Fi and not rely on the abstraction ability of the audience. In such situations, fulminant aesthetics and impressive look-and-feel are still more than sophisticated functionalities and click-throughs.

Choose & use the right prototyping tools in different project phases


Function: With scribbles and coarse wireframes you can easily and quickly get feedback on new interface ideas and experiment in agile creation processes. For external tests, more concrete forms help.
Degree of elaboration: simple designs without claim
To completeness and graphical binding, which can be quickly changed and supplemented.
Tools: pen and paper, Flinto, Marvel,


Function: Hi-Fi prototypes are detailed design drafts, interactive click-dummies with a sophisticated design and videos with graphic animations or screencasts. They are suitable to present to investors or customers - including the look and feel of the digital service or product.
Degree of elaboration: Limited to two to three important, designed pages
Tools: After Effects, Photoshop, Mockplus, Justinmind, Sketch

Programmed with specification

Function: Fully functional interactive wireframes, in which the interface elements, their arrangement and especially the screen flow are already fixed - often with a simultaneous playable Word specification. Also the behavior (animations, responsiveness et cetera) is clearly recognizable, which facilitates communication at the interface between design and development.
Degree of elaboration: All functions and elements including their arrangement are defined, only the text level is open.
Tools: Axure, UXPin, Mockplus and Justinmind

Read more:


Popular posts from this blog

5 Top UX Design Trends For 2018

With the rise of sophisticated technologies and intuitive website design, user experience has never mattered more. You need to keep in mind is that web design is not about implementing various innovations to your website only, but also about providing your visitors with exceptionality and greater utility. This is exactly why this field needs to be constantly changed and tailored to your users’ needs. Here are top 5 trends that will shape the ever-changing UX design world in 2018. 1. A Greater Influence of Content on UX Design image source: I have recently discussed the major UI design trends for 2018, from borderless display to cards. Apart from looking truly awesome, these innovative solutions work together towards reaching a common goal- making your content easily digestible and visually appealing. Today, the emphasis is put not only on the quality of content, but also on its visual elements. Put simply, web designers are striving…

5 Secrets To Design An Excellent UX Designer Resume and Get Hired

The Bureau of Labor Statistics (BLS) reports that there are three related industry positions that show exceptional promise - Software Development and IT, User Experience Design, Product Management and Project Management. UX designer becomes one of the hottest creative industry careers nowadays with a total job amount of 3,426,000, and the job growth is 22.1% in 10 years. CNN shares some researchers about UX designer’s salary: Median Pay is $95,000 and the top pay is up to $150,000. More information about UI/UX Designer Salary Around the World. Quite appealing, right? Would you like to be one of the trends? How to get hired? What skills should you master? If you are a UX designer already, pass this part. If you are a newcomer, check Beginner’s Guide: What Is An UX Designer to quickly get a basic understanding of it. Well. Now we assume you are all set to get a UX designer job. What do you need? Usually, the process you get a UX job including 5 steps: Step 1: Prepare your resume Step 2:…

Top 15 UX/UI Designers You Should Follow to Flow Out Inspiration in 2018

As is known, design is a rather broad and hard-to-define term. There are a wealth of different responsibilities encompassed by the term designer and design-related roles which have been existing in a wide range of areas, varying from print (publications and magazine) to industrial design (furniture and cars). With new design roles emerging in the industry, job titles like UX/UI designers seem to be confusing for both experienced and uninitiated designers. Before diving deeper, let’s have a quick look on the difference between UX and UI terms. User Experience (UX) designis a concept that has many dimensions and primarily concerned with how the product will feel. To solve a specific user problem, a UX designer will explore many different approaches, as any given design problem doesn’t have one single right answer. By identifying verbal/non-verbal stumbling blocks, UX designers refine and iterate to make the “best” user experience. Here is how Laura Klein (the author of UX for Lean Start…