Download - Describing Design
make it better
Who’s this guy?
tweet @skotcarruthdescribing designs
prepared for san francisco ux designers
• Web design and development since 1996
• Founded Philosophie in 2008
• Worked on 200+ web/mobile projects
• UXD Instructor, UXDi Curriculum Fellow @ GA
• New to San Francisco!
make it better
When I was a boy…
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
Web Designer
describing designs
make it better
Now we have specialization
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
• Visual/Graphic Designer
• Motion Designer
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Now we have specialization
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
• Visual/Graphic Designer
• Motion Designer
tweet @skotcarruth
prepared for san francisco ux designers
• Content Strategist
• Business Analyst
• Product Manager
• Front-end Developer
• Back-end Developer
• DevOps
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
How do you coordinate with all of these people?
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Documentation
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Each role has its deliverables
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
• Visual/Graphic Designer
• Motion Designer
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
User Research
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Information Architecture
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Interaction Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
UI Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Visual Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Traditional specs can work well when:
• There are many specialists on the team
• There is ample time to create them
• They are done well
• Development is outsourced or remote
• Work is done in a waterfall fashion
• The scope doesn’t change much
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
But they also suck.
• TL;DR
• Time-intensive
• Hard to keep up-to-date
• What about testing?
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate2) Test
describing designs
make it better
The Prototype
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
It’s about mindset
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate 2) Test
describing designs
make it better
tweet @skotcarruth
What you make depends on what you want to learn.
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wireframe-much
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wireframe-much
describing designs
make it better
Types of Prototypes
tweet @skotcarruth
prepared for san francisco ux designers
Low Visual Fidelity
Low Functional Fidelity
High Functional Fidelity
High Visual Fidelity
Paper PrototypesWireframes
Comps
Proof of concept Working Software
Static front-end
describing designs
make it better
Types of Prototypes
tweet @skotcarruth
prepared for san francisco ux designers
Low Visual Fidelity
Low Functional Fidelity
High Functional Fidelity
High Visual Fidelity
Paper PrototypesWireframes
Comps
Proof of concept
Static front-end
Working Software
describing designs
make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
InVision
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
Prototypes are more powerful…
• A picture’s worth 1000 words
• Easier to test with
• Easier than ever to create
• More fun
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
But don’t forget: there’s no magic bullet.
prepared for san francisco ux designers
describing designs
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate 2) Test
describing designs
make it better
Questions?
tweet @skotcarruth
prepared for san francisco ux designers
describing designs