Our Drupal Theme Design Process and a Checklist of Drupal Design ElementsOur Drupal Theme Design Process and a Checklist of Drupal Design Elements

Categories:

Building a theme for a single site is a fairly straightforward task. You know the content, you know which pages you need to build, and you can create your site design around that. Creating a theme that multiple people can use is a different story. Without knowing which modules, features, and content types people will use, you need to cover things with a broader sense in mind. With that said, let's go over some of the points you are going to want to hit on when you are building a Drupal theme for common use.

Drupal contains a vast array of elements that are layered to build a page. For those of you who are totally new to the Drupal theme process and want to know how Drupal builds a page, go here: http://drupal.org/theme-guide. Once you understand the underlying structure of a given page, using a checklist is one of the easiest ways to keep track of elements you need to style.

Generic site elements:
  • Typography (headers, body text, blockquotes, list styles, link styling)
  • Primary navigation (including active or rollover menu item states)
  • Search box
  • Tables (styling for odd and even rows, if needed)
  • Form elements (fieldsets, input boxes, message boxes, and submit buttons)
  • Images (default styling when an image is inserted into a piece of content)
  • Graphic layout (overall design and site images like header and page backgrounds)
  • Pagination
Drupal-specific elements:

These could vary greatly depending on your intended use of modules. The more features you implement, the more work you will have to do to ensure everything is themed and visually consistent in your design.

  • Core content types (blog, book, forum, poll, page, story)
  • Tabs (both primary and secondary)
  • Full / teaser links
  • Taxonomy
  • Author information on nodes (dates, user name, user pictures)
  • Block (single or multiple styles)
  • Comments (flat or nested)
  • User profile
  • Admin pages (table styling, filter selectors)
  • System messages (regular, warning, and error types)
  • Help text
  • Styling for specific regions
  • Styling for specific modules (i.e Views, drop down menus, calendars, etc)

At CMS Quick Start, we like to keep our PSD design file organized and consistent from theme to theme to make sure we can find all the elements of each design. I made a quick video showing exactly how we do that here:

 

Starting out is always the hardest part. There more themes you design, the easier it becomes to streamline the process without leaving anything out. Get out there, be creative, and make sure you cover your bases when it comes to your theme styling.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.