What Is Prototyping

Prototype /ˈprəʊtətʌɪp/

The first, original, or typical form of something; an archetype.


Prototype is a word that means a model or a mockup or an early version of anything before the real thing is built.

This can be a website or an app, a physical product, or even an architect building an entire city in miniature.

The idea is to experiment, to test and communicate your ideas before you spend money and time investing in something that might not work or might need improving.

Hearing something described in words is completely different from being able to see and interact with it, even if it's not quite like the real thing.

A prototype makes things tangible, something to base conversations on, which is especially important for digital products, where the key focus is users interacting with something.

Prototypes can come in many forms. The type of a prototype depends on where you are in the design phase, how much budget you have, what the goals are for that particular prototype.

Generally, early on, they'll be very low in detail, maybe on paper and just as sketches.

Where to start with a prototype?

The best starting point is user journeys as raw sketches of each of the steps in that flow.

I'll be writing a separate article on user journeys to expand more on what it is, why you need it, and how it can be done.

Let's say you already have user journeys, and the next step will be to link them together to see how the journeys flow. Basically, this is about interactions your user might have in the app or a website.

The benefit of doing this is that you can make changes quickly, even on the spot in front of users if possible when you're doing usability testing.

It's kind of good that it looks low-level and unfinished because it means you can focus on how it works in the flow and not get caught up with how it looks.

Wireframes

Wireframe is a common term for a drawing of a digital screen. It shows where things are and how they link together. It's called a wireframe because it consists of simple lines and boxes linked together.

I recommend, to use the black and white color palette, and even stick to this simplicity on detailed wireframes and prototypes.

It shouldn't contain any graphics or the exact pictures and text that will be there.

Colors and visual details like imagery or unnecessary icons can be distracting, and it will be hard to concentrate on the main goal of a prototype.

The goal is to take your user journeys, which describe the goals and the steps then explain what's there and how it works by creating basic wireframes.

It's important not to get too detailed too soon.

The reason is the more detail there is in design, the more effort it takes to make a change. And at this stage, you're going to be moving things around a lot.

Fidelity means the level of detail.

Starting at low fidelity means things are very basic sketches and flows. As your design progresses, you move to higher fidelity, and you add more details in, refine your design, and it comes closer to the real experience.

You can do user testing with wireframes at all stages of fidelity. But more on this will be in a separate article on user testing specifically.

Wireframes are made up of a few standard elements that we use to plan how everything fits together.

First of all, navigation and menus. The content is going to come from your information architecture, and now is the time to plan where it will be on the page and how everything will be linked.

Different screen areas where pictures or blocks of text or videos can be designed as boxes for simplicity. You should also think about the input fields. So you have elements where a user can type in something. When you're at low fidelity, you might just put a placeholder block to mark a space for specific needs, for example, card payment details.

As you move through to higher fidelity, you'll want to specify actual labels and the exact fields you would use.

You should also add any other things that a user interacts with on the page and any links out to other places.

In most of the cases your design should be responsive.

We are now at an age where people use different size mobile and tablet screens just as much as traditional desktops. There is a way for designing for all of these at once.

Simple wireframes can be a great way to understand how things fit together to fulfill your user journeys. But it can become very difficult if you have lots of different journeys or lots of different links. You can't really see how the real experience and flow will be.

Here is a wireframe example I did for one of my client projects:

User interface for online fragrance aggregator

Interactive prototypes

Creating an interactive prototype means drawing it in a design tool and actually adding actions into it, meaning if you click on a button, it takes you to another page or a screen. Or a user can really type into the input field.

There's no real system behind it. But you can actually create a very real-life experience for your users.

Interactive prototypes can go from very basic wireframe style drawings through to a perfect replica of how your website will look.

They're really useful to test the logic and flow and find any gaps or inconsistencies that you wouldn't have noticed in static wireframes and sketches.

Also it's very useful for communicating your design to your users and usability testing, to your technical developers who might have to build the thing, and any other business stakeholders you might have.

Prototypes can be done by individual UX designers.

This is not something that only agencies can provide due to more resources than individual specialists. Also, product managers are not always aware of all platform architecture specifics such as iOS guidelines and human behavior in apps.

Technologies these days alow solo UX/UI designers to do this part of the project by themselves.

Different software, UI kit libraries, and Frameworks help to significantly automate this process.

Here is an example of one library that helps to automate the process of a designer and significantly speed up the prototyping process.

Pattern kit - library of mobile wireframe components, UX patterns, and templates.

Of course, there are paper prototypes that can be done even faster and do not require any hardware or software. They are good on the idea level as a low-level visual concept, but it's far away from a real product that you can interact with.

Send
Send
Pin

Join my personal email list and receive an email from me every 1-2 weeks.

So if you like the stuff that I write on the website then leave your email to get it right into your inbox. No BS, spam or tricks... just useful content: