Dont design websites.

Design web systems!

Creating a Drupal-optimized design

Todd Nienkerk and Aaron Stanush

DrupalCon Copenhagen | August 24, 2010

Personal introductions

Todd Nienkerk

Co-founder, designer, and developer

Four Kitchens
todd@fourkitchens.com
@toddross

Photo: Kristin Hillery

Aaron Stanush
Co-founder and designer
Four Kitchens
aaron@fourkitchens.com
@aaronstanush

Designers are powerful!

With great power

there must also come...
great responsibility!
Stan Lee
Amazing Fantasy #15, August 1962
(The first Spiderman story)

Photo: Mary Catherine via Wikimedia Commons (CC BY-SA)

As designers, we communicate a sites

functionality to developers through sitemaps,
wireframes, and comps

We are site architects

Designing a web system

Step 1:

Stop! Close Photoshop!

You wouldnt paint a house before

building it...
So how can you design a website
before architecting it?

Before you design, ask:

Whats the purpose of the site?

What kind of content will the site contain?

How will content be organized?

Define the site

Whats the purpose of the site?

List your goals

Generate
buzz

Build a
community
Make
money!

Raise
awareness

Make
money!

Make money!

Make money!
Make
money!

Make
money!

Make
money!

Business and technical

requirements
Brand
guidelines

Target audience

Accessibility
Performance

SEO
requirements
Browser
compatibility

Success factors

Define the content

What kind of content will the site contain?

In Drupal, different kinds of content are called

content types.

Content types are usually defined by the different

information they contain.

Blog post

Product

Title

Name

Author

Description

Date published

Price

Body

Options (sizes, colors)

Lead image

Images

Create a sitemap and

wireframes
How will content be organized?

Sitemaps

List all sections of the site

Illustrate how content is organized within the

sections

Home
page
Primary menu
Science

Sports

Business

Arts

Most
popular

Blog post

Blog post

Blog post

Blog post

Blog post

Secondary menu
About us

Terms of use

User tools
My account

Search

Contact us

Wireframes

Illustrate page layout and functionality

Demonstrate how a user will navigate the site

Identify dynamically-generated content areas

Use placement of key components to reinforce the

goals of the site

Shopping cart icon, Revenue-generating ads

My account | Log out

Blog Logo

Search

Science
Sports
Business
Arts

Most popular
posts

Content
Advertisement

Copyright 2010 BlogCorp, Inc.

About us | Contact us | Terms of use

Brainstorming should happen using

wireframes, not design comps or
mockups.

Balsamiq Mockups

balsamiq.com

Cross-platform, lots
of plugins

Free license for opensource do-gooders

Drupal components:
bit.ly/drupal-balsamiq

Step 2:

Translate the wireframes

into Drupalspeak

Most Drupal themes are comprised of

just a few, basic components.

Content

Usually a node, view, or panel

Can also be a user profile or admin interface

Blocks

Can contain virtually anything: user login, menus,

lists of content, custom HTML, views...

Appear in regions (usually sidebars, but

sometimes in the header or footer regions)

Menus

Added to the page as blocks

Primary and secondary links

Special kinds of menus

Logo

Search box

Site slogan

Mission statement

Footer message

Step 3:

Design your site

(You may now open Photoshop!)

Now you can make informed decisions about how

to create a compelling and effective design

Use your wireframes as blueprints

Let the theme components inform your design

CASE STUDY

Spatula City
Spatula City is launching their first website. It will be
the largest spatula e-commerce site ever built!

Define the site

Goals

Requirements

Build awareness of
the Spatula City brand

Follow branding
guidelines

Be the Amazon.com
of online spatula retail

Short page load times

during high traffic

Make money!

SEO-friendly

Define content types

Product

Page
(e.g. About, Legal)

User profile

Frequently asked
question

Product
Name
Description
Price
Color options
Image

Create a sitemap

Home
page
Primary menu
Spatulas
by type

Spatulas
by color

Build-ASpatula

FAQ

Question
page

Spatula page

Secondary menu
Retail locations

About us

Terms of use

User tools
My account

Contact us

Shopping cart

Search

Create the wireframes

Logo

Menu (block)
My account Shopping cart Log out

Logo

Search box
Search

Primary links
Browse by type

Browse by color

Build-A-Spatula

Contact us

FAQ

Block

Content (node)

Top rated
content
Content

Block
Promo

Footer message
Copyright text

Secondary links
About us

Retail locations Terms of use

Design it

Logo

Menu (block)
My account Shopping cart Log out

Logo

Search box
Search

Primary links
Browse by type

Browse by color

Build-A-Spatula

Contact us

FAQ

Block

Content (node)

Top rated
content
Content

Block
Promo

Footer message
Copyright text

Secondary links
About us

Retail locations Terms of use

Logo

Menu (block)
Search box
Primary links

Content (node)

Block

Block

Footer message

Secondary links

CASE STUDY

Expeditionary Learning
What happens when all of the planning and
designing has been done for you?

Working with a provided

design

Expeditionary Learning partnered with Thinkso

Creative and Four Kitchens to relaunch their brand
and website

Thinkso Creative provided the site design

They had never worked with Drupal before

Sitemap by Thinkso Creative

Sitemap by Thinkso Creative

Sections

Sitemap by Thinkso Creative

Sections

Primary
menu items
Contexts

Sitemap by Thinkso Creative

Section
landing pages

Sitemap by Thinkso Creative

Panels?
Section
landing pages

Views?
Secondary
menu

Sitemap by Thinkso Creative

Design by Thinkso Creative

Logo

