<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1%20https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1">

1-Day Workshop for Your Team Style Guide Driven Development

Adriana De La Cuadra Adriana De La Cuadra
Tom Greever Tom Greever

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. 

Schedule a Workshop for Your Team



What we will do:

  • 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

What we will achieve:

  • 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

Exercises include:

  • 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

At the end of this workshop, your team will be more confident in their ability to bridge the gap between design and development, having practiced Style Guide Driven Development together and generated a sample living style guide.


Who is this workshop for?

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.


Previous Workshops At

  • Microsoft
  • User Experience Lisbon
  • Hubspot
  • Avvo
  • Push Conference
  • Upwork

About the Instructors

Adriana De La Cuadra
Adriana De La Cuadra is a Designer/Developer with 10+ years of experience in the field. Currently she works remotely at Bitovi, a Design and JavaScript development consulting company that has authored and maintains several open source JavaScript front-end frameworks, including CanJS and DoneJS. Through her consulting work she's had the opportunity to work with Fortune 500 Companies leading design efforts for e-commerce and internal tools. In previous roles, she worked driving the design and development process of multiple applications for the web and for native platforms collaborating with teams of various sizes, in agency, corporate and startup environments.

Tom Greever
Tom Greever is the author of Articulating Design Decisions from O’Reilly Media and UX Director at Bitovi, a front-end design and development consulting company. As a consultant, he helps companies design and build better applications. As a teacher, he helps designers be better communicators. As a father, he helps his children expend energy on wrestling and cleaning up the house. He works from home in Illinois, USA with his wife and five kids.