How to design for Drupal

Lately I have been focusing hard on the optimization of the design implementation process for Drupal sites. 'What should the designer take into account when designing for Drupal?' and 'Is this or that design (element) possible in Drupal?' were the key questions I was trying to get an answer to.

These are my tips to optimize your designs for Drupal, leading to a faster implementation.

The main issues

Let's look at a typical design process: First several functional wireframes are created. Next the designer converts some or all of these wireframes into designs. The designs go back and forth between the designer and the client a few times and are then handed over to the themer. Two possible issues can arise from this flow:

1. All wireframe pages have been designed, sweet. But what should the theme behavior be when a new page or block is created? What is the default look for the other non-wireframed pages? And, are you sure you didn’t miss out on any element? The style guide page described further on is a good approach to solve this issue.
2. The more pages that are designed, the more inconsistencies can arise. Especially when a lot of feedback is given from the customer and not all changes are implemented on all pages. Inconsistencies are a major time waste in the theming process, so let’s also focus on consistency!

Another issue is the 'perfect' design. Designers always strive for a perfectly balanced design and I can't blame them for doing so. But since we are working with a CMS here, the design should also be prepared for blocks that can be moved around, content that will not always fit the box, long usernames etc. Don’t forget about flexibility!

Each of the issues described above will lead to delays later in the design implementation process, so let's look at some solutions.

The style guide page

When only the wireframed pages are designed, basic elements used in a Drupal site are often forgotten, e.g. pagers, or message boxes. Most of the times no one notices this, until the customer starts to add content to his site.
My solution is to make one style guide page , including at least everything in the list below:

• Most common HTML elements: Heading 1 to 4 (including a page title), a link and an unordered list. Don't forget about the hover state for links.
• The menu(s): Again, don't forget about hover or active states.
• Blocks: typically used a lot in Drupal sites. Maybe work out two or three different block styles. Also make sure the design does not break when moving blocks around.
• A form. Typically useful for the contact form. Keep designs for forms as simple as possible as cross browser solutions on fancy form elements can be time wasting.
• Other elements: a pager and three types of Drupal messages: warning, confirmation and status.

This page can be used as a style guide for the themer and a starting point for the other pages. 

Consistency

The style guide page will already help the themer to choose a ‘correct’ version in case of inconsistent design elements, so that’s a good start, but be sure to pay attention to these ways of optimizing consistency:

Limit the amount of pages

Maybe you don’t need to design all wireframes? The less pages you design, the smaller the chance of inconsistencies.

Think in elements.

Take a link for example. What color does it have? Does it have an underline? Is this style consistent for links in the content area, sidebars, footer, header etc? Keep your elements consistent in different designs. 

Limited variations for one element

Sure you could push 10 different block styles in one design, but is it really necessary? Will it hurt the design to limit the amount to say three? Try to skim through your variations on one element and see if you can take out some.

Fixed layout

The layout of a site e.g. the amount of sidebars, the width of sidebars etc, should preferably be the same across all pages. The homepage could be an exception to this rule.

Reusable design

If you work with Illustrator, you should make extensive use of textual styles (e.g. page title), graphical styles (e.g. a block)  and reusable objects (e.g. the entire footer).

Flexibility

This one is more difficult to wrap into guidelines, but keep these points into mind:

• Drupal sites typically have sidebars that contain one or more blocks. The default behavior of these sidebars is that they can collapse if nothing is in them. See if your design can cope with that.
• Blocks are elements that can be moved around and doing so should not break the design.
• In a CMS content changes all the time and will not always be perfect. Test your design with imperfect and real-life content to see if it still looks ok.
• If a technical solution such as panels is chosen for the homepage or landing pages, you should realize that the customer can move these panes around, so don’t make them to specifically linked to their position.

Conclusion

If you start your design with a style guide page it will help you in achieving the two most important aspects of a good Drupal design: consistency and flexibility.

If you have more tips or other feedback, please post a comment!