MMINTER

Prototyping Tools
Overview
● What is prototyping?
● What is it good for?
● What is a wireframe?
● What tools can we use for prototyping?
● Questions we should ask ourselves while prototyping
What is prototyping?
● A prototype is like an experiment: a simple model used
to test or validate a design idea.
● Prototypes can range from rough (a simple sketch on a
piece of paper) to very detailed (an interactive mockup
with graphics, colors, and branding).
What are prototypes used for?

A website prototype lets the project stakeholders see

how the final product will look and behave like early on
during the development process.
Why do this, though?
Here are some reasons:

1. You can evaluate different ideas for a site layout

2. You can use a prototype to get user feedback through user testing
3. A prototype can serve as a spec "document" that can clarify the
communication between a designer and a developer (if they are separate
people)
4. A prototype can help get decision makers (usually your clients) to
understand and support design decisions for the project
What are prototypes used for?

It's important to understand that prototypes help us

achieve all this early on. It lets everyone involved agree
on design decisions without having to fully code and
construct the website.

It saves time.
Wireframes
What are they?
What is a wireframe?
● It's a way to communicate your
design ideas quickly.
● A wireframe is like a blueprint for a
website's layout: a plan for where all
the elements should go without
adding branding, images, or colors.
● You can use wireframes to
communicate and settle on design
ideas with clients without spending
a lot of time on fine details.
Wireframes can be done as simple paper ...or more elaborate and polished layouts created
sketches... with bespoke prototyping applications.
Why do this, though? (it depends…)

Paper wireframes Digital wireframes

● Quick and direct. No need to learn or
struggle with software.
● Hard to go back and edit unless you use
modular paper cutouts.
● Much more presentable.
● Great for editing and collaboration.
● Take longer to do.

● Difficult to present if your drawings aren't ● Making them too polished may confuse
super clean. the client -- they may think the colorless,
style-less look is final.
Prototype fidelity
One other way to view wireframes is to
see them as low-fidelity prototypes.
Invision App's blog makes the
distinction seen on the right. In this
case, wireframes can be viewed as
low- (paper) or mid-fidelity (digital
wireframe) prototypes.
Prototyping tools
What can we use?
Pen and paper
● Cheap and easy to do

● A direct conduit from your brain

to the page -- less "interference"
between the original idea and
the way it is recorded

● Can still be flexible and editable

by using cutouts

● Can also be collaborative -- use a

whiteboard!
Google Drawings
● Very flexible -- lots of shape and
text options

● Built-in collaboration

● Lots of templates available

online
● https://docs.google.com/drawings
Invision
● Free to use

● Excellent collaborative freehand

tool

● Draw rectangles and circles

accurately and quickly

● An ideal middle ground between

the immediacy of pen and paper
and the collaborative nature of
online tools
● https://www.invisionapp.com/
Adobe XD
● Free desktop application

● Powerful tools for rapidly

creating grid and gallery
mockups

● Well-suited for high fidelity and

interactive (clickable) design
mockups
● https://www.adobe.com/sea/products/xd.html
(downloadable version at Pricing > Individual)
Figma
● Free browser-based application

● Very similar to Adobe XD, but

web-based

● Like XD, more suited to creating

interactive high fidelity mockups
than rapid wireframes
● https://www.figma.com/prototyping/
Sources
● https://www.experienceux.co.uk/faqs/what-is-a-website-prototype
● https://www.interaction-design.org/literature/topics/prototyping
● https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping
● https://sarahevansdesign.co.uk/blog/wireframing-with-pen-and-paper-or-on-screen
● https://www.invisionapp.com/design-defined/prototype/
● https://martha-eierdanz.com/blog/paper-prototyping-in-practice
● https://creativepro.com/adobe-reveals-experience-design-cc-adobe-xd/
● https://www.toptal.com/designers/ui/figma-design-tool