This presentation was given at DrupalCamp Stockholm by Todd Nienkerk of Four Kitchens (May 7, 2011) 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 Ross Nienkerk
DrupalCamp Stockholm | May 7, 2011

2. Personal introductions

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

4. Adam Snetman
Design Director
Thinkso Creative
snetman@thinkso.com
Photo: Erica Freudenstein

6. Websites vs.
web systems

7. In the old days...
Photo: eddiecoyote on Flickr (Creative Commons BY)

8. • Websites were
measured in “pages”
• Each page was
maintained by hand as
a single HTML file
Photo: eddiecoyote on Flickr (Creative Commons BY)

9. Today’s websites...
• Are dynamic and always-changing
• Allow site maintainers to create and edit content,
set user permissions, and connect with other
services
• Generate their own output

10. Today’s websites are
actually web systems
Photo: Snak Shak on Flickr (Creative Commons BY-NC)

11. Designers are powerful!

12. “With great power
there must also come...
great responsibility!”
STAN LEE
Amazing Fantasy #15, August 1962
(the first Spiderman story)
Photo: Edward Liu via Wikimedia Commons (CC BY-SA)

13. Designers determine a site’s
functionality

14. We communicate functionality to
developers through sitemaps, process
flow diagrams, wireframes, and design
comps

15. Even a tiny “log in” link tells a long and
complicated story

16. • In order to “log in,” users must also be able to:
• Create accounts
• Reset their password
• Update account information

17. • And what about...
• Permissions?
• Public profiles?
• Email notifications?

18. We are a site’s primary architects

19. Designing a web system

20. Stop! Close Photoshop!

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

22. STEP 1
Define the site

23. • What’s the purpose of the site?
• What kind of content will the
site contain?
• How will content be organized?
• What will the user experience be like?

24. What’s the purpose of the site?
Gather goals and
requirements

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

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

27. How will content be organized?
Create a sitemap

28. Sitemaps
• List all sections/pages of the site
• Illustrate how pages are organized
within the sections

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

30. What kind of content will the site contain?
Define the content types

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

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

33. What will the user experience be like?
Create wireframes

34. Wireframes
• Illustrate page layout and functionality
• Demonstrate how a user will navigate the site
• Demonstrate how user interfaces/interactive
tools work
• Identify static and dynamically-generated
content areas

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

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

37. Time and budget permitting...
Do some usability testing

38. Usability testing
Napkin Paper Keynote HTML/CSS
sketch prototypes prototypes prototypes

39. STEP 2
Choose your platform

40. Drupal isn’t always
the best solution
From The Simpsons Movie

41. STEP 3
Translate everything
into “Drupalspeak”

42. Most Drupal sites are comprised of just
a few, basic components

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

44. • 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

45. • Primary and secondary links
• Special kinds of menus
• Logo
• Search box
• Slogan, mission statement, and footer message

46. STEP 4
Visual design

47. Credits

48. • Now you can make informed decisions about how
to create a compelling and e ective design
• Use your sitemaps, process flow diagrams, and
wireframes as blueprints
• Let Drupal’s default components and behavior
inform your design

49. • How will type, color and imagery work together to
translate the client’s brand identity to the web?
• Are my page templates flexible enough to
accommodate the site’s content?
• Which site elements will benefit from a more
modular, reusable design approach? Which are
“one-o s” that require unique design attention?

50. CASE STUDY
Expeditionary Learning
elschools.org

51. Who is Expeditionary
Learning?
• Expeditionary Learning is an education reform
organization that partners with schools, districts
and charter boards to bring their project-based
learning approach to new and existing schools.
• EL partnered with Thinkso Creative and Four
Kitchens to relaunch their brand and website

53. Credits

55. Credits

56. Credits

58. Credits

59. Credits
?

60. Theory vs. practice
1. Define the site 1. Define the site
2. Choose your 2. Visual design
platform
3. Choose your platform
3. Translate to
Drupalspeak 4. Translate to
Drupalspeak
4. Visual design
5. Revise site definition
6. Revise visual design

61. STEP 1
Define the EL site

62. EL’s site goals
• Speak to EL’s diverse audiences: prospective
schools and districts, parents, policy makers and
the media
• Create secure online tools for EL’s network of
teachers that would help them collaborate on
projects, tap into existing resources and plan their
school year.

63. And...
Translate the newly redesigned EL brand
identity for the web.

66. Speak to EL’s
diverse audiences
Create secure
online tools

