Communication with Flexible Documentation
4 likes642 views
Jon Hadden discusses the importance of effective communication in web design, advocating for flexible documentation that involves all team members in the design process. He emphasizes minimizing rework and encourages using the right tools to facilitate this collaboration while adapting to modern responsive design challenges. The document highlights the need to integrate visual design and content modeling effectively to improve workflow and reduce cognitive load.
Communication with Flexible Documentation
- 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
- 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)
- 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