Evolving the Digital Styleguide

Slides from my talk at Artifact Conference East in Providence, RI.

Transcript

1. Evolving the Digital Style Guide by @AndyPrattDesign @ArtifactConf Providence, RI
2. Hi there! www.favoritemedium.com @favoritemediums @AndyPrattDesign
3. #BrandingFunctions @AndyPrattDesign
4. #BrandingFunctions @AndyPrattDesign
5. #BrandingFunctions @AndyPrattDesign
6. What is branding anyway? @AndyPrattDesign
7. “Consistency doesn’t mean sameness.” - Rob De Florio, Former director of U.S. global advertising, NIKE
8. http://imjustcreative.com/
9. http://thestandardsmanual.com/
10. #BrandingFunctions @AndyPrattDesign @AndyPrattDesign
11. http://info.cern.ch/
12. Informational Experiences After the World Wide Web @AndyPrattDesign
13. Informational Experiences Destination Experiences After the World Wide Web @AndyPrattDesign
14. Informational Experiences Destination Experiences Social Destination Experiences After the World Wide Web @AndyPrattDesign
15. @AndyPrattDesign
16. Informational Experiences Destination Experiences Social Destination Experiences System Experiences After the World Wide Web @AndyPrattDesign
17. Alone, a giant pdf won’t cut it anymore. @AndyPrattDesign
18. @AndyPrattDesign Infuse your audience and primary users into the style guide. – 1 –
19. @AndyPrattDesign
20. Make it a tool during the process not just a deliverable after the fact. – 2 – @AndyPrattDesign
21. @AndyPrattDesign Provide a path for consistency across the brand’s digital eco-system. – 3 –
22. 1. Who we are 2. What we look like 3. What we sound like 4. How we behave The ingredients: @AndyPrattDesign
23. Who We Are – 1 – @AndyPrattDesign
24. 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
25. 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
26. 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
27. Style Tiles 3. Create fun and a little weirdness Zappos iPad app
28. Style Tiles 3. Create fun and a little weirdness Zappos iPad app
29. Courtesy on Nickelodeon Audience / User Personas
30. What We Look Like – 2 – @AndyPrattDesign
31. http://www.mozilla.org/en-US/styleguide/ Brand Identity Components
32. Style Tiles 1. Logo 2. Typography 3. Colors/Textures 4. Icons 5. Images 6. Buttons 7. Descriptors @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
36. 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
37. Front End Style Guides & UX Pattern Libraries 1. Creates consistent and uniform code What do we need them? @AndyPrattDesign
38. 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
39. 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
40. 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
41. https://github.com/styleguide Live Style Guides and UX Pattern Libraries Github 300 × 81 - adainitiative.org
42. http://casecommons.org/ Case Commons' mission is to transform public sector human services through user-centered design & technology.
43. Case Commons Intro http://casecommons.org/
44. http://casecommons.org/
45. http://casecommons.org/
46. http://casecommons.org/
47. What We Sound Like – 3 –
48. http://www.macmillan.org.uk/
49. Philosophy / Guiding Principles http://be.macmillan.org.uk/
50. Infusing Your Users http://be.macmillan.org.uk/
51. http://be.macmillan.org.uk/ House Style
52. voiceandtone.com Voice & Tone Samples
53. How We Behave – 4 – @AndyPrattDesign
54. GUI GUI @AndyPrattDesign
55. GUI GUI MAGICAL SPACE @AndyPrattDesign
56. #BrandingFunctions @AndyPrattDesign
57. #BrandingFunctions @AndyPrattDesign
58. Paper iPad App
59. 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
60. Low Fidelity Behavior Gallery @AndyPrattDesign
61. Low Fidelity Behavior Gallery @AndyPrattDesign
62. @AndyPrattDesign
63. @AndyPrattDesign
64. http://www.capptivate.co Capptivate.co
65. http://appatizer.tumblr.com/ Low Fidelity Behavior Gallery Cappticate.co
66. http://www.unheap.com/ Low Fidelity Behavior Gallery
67. Low Fidelity Behavior Gallery http://danielmall.com/articles/rif-element-collages/
68. https://github.com/styleguide Behavior Gallery
69. http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ Behavior Gallery
70. http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ Behavior Gallery
71. https://github.com/styleguide @AndyPrattDesign Just because you can doesn’t mean you should
72. Where does it all live? @AndyPrattDesign
73. http://be.macmillan.org.uk/
74. http://www.bbc.co.uk/gel
75. #BrandingFunctions images: www.hamillgallery.com http://alistapart.com/about/style-guide
76. #BrandingFunctions images: www.hamillgallery.com http://alistapart.com/about/style-guide
77. pattern-lab.info
78. http://bradfrostweb.com/blog/post/atomic-web-design/
79. http://bradfrostweb.com/blog/post/atomic-web-design/ Pattern Lab
80. http://bradfrostweb.com/blog/post/atomic-web-design/ Align user stories and epics with atoms, molecules and organisms
81. www.icebergs.com
82. www.icebergs.com
83. Conclusion @AndyPrattDesign
84. @AndyPrattDesign
85. 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