This introduction to UX will cover one of the most integral parts of the design process, wireframes. Wireframing is a way to express a flow through a process or individual screens in a product, and ensure proper communication.
This short workshop will provide a basic overview of wireframing in UX design.
5. vince baskerville | @whoisvince#galaunchweek
LEARNING OBJECTIVES
‣ Practice sketching techniques in order to illustrate and
communicate the elements and structure of user interfaces
‣ Articulate the value of wireframe documents, what they represent,
and when they are useful
‣ Go over best practices for wireframing
6. vince baskerville | @whoisvince#galaunchweek
AGENDA
1. Grab (x) glasses of wine
2. Defining the purpose
3. How-To
4. Writing on walls while drinking wine!
7. vince baskerville | @whoisvince#galaunchweek
WHAT IS THE PURPOSE OF
WIREFRAMING?
13. vince baskerville | @whoisvince#galaunchweek
SKETCHING & WIREFRAMING
‣ Rapid visualization of high-level ideas
‣ Capturing simplest essence
‣ Designed for sharing
‣ Quick & disposable
‣ More about the activity than the artifact
19. vince baskerville | @whoisvince#galaunchweek
WHAT ARE THEY?
• Wireframes brings together several things
• structure
• navigation
• information hierarchy
• interactions
20. vince baskerville | @whoisvince#galaunchweek
HOW-TO
• No hard & fast rules
• Low-fidelity sketches
• High-fidelity digital drawings
• Understand the audience & your purpose
21. vince baskerville | @whoisvince#galaunchweek
KEY CONCEPTS
• Be clear about your objective before you start
• Functional over pretty*
• Use Color to convey meaning
• Be consistent in the details
• Justify every element’s existence
22. vince baskerville | @whoisvince#galaunchweek
BLOCK DIAGRAMS
p16
or Citi by Moment
s
e around tasks
pplication around the core concept
o aggregate and support the key
teward must enact to work toward
ue resolution.
quality issue “project”
new project entity (which will create a project
rtal). Attributes include:
cription of the data quality issue (i.e. only 42%
nt openings in Vietnam contain GFCID)
aph or other visualization illustrating the issue
rison to some established standard or relevant
associate project with policies, region,
ble parties, business or organizational unit,
e, etc.