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