Communication with Flexible Documentation

Communication with Flexible Documentation

Jon Hadden @niceux, niceux.com #prototypecamp @chicago camps

Effective communication and efficient workflow for today’s web designers

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

33 years ago…

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

33 years ago…

https://www.threadless.com/product/4762/Birth_of_a_Legend?clickid=wNURg434aQb1XWz0gyS-vWzRUkQytrSpTwulzc0&utm_campaign=59129&utm_medium=affiliate&utm_source=ImpactRadius

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

https://www.threadless.com/product/4762/Birth_of_a_Legend?clickid=wNURg434aQb1XWz0gyS-vWzRUkQytrSpTwulzc0&utm_campaign=59129&utm_medium=affiliate&utm_source=ImpactRadius

…sad braaaiiiiiiins

…sad IA

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.

Evolution of Communication

Sumerian Visual Communication

Egyptian Written and Visual Communication

Mmmmmm… Bacon






Mmmmmm… Bacon Golf


Evolution of CommunicationAnnotated Wireframes and Static Comps





Evolution of CommunicationApplication Generated Prototypes

Evolution of CommunicationApplication Generated Prototypes

Evolution of CommunicationFlexible Documentation. Sketches & Code

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.

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

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.

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

IA’s, Designers, Developers and stakeholders

web appstechnology progressive enhancement

Product Design

OMG!

Billy just asked me to prom!

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.

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?

Concept Direction 1

30 Wireframes

Concept Direction 2 Concept Direction 3

20 PSDs

Large

20 Wireframes 10 PSDs

Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









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.

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.

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.

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.

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.

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.

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.

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?

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.

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.

Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









NiceUX.com @niceux

Is there a reason this doesn’t look like my PSD?

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.


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.


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

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.


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


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

Thank you!Follow me at @niceux, contact me at [email protected]

mailto:[email protected]

Communication with Flexible Documentation

Design

psds20 wireframes

psds30 wireframes

psdslarge20 wireframes

psdssmall20 wireframes

psdsmedium30 wireframes

psdsxsmall30 wireframes

wireframesconcept direction

visual design