Wireframing and Functional Prototypes

Wireframes, Prototypes, and Mockups are tools that help us communicate the moments of the design process. With each, it is important to understand what to evaluate and on what to focus. The objective is to define the content and position of the various sections of your website or digital assets. In addition, they allow us to test how these elements will interact with each other.

Engage audiences with better usability

Advantages of using Wireframes, Functional Prototypes and Mockups

Quick and inexpensive to create: Schematic sketches are quick and cheap to make, which allows you to make several drafts until you find the right one without wasting time or money.

Detect and correct problems: Being simple and quick to perform allows you to quickly get Feedback and solve basic problems related to usability and intended functions.

Simple improvements: In a short time, you can show the first Wireframes to friends, clients, or review them yourself to identify potential improvements in the design, the positioning of the components, or the structure of the contents.

Better usability: Pre-planning the structure and components of the web page will allow you to offer better usability by not improvising on the fly and by having already determined the components.

Company Strengths at a glance

¿What is a Wireframe?

A low-fidelity representation of a design.

Its objective is to communicate the structure of the design solution that we are considering.

We recommend that they be black and white to focus the analysis on the structure rather than the content. It may be that you have not yet created your copy (text) and images, so the most important thing is that you have an idea of the space and hierarchy that they would occupy. It is important, when analyzing a Wireframe, that we focus on these aspects and not on secondary ones such as colors, type of content, or visual design of the interface.

You should not invest too much time in them—the faster you do it, the quicker you can agree on what to build. If you spend too much time on detail, you are simply spending time on something that will later be changed again.

Testing

92%

Navigation

89%

Cost

43%

Timing

38%

Tailor-Made Digital Products

¿What is a Digital Mockup?

The high-fidelity (hi-fi) representation design solution. What’s its purpose? To communicate and statically represent the structure, content, basic functionalities and graphic decisions of a design solution.

The Mockup is built once you have agreed on the structure of your design solution–usually through the wireframe. It serves to communicate visual decisions—styles and colors as well as the final view of the structure and its functions.

In the final stages of a design, there are several scenarios that lend themselves to using mockups to communicate.

In the testing and experimentation phase either through a prototype or with the static image it collects feedback from the users.
When confirming the solution with the rest of the team.
When you have to commnicate the solution to development team.

Prototiping makes it better

¿What is a functional Prototype?

It’s a representation or simulation of the interactions that our design solution is going to have. Its goal is to experiment, testing and to communicate our design’s interactions.

They can be done for both Wireframes and Mockups. There are a wide range of applications to try, one of our favorites is Adobe XD, but also are Invision, Flinto, Origami and many other more. This is about finding an application that best fits to your needs and times. Also each application or website have different levels of interaction: the more complex, the more complex is the program that you have to find to emulate that interaction.

There are also many designers that know how to layout these solutions and prefer testing their own prototypes: any tool is allowed, as long as you can represent as closely as possible the interaction that you are looking for your design.