Creating a High-Fidelity User Interface & Interactive Prototype in an hour

Published in

UX Planet

9 min readMay 3, 2019

After we have one big idea from the ideation process, the next step is we will not work together to change the big idea into a wireframe on paper or digital wireframe only.

Even though we do this stage very quickly with limited time (1 hour). However, that doesn’t mean we can’t do our best and make it perfect.

Here we will make a big idea into a high-fidelity user interface with beautiful visual quality and then proceed with making interactive prototypes with interactions similar to the actual application.

Why High-Fidelity?

Please note that we make a prototype to get insight from the user during the validation process. The difference between low-fidelity and high-fidelity is the insight that we can get. By using high-fidelity prototypes, the insights we get will be more optimal.

We communicate our ideas better and test our prototypes specifically and in detail, such as workflows, UI elements, graphic elements, design hierarchies, legibility, image quality, interaction, emotion, animation, etc. And will be done at the Usability Testing stage.

The more interactive and realistic our prototype is, the more realistic the user will interact with our prototype so that the user will provide optimal insight as when they interact with the actual app.

1. Tools

A lot of design tools offered a variety of features and help us to speed up and simplify the process of designing user interfaces and interactive prototypes without having to expert in designing and being an expert in coding. Therefore, it’s not impossible for us to make a perfect prototype with a beautiful design in a very fast time.

Do’s:

Using tools that are easy to get, easy to learn, easy to use, and familiar
Using tools that can be used on various platforms such as Windows, Mac, or even Android and iOS.

Don’ts:

Try out new tools & takes time to learn
Set tools in the middle of the process
Try out features that are not needed.

In this article, we will try to choose “Marvelapp” since this tool has many advantages & support us in completing our prototyping process quickly.

Marvelapp has several advantages that we need in the process of creating user interfaces and also interactive prototype:

Can be used to quickly make high-fidelity user interface & interactive prototypes
Web-based, so it can be used on platforms such as Windows and Mac
Provides applications for Android and iOS so the process of designing & prototyping can be done on a mobile basis
Provides applications for Android and iOS so we can validate directly from the Marvelapp application on our Android or iOS platform.

2. Adopt potential big ideas into a Flow

Starting to design applications without understanding flow is a wrong step and we will waste time and energy. Understanding flow first helps us to focus on what information we want users to see and what actions users need to take. So we can convey it in an effective way.

Big Idea from ideation process (Crazy 8s)

Do’s:

Keep referring to the moment/focus of the big idea
Discuss and understand the flow quickly
Check and re-order if there is a flow that is still not sequential.
Also, understand the information and actions that will be displayed on every page we want to make.

Don’ts:

Start designing immediately without clear flow and with the random flow
Don’t understand what you want to make
Too long discussion.

3. Visual Design Style

Avoid copying the aesthetics/design of a particular product or application without clear reasons. Start looking for design inspiration that fits the application categories, patterns, and elements that we will create.

After that, quickly understand the identity of the product we are going to make, especially in the colors that represent our product.

Keep in mind, this is the initial iteration you designed for your product. So, you will have time to iterate the next design after we validate.

Use this web to look for design inspiration based on patterns and elements: http://mobbin.design

Do’s:

Look for design inspiration & styles that match the applications we make based on the categories, patterns, and elements we want to make. Example: “Health” category, “Charts” pattern, “Cards” element.
Do a quick analysis of the identity of our brand product to determine color and style design. (Example: Health & fertility use a green base and must look clean).

Don’ts:

Debate to determine the color & visual fit
Make several design options for each page
Change the design style during the design process.

4. Apply Design Theory & Basic Principles of Visual Design

In Validation Stack, this stage is the lowest level before we do Design validation to the next level such as User Research and User Evidence.

This part is very important. We will use this systematic method to prove that at least our prototype design is supported by theoretical principles and has scientific foundations for good design.

Here are some design theories and principles that can be used as references:

🔸 Visual Hierarchy

A good visual hierarchy helps us present information in an ideal way and has a clear structure. So, users can understand the order of information for each element. Hierarchy can also help our brains distinguish the most important sequences/levels of visual elements in design and reduce cognitive burdens. It allows users to take the actions they will take. We can create a visual hierarchy by distinguishing size, color, contrast, fonts, and using other basic design principles.

Do’s:

Combine this technique with the “proximity” design principle
Use font types that have a complete font weight type such as Thin, Light, Regular, Medium, Semibold, Bold, Extrabold, and Black. This will make it easier for us to create visual and information hierarchies.

Don’ts:

Distinguish each visual hierarchy using many colors and sizes
Use more than two types of fonts/typeface and are not natural in combining fonts.

🔸 Content

The habit that must be abandoned when creating designs and prototypes is to always fill in the content using “lorem ipsum”, the most used dummy text by designers. We will not be able to run valid Usability Testing with dummy text because real users really need real content to understand and capture the information on the prototype.

Using content that can actually help users understand the information that we present. If we don’t have real content yet, we can replace it with similar content and don’t use “lorem ipsum” or placeholders to replace the content.

Do’s:

Use real content or something similar.
Fill with relevant content.

Don’ts:

Using dummy text.
Use language and terms that are difficult for users to understand.
Make users get lost and make wrong decisions.

🔸 Proximity

In design, related elements must be brought together so they will be seen as a unit/group, will reduce visual distraction and make the design easier for users to understand. While unrelated elements must be separated from each other because they will be considered as unrelated elements and not a single entity.

Do’s:

Close the related elements in a composition to form relevance, hierarchy, organization, and structure.

Don’ts:

Separating related elements and bringing together unrelated elements.

🔸 Similarity

The similarity is usually combined with proximity techniques to form an organization from a collection of several elements or components by showing elements/components related in groups.

Do’s:

Arrange the elements or components that have the same element/attribute/function in one group.

Don’ts:

Group elements / components that do not have the same element / attribute / function.

🔸 Continuity

This technique is also used to give instructions to the user that there are elements/components can be seen next to them/afterwards.

Do’s:

Arrange elements/components to form a continuous pattern so that it attracts the user’s eyes to follow the elements/components arranged from one to the other.

Don’ts:

Don’t hide elements/components that should have continuity.

🔸 Focal Point

With this technique, we can clarify and pay attention to what we want users to see and we want them to do.

Do’s:

Create Visual elements that we want to highlight look prominent so it will attract and capture the user’s attention.

Don’ts:

Putting too many focal points that cause visual distraction and will make users confused.

🔸 Common Region

This principle is closely related to proximity. When the objects are in the same closed area (group), we will see them as 1 group unit that is the same.

Do’s:

Add barriers(negative space) or separators between groups

Don’ts:

Add barriers(negative space) or separators too far between groups and use unnatural barriers(negative space) between groups.

🔸 Simplicity

Simplicity is a technique that applies and emphasizes simplicity in design and tends not to consist of many visual elements. The challenge is with a simple design, we must be able to convey strong and very clear information that can be quickly digested by the user.

The simple design is easier to understand and easier to remember. The simpler your design, the more striking and easy it is to understand it.

Do:

Presenting information that is strong and clear simply.

Don’t:

Too many elements that are not needed in a competition. This will make the experience very confusing and bad for the user.

5. Start Designing

Let’s start designing the user interface first using Marvelapp. Use the “Design” feature and create one by one flow based mockup that you have understood before.

2. After the entire user interface of each page has been created, go to the project page and check again whether each page has been sorted correctly according to the flow to facilitate the making of the prototype.

3. Set “Hotspot destination”, “Screen transition”, and also “Action” for the prototype on this page by pointing the cursor to the destination page and pressing the “Prototype” button to start.