67. EL Commons
Dashboard Planner
home
Student proj-
ect archive
Document
library
Expeditions Projects Lessons STAs
Overview Overview Overview Overview
Planner
Create Create Create Create
Groups Expedition Project Lesson STA
Discussion
View/Edit View/Edit View/Edit View/Edit
boards
Expedition Project Lesson STA
Job listings
Event Search Public
registration planner
items

68. EL’s content types

69. Our Results Page description: HTML tags: Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
lege Acceptance Club. In 2010,
Academic achievement the following schools earned a
place in the club:
Our students are outperforming district averages on state and mandated tests. In
many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy
substantial margins, with particular success among black and Latino students. Tucson, AZ
Learn more>
Codman Academy Charter
Public School
Dorchester, MA
Evidence of engagement
Decatur Discovery Academy
Our model fosters more than just academic achievement. Our students are
Indianapolis, IN
engaged in their own learning and in the community around them while our school
and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary
education. School of the Arts
Thornton, CO
Learn more>
Northpoint Expeditionary
Quality of student work Learning Academy
We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ
high-quality work that matters in the real world.
Rocky Mountain School of
Expeditionary Learning
Denver, CO
Silverton School of Expedi-
tionary Learning

70. Our Results
Main nav
Page description: HTML tags:
Secondary nav
Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
lege Acceptance Club. In 2010,
Academic achievement the following schools earned a
place in the club:
Our students are outperforming district averages on state and mandated tests. In
many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy
substantial margins, with particular success among black and Latino students. Tucson, AZ
Section nav Learn more>
Codman Academy Charter
Public School
Dorchester, MA
Evidence of engagement
Decatur Discovery Academy
Our model fosters more than just academic achievement. Our students are
Indianapolis, IN
engaged in their own learning and in the community around them while our school
and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary
education. School of the Arts
Thornton, CO
Learn more>
Northpoint Expeditionary
Quality of student work Learning Academy
We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ
high-quality work that matters in the real world.
Rocky Mountain School of
Expeditionary Learning
Denver, CO
Silverton School of Expedi-
tionary Learning

71. Our Results Page title + introHTML tags:
Page description: Sidebar
Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
lege Acceptance Club. In 2010,
Academic achievement the following schools earned a
place in the club:
Our students are outperforming district averages on state and mandated tests. In
many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy
substantial margins, with particular success among black and Latino students. Tucson, AZ
Learn more>
Codman Academy Charter
Public School
Dorchester, MA
Evidence of engagement
Main
Decatur Discovery Academy
Our model fosters more than just academic achievement. Our students are
Indianapolis, IN
engaged in their own learning and in the community around them while our school
content and district leaders are deeply engaged in the conversations about how to improve
education.
Mapleton Expeditionary
School of the Arts
Thornton, CO
Learn more>
Northpoint Expeditionary
Quality of student work Learning Academy
We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ
high-quality work that matters in the real world.
Rocky Mountain School of
Expeditionary Learning
Denver, CO
Silverton School of Expedi-
tionary Learning

73. Planner Homepage
Planner | Expeditionary Learning
The homepage of the planner
shows latest activity up top with
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-reso
a tabbed view of the complete
portfolio down below.
Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning
Our Our Educator Press About Our
Approach Results Resources Center Us Approach
Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner
Planner Home Expeditions Projects Lessons S TA s P
EL COMMONS EL COMMONS
Dashboard Latest Activity Dashboard Latest A
Create a new:
Planner You added a standard to the expedition It's Not Easy Being Green Today at 2:30 pm Planner You add
Expedition Create new expeditions, proj-
Student Project Archive You linked the project Finding Frogs to It's Not Easy Being Green Today at 1:30 pm ects, lessons or STA setsProject Archive
Student here. You linke
Create
Document Library You created the project Finding Frogs Mar 20, 2010 Document Library You crea
BEST PRACTICES You created the expedition It's Not Easy Being Green Feb 18, 2010 BEST PRACTICES You crea
Search:
PROFESSIONAL DEV. You modified the expedition Building Cultural Bridges Aug 20, 2009 PROFESSIONAL DEV. You mod
My Portfolio Choose a scope for search:
RECOMMENDED MEDIA for RECOMMENDED MEDIA
FUND FOR TEACHERS
My Portfolio FUND FOR TEACHERS
My Port
Expeditions Projects Lessons STAs Search Expedit
Created/
Title Grade Level Modified Tools Title
It's Not Easy Being Green 4 Feb 25, 2010 Edit Duplicate Delete Finding Frog
Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete Quick links for the various World Capit
things you can do to existing
Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete
items. Create
Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete
Create New Expedition New items can be created here
as well.