Communication with Flexible Documentation is a presentation about evaluating the modern web designers workflow. It takes responsive web design as the excuse to find more efficient, and effective ways to communicate design, and increasing the project margins by reducing design waste.

1. Communication with
Flexible Documentation
Jon Hadden
@niceux niceux.com
Effective communication and efficient
workflow for today’s web designers

2. 33 years ago…

3. Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)
33 years ago…

4. Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)

6. I love strategy, information
architecture, observing human
behavior, front-end development
and helping people enjoy the web.
Hi, my name is Jon.
NiceUX

7. I love strategy, information
architecture, observing human
behavior, front-end development
and helping people enjoy the web.
Hi, my name is Jon.
NiceUX

16. =

17. Photo Credits: http://toparkornottopark.com/

18. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg
Pay attention to contextual information.
Be efficient.
Remain flexible and adapt to surroundings.
Find the best way to effectively
communicate to your audience.

19. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg
Pay attention to contextual information.
Be efficient.
Remain flexible and adapt to surroundings.
Find the best way to effectively
communicate to your audience.

20. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg
Pay attention to contextual information.
Be efficient.
Remain flexible and adapt to surroundings.
Find the best way to effectively
communicate to your audience.

21. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg
Pay attention to contextual information.
Be efficient.
Remain flexible and adapt to surroundings.
Find the best way to effectively
communicate to your audience.

22. The approach and manner in which you tell a story, influences an
audience’s perception of that story’s value.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
@niceux

23. Story time

24. Approve an invoice
• Performed multiple times per day, every day.
• User’s end of the year bonus depended upon
number of non-error approvals.
• Used by 40-60 year olds who don’t use their
computers besides to check in over email or
Facebook with their college aged kids.
• Primarily used at a desktop PC, using IE7
• Originally built as desktop application, and 10 yr
old code was “dropped” into a web version.

25. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes

26. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List

27. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds

28. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds

29. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount

30. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount

31. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount Route Details

32. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount Route Details

33. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions
~ 6 seconds
Notes

34. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions
3-5 seconds
Notes
Invoice Notes

35. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions
3-5 seconds
Notes
Invoice Notes

36. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions Notes
Invoice Notes
~ 6 seconds

37. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions Notes
Invoice Notes
~ 5 minutes per
approved invoice

41. Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/

42. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

43. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

44. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

45. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

46. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

47. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

48. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

49. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

50. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

52. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
1. Nights and weekends.

53. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
1. Nights and weekends.
2. Changing the same thing a billion
times … just because.

54. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
1. Nights and weekends.
2. Changing the same thing a billion
times … just because.
3. File names like:
204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle

55. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
1. Nights and weekends.
2. Changing the same thing a billion
times … just because.
3. File names like:
204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle
4. Sucking at life.

56. NOPE
Photo Credits: http://catswallpaperhd.us/cat/grumpy-cat-clipart-hd/attachment/grumpy-cat-clipart-hd-download-new-grumpy-cat-cartoon-free-wallpaper-x-full-hd-pictures/

57. 1. Where are opportunities to reduce misinterpretation
when viewing a design?
Considering the variables:

58. 1. Where are opportunities to reduce misinterpretation
when viewing a design?
2. How can I make my process more efficient, or reduce
the amount of work I need to do in order to get
everyone from point A to B?
Considering the variables:

59. 1. Where are opportunities to reduce misinterpretation
when viewing a design?
2. How can I make my process more efficient, or reduce
the amount of work I need to do in order to get
everyone from point A to B?
3. Can I increase the portability of my documentation?
Considering the variables:

60. Approach the cognitive load of consuming
and creating your documentation like you
would the usability of an app.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
@niceux

61. Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/

62. Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/

63. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

64. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

65. Participatory Conceptual Design means involving
non-designers to the designer tea party.
Photo Credits: http://www.slideshare.net/runger/big-d-sketchingkey
Consider trying the 6-8-5 Sketch Workshop on your next project during the requirements
gathering and conceptual brainstorming phase with stakeholders and other team members.

66. 1. Define strategy, context of use and content.

67. 1. Define strategy, context of use and content.
2. Rapidly produce many variations.

68. 1. Define strategy, context of use and content.
2. Rapidly produce many variations.
3. Critique and repeat.

69. Separate features, assumptions, risks and
potential usability points of friction.

70. Think through high level page flows and the
conversation the user will have throughout their
experience.

71. Individually focus on UI elements, potential
options for handling information and interaction.

72. Put it all together.

73. Tell your story.

74. s
Utilize collaborative, cross-functional
sketch sessions to gain buy-in and
converge on design concepts together.
Photo Credits: http://spin.atomicobject.com/2012/04/22/more-takeaways-from-cooper-ux-bootcamp/
@niceux #leandocs

75. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

76. Content strategists in the digital age need to
become data philosophers and explore the
metaphysics of content, starting with the
question “What is content?”
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
Rachel Lovinger in 2007: http://boxesandarrows.com/content-strategy-the-philosophy-of-data/

77. 1. Structure and Relationships.
Content Modeling
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

78. 1. Structure and Relationships.
2. Volume and Details.
Content Modeling
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

79. 1. Structure and Relationships.
2. Volume and Details.
3. Potential Issues Posed to Design and Development.
Content Modeling
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

81. Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

83. • Artist
• Album
• Title
• Cover Art
• Genres
• Songs
• Title
• Time
• Explicit

87. Utilizing JSON gives me and rest of the team a
flexible, structured, and sharable information
set to distribute in various environments.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

93. Utilizing JSON gives me and rest of the team a
flexible, structured, and sharable information
set to distribute in various environments.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

94. Information Architecture is the structural
design of shared information environments
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
Wikipedia: http://en.wikipedia.org/wiki/Information_architecture

95. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

97. Realistic Screen Real Estate

98. Responsive Design
Source Ordering
Major vs. Minor Breakpoints
Photo Credits: http://zurb.com/word/source-order

99. Edge Cases

100. Using code for your wireframes gives you realistic detail
control. Transitions lasting 250 ms feel a lot different than
750 ms.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
@niceux #UXCamp

101. If you’re using code to prototype, plan ahead for the
inevitable request to have it represent the end product.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
@niceux #UXCamp

102. …using the implicit
psychology at work in
design presentations to our
advantage … don’t let the
client think you’re further
ahead than you actually
are.
http://www.amazon.com/Responsive-Design-Workflow-
Stephen-Hay/dp/0321887867
Stephen Hay

103. Plan ahead to supplement a coded prototype with
annotations, a static PDF of key screens or a how-to guide.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
@niceux #UXCamp

105. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

106. [Style tiles are] a catalyst
for discussions around the
preferences and goals of
the client.
http://styletil.es/
Samantha Warren

107. Wireframes and moodboards tend to be
too abstract. Perhaps it’s just that I’ve
never perfected the art of articulating
their purpose, but I find it akin to
showing someone a blueprint of their
dream house and asking them what
curtains would fit well in the space
http://danielmall.com/articles/rif-element-collages/
Dan Mall

108. Now is my happy time
with CSS. In-browser
visual tweaks using the
inspector and console.
Me

110. Design Wireframe / Dev

111. Too much spacing
Incorrect Typeface
Text is too big
Too much spacing
Text isn’t bold,
wrong typeface
Not enough “leading”

113. Too much spacing
Incorrect Typeface
Text is too big
Too much spacing
Text isn’t bold,
wrong typeface
Not enough “leading”

114. Reduce #header’s
top-padding to 10px
Add font-weight:
bold to nav
Increase padding-top to 300px
and reduce margin-top to 100px
Reduce line-height to 1.25em
Add font-family: “Open
sans”, Helvetica, sans-serif;

115. Measuring success of a workflow change means answering one
question: Does this change make everyone on the team happier?
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
@niceux

116. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
Thank you!