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.

1. VINCE BASKERVILLE
SR. UX-ER, @SALESFORCE
WINE & WIREFRAMES:
INTRO TO UX

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?

8. vince baskerville | @whoisvince#galaunchweek
COMMUNICATING IDEAS

9. vince baskerville | @whoisvince#galaunchweek
IGNAZ SEMMELWEIS

10. vince baskerville | @whoisvince#galaunchweek
JAMES A. GARFIELD

11. vince baskerville | @whoisvince#galaunchweek
HOW DOES THAT TRANSLATE HERE?

12. vince baskerville | @whoisvince#galaunchweek
SKETCH WIREFRAME PROTOTYPE

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

14. vince baskerville | @whoisvince#galaunchweek
TOOLS
Warm Soft

15. vince baskerville | @whoisvince#galaunchweek
SOME ELEMENTS

16. vince baskerville | @whoisvince#galaunchweek
YOUR SKETCH IS YOUR
FIRST MINIMUM VIABLE
PRODUCT (MVP)

17. TIMING
DELIVERABLE
WRITING ON WALLS
5 mins
15 mins
10 mins
1.Pick an app on your phone
2.Pick 3 screens & sketch them
3.Share
EXERCISE

18. LETS TALK
WIREFRAMES

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.

23. vince baskerville | @whoisvince#galaunchweek
HIGH LEVEL DIGITAL

24. vince baskerville | @whoisvince#galaunchweek
DETAILED
All

25. vince baskerville | @whoisvince#galaunchweek

26. vince baskerville | @whoisvince#galaunchweek

27. vince baskerville | @whoisvince#galaunchweek

28. vince baskerville | @whoisvince#galaunchweek

29. TIMING
DELIVERABLE
WRITING ON WALLS
remaning
time
1. Use your sketch as a base
2. Refine designs
3. Annotate key elements
4. Share
EXERCISE

30. Q&A