Breadcrumb

Search box

Primary links

Secondary links

Menu (block)

Block?

Block?

Block?

Block?
Block?

Design by Thinkso Creative

Panel!

Design by Thinkso Creative

Design by Thinkso Creative

Page
node

Design by Thinkso Creative

Section

Primary
menu item
Context

Sitemap by Thinkso Creative

Section
landing page

Sitemap by Thinkso Creative

Panel

Section
subpages

Sitemap by Thinkso Creative

Secondary
menu items
Page nodes

(More on this case study later...)

Better. Faster. Cheaper.

How to accelerate the design and theming phases
of your project

Dont start at zero.

Start at Drupal.
Understand and leverage default Drupal behavior

Default output and styling

Know what the default markup and CSS look like

Stark theme: drupal.org/project/stark

Drupal 6 Stark theme: drupal.org/project/stark

Default blocks and menus

Default blocks

User login, Recent comments, Whos online,

Whos new, and more...

Default menus

Navigation

Primary and Secondary links

Core modules

Do you really know what Drupals core modules

can do?

Aggregator Menu

Blog

Poll

Book

Profile

Comment

Search

Contact

Taxonomy

Forum

Understand Drupals
theming system

Theme defaults

Regions

left sidebar, right sidebar, content, header, and

footer

Assigning content to regions:

drupal.org/node/171224

Variables printed in the template files

$content, $logo, $submitted, $terms, $links...

Available variables are listed at the top of each

template file

Pages: /modules/system/page.tpl.php

Blocks: /modules/system/block.tpl.php

Nodes: /modules/node/node.tpl.php

Comments: /modules/comment/comment.tpl.php

Theme settings

Upload a logo and bookmark icon (favicon)

Add copy: site slogan, mission statement, and

footer message

Show and hide node authoring information by

content type

Enable user pictures (avatars) in nodes and

comments

Use template suggestions

Youre not limited to a single template

Each content type can have its own node.tpl.php

file

Example: node-blog.tpl.php overrides and affects

only blog content types

Learn more: drupal.org/node/190815

Subtheme

Subthemes inherit resources from its base theme

Zen: drupal.org/project/zen

Fusion: drupal.org/project/fusion

More! mogdesign.eu/blog/19-base-themes-fordrupal

Structure and inheritance: drupal.org/node/225125

Use a grid system

NineSixty: drupal.org/project/ninesixty

Drupal port of the 960.gs grid system

Zen NineSixty: drupal.org/project/zen_ninesixty

960 Robots: drupal.org/project/ninesixtyrobots

Blueprint: drupal.org/project/blueprint

Drupal port of the Blueprint CSS framework

Use contributed modules

Modules can often take the place of complex and
time-consuming theming

Monster modules

Content Construction Kit (CCK):

drupal.org/project/cck

Add virtually any kind of data to nodes

Isolate and control user-added data

Individually theme each piece of data

Views: drupal.org/projects/views

Create lists of content

Arguments allow views to be dynamic

Nodequeue: drupal.org/projects/nodequeue

Create manually curated views

Panels: drupal.org/projects/panels

Create rich layouts without using multiple page

templates or extra regions

New layouts are easily added at the theme layer

Themers helping hands

Devel and the Theme Developer modules:

drupal.org/projects/devel
drupal.org/projects/devel_themer

Administration themes make the admin UI pretty

(so you dont have to)

Admin: drupal.org/projects/admin

Seven: drupal.org/project/seven

Wrangling navigation
elements

Menu attributes:
drupal.org/project/menu_attributes

Add IDs, classes, rel, target, and other attributes

to menu items

Context: drupal.org/project/context

Enables you to define sections and enforce

active menu trails

Menu Block: drupal.org/project/menu_block

Drupals primary and secondary menus only

support two levels

Create robust, multi-level menus

Context Menu Block:

drupal.org/project/context_menu_block

Integrates Menu Block with the Context module

Custom Breadcrumbs:
drupal.org/project/custom_breadcrumbs

Makes breadcrumb navigation usable

Little modules can save

you hours of theming

Someone else has probably run into your problem

before... and solved it

The trick is finding the module

The problem: CCK outputs values one-by-one in

their own divs

The (theme) solution:

Override the CCK fields template file

Write PHP to output each field separated by a

comma

Theres got to be a better way!

Text Formatter: drupal.org/project/textformatter

Lets you output CCK fields as lists or commaseparated strings

Configuring Text Formatter

After Text Formatter

No theming required!

Design for change

Minimize templates

More templates mean more maintenance

Consistent styling across templates creates a

better user experience

Create a robust default template

What happens if a site administrator creates a

new content type without creating a new
template?

Accommodate content of
any length

Your design should be robust enough to handle

short and long content

What happens if your title wraps to two or three

lines?

What about the menu items?

Anticipate expanding
navigation

What happens if menu items are added?

How does your design handle multiple levels of

navigation?

The site you design today

will change tomorrow.

Credits

Spatula City is based on an idea by

the great Weird Al Yankovic,
internationally renowned accordion
virtuoso.

The Swedish Chef was created by

Jim Henson. Or someone who
worked for him. Whatever the
case, we didnt invent him.

Expeditionary Learning sitemaps,

mockups, and screenshots are
copyright Expeditionary Learning
Schools and/or Thinkso Creative.

The items listed above are exempt

from this presentations Creative
Commons license.

This presentation was created and

delivered by Todd Nienkerk and
Aaron Stanush, co-founders of
Four Kitchens.

All content in this presentation, except where noted otherwise, is Creative Commons AttributionShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.