Home › Resources › Articles › Drupal: Guidance for Concept Designers

Drupal: Guidance for Concept Designers

in

A Drupal website Concept Design will need to accommodate a range of website content elements, branding collateral, and will need to be mindful of standard web design considerations including: selecting and adhering to a colour palate, designing for large and small screens, varying fonts (one can never be sure what fonts are available to a given user's web browser), adherence to web conventions, and the "implementability" of the design (it is possible to create design concepts that are almost impossible to implement for the web).

With Drupal, you have to be aware of what Drupal does, and how it does it. We've written up a guide for web designers, but to summaries, Drupal can do pretty much anything, and that means that you have to accommodate a lot more "stuff" than you would with, say, a traditional static website.

It will be up to the designers to strike a comfortable balance between what a customer might want to do now and later, and incorporating their aesthetics with the often conflicting constraints of browser technologies.

To assist the designers in creating concepts for Drupal websites, we have compiled the following list of elements we expect to see on the front page of most websites (some elements may not appear on all sites, but it's a good idea to accommdate all of these devices in a concept):

  • Logo and other brand collateral (e.g. byline, motto, vision statement, etc.)
  • Navigation - this should provide examples of
    • primary, secondary, tertiary level main navigation,
    • user navigation (e.g. to user preferences, account details, etc.), and
    • administrative links (e.g. privacy policy, copyright policy, etc.)
  • With Navigation, ensure you provide visual indications and feedback for any hidden content (e.g. flyout/dropdown menus) and alert users where they are in the site navigation.
  • Breadcrumbs, providing the visitor with a sense of where in the site's Information Architecture they currently are, and an easy way to move back up the hierarchy
  • User Login form
  • Search Interface
  • Banner images
  • Various dynamic blocks, e.g. "Featured Content", "Product Showcase", or "New Staff" slideshow
  • Various block elements, e.g. as they might appear in left, right, middle columns
  • Notifications - what an on-screen user notification will look like, e.g. "Your password has been changed".
  • One or more options for "Calls to action" - e.g. a "Select your audience" block to help tailor site content to a particular audience type, a "Sign up for this conference" advertisement, etc.
  • Footer region - e.g. site map, copyright notice, contact details, links to the Institute's various social networking persona, etc.

For other pages besides the front page, like list pages, gallery pages, and content pages, the designer should consider:

  • the font design within the content, e.g. title, attribution data (e.g. date, author),
  • layout of content including associated images or videos,
  • link data (e.g. a Facebook "like" button, "tweet this", email to your friend, make a comment, etc.),
  • taxonomy data (i.e. a series of terms associated with the content, each linked to a list of content also tagged with that term),
  • a "read more" link at the bottom of content teasers, in the case where a list of content is shown in teaser view,
  • along with samples of contextual blocks which might appear on a given leaf page to direct users back to a parent list page or a block with links to related content

Every set of website concepts should include a visual example of:

  • heading styles 1-5
  • lists (numbered and bullet, included nested to 3 levels)
  • link text: normal, visited, hover
  • quoted text
  • block styles in all the possible block region
  • examples of images in the flow of text with or without captions, left and right justified
  • form elements
  • tabular data

Also you must consider:

  • will your theme be fluid, fixed width, or constrained (with a max and min width). Will you support mobile interfaces with a different theme?
  • the frailties of different browsers to be supported, especially Microsoft's various Internet Explorers, each of which has different shortcomings. Generally, Firefox (the Gecko rendering engine) and Chrome/Safari (which use the Webkit rendering engine) play nicely with HTML, CSS3, Javascript, and various other format (MathML, SVG, Canvas, etc.) standards.

There are probably other things, and I'll add them as they occur to me. No one said developing concepts for a powerful CMS engine like Drupal would be easy, but for a great site, it's worth it!