Informational Experiences
After the World Wide Web
@AndyPrattDesign
Slide 13
Slide 13 text
Informational Experiences
Destination Experiences
After the World Wide Web
@AndyPrattDesign
Slide 14
Slide 14 text
Informational Experiences
Destination Experiences
Social Destination Experiences
After the World Wide Web
@AndyPrattDesign
Slide 15
Slide 15 text
@AndyPrattDesign
Slide 16
Slide 16 text
Informational Experiences
Destination Experiences
Social Destination Experiences
System Experiences
After the World Wide Web
@AndyPrattDesign
Slide 17
Slide 17 text
Alone, a giant pdf won’t
cut it anymore.
@AndyPrattDesign
Slide 18
Slide 18 text
@AndyPrattDesign
Infuse your audience and
primary users into the
style guide.
– 1 –
Slide 19
Slide 19 text
@AndyPrattDesign
Slide 20
Slide 20 text
Make it a tool during the
process not just a deliverable
after the fact.
– 2 –
@AndyPrattDesign
Slide 21
Slide 21 text
@AndyPrattDesign
Provide a path for
consistency across the
brand’s digital eco-system.
– 3 –
Slide 22
Slide 22 text
1. Who we are
2. What we look like
3. What we sound like
4. How we behave
The ingredients:
@AndyPrattDesign
Slide 23
Slide 23 text
Who We Are
– 1 –
@AndyPrattDesign
Slide 24
Slide 24 text
http://drdianehamilton.wordpress.com/2011/01/13/top-10-company-mission-statements-in-2011/
Brand Purpose / Mission
Apple is committed to bringing the best personal computing experience
to students, educators, creative professionals and consumers around the
world through its innovative hardware, software and Internet offerings.
Apple’s Mission
Be the fabric of real-time communication on the web.
Skype’s Mission
Be Earth’s most customer centric company; to build a place where people
can come to find and discover anything they might want to buy online.
Amazon’s Mission
Slide 25
Slide 25 text
http://www.pepsico.com/Company/PepsiCo-Values-and-Philosophy.html
Philosophy / Guiding Principles
We uphold our commitment with six guiding principles.
1. Care for our customers, our consumers and the world we live in
2. Sell only products we can be proud of
3. Speak with truth and candor
4. Balance short term and long term
5. Win with diversity and inclusion
6. Respect others and succeed together
PepsiCo guiding principles
Slide 26
Slide 26 text
http://www.zapposinsights.com/culture-book
Core Values
1. Deliver WOW through service
2. Embrace and drive change
3. Create fun and a little weirdness
4. Be adventurous, creative, and open-minded
5. Pursue growth and learning
6. Build open and honest relationships with communication
7. Build positive team and family spirit
8. Do more with less
9. Be passionate and determined
10. Be humble
Zappos’ 10 Core Values
Slide 27
Slide 27 text
Style Tiles
3. Create fun and a little weirdness
Zappos iPad app
Slide 28
Slide 28 text
Style Tiles
3. Create fun and a little weirdness
Zappos iPad app
Style Tiles
1.Have your client identify a
site they see as an inspiration.
2.Work backwards and create a
style tile for that site.
3.Before you present your style
tiles, present the style tile of their
inspiration site so they can
imagine how your style tiles will
come to life.
@AndyPrattDesign
Slide 34
Slide 34 text
@AndyPrattDesign
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Front End Style Guides &
UX Pattern Libraries
Front end style guides are created at the beginning of the
development process to ensure consistent CSS styles, UI
elements and patterns.
What are they?
@AndyPrattDesign
Slide 37
Slide 37 text
Front End Style Guides &
UX Pattern Libraries
1. Creates consistent and uniform code
What do we need them?
@AndyPrattDesign
Slide 38
Slide 38 text
Front End Style Guides &
UX Pattern Libraries
1. Creates consistent and uniform code
2. Creates efficiency by reusing UI elements and patterns
What do we need them?
@AndyPrattDesign
Slide 39
Slide 39 text
Front End Style Guides &
UX Pattern Libraries
1. Creates consistent and uniform code
2. Creates efficiency by reusing UI elements and patterns
3. Avoids redoing work a team member may have already done
What do we need them?
@AndyPrattDesign
Slide 40
Slide 40 text
Front End Style Guides &
UX Pattern Libraries
1. Creates consistent and uniform code
2. Creates efficiency by reusing UI elements and patterns
3. Avoids redoing work a team member may have already done
4. Becomes an onramp for new team members
What do we need them?
@AndyPrattDesign
Slide 41
Slide 41 text
https://github.com/styleguide
Live Style Guides and UX Pattern Libraries
Github
300 × 81 - adainitiative.org
Slide 42
Slide 42 text
http://casecommons.org/
Case Commons' mission is to
transform public sector human
services through user-centered
design & technology.
http://en.wikipedia.org/wiki/12_basic_principles_of_animation
Philosophy / Guiding Principles
Anticipation
Staging
Straight ahead action & pose to pose
Follow through & overlapping action
Slow in and slow out
Squash and Stretch
12 basic principles of animation
The Illusion of Life: Disney Animation
By Ollie Johnston and Frank Thomas
Arcs
Secondary action
Timing
Exaggeration
Solid drawing
Appeal
http://bradfrostweb.com/blog/post/atomic-web-design/
Align user stories and epics with
atoms, molecules and organisms
Slide 81
Slide 81 text
www.icebergs.com
Slide 82
Slide 82 text
www.icebergs.com
Slide 83
Slide 83 text
Conclusion
@AndyPrattDesign
Slide 84
Slide 84 text
@AndyPrattDesign
Slide 85
Slide 85 text
Thank You!
Special Thanks:
Pivotal Labs, Case Commons, Nickelodeon,
Favorite Medium, Artifact
( Yes - My wife cooked the meatloaf again so I could take
a ridiculous picture to end the presentation. )
@AndyPrattDesign