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

Low-fidelity

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, Proto.io

High-Fidelity

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:

Comments

Popular posts from this blog

What? You Are Still Doing High-Fidelity Prototype Slowly?

Have you ever spent half a month designing a high-fidelity prototype, but it was denied within a few minutes? So much time and energy have been spent but in vain. I have met similar things so many times. However, such tragedy can be totally averted: the rapid low-fidelity prototype is a wise choice in prototype design.
1. What is a high-fidelity prototype and a low-fidelity prototype?
Low-fidelity prototype: it only focuses on functions, structures and processes; it only provides the most simple frameworks and elements; it generally does not provide color, butexpresses itself in grayscale.

High-fidelity prototype: it provides more visual details; it is almost equivalent to a UI effect picture, and only needs to replace the actual data and materials in the development process.

2. Why make a low-fidelity prototype?
In product development, the goal of a prototype is to express its ideas, functions and content, in order to get feedback and improve the product. The most important challeng…

User Experience Model: Measuring And Understanding Behavior of Users

A good user experience is one of the key success factors for digital business models: How do the users discover the website or application? Do they abandon or leave? Do they use them regularly or even recommend to others? These are about the question of the user experience (UX), which can be measured with specific user experience model. Now, let me show you how to do it.
The performance of digital media can be traditionally controlled by technical metrics such as page impressions, retention time, or conversion rates. They can indicate the behavior of the users on the site, but they don’t predict its cross-platform behavior as well as its behavior outside the product. Either good or bad UX will influence not only the direct use of the product usage, it also has an impact on the brand perception and the customer's behavior. It is, therefore, worthwhile to use the canon of the key performance indicators (KPI) and to raise them regularly. In order to understand the causes and the eff…

UI Designer Salary Research of 2017 in the United States

In recent years due to the rise of mobile internet, it has led the popularization of UI design. Nowadays big internet companies are increasingly focused on interaction design and user experience, and several internet behemoths have established UI design departments one after another. As people expect more on user experience of internet products, UI has increasingly become the core concern of products. UI design will certainly become more and more popular, and UI designers will certainly have a bright future. This article makes a detailed analysis of the report of UI designer salary research in United states.
1. How much does an user interface designer in the United States make?
The average user interface designer salary in the United States is approximately $89,106. This UI designer salary research obtains its information from 10,591 data points collected directly from employees, users, designers from top design communities, and job advertisements on Indeed in the past 12 months.
Ple…