We're experts in reducing cognitive load for how people use and interact with our web products, but when it comes to documenting and communicating that end solution, we simply are not helping out our team members or stakeholders. There's a much better process. In order to understand design decisions, states and flows, the audience of our documentation has the incredibly difficult task of consuming our multi-page PDF's of static comps and wireframes. They must correctly interpret, process and respond to a static version of a very dynamic interface. With responsive design and device fragmentation, the amount of work just to create and interpret existing documentation and deliverables has increased exponentially alongside the device market. Utilizing flexible documentation for content models, wireframes, visual design and prototypes, we create not only tangible and accurate documentation, but also portable, reusable documentation that reduces rework and communication time waste. Whether you work in a startup or fortune 500 company, utilize a waterfall or agile approach to product design, this presentation will give you tools you can use today to increase your efficiency in design. All the while keeping a clear and streamlined communication flow with various team members and stakeholders.

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

2. Hi, My name is Jon.
I like good beer, sauerkraut, sushi
w/ too much wasabi, remote control
helicoptors, fooseball, xbox ...
!
I love visual design, interaction
design, observing human behavior
(people watching), development ...
helping people by improving the
web.
!
Founder & CEO of NiceUX
!
Worked with Thomson Reuters, Tangible
UX, Happy Cog, U.S. Dept. of Defense, US
Bank, Best Buy, American Express, etc...
!
Worked for Yahoo! as Sr. UX and Sr. Dev
!
Volunteered with Boxes and Arrows
ZIP
Border
Gradient
Inner Glow
Drop Shadow
Text-
Shadow

3. 33 years ago…

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

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

14. …sad braaaiiiiiiins

15. …sad IA

16. Communication
is hard
Inviting everyone to the design table,
rallies the team under the same
direction and makes it easier to sell
through later design choices.
Clear, human, effective, efficient communication
with clients, stakeholders, and colleagues.
We’re just getting to neaderslob stages of effectively communicating on the
web and need to look at where we are in the evolution of our documentation.

17. Evolution of Communication
Sumerian Visual
Communication
Egyptian Written and Visual Communication

18. Evolution of Communication
Sumerian Visual
Communication
Mmmmmm… Bacon
Egyptian Written and Visual Communication

19. Evolution of Communication
Sumerian Visual
Communication
Egyptian Written and Visual Communication
Mmmmmm… Bacon Golf

20. Evolution of Communication
Annotated Wireframes and Static Comps

21. Evolution of Communication
Annotated Wireframes and Static Comps

22. Evolution of Communication
Annotated Wireframes and Static Comps

23. Evolution of Communication
Annotated Wireframes and Static Comps

24. Evolution of Communication
Annotated Wireframes and Static Comps

25. Evolution of Communication
Application Generated Prototypes

26. Evolution of Communication
Application Generated Prototypes

27. Evolution of Communication
Flexible Documentation. Sketches & Code

30. Getting the right people to
the table, at the right time.
If you don’t know how to code, know
how to modify it.
Find the most efficient way to get into the browser as
clean as possible. The one thing we need to stop doing, is
designing in bubbles.

31. You don’t have to wireframe
and prototype in code…

32. Efficient Communication
Imagination and interpretation is the
enemy of comprehending digital design.
We’re experts at reducing cognitive load, or how much
mental processing one must exhaust while using an
application, but we suck at communicating it.

35. 11 billion industry
wide in wasted time
due to inefficient
communication
methods.

37. Product Design
IA’s, Designers, Developers and stakeholders
web apps
technology progressive enhancement

41. OMG!
Billy just asked me to prom!

43. Communication
Inviting everyone to the design table,
rallies the team under the same
direction and makes it easier to sell
tFhrloeuxghib lalteer D deoscigun mchoeicnets.ation
The principle of LeanUX is to create only
the necessary documentation to
effectively communicate design, nothing
more.
With flexible documentation and responsive design, it’s not
only a matter of the physical attributes of flexibility, but
also scalability and portability of our documentation.

44. Planning and Risk
Management
Minimize rework. Shared Layers and
master panels are awesome, but is there
something more awesome?
As we create our documentation we think of the screen
elements, patterns, how the design will evolve. Not about
how much our lives will suck once the client decides they
don’t like “blue,” they like “blue.”

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

