This presentation was given at DrupalCon Copenhagen by Aaron Stanush and Todd Nienkerk of Four Kitchens (August 24, 2010) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

1. Don’t design websites.
Design web systems!
Creating a Drupal-optimized design
Todd Nienkerk and Aaron Stanush
DrupalCon Copenhagen | August 24, 2010

2. Personal introductions

3. Todd Nienkerk
Co-founder, designer, and developer
Four Kitchens
todd@fourkitchens.com
@toddross
Photo: Kristin Hillery

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

5. Designers are powerful!

6. “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)

7. ‣ As designers, we communicate a site’s
functionality to developers through sitemaps,
wireframes, and comps
‣ We are site architects

8. Designing a web system

9. Step 1:
Stop! Close Photoshop!

10. You wouldn’t paint a house before
building it...
So how can you design a website
before architecting it?

11. Before you design, ask:
‣ What’s the purpose of the site?
‣ What kind of content will the site contain?
‣ How will content be organized?

12. Define the site
“What’s the purpose of the site?”

13. List your goals
Build a
community Raise
Generate
awareness
buzz
Make
money! Make
money!
Make money! Make money!
Make
money!
Make Make
money! money!

14. Business and technical
requirements
Brand Target audience SEO
guidelines requirements
Browser
Accessibility
compatibility
Performance Success factors

15. Define the content
“What kind of content will the site contain?”

16. ‣ In Drupal, di erent kinds of content are called
content types.
‣ Content types are usually defined by the di erent
information they contain.

17. Blog post Product
Title Name
Author Description
Date published Price
Body Options (sizes, colors)
Lead image Images

18. Create a sitemap and
wireframes
“How will content be organized?”

19. Sitemaps
‣ List all sections of the site
‣ Illustrate how content is organized within the
sections

20. Home
page
Primary menu
Most
Science Sports Business Arts
popular
Blog post Blog post Blog post Blog post Blog post
Secondary menu
About us Terms of use Contact us
User tools
My account Search

21. 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

22. My account | Log out
Blog Logo
Search
Science
Sports
Most popular
Business
posts
Arts
Content
Advertisement
Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use

23. Brainstorming should happen using
wireframes, not design comps or
mockups.

24. Balsamiq Mockups
‣ balsamiq.com
‣ Cross-platform, lots
of plugins
‣ Free license for open-
source “do-gooders”
‣ Drupal components:
bit.ly/drupal-balsamiq

25. Step 2:
Translate the wireframes
into “Drupalspeak”

26. Most Drupal themes are comprised of
just a few, basic components.

27. ‣ Content
‣ Usually a node, view, or panel
‣ Can also be a user profile or admin interface

28. ‣ 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

29. ‣ Primary and secondary links
‣ Special kinds of menus
‣ Logo
‣ Search box
‣ Site slogan
‣ Mission statement
‣ Footer message

30. Step 3:
Design your site
(You may now open Photoshop!)

31. ‣ Now you can make informed decisions about how
to create a compelling and e ective design
‣ Use your wireframes as blueprints
‣ Let the theme components inform your design

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

33. Define the site
Goals Requirements
‣ Build awareness of ‣ Follow branding
the Spatula City brand guidelines
‣ Be the Amazon.com ‣ Short page load times
of online spatula retail during high tra c
‣ Make money! ‣ SEO-friendly

34. Define content types
‣ Product Product
‣ Page Name
(e.g. About, Legal)
Description
‣ User profile
Price
‣ Frequently asked
Color options
question
Image

35. Create a sitemap

36. Home
page
Primary menu
Spatulas Spatulas Build-A-
FAQ Contact us
by type by color Spatula
Question
Spatula page
page
Secondary menu
Retail locations About us Terms of use
User tools
My account Shopping cart Search

37. Create the wireframes

38. 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
Content (node) Block
Top rated
content
Content
Block
Promo
Footer message Secondary links
Copyright text About us Retail locations Terms of use

39. Design it

45. 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
Content (node) Block
Top rated
content
Content
Block
Promo
Footer message Secondary links
Copyright text About us Retail locations Terms of use

46. Logo Menu (block)
Search box
Primary links
Content (node) Block
Block
Footer message Secondary links

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

48. 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

49. Sitemap by Thinkso Creative

50. Sitemap by Thinkso Creative

