Evolving the Digital Style Guide - Artifact Conference · “Consistency doesn’t mean...

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

http://imjustcreative.com/

http://thestandardsmanual.com/

#BrandingFunctions@AndyPrattDesign@AndyPrattDesign

http://info.cern.ch/

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.

Case Commons Intro

http://casecommons.org/

http://casecommons.org/

http://casecommons.org/

http://casecommons.org/

What We Sound Like

– 3 –

http://www.macmillan.org.uk/

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://www.capptivate.co

Capptivate.co

http://appatizer.tumblr.com/

Low Fidelity Behavior Gallery

Cappticate.co

http://www.unheap.com/

Low Fidelity Behavior Gallery

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/

http://www.bbc.co.uk/gel

#BrandingFunctionsimages: www.hamillgallery.comhttp://alistapart.com/about/style-guide

#BrandingFunctionsimages: www.hamillgallery.comhttp://alistapart.com/about/style-guide

pattern-lab.info

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

www.icebergs.com

www.icebergs.com

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