Design and Prototyping for Drupal

Chapter 11. Prototyping in the Browser

Some designers, like independent designer and web strategist Jason Pamental (thinkinginpencil.com) interviewed below, prefer to do site prototyping directly in the browser. For Pamental, doing things this way gives you the opportunity to 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 in Drupal.

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!,^[9] letting Drupal’s default behavior simply provide a guide your design decisions.

When a site doesn’t require a lot of complex interaction (for which I do paper- or Axure-based prototypes) I’m a big fan of the “sketch, quickly wireframe, then start prototyping in Drupal” approach. Being able to see how the interactions I’m designing can be implemented in Drupal helps 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, it often looks like this:

• I’ll create a bunch of sketches for possible page layouts, interactions, etc. and choose 1–2 to start wireframing.

• I’ll create wireframes for the 1–2 best options, and talk them over with the project team.

• I’ll work those wireframes into some kind of ...