Notes from Design4Drupal 2010: Drupal Specific Design


Nica Lorber of Chapter Three just gave a great talk at Design4Drupal Stanford called Drupal Specific Design: A Template Approach. Here are my notes!

Our general process is do a wireframe, then turn it into a Drupal theme. A lot of times you'll miss little details, like the ugly admin tabs you see on a page when you're logged in.

But it looks like a Drupal site!

We don't like this because they take away from the user experience of an otherwise really slick site. We created a list, and it includes items like:

  • Input fields can be made sub-consciously more appealing. Error messages look unprofessional unless integrated with the look and feel.
  • Basic node page doesn't fall into basic typographical rules, such as keep 60-80 characters per line for the best legibility. It's important to add padding to each side of the node page.

These details will take your site from good to great.

At Chapter Three, the designers don't have to be developers. We can specialize and learn from one another.

We created a template approach to deal with this problem. The ingredients are:

  • Basic HTML: h1, h2, blockquote, etc
  • Drupal-Specific Elements: Admin tabs, secondary tabs, collapisble field sets, error messages. Add a little style with color, spacing, good typography.
  • Drupal Page Elements
    • Block Titles & Block Styles can be easily improved
    • "More" button has its own class, and can be easily overridden
    • Comments can be cleaned up with whitespace
    • Breadcrumbs
    • Pagination

How does this help the design process?

  • Speeds up production: Nica gave an example of a project for nVidia where she was able to re-use design elements.
  • Build for the future
  • Take your work to the next level

Chapter Three's Design Process

We still have to do a design process with our clients, even with our new templates. We still have a kickoff meeting, an architecture meeting, do the design and then kickoff development. We use the template to make sure that we don't miss these pieces.

Adobe Fireworks Discussion

  • Integrated workflow with vector and bitmap tools
  • Flexibility and editability
  • Create non-destructive effects
  • Pixel-accurate rendering

960 Grid System

  • Commonly-used dimensions
  • Makes rapid prototyping easier
  • Streamline development

This fireworks file is available online at

Please check out Nica's blog post for more details and pretty screenshots: Thanks to Nica and the crowd for great questions!

Did you enjoy this post? Please spread the word.