Design

Don't Forget Workflow

Now that you have the front-end of your site designed, you need to consider what it takes to actually sustain it. Why are we talking about sustaining a site before we have built it? Because there are several ways to develop a solution what you have designed. Some solutions will be user friendly and some could require you know a lot more about Drupal than you want to.

section:
phases:
type of content:

Accessibility

Accessibility "means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web."[fn]Introduction to Web Accessibility - http://www.w3.org/WAI/intro/accessibility.php[/fn]  The Web Accessibility Iniative (WAI) at http://www.w3.org/WAI/ provides all the details you need to know regarding accessibility.

section:
phases:
type of content:

Visual Design

ven diagram: comps, wireframe, style guideWhat defines visual design? The wireframes start the visual design by defining a layout. Layout is major factor in creating look and feel. The comps and style guide also define visual design.

section:
phases:
type of content:

Parts of a Theme

In order to collect the information you need so your developers can select or develop the appropriate theme, you need to know a little about what makes up a theme. This short overview is not intended to make you a theme developer or to explain all aspects of how a theme works. This is a simple introduction to the theme parts and what they means to a planner.

section:
phases:
type of content:

No-node Page

What do I mean by no-node? There are two perspectives to consider. First, no-node means the page is not created using a node. For example, a View page is a no-node page. Second, no-node means you have a page that doesn't show nodes.

Sample no-node homepageNo-node Page

The most common pages that are no-node (from either perspective) are the homepage and section landing pages.

section:
phases:
type of content:

Mult-node Content Page

If you want multiple nodes to appear on a page, you are probably thinking some type of list, table, or grid that displays one or more data fields associated with a set of nodes. Drupal comes with default multi-node pages or you can make your own.

Decisions about how the pages are made is part of the development process but we can take a quick peek at some examples to help you think through what you want for your pages and what that might mean later.

section:
phases:
type of content:

Single Node Core Content

A single-node page is the most basic and most common page in a Drupal site. It is the blog you post, it is the news report you make, it is group discussion you start. When you decide a page on your site is based on a single node, you need to make a few decisions.

section:
phases:
type of content:

Wireframes Details

How detailed do wireframes need to be? If they are line drawings, do you include color or images? The more detailed you make your wireframes, the more likely you are to manage expectations. Colors and images are typically reserved for the comps (PSD images) of the site created during the theming process.

Comparing Levels of Detail

The illustrations below represent three levels of detail. Notice in the first wireframe, we get a feel for where components are located. The second lets you know the type of components. The last provides details about the components.

section:
phases:
type of content:

Component Access

One of the cool things about Drupal is the level of granularity you can achieve when it comes to who can access what. For instance, just because a content type is restricted from being viewed by a specific role doesn't mean that the components on the page where the node would appear are restricted to that role.

For each component on the page, decide which role will have access to that component. This includes

section:
phases:
type of content:

Section Themes

There are different methods for assigning themes and sub-themes to your different sections of your site. Below are three options.

Node reference: 
section:
type of content:

Pages

Subscribe to RSS - Design