Slide 1
Slide 1 text
Design Deliverables
Alternatives to Multi-Layered Photoshop Comps in a
Responsive World
Slide 2
Slide 2 text
Design Deliverables?
Our best thinking and
our design process
+
What we need to communicate
about our design solution to our
clients
Slide 3
Slide 3 text
What do we need communicate
in our design deliverables
• Color palette
• Typography
• Iconography
• Tone
• Concept
• UI Elements
• Interactions
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Why we need to rethink our design
deliverables in this responsive era
Slide 6
Slide 6 text
A multi layered Photoshop comp
is like a painting hanging on a wall
Our designs usually
are not hung on a wall
Slide 7
Slide 7 text
Some alternative
approaches
Slide 8
Slide 8 text
http://styletil.es/
Slide 9
Slide 9 text
Element collage
Slide 10
Slide 10 text
Pattern library
Slide 11
Slide 11 text
Pattern lab
Slide 12
Slide 12 text
Typecast
Slide 13
Slide 13 text
Rapid prototyping
• Code
• Frameworks:
• Bootstrap
• Foundation
• Neat
• Curated library
• Rock Hammer
• Applications
• Hammer
• Mixture
• Visual
• Adobe Re-Flow
• Macaw
Slide 14
Slide 14 text
–Dan Mall
“Replace ‘sign off’
with ‘go on’.”
Slide 15
Slide 15 text
Resources
• Style Tiles - http://styletil.es/
• Element collage - http://danielmall.com/articles/rif-element-
collages/
• Pattern libraries - http://ux.mailchimp.com/patterns
• Typecast - http://typecast.com/
Slide 16
Slide 16 text
Thank you!
peterkaizer.com
@pdkaizer