MODULE 6
DESIGN, PROTOTYPING and
CONSTRUCTION
Prototyping
• What is a prototype?
• Why prototype?
• Different kinds of prototyping
▪ Low fidelity
▪ High fidelity
• Compromises in prototyping
▪ Vertical
▪ Horizontal
• Final product needs to be engineered
What is a prototype?
• One manifestation of a design that
allows stakeholders to interact with it
• In other design fields, a prototype is a
small-scale model:
▪ A miniature car
▪ A miniature building or town
3D Printing Examples
Examples of 3D printing: (a) model jet engine, (b) Spider Dress 2.0 by Anouk
Wipprecht, and (c) teddy bear “printed” form a wireframe design
What is a prototype in
interaction design?
In interaction design, a prototype can be (among other
things):
• A series of screen sketches
• A storyboard, for example, a cartoon-like series of scenes
• A PowerPoint slide show
• A video simulating the use of a system
• A lump of wood (for instance, the PalmPilot)
• A cardboard mock-up
• A piece of software with limited functionality written in the
target language or in another language
Why prototype?
• Evaluation and feedback are central to interaction
design
• Stakeholders can see, hold, and interact with a
prototype more easily than a document or a drawing
• Team members can communicate effectively
• Ideas can be tested out
• Prototyping encourages reflection: an important
aspect of design
• Prototypes answer questions and support designers
in choosing between alternatives
Low-fidelity Prototyping
• Uses a medium which is unlike the final
medium, for example, paper or cardboard
• Is quick, cheap, and easily changed
• Examples:
▪ WIREFRAME (Sketches of screens, task
sequences, and so on)
▪ ‘Post-it’ notes
▪ Storyboards
▪ ‘Wizard-of-Oz’
How to Wireframe
Outline
•What is a wireframe?
•Types of wireframes
•Best practices for creating wireframes
•When to use a wireframe
•Wireframing in Figma
What is a wireframe?
• A wireframe is a simple visual guide that represents the skeletal
framework of a website and mobile application.
• Think of it as the blueprint for your final design.
• Though wireframes are most often created by designers, they need to
be basic enough so that everyone from other designers, stakeholders,
devs, and users can understand the ideas.
Types of wireframes
• In a traditional design process, wireframes come
after on-the-fly hand-drawn sketches and right
before high-fidelity mockups or prototypes.
• There are two levels of wireframing,
• low fidelity and high fidelity
Low fidelity wireframing
• Low fidelity is the most basic type of wireframing.
• However, creating your wireframes in Figma will
allow you to easily share them and make sure
your team has access to your latest thinking as
you iterate.
• UI elements and content are represented by
basic shapes like squares, triangles, circles, and
lines.
High fidelity wireframing
• High fidelity wireframing takes what you
put together in the low fidelity stage and
sprinkles in more of the detailed elements.
• High fidelity wireframes include visual
markers and branding signifiers like colors,
graphics, and font style.
• At this stage, a designer might also choose to add in
images and copy.
Best practices for creating wireframes
•Keep aesthetic elements simple
•Use two fonts max
•Represent graphics and images with
boxes
•Consider screen size
When to use a wireframe
• When you’re trying to explain your idea to someone, get
all the stakeholders on the same page, force a group
decision, or validate your plan, a wireframe presents a
simple visual representation that everyone can point to.
• Get stakeholders to focus
• Catch problems early
• Cut down on revision time
• Decide content prioritization
• Test usability with users
Here are some tips for creating a wireframe by hand:
• Research: Do your research and prepare
your reference material.
• Map out your user flow: Make sure
you have your user flow mapped out.
• Sketch, don't draw: Draft, don't illustrate.
• Add detail: Add some detail and then test it.
• Capture your drawing: Draw your sketch on a
white surface with minimal patterns.
Step-by-Step Sketching
Guide
Draw the navigation and
search
• The search feature can be represented through a search icon and the
associated search box, like in the examples below. If needed, you can
show search-suggestions in a rectangle under the search box.
Identify and draw the largest elements in your design.
• Headers are illustrated using thicker lines.
• Body text is sketched using thinner lines.
• An image is represented as a rectangle with an x through it.
Fill in the remaining details.
An Example: Sketching a Product-Detail Page
Add A top navigation bar and search to our wireframe.
Draw the largest element in
the design.
• Add additional details such as dropdown box for
selection options and a button to add the product to
the shopping cart.
Wireframing in Figma
• Some designers like to continue sketching wireframes by
hand using a blank sheet of computer paper, or dot grid
journals.
• For those that want to jump into designing on-screen,
Figma has a wireframe template to get you started.
• Figma is browser-based, so sharing your wireframes is as
easy as sharing a link. Your team can leave comments right
on the file so you can easily get feedback and field
questions.
Wireframe examples Sketch
Here are some steps for drawing a wireframe:
[Link] what device you are designing for.
[Link] your design navigation first.
[Link] your design around your product or USP.
[Link] image blocks, text blocks, and other large elements.
[Link] in CTAs (calls to action) and other navigational
elements.
Low Fidelity Wireframe
Low Fidelity Mobile Wireframe
High Fidelity Wireframe
Low Fidelity Interactive Wireframe
Storyboards
• It is a series of sketches showing how a
user might progress through a task
using the product
• Often used with scenarios, bringing in
more detail and a chance to role play
Example storyboard
Sketching
• Low-fidelity prototyping often relies on
sketching
• Don’t be inhibited about drawing ability —
Practice simple symbols
14
Prototyping with index cards
• Index cards (3 x 5
inches)
• Each card
represents
one element of
interaction
• In evaluation, can
step through the
cards
15
Generating storyboard
Generating card-based prototype
‘Wizard-of-Oz’ prototyping
• The user thinks they are interacting with a computer,
but a human is responding to output rather than the
system
• Usually done early in design to understand users’
expectations
• What is ‘wrong’ with this approach?
User
>Blurb blurb
>Do this
>Why?
High-fidelity prototyping
• Uses materials that you would expect to be in the final
product
• Prototype looks more like the final system than a low-
fidelity version
• High-fidelity prototypes can be developed by
integrating existing hardware and software components
• Danger that users think they have a complete
system…see compromises