Speaker Deck

Improving Your Responsive Workflow with Style Guides

by Luke Brooker

Published February 8, 2013 in Design

This is from a talk I gave at DrupalCon Sydney. The slides have been exported from reveal.js, so look much better here - http://bit.ly/luke-sg

The video of the presentation (and more explanation) is also available here http://bit.ly/dc2013luke

Whether it be responsive web design or new emerging techniques that allow us to create experiences for multitudes of new devices, one thing is certain… our workflows need to change.

Many of us have started adapting our processes by doing things like scrapping mockups and designing in the browser, but there is one step in the process often left unconsidered. Style guides.

Traditionally style guides have been considered time consuming "nice to haves" only delegated to the biggest of projects. But as we shift from designing "pages" to designing systems, the way we communicate our designs need to make this shift too. By designing with living html/css style guides we can present all the elements of our systems, without creating multitudes of time consuming mockups. They not only help clients visualise the components of their systems but also help designers and developers to work together in creating truly future friendly experiences. You may be thinking "this all sounds all well and good, but that's an extra tedious, costly step in my workflow". Don't worry, these days they can be automated.