describing design

make it better

Describing DesignsTraditional Design Specifications vs. Prototyping

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


describing designs

make it better

tweet @skotcarruth


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


describing designs

make it better

Now we have specialization

• User Researcher



• UI Designer


• Motion Designer

tweet @skotcarruth


• Content Strategist

• Business Analyst

• Product Manager

• Front-end Developer

• Back-end Developer

• DevOps

describing designs

make it better

tweet @skotcarruth


How do you coordinate with all of these people?

describing designs

make it better

The Spec

tweet @skotcarruth


describing designs

make it better

Documentation

tweet @skotcarruth


describing designs

make it better

Each role has its deliverables

• User Researcher



• UI Designer


• Motion Designer

tweet @skotcarruth


describing designs

make it better

User Research

tweet @skotcarruth


describing designs

make it better

Information Architecture

tweet @skotcarruth


describing designs

make it better

Interaction Design

tweet @skotcarruth


describing designs

make it better

UI Design

tweet @skotcarruth


describing designs

make it better

Visual Design

tweet @skotcarruth


describing designs

make it better

Motion Design

tweet @skotcarruth


describing designs

make it better

The Spec

tweet @skotcarruth


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


describing designs

make it better

But they also suck.

• TL;DR

• Time-intensive

• Hard to keep up-to-date

• What about testing?

tweet @skotcarruth


describing designs

make it better

tweet @skotcarruth


describing designs

make it better

tweet @skotcarruth


1) Communicate

describing designs

make it better

tweet @skotcarruth


1) Communicate2) Test

describing designs

make it better

The Prototype

tweet @skotcarruth


describing designs

make it better

It’s about mindset

tweet @skotcarruth


1) Communicate 2) Test

describing designs

make it better

tweet @skotcarruth

What you make depends on what you want to learn.


describing designs

make it better

tweet @skotcarruth


http://www.cennydd.com/writing/why-i-dont-wireframe-much

describing designs

make it better

Types of Prototypes

tweet @skotcarruth


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


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


describing designs

make it better

InVision

tweet @skotcarruth


describing designs

make it better

Framer.js

tweet @skotcarruth


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


describing designs

make it better

tweet @skotcarruth

But don’t forget: there’s no magic bullet.


describing designs

make it better

tweet @skotcarruth


1) Communicate 2) Test

describing designs

make it better

Questions?

tweet @skotcarruth


describing designs

[email protected]

mailto:[email protected]