This presentation was given at BADCamp by Todd Nienkerk of Four Kitchens (October 23, 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 Nienkerk
BADCamp | October 22, 2011

2. Personal introductions

3. Todd Nienkerk
Co-founder, designer, and developer
Four Kitchens
todd@fourkitchens.com
Twitter:@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,
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?
• Who is the audience?
• What is the content, and how will it be organized?
• How will people experience the site?

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 Make
money! money!

26. Business and technical
requirements
Brand Mobile devices SEO
guidelines requirements
Browser
Accessibility
compatibility
Performance Infrastructure

27. Who is the audience?
Create personas

28. Personas
• Make a list of target audiences
• Create one persona for each target audience
• Give each persona (at least) a name, age, face,
reason for visiting, and “wish list” of tasks

29. Persona: NYC-based graphic designers
Adam, 34
Reason for visiting:
Adam’s wardrobe is roughly 80% plaid shirts.
He buys a new plaid shirt most months, and a
friend recommended sweet-plaid-shirts.com to
him as a good place to shop.
Website wish list:
• Sort available shirts by various criteria. (most
popular, newly added, etc.)
• See which shirts friends have purchased.
• Sign up for a an account to save preferences
and make repeat visits quick and easy.

30. What kind of content, and how will it be organized?
Define content types and
create a sitemap

31. Content
• 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
Lead image Sizes, colors
Body text Images

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

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

35. How will people experience the site?
Create wireframes

36. Wireframes
• Illustrate navigation and layout
• Demonstrate functionality and how user
interfaces work
• Identify static vs. dynamically generated
elements
• Identify unique layouts

38. Nav

39. UI

40. Dynamically
generated list
Curated, “featured” content

41. Home page layout
Interior page layout

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

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

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

45. STEP 2
Choose your platform

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

47. STEP 3
Translate everything
into “Drupalspeak”

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

49. • Content
• Not always a node
• View, panel, user profile, form, admin interface...
• Blocks
• Menus
• Primary and secondary links

50. STEP 4
Visual design

51. Credits

52. Now you can make informed decisions
about how to create a compelling and
e ective design

53. • How will type, color, and imagery work together to
translate the client’s brand identity to the web?
• Generate discussion with the client using mood
boards and style tiles

54. Mood boards and style tiles
• Faster and cheaper than iterating on full comps
• Involves the client in the design process
• Increases client confidence and buy-in
• Fun to make

55. Mood boards
From Why Mood Boards Matter by Mindy Wagner

56. From Why Mood Boards Matter by Mindy Wagner

57. Style tiles
From Why Mood Boards Matter by Mindy Wagner

58. From Style Tiles in Practice by Samantha Warren

59. • Avoiding a Frankenstein Website Design:
Collaborating with Clients
• bit.ly/collab-with-clients
• Why Mood Boards Matter
• bit.ly/mood-boards
• Style Tiles in Practice
• bit.ly/style-tiles

60. CASE STUDY
Expeditionary Learning
elschools.org

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

63. Credits

65. Credits

66. Credits

68. Credits

69. Credits
?

70. 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
and visual design

71. STEP 1
Define the EL site

72. What’s the purpose of the
site?
• Communicate EL’s mission, vision, and methods
• Translate the new brand identity for the web
• 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

73. Who is the audience?

75. What is the content, and
how will it be organized?

76. Content types
Sitemap

79. Communicate
EL’s mission
Create secure
online tools

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

81. How will people
experience the site?

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

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

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

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