Creating a High-Fidelity User Interface & Interactive Prototype in an hour
By: Rizki Mardita
Tags: Marvel App, Design, Prototype, UI, Hi Fidelity

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: