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.
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)
5.
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
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
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
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
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.
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
83. • Artist
• Album
• Title
• Cover Art
• Genres
• Songs
• Title
• Time
• Explicit
84.
85.
86.
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
88.
89.
90.
91.
92.
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
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
104.
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
111. Too much spacing
Incorrect Typeface
Text is too big
Too much spacing
Text isn’t bold,
wrong typeface
Not enough “leading”
112.
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