Prototypes and Drupal: from designing in-browser to implementing custom templates

In recent years, the practice of designing websites in HTML prototypes has become increasingly prevalent. And with good reason – designing "in-browser" has many mertis over static mock-ups. But how do we ensure a good process, when we move from design to development, and it is time to implement the prototype in Drupal?

 

In this session we would like to share our approach to designing with prototypes in Drupal projects. Today, we're building all our sites using this approach;  first designing responsive HTML prototypes that the client can test early on, and then implementing in Drupal to produce the exact same HTML output and user experience. One such example is http://www.audubon.org; a quick look at the source code and you will hardly recognize the Drupal markup there at all. 

 

Throughout the session we will specifically discuss: 

•  the advantages of the prototype-based design approach over building designs in photoshop and creating Drupal themes to implement them 
•  the tools and workflow we are using to build prototypes and ensure a good process (Gulp, Twig, Sass and others) 
•  the techniques we use to make implement custom templates in Drupal with less effort 

We have previously written an article that outlines our approach (http://wearepropeople.com/blog/prototypes-a-better-approach-to-development), but in this session we will dive much deeper into the latest iteration of our process with concrete examples, code samples and tips to getting started.