A Designer’s Guide To Prototyping Websites And Apps

Design process can mean a lot of things, but “simple” isn’t usually one of them. This point is usually complicated by the fact that websites and apps require a lot of decision making during the design and development process. Which is where prototypes come in, because they help speed things up, but only if you are asking the right questions as you go.

If you are unfamiliar with prototyping as a regular part of your process, here are some of the things it can do for you:

• Allows you to quickly validate and test design direction
• Identifies design issues early on
• It’s tangible – people can react much more thoughtfully to your design ideas when they interact with them

This article is broken up into two sections.

The very short Part 1 will explore the first questions you need to be asking yourself.

The longer Part 2 will help you answer the last question: What kind of prototype should we develop? This will be critical to getting answers to the first set of questions.

Part 1: The question set

These are the questions you need to ask every time you build a prototype to help you make design decisions:

• What do we want to test?
• Who will we show and in what setting?
• What do we expect to learn?
• How will we evaluate that learning?

These are really the bulk of the questions you need to ask yourself in order to build a prototype that is going to help move your work in the right direction.

Since they are fairly straight forward questions, I am not going unpack them one by one.

Instead would suggest that if you are designing something with a team of people, I recommend working on answering them together, as one of their greatest values is helping build consensus around design direction.

If you are not working with a team, this set of questions is just great to use and make part of your design/prototype process.

The real work comes when you have answered these questions and then try to figure out the last question, which is…

Part 2: What kind of prototype should I make?

Great question! Prototypes can be nearly ANYTHING. It is just about what will get the job done to get the point across and the design direction clarified.

There are three basic categories for prototyping

Type 1: The “Quick & Dirty” prototype

Quick and dirty prototypes help set general direction for a design.

When to use

Typically at the beginning of a project when you only have a vague sense of where you want to go. They should show up right after white-boarding an idea.

Pros

• Highly collaborative for internal and external teams and clients.
• Low barrier to entry- they are simple (paper prototypes, nothing that involves much investment)

Type 2: The “Evolver” prototype

These prototypes can be a bit more involved. Say you have your concept down, and now it is time to start being more specific about user experience and context. Here you might use something like Invision or Marvel to create a tap through prototype on a mobile device or build a physical object out of cardboard or some kind of medium to see if your idea really can take shape and make sense with your intent.

Pros

Portable (larger # of screens if it is for a digital experience)

• Allows for contextual experience
• Typically easy to show to client / have someone “grok” easily

Type 3: The “Validator” prototype

The last stage of prototyping is used for when you are really just honing in on a specific feature or polish point that really requires a nearly fully built design to engage with and make decisions about.

Pros

• Test the look and feel and actual implementation
• Could be any medium- From prototyping software to actual code

Rule of thumb: Any of these fidelity levels of prototypes can be revisited throughout the design process. There is no strict adherence to anything other than what gets the job done and what you have time for.

I hope this gets you started down the prototyping path as soon as possible! Always be prototyping!

ALSO YOU CAN CONTACT US HERE FOR US TO HELP DESIGN YOUR PROTOTYPE WEBSITES AND APP!