Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leveraging Style Guides to Enhance Client Experience

Leveraging Style Guides to Enhance Client Experience

We all know that designing for a CMS requires an approach that champions systems, not pages. Communicating this approach to your clients can be, well, hard. In the interest of establishing a shared understanding of the systems, not pages concept, we expose our thinking in the form of a style guide that gradually evolves throughout the course of the project. Our style guide documents the system by abstracting the many design objects that can be assembled to create a page. This level of abstraction helps us illustrate the logic and relationships behind the design decisions we make. This, in turn, leads to more meaningful conversations around the design objects and their roles within the system. In this presentation, Michael Mesker and Patrick Grady, designers at Palantir.net, will discuss the evolution of the style guide from a reference point to a deliverable that transforms clients into empowered decision makers.

Patrick Grady

April 29, 2014
Tweet

Other Decks in Design

Transcript

  1. Leveraging Style Guides to
    Enhance Client Experience
    Patrick Grady & Michael Mesker
    University of Illinois Web Conference 2014
    Tuesday, April 29, 14

    View full-size slide

  2. Tuesday, April 29, 14

    View full-size slide

  3. Excitement Anxiety
    Tuesday, April 29, 14

    View full-size slide

  4. Anxiety around content:
    Where exactly is my old stuff
    going? Will everything be
    accounted for? What about the
    new features?
    Tuesday, April 29, 14

    View full-size slide

  5. Anxiety around budget:
    Large websites cost a lot of
    money to make. They also tend
    to have a long lifespan.
    Tuesday, April 29, 14

    View full-size slide

  6. Average Project Timeline
    01 02 03 04 05 06 07 08 09 10 11 12 End!
    Designers
    Developers
    PM
    Hi!
    Tuesday, April 29, 14

    View full-size slide

  7. Style Guides
    Enter the Super Deliverable.
    Tuesday, April 29, 14

    View full-size slide

  8. “Design Systems, not Pages.”
    — Everyone on the internet
    Tuesday, April 29, 14

    View full-size slide

  9. MailChimp
    http://ux.mailchimp.com/patterns
    Tuesday, April 29, 14

    View full-size slide

  10. Tuesday, April 29, 14

    View full-size slide

  11. Paul Robert Lloyd
    http://paulrobertlloyd.com/about/styleguide/
    Tuesday, April 29, 14

    View full-size slide

  12. Tuesday, April 29, 14

    View full-size slide

  13. Fact.
    Style guides communicate
    the design system in an efficient
    and organized manner.
    Tuesday, April 29, 14

    View full-size slide

  14. Tuesday, April 29, 14

    View full-size slide

  15. Small Tabs
    http://mesker.github.io/smalltabs/
    Tuesday, April 29, 14

    View full-size slide

  16. Elements.
    Elements are the foundation of
    the system. Well designed
    elements can begin to express
    the site’s personality.
    Tuesday, April 29, 14

    View full-size slide

  17. Tuesday, April 29, 14

    View full-size slide

  18. Tuesday, April 29, 14

    View full-size slide

  19. Tuesday, April 29, 14

    View full-size slide

  20. Components.
    Components are designed to
    serve specific functional roles
    within the system.
    Tuesday, April 29, 14

    View full-size slide

  21. Tuesday, April 29, 14

    View full-size slide

  22. Tuesday, April 29, 14

    View full-size slide

  23. Tuesday, April 29, 14

    View full-size slide

  24. Templates.
    Templates are layouts designed
    to house specific components.
    Tuesday, April 29, 14

    View full-size slide

  25. Tuesday, April 29, 14

    View full-size slide

  26. Tuesday, April 29, 14

    View full-size slide

  27. sys·tem |ˈsistəm| noun
    A set of connected parts forming
    a complex whole.
    ( Elements, Components & Templates )
    ( a CMS driven website )
    Tuesday, April 29, 14

    View full-size slide

  28. Easy to parse
    table of contents
    navigation
    Tuesday, April 29, 14

    View full-size slide

  29. Visual Example
    Description
    Component Title
    Markup Example
    Tuesday, April 29, 14

    View full-size slide

  30. Regarding Schedules.
    The Super Deliverable wasn’t
    built in a day.
    Tuesday, April 29, 14

    View full-size slide

  31. 01 02 03 04 05 06 07 08 09 10 11 12 End!
    Designers
    Developers
    PM
    Average Project Timeline (again)
    Make the
    style guide.
    Design all of
    the things.
    Tuesday, April 29, 14

    View full-size slide

  32. 01 02 03 04 05 06 07 08 09 10 11 12 End!
    Designers
    Developers
    PM
    Average Project Timeline (again)
    Design all of the things.
    (and document as you go.)
    Tuesday, April 29, 14

    View full-size slide

  33. Win 1
    Style guides work to establish
    a common language between
    ourselves and the client.
    Tuesday, April 29, 14

    View full-size slide

  34. Win 2
    Style guides create a centralized
    location for all design, prototype
    and documentation progress.
    Tuesday, April 29, 14

    View full-size slide

  35. Win 3
    Style guides provide the client
    with a foundation on which the
    design system can grow over
    the course of its lifespan.
    Tuesday, April 29, 14

    View full-size slide

  36. Fact.
    Working in the medium allows
    us to build our style guide during
    the design process, instead
    of at the very end.
    Tuesday, April 29, 14

    View full-size slide

  37. Quick, to the browser!
    Building the Super Deliverable
    Tuesday, April 29, 14

    View full-size slide

  38. “Sloth Love Chunk”
    Reusable modules = efficiency
    Tuesday, April 29, 14

    View full-size slide

  39. SMACSS
    http://smacss.com/
    Tuesday, April 29, 14

    View full-size slide

  40. BEM
    http://bem.info/
    Tuesday, April 29, 14

    View full-size slide

  41. Tuesday, April 29, 14

    View full-size slide

  42. Sass
    http://sass-lang.com/
    Tuesday, April 29, 14

    View full-size slide

  43. Tuesday, April 29, 14

    View full-size slide

  44. Tuesday, April 29, 14

    View full-size slide

  45. Jekyll
    http://jekyllrb.com/
    Tuesday, April 29, 14

    View full-size slide

  46. The Web’s most beloved power-couple
    YAML & Liquid
    Tuesday, April 29, 14

    View full-size slide

  47. Tuesday, April 29, 14

    View full-size slide

  48. Tuesday, April 29, 14

    View full-size slide

  49. Tuesday, April 29, 14

    View full-size slide

  50. Tuesday, April 29, 14

    View full-size slide

  51. Tuesday, April 29, 14

    View full-size slide

  52. Tuesday, April 29, 14

    View full-size slide

  53. Tuesday, April 29, 14

    View full-size slide

  54. Tuesday, April 29, 14

    View full-size slide

  55. The Style Guide Guide
    http://vinspee.me/style-guide-guide/
    Tuesday, April 29, 14

    View full-size slide

  56. Making your own Super Deliverable:
    Tuesday, April 29, 14

    View full-size slide

  57. Making your own Super Deliverable:
    • Be resourceful: see if you can hijack something
    to do what you want.
    Tuesday, April 29, 14

    View full-size slide

  58. Making your own Super Deliverable:
    • Be resourceful: see if you can hijack something
    to do what you want.
    • Use a tool that increases efficiency with your
    workflow or development team.
    Tuesday, April 29, 14

    View full-size slide

  59. Making your own Super Deliverable:
    • Be resourceful: see if you can hijack something
    to do what you want.
    • Use a tool that increases efficiency with your
    workflow or development team.
    • Be wary of overhead: don’t use a framework if
    you don’t have to.
    Tuesday, April 29, 14

    View full-size slide

  60. Making your own Super Deliverable:
    • Be resourceful: see if you can hijack something
    to do what you want.
    • Use a tool that increases efficiency with your
    workflow or development team.
    • Be wary of overhead: don’t use a framework if
    you don’t have to.
    • Think open source: use a tool that is widely
    supported in the web community.
    Tuesday, April 29, 14

    View full-size slide

  61. Fact.
    Client Experience is directly tied
    to client education.
    Tuesday, April 29, 14

    View full-size slide

  62. Fact.
    Style guides look good on you.
    Tuesday, April 29, 14

    View full-size slide

  63. Thanks!
    Michael Mesker
    @meskermichael
    Patrick Grady
    @patrickgrady
    Tuesday, April 29, 14

    View full-size slide

  64. Resources
    Paul Robert Lloyd
    http://paulrobertlloyd.com/about/styleguide/
    MailChimp
    http://ux.mailchimp.com/patterns
    Small Tabs Style Guide, Michael Mesker & Patrick Grady
    http://mesker.github.io/smalltabs/
    BEM
    http://bem.info/
    SMACSS
    http://smacss.com/
    Sass
    http://sass-lang.com/
    Jekyll
    http://jekyllrb.com/
    The Style Guide Guide
    http://vinspee.me/style-guide-guide/
    Tuesday, April 29, 14

    View full-size slide