Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Communication with Flexible Documentation : Jon Hadden

424 views

Published on

Communication with Flexible Documentation

For product designers concerned with reducing cognitive load and making life easier for people that use and interact with our products, we're making the process of interpreting, understanding and getting that product built, a rather bumpy road. Add in an increasingly fragmented browser and device market, and the once somewhat manageable communication problems we originally had as IA's have now been amplified.

Flexible documentation speaks not only to the physically fluid nature of future IA artifacts but also the portability and scalability that we need to inherit as a means to communicate more effectively.

Whether you work in a startup or fortune 500 company, this presentation will give you tools you can use today to increase your efficiency in design and effectiveness of design communication.

Session Takeaways

Learn effective and proven methods of communicating responsive design.
Learn how to increase efficiency and reduce documentation waste within the product design process, focusing on:
Content Modeling
Ideation
Wireframing / Prototyping
Visual Design

Published in: Design

Communication with Flexible Documentation : Jon Hadden

  1. 1. Communication with Flexible Documentation Jon Hadden @niceux Effective communication and efficient workflow for today’s web designers NiceUX #CollaborateBris @CollaborateConf Collaborate Bristol 2015
  2. 2. Hi, my name is Jon @niceux #CollaborateBris@niceux #flexdoc
  3. 3. 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
  4. 4. I am less interested in my title, more so how I can contribute to creating something that helps someone enjoy life? #CollaborateBris@niceux #flexdoc
  5. 5. 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
  6. 6. =
  7. 7. Photo Credits: http://toparkornottopark.com/ Nikki Sylianteng
  8. 8. We need to start thinking about the amount of cognitive load, or friction, throughout our process and methods of communicating design.
  9. 9. Flexible documentation is all about making the process more efficient and making communication along the way more effective.
  10. 10. Communicating Experience
  11. 11. Portable Content Modeling
  12. 12. Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
  13. 13. • Artist • Album • Title • Cover Art • Genres • Songs • Title • Time • Explicit
  14. 14. 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
  15. 15. 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
  16. 16. Effectively Converging Towards A Concept
  17. 17. Facilitate design workshop with the team to collaboratively as many ideas as possible at high fidelity. Present. Critique. Repeat.
  18. 18. Make decisions. Realize design against constraints. Craft the details in sketch form, informally present to team members individually.
  19. 19. Scalable Page Structure & Reusable Interaction Design
  20. 20. “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
  21. 21. Every degree of abstraction away from the product in it’s finalized state carries cognitive cost.
  22. 22. Structural IA
  23. 23. Structural IA Visual Design
  24. 24. Structural IA Visual Design Interaction Design
  25. 25. Structural IA Visual Design Interaction Design Content
  26. 26. Structural IA Visual Design Interaction Design Content
  27. 27. Efficient Visual Design Creation and Effective Feedback
  28. 28. Design Wireframe / Dev
  29. 29. Too much spacing Incorrect Typeface Text is too big Too much spacing Text isn’t bold, wrong typeface Not enough “leading”
  30. 30. Too much spacing Incorrect Typeface Text is too big Too much spacing Text isn’t bold, wrong typeface Not enough “leading”
  31. 31. 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;
  32. 32. How can you make your team’s journey more enjoyable?
  33. 33. Thank you! @niceux jon@niceux.com “All I see is what I could have done better. I can’t help it.” - Frank Gehry

×