Building a solid design pattern library is the key to building any web application, but the handoff between design and development can be fraught with misunderstandings, resulting in poor implementation that creates more work down the road. Even with a good style guide, the document itself has to be manually maintained and is easily outdated - causing everyone to abandon it. But Style Guide Driven Development can help. By making the style guide the center of your process, breaking your designs into re-usable modules, and generating the style guide from your live application - everyone knows what to expect and the guide is automatically updated alongside the application.
In this workshop, your team will learn how you can use Style Guide Driven Development as your process. We will outline the different parts of the process, using examples and compelling arguments to get you and your team on board. We will explore the concepts of modular design and it's application to user interface design. We will also delve into how you can create designs in a modular way and how you can use a living style guide to aide the process. You’ll learn all about planning a living style guide, what you should include as well as pitfalls to avoid.
Discuss traditional approaches to design implementation and the use of style guides
Understand the methodology behind modular or component-based design
Demonstrate how a living style guide works and it's benefits
Establish a workflow for designing and developing with a style guide at the center of the process
Create a sample application using modular design approaches
Generate a live style guide using DocumentCSS
Process for thinking about design and implementation
Identifying how to break up designs into modules
Making decisions regarding how to re-use or extend existing patterns
Building an application with an auto-generated style guide from code
Creating an efficient cycle for a re-usable design language and pattern library
Discussing common issues with static style guides
Identifying gaps in the handoff between design and development
Evaluating designs for the purpose of breaking them into smaller components
Practicing methods for extending and documenting existing components
Running a live style guide generator
Writing helpful documentation
Deploying and sharing a live style guide
This workshop is for designers and developers who want to improve their process for making the style guide the center of their design implementation process. The workshop is half design process, half technical. Familiarity with HTML, CSS, and command line tools is needed to generate a live style guide from code.
Bring this workshop on site to your team and learn together in your own work environment.
I can't overstate how much value I'm getting out of this [style guide] workshop. Can't wait to apply it to my projects. #PeersConf
Thank you @adrifolio for your talk on #livingstyleguide at the @WWCodeATX Diversity Hackthon ! Super insightful and interesting
Love this woman @adrifolio! Great workshop at #ATXDivHack on living style guides! @CFWoman @WWCodeATX @bitovi
Really great workshops by both @tomgreever and @jeffpatton at #uxlx. Thanks chaps. Excited to share with the @hotelsdotcom team next week.