Sketching matters. Paul Goode and Mark Kraemer discuss ways to get faster and more accurate by incorporating a "sketch" attitude into problem solving. Drop the document debt and build a picture.

2. Hello.
Paul

3. tired
tired
3 years 3 years
21 months
last place

7. artist BS
critic
art

9. listening
sketching

10. #attitude

11. #attitude
#fuzzy #structured
#transparent

12. #attitude
#speed
#fuzzy #structured
#accuracy
#transparent

13. #attitude
#speed
#fuzzy #structured
#accuracy
#transparent

14. Sketching provides a baseline of understanding. #attitude
In the room we'll have a designer, a front end dev, back end #fuzzy
dev, project, and product (me) people plus possibly a client or
two. At the idea stage you have words in the air. The problem
Joshua Kahn with words in the air is that everyone attaches their own
Product Line Mgr at Best Buy
#transparent
picture of what those words look like. The sketch,
especially if it's viewable by everyone, grounds the discussion
Sketching provides a
and immediately reveals gaps in reality or gaps between
baseline of understanding.
everyone's interpretation of the concept.
It helps me a great deal personally, since I'm not a developer, I #structured
can go down trails that are more based on "computer magic"
than the actual capability of the tech. A sketch allows
developers to course correct me. #speed
#accuracy
In short, the tangibility of sketches gets the group more
quickly and accurately to the thing.
Nov 2011

15. During meetings and standups and brainstorming sessions I
sketch on white boards and paper to make sure that I'm on #fuzzy
the same page with people about planned interactions or
interfaces. I also like to print out interfaces we've already
designed and then cover parts of them with post-its and draw
Abi Jones what should be there instead. As you can see, the visual
#transparent
Designer at Google
design for Google Search isn't too complex, so I can move
pretty quickly from a sketch to a relatively high-fidelity mock.
I should note that not
everyone at Google is a
sketcher. I'm just not very In other cases I might 'sketch' with snagit or photoshop (really
fast with Photoshop, so I like rough work) and then an engineer will make a working #structured
to draw things first.
prototype based on that rough.
For my current project I'm in a room with the entire team,
so my sketches and mocks are up on the walls and we
can all stand up and look at the board and discuss the #speed
flow of the interface and the interactions that take place.
#attitude
It's nice because standing up is informal, but it is also
important that when you present sketches you have a #accuracy
recorder who can get all of the feedback for the meeting.
Nov 2011

16. Sketching is where everyone found common ground and #attitude
made the project workable.
We created a small, immersive educational game to educate #fuzzy
students interested in aspects of successful deer hunting. The
Edward Cossette initial concept fit into a single sketch. More sketches were
UX Mgr at Kalkomey Enterprises
#transparent
made, those turned to wireframes, wireframes and
documentation informed the illustrator, content and game
The game design started
design. #structured
with a single sketch.
As for the team, each person worked remote, with limited
availability, and sketching was the keystone in
communicating. Sketching served as balance between a #speed
verbose and academic education designer, prone to 3500- #accuracy
Shoot or Don’t Shoot
word emails, and a programmer, prone to single-line emails.
http://www.hunter-ed.com/
Nov 2011

17. Big ideas.
Communicate that you understand.
Capture and do something with it.
Be bold and sketch.

18. Communicate that you understand.

19. Communicate that
Draw the nouns. you understand.

20. Communicate that
Draw the nouns. you understand.

21. Communicate that you
Sketch environments. understand.

22. Communicate that you understand.
Introduce actions and desires.

23. Communicate that you understand.
Introduce actions and desires.

24. Communicate that
Propose a story. you understand.

25. Communicate that
Grasp the problem.you understand.

26. Communicate that
Grasp the problem.you understand.

27. Communicate that you understand.
Make it painful.

28. Communicate that you understand.
Make it painful.

29. Communicate that you understand.
Show a structured understanding.

30. Communicate that you understand.
Show a structured understanding.

31. Again, sketching helps show that you
understand (or trying really hard).

32. See, I
understand...
a digital
platform that
would help
city officials.
Helpful:
UXD Stack

