PROTOTYPING
AND
WIREFRAMING
Wed Application
Objectives
▰At the end of the chapter,
students are expected to:
▻Explain how prototyping and
wireframing works
▻Explain the benefits of
prototyping
▻Compare paper prototypes,
wireframes, and clickable
prototypes
2
Prototyping Mockups Wireframe
3
Prototyping Mockups Wireframe
4
Prototyping Mockups Wireframe
5
Prototype
Nothing brings you closer to the functionality of the final product than prototyping. While
wireframes sketch out the blueprint and mockups show the feel and texture of the
design, it is the prototype that brings to life the “experience” behind “user experience.” That
beautiful call-to-action may look great on the screen, but you won’t know if it works on end
users until the clickable prototype. Not only do prototypes help provide proof of concept,
they more importantly expose any usability flaws behind the wireframes and mockups.
6
5 Reasons Why You need to
Prototype
While skipping prototyping might save some time during design, that surplus can be
lost many times over in development. If people try on jeans before buying them and test-
drive cars before signing the check, then it only makes sense to test your designs
interactively before they go into development. Interaction, after all, is how users access the
design solutions to their problems. While these vary depending on designers and their
needs, some universal benefits include:
• Communication and Collaboration
• Gauge feasibility while reducing waste
• Sell your idea
• Test usability earlier
• Set your design priorities 7
Communication and Collaboration
It’s one thing to discuss re-quirements documentation, but it’s a whole other level of
imagi-native collaboration when both parties can play with a prototype and explore
limitations and possibilities. Documentation can be misinterpreted, but experiences are
shared.
8
Gauge feasibility while reducing waste
Wireframes, mockups, and requirement documents live in paper, not reality. Prototyp-ing
allows teams to experiment, giving them the freedom to fail cheaply while learning more.
Just take a look at how prototypes helped increase estimate accuracy by 50% while
reducing re-quests for clarification by 80%.
9
Sell your idea
Prototypes can be great for pitching if you’re working with skeptical clients.
Experiencing the real-life web-site or app proves your vision more than a wordy
description or mockup bogged down with notes.
10
Test usability earlier
By user-testing a prototype, you’re able to find problems and fix them earlier in the process,
saving your-self a huge hassle of dealing with them when they’re cemented in code. The
same case study cited above saw 25% reduction in post-release bugs thanks to prototyping.
11
Set your design priorities
We recommend prototyping early and often because prioritizing interaction design will keep
you grounded in reality when you make static design decisions. The visuals must fulfill the
experience, not the other way around.
12
When to start Prototyping: 3 Points
of Convergence
There’s no green light that will magically blink when it’s time to start prototyping.
How and when to prototype is the subject of much debate in the design world, and various
differing theories and strategies have emerged.
Sketching – Brainstorm by drawing quick and dirty sketches on paper.
Wireframing – Start laying out the skeletal framework with boxes and rough shapes.
Mockups – Inject detail into wireframes with colors, typogra-phies, photos, and
other visual design elements.
Prototyping – Add interactivity to mockups by stitching screens together for basic
prototypes or adding animations/interactions for advanced prototypes.
• Development – Code in language of choice to turn the prototype into the final product
13
Wireframing and Prototyping
Some designers prefer to get to prototyping right away, and for good reason. This is a core
concept of Lean UX, devised by Jeff Gothelf, Director of UX at Neo Innovation Labs
(you can hear him describe it in this thorough webinar). Lean UX emphasizes prototypes
as “the fastest way between you and your code.”
14
Adavantages of a Lean UX
Faster – Skipping and consolidating phases will get you to the end product
faster, but possibly at the cost of quality.
More efficient – The nature of the method is to avoid waste, so the work done
will be only the essentials – no time spent on “busy work.”
Experience, not deliverables – Part of “trimming the fat” is min-imizing
documentation. Teams communicate better and faster, improving collaboration in
designing the experience. State the design vision, then iterate with that in mind.
15
Mockups & Prototype
Mockups are like a better-dressed wireframe. Neither require functionality, but mockups give
you a better idea of what the final product will look like, and at times suggest how it will func-
tion. Usually mockups are built from wireframes, but this is not always the case.
The main difference between building a prototype off a mockup instead of a wireframe is that
mockups automatically provide the baseline design for a mid- to high-fidelity prototype. Because
wireframes are so bare-bones, prototypes built from them are still low fidelity.
One of major strengths of JavaScript is that it does not require expensive development tools. You can
start with a simple text editor such as Notepad. Since it is an interpreted language inside the context of
a web browser, you do not even need to buy a compiler.
16
Traditional Prototyping Methods and Tools
Paper Prototypes
In the age of modern technology, it can sometimes be refreshing getting back to
the tools we used in kindergarten. Paper, scissors, glue, coloring utensils – what we
once used to make unicorn col-lages can now be co-opted for creating useful yet quick
prototypes. Let’s explore the benefits, disadvantages, and methods for paper
prototyping.
17
Traditional Prototyping Methods and Tools
Advantages of Paper Prototyping - The benefits of paper prototyping are quite
straightforward: they’re cheap, fast to make, and easy to collaborate with. Shawn Medero,
UX Lead at the University of Washington, believes that starting on paper can be a
surprisingly helpful tactic as interfaces become more complex and development
schedules become shorter. Here’s a few reasons why:
Rapid Iteration
Low Budget
Fun Collaboration
18
Easy Documentation
Traditional Prototyping Methods and Tools
Disadvantages of Paper Prototyping - However, paper prototyping isn’t for everyone. Jake
Knapps, the designer behind Google Hangouts, claims that it is a “waste of time.” While we
think it has its time and place, these are some of its glaring disadvantages.
They can generate false positives
No gut reactions
Can be slower than prototyping tools
19
Traditional Prototyping Methods and Tools
Process - Don’t let the scissors and the pretty colors fool you – paper proto-typing isn’t just
fun and games. Whether you’re creating one for your team, for usability testing, or for a
stakeholder presentation, your paper props should be both professional and functional.
Sketch each screen
Create user scenarios
Rehearsal
Presentation/Test
20
Digital Prototyping Methods and Tools
Asking What’s the best way to prototype? is like asking What’s the best way to make a
website? – there is no single “best” way. Each in-dividual prototype, like each individual
website, has its own styles, objectives, and strategies. What works well for a cloud CRM
website might not work as well for an ecommerce business.
21
Digital Prototyping Methods and Tools
Presentation Software
For starters, there’s the traditional PowerPoint, a reliable business staple used for
presentations for over two decades. If you’re look-ing for a more modern alternative,
Keynote is rising in popularity. Interestingly enough, Google Ventures mentioned
Keynote as a secret weapon for their “design sprint” initiative.
22
Digital Prototyping Methods and Tools
Advantages of Presentation Software - Almost everyone has used presentation software
before, so they’re a quick way to start a simple prototype.
Familiarity
Basic element libraries
Natural Linear Flow
23
Digital Prototyping Methods and Tools
Disadvantages of Presentation Software - Like we described in The Guide to
Wireframing, once you start playing around with advanced user flows and interactions,
you’ve basically hit the limit of presentation software.
Non-stock element Libraries
Limited collaboration
Limited flow charting and user flows
Limited interactivity
24
Digital Prototyping Methods and Tools
Coded (HTML) Prototype
This uncertainty stems from some designers’ lack of comfort with coding: they either don’t
know how to do it, or don’t like doing it. When faced with the more fun and intuitive
method of using a prototyping tool or even sketching by hand, writing code can feel tedious.
25
Digital Prototyping Methods and Tools
• Platform agnostic– HTML prototypes work on any operating system, and
nobody needs outside software to use it.
• Modularity– HTML is component-based, which can help with productivity.
• Low cost (aside from time) – There’s many free HTML text edi-tors, but
you’ll need to spend some time learning the language before it’s helpful.
• Technical foundation for the product – Provided you’re creating production-ready
code (and not just throwaway for the sake of a quick prototype), you can end up
saving time in development.
26
Prototyping Software and Apps
Eager to dive straight into a computer program that’s an actual representation of your idea? The
beauty of prototyping software and apps is that it’s specifically designed for this purpose, so they
provide the perfect balance between functionality, learning curve, and ease-of-use. Both beginner and
veteran designers use special-ized tools like the ones below – beginners for the ease-of-use, and veterans
for the controls crafted to their particular needs.These tools vary in their capabilities, with some
being better at-tuned to certain situations than others, so it’s best to find the one best suited to your
needs. To start on your search, you can check out tools like UXPin, Invision, MockFlow,
JustInMind, Axure, Omn-igraffle, JustProto, Flinto, or Marvel.
27
Advantages of Prototyping Tools
• Speed
• Element Libraries
• Advance Flowcharting & user flows
• Built-in Collaboration
• Streamlined Presentation
28
Disadvantages of Prototyping Tools
• Lack of familiarity
• Limited Fidelity & Functionality
29
THANKS!
30
