1.
make it better
Describing Designs
Traditional Design Specifications vs. Prototyping

2.
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!

3.
make it better
When I was a boy…
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

4.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
Web Designer
describing designs

5.
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

6.
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

7.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
How do you coordinate with
all of these people?
describing designs

8.
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

9.
make it better
Documentation
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

10.
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

11.
make it better
User Research
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

12.
make it better
Information Architecture
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

13.
make it better
Interaction Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

14.
make it better
UI Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

15.
make it better
Visual Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

16.
make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

17.
make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

18.
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

19.
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

20.
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

21.
make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

22.
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

23.
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

24.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

25.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
describing designs

26.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs

27.
make it better
The Prototype
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

28.
make it better
It’s about mindset
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs

29.
make it better
tweet @skotcarruth
What you make depends on
what you want to learn.
prepared for san francisco ux designers
describing designs

30.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wireframe-much
describing designs

31.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wireframe-much
describing designs

32.
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 Prototypes
Wireframes
Comps
Proof of concept Working Software
Static front-end
describing designs

33.
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 Prototypes
Wireframes
Comps
Proof of concept
Static front-end
Working Software
describing designs

34.
make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

35.
make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

36.
make it better
InVision
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

37.
make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

38.
make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

39.
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

40.
make it better
tweet @skotcarruth
But don’t forget:
there’s no magic bullet.
prepared for san francisco ux designers
describing designs

41.
make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs

42.
make it better
Questions?
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
skot@philosophie.is