Communication with Flexible Documentation
-
Upload
jon-hadden -
Category
Design
-
view
198 -
download
4
description
Transcript of Communication with Flexible Documentation
![Page 1: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/1.jpg)
Communication with Flexible Documentation
Jon Hadden @niceux, niceux.com #prototypecamp @chicago camps
Effective communication and efficient workflow for today’s web designers
![Page 2: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/2.jpg)
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
Hi, My name is Jon.
ZIP
Border
Gradient
Inner Glow
Drop Shadow
Text-Shadow
![Page 3: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/3.jpg)
33 years ago…
![Page 4: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/4.jpg)
Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)
33 years ago…
![Page 5: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/5.jpg)
Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)
![Page 6: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/6.jpg)
![Page 7: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/7.jpg)
![Page 8: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/8.jpg)
![Page 9: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/9.jpg)
![Page 10: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/10.jpg)
![Page 11: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/11.jpg)
![Page 12: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/12.jpg)
![Page 13: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/13.jpg)
![Page 14: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/14.jpg)
…sad braaaiiiiiiins
![Page 15: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/15.jpg)
…sad IA
![Page 16: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/16.jpg)
CommunicationInviting everyone to the design table, rallies the team under the same direction and makes it easier to sell through later design choices.
Communication is hard
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.
Clear, human, effective, efficient communication with clients, stakeholders, and colleagues.
![Page 17: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/17.jpg)
Evolution of Communication
Sumerian Visual Communication
Egyptian Written and Visual Communication
![Page 18: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/18.jpg)
Mmmmmm… Bacon
Evolution of Communication
Sumerian Visual Communication
Egyptian Written and Visual Communication
![Page 19: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/19.jpg)
Sumerian Visual Communication
Egyptian Written and Visual Communication
Mmmmmm… Bacon Golf
Evolution of Communication
![Page 20: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/20.jpg)
Evolution of CommunicationAnnotated Wireframes and Static Comps
![Page 21: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/21.jpg)
Evolution of CommunicationAnnotated Wireframes and Static Comps
![Page 22: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/22.jpg)
Evolution of CommunicationAnnotated Wireframes and Static Comps
![Page 23: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/23.jpg)
Evolution of CommunicationAnnotated Wireframes and Static Comps
![Page 24: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/24.jpg)
Evolution of CommunicationAnnotated Wireframes and Static Comps
![Page 25: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/25.jpg)
Evolution of CommunicationApplication Generated Prototypes
![Page 26: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/26.jpg)
Evolution of CommunicationApplication Generated Prototypes
![Page 27: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/27.jpg)
Evolution of CommunicationFlexible Documentation. Sketches & Code
![Page 28: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/28.jpg)
![Page 29: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/29.jpg)
![Page 30: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/30.jpg)
Getting the right people to the table, at the right time.
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.
If you don’t know how to code, know how to modify it.
![Page 31: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/31.jpg)
You don’t have to wireframe and prototype in code…
![Page 32: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/32.jpg)
Efficient Communication
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.
Imagination and interpretation is the enemy of comprehending digital design.
![Page 33: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/33.jpg)
![Page 34: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/34.jpg)
![Page 35: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/35.jpg)
11 billion industry wide in wasted time due to inefficient communication methods.
![Page 36: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/36.jpg)
![Page 37: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/37.jpg)
IA’s, Designers, Developers and stakeholders
web appstechnology progressive enhancement
Product Design
![Page 38: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/38.jpg)
![Page 39: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/39.jpg)
![Page 40: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/40.jpg)
![Page 41: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/41.jpg)
OMG!
Billy just asked me to prom!
![Page 42: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/42.jpg)
![Page 43: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/43.jpg)
CommunicationInviting everyone to the design table, rallies the team under the same direction and makes it easier to sell through later design choices.Flexible Documentation
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.
The principle of LeanUX is to create only the necessary documentation to effectively communicate design, nothing more.
![Page 44: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/44.jpg)
Planning and Risk Management
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.”
Minimize rework. Shared Layers and master panels are awesome, but is there something more awesome?
![Page 45: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/45.jpg)
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
![Page 46: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/46.jpg)
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
![Page 47: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/47.jpg)
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
![Page 48: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/48.jpg)
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
![Page 49: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/49.jpg)
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
![Page 50: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/50.jpg)
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
![Page 51: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/51.jpg)
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
![Page 52: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/52.jpg)
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
![Page 53: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/53.jpg)
![Page 54: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/54.jpg)
Working nights and weekends is not cool.
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.
Efficient Speed and Accuracy to delivery is. Spend more time tweaking the design and playing foosball than working nights and weekends.
![Page 55: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/55.jpg)
New Problems Force Uncomfortable Conversations
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.
Responsive web design puts a focus on making informed design decisions and flips our way of thinking on it’s head.
![Page 56: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/56.jpg)
Use 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.
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.
![Page 57: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/57.jpg)
![Page 58: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/58.jpg)
Start the Relationship Right
Set strategy for project, know your content and users, and have a friendly 6-8-5 sketching session. Collaborate, people.
Inviting everyone to the design table, rallies the team under the same direction and makes it easier to sell through later design choices.
![Page 59: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/59.jpg)
Ta-Da!
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.
Working towards a “ta-da!” moment sets the precedence of print Agency style critique and dismemberment of design.
![Page 60: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/60.jpg)
![Page 61: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/61.jpg)
Concept Ideation
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.
During the generative, divergent thinking, or “honeymoon phase” of a project, be cheap and lay everything on the table. Especially your ego.
![Page 62: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/62.jpg)
![Page 63: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/63.jpg)
![Page 64: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/64.jpg)
![Page 65: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/65.jpg)
![Page 66: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/66.jpg)
Content Modeling
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.
Knowing the content you’re designing with is essential to creating efficient documentation.
![Page 67: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/67.jpg)
![Page 68: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/68.jpg)
![Page 69: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/69.jpg)
What can I use later?
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.
What will I need to tell the story later and be prepared for any changes?
![Page 70: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/70.jpg)
Prototyping with Real Edge CasesBy prototyping our wireframes in code, we can plan for and identify edge cases we may not expect if we were producing our traditional wireframes.
![Page 71: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/71.jpg)
![Page 72: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/72.jpg)
![Page 73: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/73.jpg)
Visual Design
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.
Visual design is a touchy subject for some, but we should be spending significantly less time in PS.
![Page 74: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/74.jpg)
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
![Page 75: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/75.jpg)
NiceUX.com @niceux
Is there a reason this doesn’t look like my PSD?
![Page 76: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/76.jpg)
NiceUX.com @niceux
With flexible and adaptive (responsive) content, what you design in Photoshop and what ends up getting released, will NEVER be the same.
Is there a reason this doesn’t look like my PSD?
![Page 77: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/77.jpg)
NiceUX.com @niceux
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.
Is there a reason this doesn’t look like my PSD?
![Page 78: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/78.jpg)
Let’s be realistic about what we’re going to produce and who’s involved.
![Page 79: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/79.jpg)
![Page 80: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/80.jpg)
Let’s talk about feelings
Depression, Anxiety, Reduced Perception of Value, Inadequacy
Introducing new workflows or reducing the amount of work within specialized areas of expertise brings up real feelings within a team.
![Page 81: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/81.jpg)
Let’s talk about feelings
Our process doesn’t change much. Utilizing a more flexible approach to communicating design makes the whole process smoother.
On the brighter side of things
…sad IA
![Page 82: Communication with Flexible Documentation](https://reader031.fdocuments.us/reader031/viewer/2022020101/546b085caf7959221d8b609a/html5/thumbnails/82.jpg)
Let’s talk about feelings
Our process doesn’t change much. Utilizing a more flexible approach to communicating design makes the whole process smoother.
On the brighter side of things
…happy IA