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
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)
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)
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?
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
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
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
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?
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
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
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.
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
72.
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.