We design a lot of websites at Chapter Three and we've developed a systemized approach using a Fireworks template to speed up and streamline the production process. This template can be used as a starting point or a finishing point, depending on the size of the project. This template does not replace our workflow, but rather enhances and supports it by ensuring that we don't miss any key elements.
Designing the "old way"
We used to design sites by creating a wireframe, and then designing a final composition of the front page, and several key sub pages.
The Problem
While the site itself looked great, the tabs did not. They stood out like a big sore thumb.
The Solution
Style all of the elements.
We came up with a list of elements inherent in 90% of Drupal sites, some basic, and some Drupal specific, to serve as a tool to make sure every last element had a style, including ones that were not obvious in the initial designs. Here is our list:
- Header
- Footer
- H1 - H5
- Body
- Link
- Unordered List
- Blockquote
- Image Style
- Code
- Admin Tabs (secondary tabs)
- Secondary Admin Tabs (listed under admin tabs)
- Collapsable Field Sets
- Block Headers
- Block Typography
- More button
- "Read More" link/button
- Submit Button or general button style
- Input Field
- Input Title style
- Input Text style
- Tags
- Pagination
- Basic Node Page Layout Style (margins)
- Table Style
- Error Message
- Status Message
- Warning Message
- Help Message
- Default Profile Layout
- Blog title and Byline
- Breadcrumbs
Collaborating with our developers and themers, we built a Fireworks template illustrating these elements.
Production Improvements
Using the template speeds up our production by enabling us to edit graphics instead of creating them from scratch each time. This process has also improved the quality of the sites we deploy. End users no longer get that unfinished subconscious sensation that occus when something pops up thats "not like the other".
Download the Template
Download the Chapter Three Drupal Template to start streamlining your design process now or make your own. If you pioneer improvements, let us know!
Floor and I will be presenting on this topic tomorrow at Design 4 Drupal at Stanford and again at Drupalcon SF.