51. 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

54. Working nights and
weekends is not cool.
Efficient Speed and Accuracy to delivery
is. Spend more time tweaking the design
and playing foosball than working nights
and weekends.
Regardless of what the Ad-men say or that you have beer
and video games at the office, working like a dog is for
suckers. Leadership that does that to you doesn’t know
how to use their brains.

55. New Problems Force
Uncomfortable Conversations
Responsive web design puts a focus on
making informed design decisions and flips
our way of thinking on it’s head.
We cannot be great designers if we’re stuck in old habits of
working within the larger screen and pairing it down for smaller
screens. Make stakeholders accountable.

56. Use the right tool for the job.
It’s not about working towards volume or
because a speaker at a conference told you
to do it a certain way or “that’s what they
taught you in Ad school,” it’s about finding
the right tool for the job.
A tool’s a tool, pick the right one that can effectively
communicate the design direction, as efficient as possible.

58. Start the Relationship Right
Inviting everyone to the design table, rallies the team
under the same direction and makes it easier to sell
through later design choices.
Set strategy for project, know your content and users, and have a friendly 6-8-5
sketching session. Collaborate, people.

59. Ta-Da!
Working towards a “ta-da!” moment sets the precedence of
print Agency style critique and dismemberment of design.
Authoritative feedback without understanding of generative and iterative process is a
recipe for failure. Design for the web is fundamentally different than advertising or print
design, we should guide our teammates and stakeholders the right way.

61. Concept Ideation
During the generative, divergent
thinking, or “honeymoon phase” of a
project, be cheap and lay everything on
the table. Especially your ego.
There is nothing more practical than pencil and paper, but
there is something incredibly wise about letting the client
use them to communicate their thoughts.

66. Content Modeling
Knowing the content you’re designing
with is essential to creating efficient
documentation.
If you’re going to be adding in the details of content
relationships, why not do it in the format of how it will be
delivered and utilized by prototypers.

69. What can I use later?
What will I need to tell the story later
and be prepared for any changes?
Utilizing the format that your content will eventually be
in, gives you flexibility to dynamically make changes that
will propagate to every prototype you’re using it in and
also the portability to take only what you need while
retaining a clear understanding of the entire content
infrastructure.

70. Prototyping with Real Edge Cases
By prototyping our wireframes in code, we can plan
for and identify edge cases we may not expect if we
were producing our traditional wireframes.

73. Visual Design
Visual design is a touchy subject for some,
but we should be spending significantly
less time in PS.
Style Tiles or Element Collages are a great way to save time.
Get the aesthetic feel down and we’ll put all the design,
content, and code together for our prototype. Let’s be
realistic about what we’re going to produce, not what we can
represent it to be.

74. 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

75. NiceUX.com @niceux
Is there a reason this
doesn’t look like my
PSD?

76. With flexible and adaptive (responsive) content,
what you design in Photoshop and what ends up
getting released, will NEVER be the same.
NiceUX.com @niceux
Is there a reason this
doesn’t look like my
PSD?

77. With flexible and adaptive (responsive) content,
what you design in Photoshop and what ends up
getting released, will NEVER be the same.
Don’t spin your wheels in Photoshop. With so many browser nuances, device sizes and now with all
designs being adaptive and responsive, Plan for an aesthetic guideline, wireframe key content
structures and UI states. Plan to tweak design in code.
NiceUX.com @niceux
Is there a reason this
doesn’t look like my
PSD?

78. Let’s be realistic about
what we’re going to
produce and who’s
involved.

80. Let’s talk about feelings
Introducing new workflows or reducing
the amount of work within specialized
areas of expertise brings up real feelings
within a team.
Depression, Anxiety, Reduced Perception of Value,
Inadequacy

81. …sad IA
Let’s talk about feelings
On the brighter side of things
Our process doesn’t change much. Utilizing a more flexible approach to
communicating design makes the whole process smoother.

82. …happy IA
Let’s talk about feelings
On the brighter side of things
Our process doesn’t change much. Utilizing a more flexible approach to
communicating design makes the whole process smoother.

83. Thank you!
Follow me at @niceux, contact me at jon@niceux.com