51. ?
Sections
Sitemap by Thinkso Creative

52. Primary
menu items
Sections
Contexts
Sitemap by Thinkso Creative

53. ?
Section
landing pages
Sitemap by Thinkso Creative

54. Panels?
Section Views?
landing pages
Secondary
menu
Sitemap by Thinkso Creative

55. Design by Thinkso Creative

56. Logo
Breadcrumb Search box

57. Primary links
Secondary links

58. Menu (block)

59. Block?
Block?
Block?
Block?
Block?

60. Design by Thinkso Creative

61. Panel!
Design by Thinkso Creative

62. Design by Thinkso Creative

63. Page
node
Design by Thinkso Creative

64. Primary
menu item
Section
Context
Sitemap by Thinkso Creative

65. Section Panel
landing page
Sitemap by Thinkso Creative

66. Secondary
menu items
Section
subpages
Page nodes
Sitemap by Thinkso Creative

67. (More on this case study later...)

68. Better. Faster. Cheaper.
How to accelerate the design and theming phases
of your project

69. Don’t start at zero.
Start at Drupal.
Understand and leverage default Drupal behavior

70. Default output and styling
‣ Know what the default markup and CSS look like
‣ Stark theme: drupal.org/project/stark

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

72. Default blocks and menus
‣ Default blocks
‣ User login, Recent comments, Who’s online,
Who’s new, and more...
‣ Default menus
‣ Navigation
‣ Primary and Secondary links

73. Core modules
‣ Do you really know what Drupal’s core modules
can do?
‣ Aggregator ‣ Menu
‣ Blog ‣ Poll
‣ Book ‣ Profile
‣ Comment ‣ Search
‣ Contact ‣ Taxonomy
‣ Forum

74. Understand Drupal’s
theming system

75. Theme defaults
‣ Regions
‣ left sidebar, right sidebar, content, header, and
footer
‣ Assigning content to regions:
drupal.org/node/171224

76. ‣ 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

77. 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

78. Use template suggestions
‣ You’re not limited to a single template
‣ Each content type can have its own node.tpl.php
file
‣ Example: node-blog.tpl.php overrides and a ects
only “blog” content types
‣ Learn more: drupal.org/node/190815

79. 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-for-
drupal
‣ Structure and inheritance: drupal.org/node/225125

80. 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

81. Use contributed modules
Modules can often take the place of complex and
time-consuming theming

82. 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

83. ‣ Views: drupal.org/projects/views
‣ Create lists of content
‣ Arguments allow views to be dynamic
‣ Nodequeue: drupal.org/projects/nodequeue
‣ Create manually curated views

84. ‣ 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

85. Themer’s 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 don’t have to)
‣ Admin: drupal.org/projects/admin
‣ Seven: drupal.org/project/seven

86. 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

87. ‣ Menu Block: drupal.org/project/menu_block
‣ Drupal’s 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

88. ‣ Custom Breadcrumbs:
drupal.org/project/custom_breadcrumbs
‣ Makes breadcrumb navigation usable

89. 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

90. ‣ The problem: CCK outputs values one-by-one in
their own divs

91. ‣ The (theme) solution:
‣ Override the CCK field’s template file
‣ Write PHP to output each field separated by a
comma
‣ There’s got to be a better way!

92. ‣ Text Formatter: drupal.org/project/textformatter
‣ Lets you output CCK fields as lists or comma-
separated strings

93. Configuring Text Formatter

94. After Text Formatter
No theming required!

95. Design for change

96. 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?

97. 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?

98. Anticipate expanding
navigation
‣ What happens if menu items are added?
‣ How does your design handle multiple levels of
navigation?

99. The site you design today
will change tomorrow.

100. Credits
‣ Spatula City is based on an idea by ‣ The items listed above are exempt
the great Weird Al Yankovic, from this presentation’s Creative
internationally renowned accordion Commons license.
virtuoso.
‣ This presentation was created and
‣ The Swedish Chef was created by delivered by Todd Nienkerk and
Jim Henson. Or someone who Aaron Stanush, co-founders of
worked for him. Whatever the Four Kitchens.
case, we didn’t invent him.
‣ Expeditionary Learning sitemaps,
mockups, and screenshots are
copyright Expeditionary Learning
Schools and/or Thinkso Creative.

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