“Drupal sites can look any way you want!” Heard this before? While technically true, it doesn’t mean it’s always the best option. If you are a graphic designer creating comps (compositions) for a Drupal site, here are a few DOs and DON’Ts to follow. Not only can they make theme developers happy, but also they can speed production, saving the client money in the long run. Of course, some of these tips will apply to web design in general, not just for Drupal sites.
Note that there are a few key words that keep popping up throughout: reuse, flexibility and standardization. These are great guides for the design process.
DO Use reusable graphical elements. This may seem like common sense, but sometimes designers will resize design elements (buttons, icons, arrows, custom bullets, etc.) depending on the page, or use different colors depending on the section. Standardize them as much as possible. Themers appreciate being able to gang small, repeatable elements on a sprite and reusing them when needed. If an element appears on a variety of backgrounds, make sure the element is on a separate layer so it can be used on a sprite with transparency. Check out Jack’s post on sprites for more information about why they are useful for shrinking website load time.
DON’T use Photoshop tricks that won’t work on the web. Just because Adobe can do it, it doesn’t mean you can do it on the web. For example, dynamic color overlays with special filters (multiply, color burn, etc.) can’t be reproduced accurately on the web – one can only apply opacity with a transparent PNG or –in some browsers — with a percentage in CSS.
There are some things you can do in Photoshop that are certainly possible with CSS, but may take a lot of time to implement properly. If you are using a fancy menu with background images and hover states, consider what might create problems when the menu is sliced.
For instance, in the example below, the length of menu item names are not flexible (it is possible – but would require some special techniques with several background images and extra divs.) Also, the hover state is problematic because of the overlap at the top and bottom on the neighboring button. Same principle: it can always be done, but it will take some time.
DO consider using a grid. In the interest of full disclosure, I don’t always use a grid to design. Sometimes it isn’t necessary on a small site. However, using a standard grid dovetails nicely with the principles of Drupal: reusability, flexibility and standardization. Choosing a grid and sticking with it can help make your site visually appealing to users and give a uniformity to the layout that can save time. That means the template can be set up quickly, and won’t need to be fussed with later – no need for lots of variations.
Grid example from Chapter Three’s Fireworks Drupal design template
If you have a grid as the bottom layer of your PSD, AI or PNG file, you can toggle it on and off as needed, and then pass it along to your theme developer who can use the dimensions to build out the theme, perhaps using a grid base theme, like Zen nineSixty or Blueprint.
DON’T forget to configure your color settings properly in Photoshop or Illustrator. Sometimes when saving out slices for the web, there will be a slight – or dramatic – color shift if your settings are not correct. Photoshop and Illustrator are “color-managed” software, which means you can set apply different setting for different uses: for print, for photos, for the web, etc. There are a few schools of thought on ensuring that colors don’t shift when you save for web, but otherwise, my preferred choice is to simply build comps with non-color managed software: Fireworks.
DO familiarize yourself with Drupal forms. Out of the box, Drupal comes with several forms that a designer might be tempted to redesign: the log-in form, node add forms, contact form, comments forms, etc. While it can be done, sometimes overriding how a Drupal form is structured can be tedious and time-consuming. For time sensitive projects, limit design changes to Drupal forms to CSS only. Consider keeping the language, the order of fields, and markup needed. Of course, this can be hard to anticipate, but familiarizing yourself with how to forms are structured can help.
Also, some forms elements can be notoriously hard to manipulate. Often, the image upload field and dropdown selects require using javascript to style. While there are some good options out there (like Uniform), choosing to leave them as-is will save time and money. See my blog post on 10 Tips for Theming Drupal 6 Forms.
DON’T ignore elements that ALWAYS need theming in Drupal. Sometimes it is easy to design for what you need, but ignore what Drupal automatically gives you. Here’s a nice checklist that was compiled by Chapter Three of elements that are present in 90% of Drupal sites:
• Header
• Footer
• H1 – H5
• Body
• Link
• Unordered List
• Blockquote
• Code
• Admin Tabs (secondary tabs)
• Collapsable Field Sets
• Block Headers
• Block Typography
• More button
• Submit Button or general button style
• Input Field
• Tags
• Pagination
• Basic Node Style
• Table Style
• Error Message
• Status Message
• Warning Message
• Help Message
• Default Profile Layout
• Blog title and Byline
• Breadcrumbs
• Error Message
• Status Message
• Warning Message
• Help Message
• Secondary tabs
This list is from an incredibly useful blog post for using their customized Drupal templates to begin the design process. This can help you remember all the out-of-the-box elements. It is worth downloading the templates and reviewing them before your designs are set in stone.
DO think about how content is displayed by default in Drupal. There are certain things that are harder to do with content than others. For example, one thing that can be tough is splitting one node’s content into different regions – like putting the author’s name in the sidebar, for example. Of course, it CAN be done – but it takes some work.
DON’T use styles that vary wildly page to page. This is a similar idea to some other points above. But it may help (if your project is on a budget) to remember that Drupal is built with a series of templates, and the more continuity you build in to page elements, the faster it can be themed. For instance, if you create a bunch of sidebar blocks that all look completely unique, each one could take an hour or more to style. However, if they all have common styles, development time will drastically be reduced.
One nice Drupal tool for allowing content creators choose from a set selection of styles for blocks, nodes and other content areas is the Skinr module. Check out what it does and think about how it could be used with your design.
DO look at jQuery. Even if you are on a budget, there are some pretty tricks that can be easily added to a Drupal site. For instance, a Views Slideshow or jCarousel is requested on many website front pages – and it isn’t very hard to implement and style (usually!) Accordions, tabs and sliders are other things that may add something special without too much time and money spent. Check out jQuery UI or the jQuery plugins page for more ideas.
DON’T dismiss Adobe Fireworks! I’ve hinted at this in other tips, but the oft-overlooked Fireworks is the best tool I’ve found for creating web design comps. Fireworks creates vector based, multipage documents perfect for storing and duplicating elements and templates. Not only can you have a document that contains all of your comps, but a panel for “states” on each page (instead of the dreaded hidden layers) is very useful, as is the library for reused elements and symbols. (You can save an element as a symbol, and whenever you edit the symbol, it will change wherever it is used, just like in Flash.) Obviously, you may choose a different application for making a logo or other graphics for the site, or preparing photos. Master pages (much beloved in print layout programs like InDesign) is also a huge time saver.