33. See, I
understand...
ways a digital
lab notebook
might enable
scientists to
do better
research.

34. See, I
understand...
how to help
you organize
and visualize
your launch
process.

35. See, I understand... how a new platform can
reinvigorate your organization.

36. See, I
understand...
how to help fill
a room with
IKEA stuff.
This got the ball rolling.
#fuzzy
#structured
It got tweaked after
assembling and using it.

37. Big ideas.
Communicate that you understand.
Capture and do something with it.
Be bold and sketch.

38. Capture.
Take a picture.

39. Delete.
Erase the board.
Go make something.

40. Delete.
Erase the board.
Go make something.

41. Capture and do something with it.

42. Capture and do something with it.

43. Capture and do something with it.

44. Pro tips. Tweak the brightness and contrast to get
some solid lines.

45. Pro tips. Set the ink layer to “multiply” and have
fun coloring below.
Shave back the opacity to create
color tones and a painterly feel.

46. Pro tips. Scan + Adjust + Trace + Expand + Color

47. Pro tips. Whiteboard + Vectorized + Color

48. Big ideas.
GOALS
Communicate that you understand.
Capture and do something with it.
Be bold and sketch.

49. Do it.
1
2
3

50. Do it.
1
2
3

51. Big ideas.
GOALS
Communicate that you understand.
Capture and do something with it.
Be bold and sketch.
Show progress.
You really need to move on to the making the thing.

52. Show progress. Discover Sketch Prototype

53. Show progress. Discover Sketch Prototype

54. Show progress. Discover Sketch Prototype

55. Show progress. Discover Sketch Prototype

56. Show progress. Discover Sketch Prototype

57. More clickable &
interactive stuff...
time / effort / risk
SketchFlow
Visual Design
Illustrations
#fuzzy #structured
HTML
Wireframes
#transparent

58. #attitude
#speed
#fuzzy #structured
#accuracy
#transparent

59. @kraemer

60. “Any problem can be made clearer with a picture,
and any picture can be made using
the same simple set of tools and rules.”
- The Back of the Napkin by Dan Roam

61. It doesn’t have to be perfect.
You’re not shipping the sketch.
#pro-tip

62. Please excuse the crudity of this model.
I didn't have time to build it to scale or to paint it.

63. 1. Draw a noun
2. Label it with text
This accommodates both visual and aural learners.
It also helps folks make sense of your drawings
when you’re not there to explain them yourself.
#pro-tip

65. Practice the shapes specific to your domain.
Put at title and date on every page.
#pro-tips

69. Concept Maps are a great way
to get your arms around complex ideas.

70. Noun Noun
Verb

71. DFW UX Refresh
Professio attends Meeting

72. It’s OK to be messy

73. It’s OK to be messy

74. Concept Map for Resumes and Quals

75. Discover Sketch Prototype

81. Sketching works for a collection of pages as well.

85. Sketching for the Microsoft Surface
helped us better understand its unique context.

91. My daughter is both cute and creative.

95. make prototypes, not promises
make designs, not documents
collaborate, don’t litigate
partner, don’t just provide
make contacts, not contracts
make friends, not war

96. make prototypes, not promises
make designs, not documents
collaborate, don’t litigate
partner, don’t just provide
make contacts, not contracts
make friends, not war
The collaboration required for group
sketching
also develops relationships that are
more capable

97. Awesome.
What can I do next?

98. Recommended Reading
Back of the Napkin
by Dan Roam

99. Recommended Reading
Back of the Napkin
by Dan Roam

100. Recommended Reading
Forms, Fields,
and Flow
by Dave Gray
http://www.davegrayinfo.com/
2008/04/08/forms-fields-and-
flows/

101. Recommended Reading
Visual Meetings
by David Sibbet

102. Recommended Reading
Gamestorming
by Dave Gray
Sunni Brown
James Macanufo

103. @davegray
@danroam
@xplane
@ryancoleman
@SunniBrown
@austinkleon
@nancyduarte
@vizthinkDall @paulgoode
#vizthink
as

104. DECEMBER 15th
4:30pm - 7:00?
Place TBD