Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Evolving the Digital Style Guideby @AndyPrattDesign
@ArtifactConf Providence, RI
Hi there!www.favoritemedium.com
@favoritemediums
@AndyPrattDesign
#BrandingFunctions@AndyPrattDesign
#BrandingFunctions@AndyPrattDesign
#BrandingFunctions@AndyPrattDesign
What is branding anyway?
@AndyPrattDesign
“Consistency doesn’t mean sameness.”
- Rob De Florio, Former director of U.S. global advertising, NIKE
#BrandingFunctions@AndyPrattDesign@AndyPrattDesign
Informational Experiences
After the World Wide Web
@AndyPrattDesign
Informational Experiences
Destination Experiences
After the World Wide Web
@AndyPrattDesign
Informational Experiences
Destination Experiences
Social Destination Experiences
After the World Wide Web
@AndyPrattDesign
@AndyPrattDesign
Informational Experiences
Destination Experiences
Social Destination Experiences
System Experiences
After the World Wide Web
@AndyPrattDesign
Alone, a giant pdf won’tcut it anymore.
@AndyPrattDesign
@AndyPrattDesign
Infuse your audience and primary users into the
style guide.
– 1 –
@AndyPrattDesign
Make it a tool during the process not just a deliverable
after the fact.
– 2 –
@AndyPrattDesign
@AndyPrattDesign
Provide a path for consistency across the
brand’s digital eco-system.
– 3 –
1. Who we are
2. What we look like
3. What we sound like
4. How we behave
The ingredients:
@AndyPrattDesign
Who We Are– 1 –
@AndyPrattDesign
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
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
http://www.zapposinsights.com/culture-book
Core Values
1. Deliver WOW through service2. Embrace and drive change3. Create fun and a little weirdness4. Be adventurous, creative, and open-minded5. Pursue growth and learning6. Build open and honest relationships with communication7. Build positive team and family spirit8. Do more with less9. Be passionate and determined10. Be humble
Zappos’ 10 Core Values
Style Tiles
3. Create fun and a little weirdness
Zappos iPad app
Style Tiles
3. Create fun and a little weirdness
Zappos iPad app
Courtesy on Nickelodeon
Audience / User Personas
What We Look Like
– 2 –
@AndyPrattDesign
http://www.mozilla.org/en-US/styleguide/
Sample Components1. Overview2. Logo(s)3. Typography4. Color Palette5. Photography (optional)6. Brand Elements (optional)7. Inspiration
Brand Identity Components
Style Tiles
1. Logo
2. Typography
3. Colors/Textures
4. Icons
5. Images
6. Buttons
7. Descriptors
@AndyPrattDesign
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
@AndyPrattDesign
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
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
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
Front End Style Guides & UX Pattern Libraries
1. Creates consistent and uniform code
What do we need them?
@AndyPrattDesign
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
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
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
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
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
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
https://github.com/styleguide
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
Live Style Guides and UX Pattern LibrariesGithub
300 × 81 - adainitiative.org
http://casecommons.org/
Case Commons' mission is to transform public sector human services through user-centered
design & technology.
What We Sound Like
– 3 –
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
Philosophy / Guiding Principles
http://be.macmillan.org.uk/
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
Infusing Your Users
http://be.macmillan.org.uk/
http://be.macmillan.org.uk/
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
House Style
voiceandtone.com
Voice & Tone Samples
How We Behave– 4 –
@AndyPrattDesign
GUI GUI
@AndyPrattDesign
GUI GUIMAGICAL SPACE
@AndyPrattDesign
#BrandingFunctions@AndyPrattDesign
#BrandingFunctions@AndyPrattDesign
Paper iPad App
http://en.wikipedia.org/wiki/12_basic_principles_of_animation
Sample Components1. Overview2. Voice and Tone Guiding Principles3. Illustrated Samples4. Style5. Inspiration
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 animationThe Illusion of Life: Disney Animation By Ollie Johnston and Frank Thomas
Arcs
Secondary action
Timing
Exaggeration
Solid drawing
Appeal
Low Fidelity Behavior Gallery
@AndyPrattDesign
Low Fidelity Behavior Gallery
@AndyPrattDesign
@AndyPrattDesign
@AndyPrattDesign
http://appatizer.tumblr.com/
Low Fidelity Behavior Gallery
Cappticate.co
Low Fidelity Behavior Gallery
http://danielmall.com/articles/rif-element-collages/
https://github.com/styleguide
Behavior Gallery
http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/
Behavior Gallery
http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/
Behavior Gallery
https://github.com/styleguide@AndyPrattDesign
Just because you can doesn’t mean you should
Where does it all live?
@AndyPrattDesign
http://be.macmillan.org.uk/
#BrandingFunctionsimages: www.hamillgallery.comhttp://alistapart.com/about/style-guide
#BrandingFunctionsimages: www.hamillgallery.comhttp://alistapart.com/about/style-guide
http://bradfrostweb.com/blog/post/atomic-web-design/
http://bradfrostweb.com/blog/post/atomic-web-design/
Pattern Lab
http://bradfrostweb.com/blog/post/atomic-web-design/
Align user stories and epics with atoms, molecules and organisms
Conclusion
@AndyPrattDesign
@AndyPrattDesign
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