Design and Prototyping for Drupal

Chapter 5. Design Layout: Covering All Your Bases

Once you’ve established a visual direction with style tiles and you’re ready to get into design comps (or start theming), you want to make sure you’re considering all of the elements you may end up dealing with in the process of creating a Drupal site. For example, how do you want to treat block quotes? Tables of data? What about pagers for list pages? The following is a brief list of the elements you should consider when creating your style tiles, adapted from San Francisco Drupal firm Chapter Three’s excellent blog post, Design for Drupal—a Template Approach:^[3]

• Header text and links

• Footer text and links

• H1 - H5 tags

• Body

• Link

• Unordered List

• Blockquote

• Image Styles

• Code snippets in text

• Admin Tabs (the View/Edit/etc. tabs listed on pages for logged-in users)

• Secondary Admin Tabs (the links listed under admin tabs)

• Collapsible Field Sets and Accordions

• Headers and typography for blocks

• “More” button

• “Read More” link/button

• Form elements and labels

• Tags

• Pagination for Views listings

• Tables

• Error Messages

• Status Messages

• Warning Messages

• Help Messages

• Blog post titles

• Author and post date information

• Breadcrumbs

While you don’t have to style every last element within a style tile, it’s useful to keep them in the back of your mind while playing around with ideas. In fact, you may even consider doing two style tiles for a given project: one for front-facing pages (i.e., what the user sees) and another for client-facing (i.e., site editors, ...