Designing Style Guides

From the Tech For Good & Front-End Innovators meet-up at DoSomething.org on June 23, 2014.

A number of websites such as GitHub, BBC and CodeForAmerica utilize live style guides to enforce visual consistency throughout their site and facilitate rapid building of user interfaces. The success of these guides us dependent on a functional collaborative relationship between front-end and design.

Creative Lead Crystal Ruth Bell gives a short introduction to the successful framework DoSomething.org has built to prioritize design organizationally and foster design / front-end co-creation of the site's style guide.

Transcript

1. @crystalruthbell A Culture of Design LET’S DO SOMETHING ABOUT
2. @crystalruthbell PART ONE Getting Started
3. @crystalruthbell Our Story 1. We rebuilt old brand styles (clean up) a. Things were little “Frankenjoan” i. Code ii. Design 2. We built styles for the new app (start from scratch) a. This triggered conversation for rebranding, and helped reprioritize design b. Can now showcase site wide scalable changes to mgmt in browser
4. @crystalruthbell Gettin’ cray
5. @crystalruthbell
6. @crystalruthbell Gettin’ clean
7. @crystalruthbell THE PROCESS lean means iterative
8. @crystalruthbell THE TEAM getting buy in
9. @crystalruthbell THE COMMUNICATION who has authority?
10. @crystalruthbell PART TWO Maintenance
11. @crystalruthbell WHAT’S NEW?
12. @crystalruthbell Ongoing Processes 1. Site wide design syncs a. Schedule these on an as needed basis to review and problem solve design/code discrepancies. b. Design knows convention’s best & front end can flag implementation issues. 2. Product specific design QA a. When design sees everything that is shipped they can track each element that is in production (easier to identify new UI elements). b. Especially helpful to make a case for mocking in browser.
13. @crystalruthbell cbell@dosomething.org @crystalruthbell QUESTIONS? Contact me!