Improving Your Responsive Workflow with Style Guides

1a06ed07575b1a77fa2b324e1385c2ea?s=47 Luke Brooker
February 08, 2013

Improving Your Responsive Workflow with Style Guides

This is from a talk I gave at DrupalCon Sydney. The slides have been exported from reveal.js, so look much better here -

The video of the presentation (and more explanation) is also available here

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.


Luke Brooker

February 08, 2013