Chapter 12. Prototyping in Drupal

Some designers, such as independent designer and web strategist Jason Pamental,[44] whose interview appears in the upcoming sidebar, prefer to prototype sites directly in Drupal. Jason says that doing it this way lets him see things as they actually behave in the browser, rather than mocking things up in Photoshop or Fireworks, only to spend hours explaining to clients why the designs changed once they were implemented.

The trick to this approach, however, is not falling into the trap of simply decorating on top of what Drupal gives you, but rather, as Todd Nienkerk suggests in his DrupalCon session “Don’t Design Websites, Design Web SYSTEMS!”[45]— letting Drupal’s default behavior simply provide a guide for your design.

When a site doesn’t require a ton of complex interaction (for which I do paper or interactive Axure prototypes), I’m a big fan of the “sketch, quickly wireframe or prototype, then start prototyping in Drupal” approach. Being able to see how the interactions I’m designing, and the content I’m designing around, can be implemented in Drupal can help me make smarter decisions about layout and functionality, because it helps me make sure that what I’m proposing can actually be done. In practice, my process often looks like this:

  1. I’ll create a bunch of sketches for possible page layouts, interactions, and so on, and choose one or two to start wireframing.

  2. I’ll create wireframes for the one or two best options and talk them over with the project ...

Get Drupal for Designers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.