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 discuss the evolution of the style guide from a reference point to a deliverable that transforms clients into empowered decision makers.

Transcript

1. Leveraging Style Guides to Enhance Client Experience Patrick Grady & Michael Mesker University of Illinois Web Conference 2014 Tuesday, April 29, 14
2. Tuesday, April 29, 14
3. Excitement Anxiety Tuesday, April 29, 14
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
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
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
7. Style Guides Enter the Super Deliverable. Tuesday, April 29, 14
8. “Design Systems, not Pages.” — Everyone on the internet Tuesday, April 29, 14
9. MailChimp http://ux.mailchimp.com/patterns Tuesday, April 29, 14
10. Tuesday, April 29, 14
11. Paul Robert Lloyd http://paulrobertlloyd.com/about/styleguide/ Tuesday, April 29, 14
12. Tuesday, April 29, 14
13. Fact. Style guides communicate the design system in an efficient and organized manner. Tuesday, April 29, 14
14. Tuesday, April 29, 14
15. Small Tabs http://mesker.github.io/smalltabs/ Tuesday, April 29, 14
16. Elements. Elements are the foundation of the system. Well designed elements can begin to express the site’s personality. Tuesday, April 29, 14
17. Tuesday, April 29, 14
18. Tuesday, April 29, 14
19. Tuesday, April 29, 14
20. Components. Components are designed to serve specific functional roles within the system. Tuesday, April 29, 14
21. Tuesday, April 29, 14
22. Tuesday, April 29, 14
23. Tuesday, April 29, 14
24. Templates. Templates are layouts designed to house specific components. Tuesday, April 29, 14
25. Tuesday, April 29, 14
26. Tuesday, April 29, 14
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
28. Easy to parse table of contents navigation Tuesday, April 29, 14
29. Visual Example Description Component Title Markup Example Tuesday, April 29, 14
30. Regarding Schedules. The Super Deliverable wasn’t built in a day. Tuesday, April 29, 14
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
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
33. Win 1 Style guides work to establish a common language between ourselves and the client. Tuesday, April 29, 14
34. Win 2 Style guides create a centralized location for all design, prototype and documentation progress. Tuesday, April 29, 14
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
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
37. Quick, to the browser! Building the Super Deliverable Tuesday, April 29, 14
38. “Sloth Love Chunk” Reusable modules = efficiency Tuesday, April 29, 14
39. SMACSS http://smacss.com/ Tuesday, April 29, 14
40. BEM http://bem.info/ Tuesday, April 29, 14
41. Tuesday, April 29, 14
42. Sass http://sass-lang.com/ Tuesday, April 29, 14
43. Tuesday, April 29, 14
44. Tuesday, April 29, 14
45. Jekyll http://jekyllrb.com/ Tuesday, April 29, 14
46. The Web’s most beloved power-couple YAML & Liquid Tuesday, April 29, 14
47. Tuesday, April 29, 14
48. Tuesday, April 29, 14
49. Tuesday, April 29, 14
50. Tuesday, April 29, 14
51. Tuesday, April 29, 14
52. Tuesday, April 29, 14
53. Tuesday, April 29, 14
54. Tuesday, April 29, 14
55. The Style Guide Guide http://vinspee.me/style-guide-guide/ Tuesday, April 29, 14
56. Making your own Super Deliverable: Tuesday, April 29, 14
57. Making your own Super Deliverable: • Be resourceful: see if you can hijack something to do what you want. Tuesday, April 29, 14
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
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
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
61. Fact. Client Experience is directly tied to client education. Tuesday, April 29, 14
62. Fact. Style guides look good on you. Tuesday, April 29, 14
63. Thanks! Michael Mesker @meskermichael Patrick Grady @patrickgrady Tuesday, April 29, 14
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