Evolving the digital style guide

A holistic approach to evolving the style guide. Presented at the Artifact Conference, Austin, TX 2013

Transcript

1. Evolving the Digital Style Guide @AndyPrattDesign
2. Hi there! @AndyPrattDesign www.funnygarbage.com @AndyPrattDesign May 13, 2013
3. #BrandingFunctions @AndyPrattDesign
4. #BrandingFunctions @AndyPrattDesign
5. What is branding anyway? @AndyPrattDesign
6. “Consistency doesn’t mean sameness.” - Rob De Florio, Former director of U.S. global advertising, NIKE
7. http://imjustcreative.com/
8. http://thestandardsmanual.com/
9. #BrandingFunctions @AndyPrattDesign @AndyPrattDesign
10. http://info.cern.ch/
11. Informational Experiences After the World Wide Web @AndyPrattDesign
12. Informational Experiences Destination Experiences After the World Wide Web @AndyPrattDesign
13. Informational Experiences Destination Experiences Social Destination Experiences After the World Wide Web @AndyPrattDesign
14. @AndyPrattDesign
15. Informational Experiences Destination Experiences Social Destination Experiences System Experiences After the World Wide Web @AndyPrattDesign
16. Alone, a giant pdf won’t cut it anymore. @AndyPrattDesign
17. @AndyPrattDesign Infuse your audience and primary users into the style guide. – 1 –
18. Make it a tool during the process not just a deliverable after the fact. – 2 – @AndyPrattDesign
19. @AndyPrattDesign Provide a path for consistency across the brand’s digital eco-system. – 3 –
20. 1. Who we are 2. What we look like 3. What we sound like 4. How we behave The ingredients: @AndyPrattDesign
21. Who We Are – 1 – @AndyPrattDesign
22. 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
23. 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
24. 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
25. Style Tiles 3. Create fun and a little weirdness Zappos iPad app
26. Style Tiles 3. Create fun and a little weirdness Zappos iPad app
27. Courtesy on Nickelodeon Audience / User Personas
28. What We Look Like – 2 – @AndyPrattDesign
29. http://www.mozilla.org/en-US/styleguide/ Brand Identity Components
30. Style Tiles 1. Logo 2. Typography 3. Colors/Textures 4. Icons 5. Images 6. Buttons 7. Descriptors @AndyPrattDesign
31. Style Tiles Tackle something that is specific to that project @AndyPrattDesign
32. 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
33. 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
34. @AndyPrattDesign
35. http://www.clockwork.net/
36. Live Style Guides & UX Pattern Libraries Living 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
37. https://github.com/styleguide Live Style Guides and UX Pattern Libraries Github 300 × 81 - adainitiative.org
38. Live 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
39. http://casecommons.org/ Case Commons' mission is to transform public sector human services through user-centered design & technology.
40. Case Commons Intro http://casecommons.org/
41. http://casecommons.org/
42. http://casecommons.org/
43. http://guides.rubygems.org/
44. http://casecommons.org/
45. What We Sound Like – 3 – http://casecommons.org/
46. http://www.macmillan.org.uk/
47. Philosophy / Guiding Principles http://be.macmillan.org.uk/
48. Infusing Your Users http://be.macmillan.org.uk/
49. http://be.macmillan.org.uk/ House Style
50. voiceandtone.com Voice & Tone Samples
51. How We Behave – 4 – @AndyPrattDesign
52. GUI GUI @AndyPrattDesign
53. GUI GUI MAGICAL SPACE @AndyPrattDesign
54. #BrandingFunctions @AndyPrattDesign
55. #BrandingFunctions @AndyPrattDesign
56. Paper iPad App
57. https://developers.facebook.com/docs/reference/plugins/like-box/
58. 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 Arcs Secondary action Timing Exaggeration Solid drawing Appeal
59. Low Fidelity Behavior Gallery @AndyPrattDesign
60. Low Fidelity Behavior Gallery @AndyPrattDesign
61. Low Fidelity Behavior Gallery @AndyPrattDesign
62. Low Fidelity Behavior Gallery @AndyPrattDesign
63. http://www.unheap.com/ Low Fidelity Behavior Gallery
64. Courtesy of the talk you just saw by Dan Mall, Ben Callahan and Yesenia Perez-Cruz Low Fidelity Behavior Gallery
65. https://github.com/styleguide Behavior Gallery
66. http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ Behavior Gallery
67. http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ Behavior Gallery
68. Where does it all live? @AndyPrattDesign
69. http://be.macmillan.org.uk/
70. http://www.bbc.co.uk/gel
71. #BrandingFunctions images: www.hamillgallery.com http://alistapart.com/about/style-guide
72. #BrandingFunctions images: www.hamillgallery.com http://alistapart.com/about/style-guide
73. www.iceber.gs
74. www.iceber.gs
75. Conclusion @AndyPrattDesign
76. @AndyPrattDesign
77. Thank You! Special Thanks: Pivotal Labs, Case Commons, Nickelodeon, Clockwork, Big Spaceship, Funny Garbage, Artifact ( Yes - My wife cooked the meatloaf again so I could take a ridiculous picture to end the presentation. ) @AndyPrattDesign