Design for Success

Presentation on improving your design workflow with StorybookJS.

By: Chris Saylor | June 7, 2018 • 2 minute read

This year, I gave a talk at Syntaxcon in Charleston, SC. Being my first talk on design, I was out of my comfort zone, however I would be remiss if I didn’t speak my mind on the subject. The over-arching theme was to get other engineers out of their comfort zones as well and to get involved in the design process.

Engineers typically don’t involve themselves in the design process upfront. They’re either not interested in design or still attempting to finish the previous project. Design is where most of the decisions are made, and as a result engineers are considered grumpy for saying “no” often. The question is: how do we involve ourselves?

The talk focused on a tool called storybook.js which allows for React, Vuejs, and Angular components to be rendered in various states. The idea of this tool is to codify designs and make them a living part of the application. Designers and engineers team up, make the components in storybook.js as part of the design phase, and at the end of the design phase, you have usable components.

Engineers have spent years coming closer and closer to the operations side with “devops” culture. We did this with code. Maybe we can do it with design as well.

Full Screen

Full Screen

This is the example storybook that is covered in the slides.

The source for the example storybook is available on Github.

Related Content