Wireframe &

Userflow
DESAIN UI&UX

1
 Wireframe Definition
“A basic visual guide used to suggest the layout of
fundamental elements in a web interface.”
(Source: Wiktionary)

“A wireframe is a low/high fidelity representation of a

2
 Definition
“It’s the graphic representation of an app or a website
containing the most essential elements and the content.”
(Source: Rafayel Mkrtchyan)

Wireframing is a way to design a website service at the

3
 Characteristic of a wireframe
1. It shows the main chunks of content
2. It draws the outline and the layout structure
3. It depicts the most basic UI
DESAIN UI&UX

4
 Types of wireframe

Low-Fidelity High-Fidelity
Wireframe Wireframe
DESAIN UI&UX

5
DESAIN UI&UX

High-Fidelity Low-Fidelity
Wireframe Wireframe
6
(Digital) (Paper & Pencil)
 Why should I use wireframes?
Some people think they’re time consuming, why bother
create more work?

Its wrong!!!
DESAIN UI&UX

7
 Fact
A wireframe is the blueprint of your website.
The main purpose is to show the client how
the website will be structured before
designing. Remember, clients are usually
busy running their own businesses. They
want something clean and readable to
DESAIN UI&UX

quickly get up to speed on what they’ve

9
Image source https://dribbble.com/shots/4969030-Web-UI-Dashboard-Design-for-CRM
 DESAIN UI&UX

RE VIS IO N

10
 Fact SURVEY
DESAIN UI&UX

11
 Fact SURVEY
DESAIN UI&UX

ideation 12
 How to make wireframe?
Step 1. Choose your tools (paper & pencil)
DESAIN UI&UX

13
 How to make wireframe?
Step 2. Get Started
DESAIN UI&UX

14
 How to make wireframe?

Download Paper Sketch

15
 What is software to create
digital wireframe?
DESAIN UI&UX

16
 Userflow Definition
A user flow is a series of steps a user takes to achieve a
meaningful goal.
(Source: Alexander Handley)
DESAIN UI&UX

17
 DESAIN UI&UX

18
 1. Faster iterations
DESAIN UI&UX

19
 2. Better communication
DESAIN UI&UX

20
 So what do wireframes have
to do with user flows?
They have a lot in common! They both have different
levels of ‘resolution’ and fidelity of the finished product.
DESAIN UI&UX

21
 What are the different
‘resolutions’ for user flows?
DESAIN UI&UX

22
 DESAIN UI&UX

23
 DESAIN UI&UX

24
DESAIN UI&UX
DESAIN UI&UX
 Practice Time!!!
DESAIN UI&UX
 Reference:
https://blog.nicolesaidy.com/getting-started-with-wireframes-8aff9b92a4c0
https://uxplanet.org/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b
https://uxdesign.cc/wireframes-prototypes-mockups-whats-the-difference-861d7e4826b9
https://blog.prototypr.io/wireframes-in-ux-design-what-why-when-and-how-ff07bb513c89
https://uxdesign.cc/why-low-fidelity-wireframe-curious-in-product-design-c7bea87bc23d
https://uxdesign.cc/hack-you-design-sprints-wireframes-to-prototype-in-under-5-minutes-b7b95c8b2aa2
https://uxdesign.cc/how-to-start-sketching-and-wireframing-84a821f092e2
https://uxdesign.cc/ux-tools-c2597a005a4e
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a?source=false---------0
https://blog.overflow.io/8-tips-for-creating-better-user-flows-e46eb0d2a2c6