Save 37% off PRO during our Black Friday Sale! »

Evolving the digital style guide

Evolving the digital style guide

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

5f00efa346e53cf0a12fa626ec57f0f3?s=128

Andy Pratt

May 14, 2013
Tweet

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