Post on 12-Apr-2017
Communication with Flexible Documentation
Jon Hadden @niceux
Effective communication and efficient workflow for today’s web designers
NiceUX
#CollaborateBris@CollaborateConf
Collaborate Bristol 2015
Hi, my name is Jon@niceux
#CollaborateBris@niceux #flexdoc
I am a designer Product Strategy, Information Architecture, Interaction Design, Front-End Development
Founder of NiceUX
Founder of Simple CMMS (Preventative Maintenance Software)
Advisory Board at Minneapolis Community & Technical College
Lecturer at University of Minnesota
#CollaborateBris@niceux #flexdoc
I am less interested in my title, more so how I can contribute to creating something that helps someone enjoy life?
#CollaborateBris@niceux #flexdoc
I am less interested in my title, more so how can I make the journey of contributing and the creating more enjoyable?
#CollaborateBris@niceux #flexdoc
=
We need to start thinking about the amount of cognitive load, or friction, throughout our process and methods of communicating design.
Flexible documentation is all about making the process more efficient and making communication along the way more effective.
Communicating Experience
Portable Content Modeling
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
• Artist • Album
• Title • Cover Art • Genres • Songs
• Title • Time • Explicit
Utilizing JSON provides 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
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
Effectively Converging Towards A Concept
Facilitate design workshop with the team to collaboratively as many ideas as possible at high fidelity. Present. Critique. Repeat.
Make decisions. Realize design against constraints. Craft the details in sketch form, informally present to team members individually.
Scalable Page Structure & Reusable Interaction Design
“I’m always puzzled by designers who are dogmatic about their documentation formats, tools, and techniques. Designers need to build a toolbox of techniques because every job needs a different approach. The right approach for your job depends on so many factors” - Dan Brown https://medium.com/eightshapes-llc/in-search-of-the-design-documentation-unicorn-3b35a6680202
Every degree of abstraction away from the product in it’s finalized state carries cognitive cost.
Structural IA
Structural IA
Visual Design
Structural IA
Visual Design
Interaction Design
Structural IA
Visual Design
Interaction Design
Content
Structural IA
Visual Design
Interaction Design
Content
Efficient Visual Design Creation and Effective Feedback
Design Wireframe / Dev
Too much spacing
Incorrect Typeface
Text is too big
Too much spacing
Text isn’t bold, wrong typeface
Not enough “leading”
Too much spacing
Incorrect Typeface
Text is too big
Too much spacing
Text isn’t bold, wrong typeface
Not enough “leading”
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;
How can you make your team’s journey more enjoyable?
Thank you!@niceux
jon@niceux.com
“All I see is what I could have done better. I can’t help it.”
- Frank Gehry