The presentation by Todd Nienkerk and Adam Snetman emphasizes the evolution of web design from static websites to dynamic web systems that require a thoughtful design process. It outlines a structured approach to designing these systems, including defining the site's purpose, audience, and content structure, along with creating visual designs and user experiences. The case study on Expeditionary Learning showcases how strategic design choices can enhance educational tools and resources for teachers and students.

1. Don’t design websites.
Design web systems!
Todd Nienkerk and Adam Snetman
DrupalCon London | August 24, 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,
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. Business goals
Build a
community Raise
Generate
awareness
buzz
Make money! Make money!
Make Make
money! money!

26. Requirements and constraints
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 is the 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
Body Options (sizes, colors)
Lead image 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. And time & 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

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

48. STEP 3
Translate everything
into “Drupalspeak”

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

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

51. STEP 4
Visual design

52. Credits

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

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

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

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

57. From Why Mood Boards Matter by Mindy Wagner

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

59. From Style Tiles in Practice by Samantha Warren

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

61. CASE STUDY
Expeditionary Learning
elschools.org

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

64. Credits

66. Credits

67. Credits

69. Credits

70. Credits
?

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

72. STEP 1
Define the EL site

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

74. Who is the audience?

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

77. Content types
Sitemap

80. Communicate
EL’s mission
Create secure
online tools

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

82. How will people
experience the site?

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

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

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

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

88. Planner Create new expedition Document Library Homepage Planner Expeditions landing page
Planner | Expeditionary Learning
The “Create New...” view be- Planner | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning
Document Library | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning
gins with a few form elements
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
that are required. The informa- http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschool
tion down below can be added
Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd a la carte. Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
SHOP | SUPPORT | ALUMNI Expeditionary Learning Todd
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Expeditionary Learning | CONTACT | FIND SCHOOL t f Hello, Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Lea
Our Our Educator Press About Our Our Educator Press
Our About
Our Educator Press About Our Our Educator Press About Our Our Our Educator Our Press Educator
About Press About Our Our Educator Press About
Approach Results Resources Center Us Approach Results Resources Center
Approach Us
Results Resources Center Us Approach Results Resources Center Us Approach Results Approach
Resources Results
Center Resources
Us Center Us Approach Results Resources Center Us
Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner
Home | Educator Resources | EL Commons | Document Library Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL
Choosing the “Expeditions” tab
displays the complete list of
Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Projects Lessons STAs
Library Home My Library Upload Document
Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Planner Home
Projects Lessons Expeditions
STAs Projects Lessons STAs your expeditions. Planner Home Expeditions Projects Lessons STAs
EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS
EL COMMONS
Dashboard Create New Expedition Dashboard Create New Project Search the Library Dashboard Create New Lesson My Expeditions
Dashboard Create New Standards, Targets & Assessment Set My Projects
Save Expedition Dashboard Save Project Save Lesson Dashboard Create a new: Save STA set Dashboard Create a new:
Dashboard
Planner Planner Planner Keyword search to be added at Planner
Created/ Created/
Expedition Title Cancel Collaborators are other mem- Project Title Planner Cancel
Search for docs from: Grade: File type:
Lesson Title
a later date.
Cancel Planner Title Grade Level Modified Tools
Expedition
Cancel Planner Title Grade Level Modified Tools
Expedition
Planner
Student Project Archive bers of the Commons that have
Student Project Archive
Student Project Archive Everywhere Any
Student Project Archive
PDF Image Student Project Archive Student Project Archive
It's Not Easy Being Green 4 Fields TBD
Feb 25, 2010 Edit Duplicate Delete Student Project Archive Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete Student Project Archive
School Oliver Hoover Change School Oliver Hoover Change School Oliver Hoover Change
Document Library
Collaborators: permission to view Document Library
and edit My state
Linked to:
Editable
Document Library
(jpg, gif, etc.) Linked to:
Document Library
Create Create
Document Library Document Library Document Library Document Library
Grade level 4 --Change grade --
chose
Julia Zimmerman Remove this item. Only owners (initial Grade level 4 --Change grade --
chose My school
This project is not linked to category:
Main (Word, Excel, PPT) Grade level 4 --Change grade --
chose
This lesson is not linked to Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete World Capitals Map 4 Aug 16, 2009 Edit Duplicate Delete
any expeditions. any projects.
BEST PRACTICES Marcus Flint Remove creators) of items can add and
BEST PRACTICES
BEST PRACTICES Any
BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES
Discipline and Add collaborators remove collaborators. Format -- chose format --
Create link
Usefulness rating is at least: Uploaded after: Discipline -- chose discipline -- Create link Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete Search: Create New Project Search:
PROFESSIONAL DEV. PROFESSIONAL DEV. + Add sub-category PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV.
Specific Topic PROFESSIONAL DEV.
May 25 2010 My Portfolio My Portfolio
Discipline -- chose discipline -- Collaborators: Lesson Date Collaborators: Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete
RECOMMENDED MEDIA Viewable by: RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA
Start RECOMMENDED MEDIA for for
Limit to EL Recommends not collaborating with
You are EL
FUND FOR TEACHERS Me & collaborators only Owners can define whichTEACHERS
FUND FOR Start FUND FOR TEACHERS
You are not collaborating with
FUND FOR TEACHERS
FUND FOR TEACHERS anyone on this project. anyone on this lesson. FOR TEACHERS
FUND Create New Expedition FUND FOR TEACHERS FUND FOR TEACHERS
End Oliver Hoover Elementary groups can view this item once
All of EL Commons Add collaborators Search Add collaborators
it is created and saved. End Introduction Search Search
Add instructional step
Summary Viewable by: Viewable by:
Add Summary Culminating Product, Performance & Audience Me & collaborators only Me & collaborators only
The Best of the Library Hoover Elementary
Oliver Body Oliver Hoover Elementary
Add Description All of EL Commons All of EL Commons
Guiding Questions Help text is available for Lorem ipsum dolor Velorem dolor Dolut nonsequat Lor acicuis eriusci Dulummo lortis ado
Add instructional step
individual elements Products Students Create (15) (18) (42) cons velorem (15) Arrows at left and right of “Best
Add Question
EL EL (27) EL Synthesis of” browser show the previous
Add Product
Add instructional stepand next set of 5.
Standards, Learning Targets & Assessments
Add New
Standards, Learning Targets & Assessments Browse the Library
Add New Resources & Needs
Learning Expeditions/ Active Pedagogy/Instruction Leadership and School Assessment
Curriculum Improvement Add Resource
Instructional practice Learning Targets
Case Studies Learning Expeditions: Exemplary Observations
21th Century Skills Explicitly Addressed Models
Lesson design Grading
Add Case Study Clicking inline “Add” links re- Protocols for building and
Descriptive Feedback
Reporting Save Lesson Cancel
Add Skill Content maps
veals inline UI elements to add assessing background Evaluation
Homework
the relevant information. Skills scope and sequence knowledge
Leadership Job Descriptions
Key Projects maps Student-led conferences
Key Lessons Protocols for discussion
Interviews
Clicking linked text in the
Case studies Portfolios
Add New Project | Link Existing Project “Add New Project” saves the Protocols for critique
Facilitation skills
“Browse” lists lead to corre-
Add New Lesson | Link Existing Lesson
current expedition and brings Guiding questions
Classroom layouts for instruction
Passages sponding category pages.
PD structures
Big ideas Documentation panels
user to the Create New Proj- Reading
Using data
Connections to the Community and Larger World ect” page. Resources & Needs Projects and products
Writing
Rubrics For items with “collapsed” ar-
Leadership teams
Add Resource
Fieldwork
Oral Communication
Critique rows, clicking the item, but not
Add Connection Instructional coaching
“Link Existing” displays a list Experts the actual linked text, expands
Research
of the available projects in My Service learning
Implementation Reviews Core Documents the item to reveal an additional
Math
Save Expedition Cancel Portfolio. Vocabulary Calendars
Faculty study groups History of EL level of sub-categories.
Science
Protocols for staff use Design principles
Planner Expedition detail, owner view
Add Word Integrated arts
Social Studies Student Project Archive
Core practice benchmarks
Homepage Student Project Archive Search results
Technology
Arts Structures
Terrains
Immersion/kick-off
Health and Wellness Physical spaces
Save Project Cancel
Culmination/celebration
Special Education Annual schedules Offsite PD
Planner | Expeditionary Learning
Once an expedition has been Daily/weekly schedules
ELL Calendar
Planner | Expeditionary Learning Student Project Archive | Expeditionary Learning Planner | Expeditionary Learning Student Project Archive | Expeditionary Learning Planner | Expeditionary Learning
created, the collaborator
Differentiation Professional development Catalog
Clicking the “Save” button
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
view shows the expedition http://www.elschools.com/educator-resources/commons/library/some-unique-identifihttp://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
calendars
Site seminars
er-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
(here or in the sidebar) saves information&with inline “edit” Extended day structures
Culture Character National conference
the item and adds it to “My or “change” links in the main Faculty handbooks
Expeditionary Learning
Portfolio.”
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning
Professional culture Institutes Expeditionary Learning | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
SHOP | SUPPORT Expeditionary LearningTodd
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t Expeditionary Learning
f Hello, Todd Expeditionary Learning SHOP t f
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL | SUPPORT Todd
Hello, | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
column. Collaborator controls,Student/family handbooks
Schoolwide culture Learning expeditions for
viewAdventure and print controls
controls Budgets educators
are in the sidebar. New schools Outward Bound for educator
Our Our Educator Press About Initiatives Our Our Educator Press
Our About
Our Educator Press About Our Our Educator Press About Our Our Our
Educator Our
Press Educator
About Press About
courses
Approach Results Resources Center Us Intensives Approach Results Resources Center
Approach Us
Results Resources Center Us Approach Results Resources Center Us Approach Results Approach
Resources Results
Center Resources
Us Center Us
Readings
Sample ads for school hiring
Community meetings
Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Student Project Archive Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner
Home | Educator Resources | EL Commons | Student Project Archive
Teacher and Staff Job
descriptions
College prep materials
Charter applications
Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Projects Lessons STAs
Archive Home My Archive Submit Project Planner Home Submit tab should
The Expeditions only be
Projects Lessons STAs Archive Home My Archive Planner Home
Submit Project Expeditions Projects Lessons STAs
visible to permissioned EL staff.
EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS
Dashboard It's Not Easy Being Green Change Dashboard Finding Frogs Change Dashboard Search the Archive Dashboard [Lesson Title Here] Change Dashboard Search Results
Dashboard [STA Set Title Here] Change Search again
Collaborators: Linked to: Linked to:
Showing 10 of 23
Planner School: Oliver Hoover Change
Julia Zimmerman Remove Planner School: Oliver Hoover Change Planner It's Not Easy Being Green Planner Keyword search to be added
School: Oliver Hoover Change
Finding Frogs Planner Planner
9 10 Un-link 11 Discipline: 12
Marcus Flint Remove 1 Search for projects from: Usefulness rating is at least: later. Un-link 5 Image Title Rating Grade Format 6
Student Project Archive Grade Level: 4 Change
Add collaborators
Student Project Archive Grade Level: 4 Change Student Project Archive
Everywhere Create link Student Project Archive
Any
Grade Level: 4 Change Create link Student Project Archive Student Project Archive Content TBD Each result includes a repre-
Document Library Discipline and: Life Science, animals and their habitats Change Document Library Format: Field guide, natural science Change Document Library My state Document Library Discipline: Life science Change Document Library
Finding Frogs Field Guide
Document Library
(28) 4 Field Guide: Natural Science sentative image, the project
Specific Topic Collaborators: Grade level: Collaborators:
Viewable by: Discipline: Life science Change My school Project format:
Date: March 2, 2010 Change title, the rating, the grade and
BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES
Start: March 2, 2010 Change Me & collaborators only You are not collaborating
Any Any Elizabeth Amorose Remove the project format.
Start: March 2, 2010 Change with anyone on this project. Bridges of NYC (16) 5 Video: Documentary
PROFESSIONAL DEV. Oliver Hoover Elementary PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. Add collaborators
PROFESSIONAL DEV. PROFESSIONAL DEV.
End: May 15, 2010 Change
All of EL Commons Add collaborators Introduction
End: April 2, 2010 Change By default, the list of results
Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 RECOMMENDED MEDIA 47 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
RECOMMENDED MEDIA RECOMMENDED MEDIA
25 RECOMMENDED MEDIA
Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
RECOMMENDED MEDIA
Viewable by: RECOMMENDED MEDIA
43 is sorted according to rating.
Search 1. [Heading of Step] Edit Delete It Ain't Easy Being Green (32) 10 Field Guide: Natural Science
Print Expedition Viewable by: Me & collaborators only TEACHERS
FUND FOR TEACHERS Summary FUND FOR TEACHERS
Culminating Product, Performance & Audience
FUND FOR TEACHERS FUND FOR TEACHERS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum FUND FOR FUND FOR TEACHERS Clicking any of the column
Me & collaborators only Oliver Hoover Elementary
In this Learning Expedition students will study the relationship between living things and their habitat. We Customize printout Oliver Hoover Elementary
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
All of EL Commons heads (except for “Image”)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
study local frogs as well as frogs from around the world as an example of how an animal's habitat impacts
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
All of EL Commons Lorem Ipsum Dolor (21) 4 Short Story sorts the results by the chosen
both its physical characteristics and the ways that it meets its basic needs. This expedition includes
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. The Best of the Archive Support and/or Extension Needed Print Lesson
parameter.
extensive fieldwork and data collection, research, scientific observation, and scientific drawing leading to
the creation of trading cards that spotlight frogs from around the world. Edit Print Project Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper. Customize printout Sit Amet Consectetat Velorem (11) 9 Magazine: Historical
Edit Customize printout Ipsum Dolor
Products Students Create Differentiation
Adipiscing Sitemus Est (62) 8 Newspaper
Guiding Questions Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem Arrows at left and right of “Best
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. of” browser show the previous
Lorem Ipsum Dolor (45) 12 Model: Architectural
Edit
Edit
Finding Frogs Field Bridges of NYC It Ain't Easy Being Lorem Ipsum Dolor Sit Amet Consec
and next
2. [Heading of Step 2] set of 5.
Edit Delete
Guide Green Tetat Septimus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
(18) (27)
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris.
Standards, Learning Targets & Assessments (15) (42) (15) Melus Amet Consectetat Velorem (56) PK Cookbook
Standards, Learning Targets & Assessments Support and/or Extension Needed Ipsum Dolor
Discipline Standard Targets Assessments Tools Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.
Add New
Browse the Archive By: Toma Adipiscing Sitemus Est (7) 4 Performance: Play
Life science Life Science 1: Physical [Targets here] [Assessments here] Edit Delete Differentiation
Characteristics of Organisms Usefulness rating Grade level Discipline Project format
Case Studies Clicking linked text in the
Elementary English Language Arts 3D & Media
Add Case Study Add New “Browse” lists lead to corre- Velorem Lorem Ipsum Dolor (13) 6 Poetry
Middle Social Studies Books & Guides sponding category pages.
Add instructional step
High School Science Dramatic Arts
Key Projects 21st Century Skills Explicitly Addressed Showing 10 of 23 | Show more results
Mathematics Information Design For items with “collapsed” ar-
Created/ Learning & Innovation Skills Body
Title Grade Level Modified Tools Think creatively Character Publications rows, clicking the item, but not
Work creatively with others Civics Visual & Narrative Arts Add instructional step actual linked text, expands
the
Reason effectively
Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete
Dance the item to reveal an additional
Edit level of sub-categories.
Add New Project | Link Existing Project Health & Wellness Synthesis
Music
Add instructional step
Key Lessons Physical Education
Connections to the Community and Larger World Created/
Title Grade Level Modified Tools Theatre
Add Connection
Visual Arts
Resources & Needs
[Lesson title here] 4 Feb 25, 2010 Edit Duplicate Delete Add Resource
World Language
Notes Add New Lesson | Link Existing Lesson
Julia Zimmerman said:
Notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum Collaborators can view/add Resources & Needs Elizabeth Amorose said:
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris.
Mar 8, 2010 at 4:30 pm
notes. Frogs of South America Delete Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
Add Resource
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.
Marcus Flint said:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Vocabulary laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
Today at 1:30 pm
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
Add Word
You said:
Mar 8, 2010 at 4:30 pm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Notes Add Note
Today at 2:30 pm
Add Note
Add Note
13 14 1 15 16
Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 51 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 10 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 13

89. Planner Process Flow Diagrams
Create new expedition
From the planner homepage:
Choose Return to homep-
A Expedition from age. Activity and A
the sidebar My Portfolio
dropdown menu updated
No
Click the Click the Create Fill out the infor- Return to homep-
Required
Expeditions or Create New mation and click age. Activity and
B information Yes B
tab under My Expedition Save Expedition My Portfolio
present?
Portfolio button button updated
Click the Return to
Expeditions tab expeditions tab
C C
at the top of the landing page.
page List updated.
Credits

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

91. STEP 2
Design the EL site

92. Credits

93. Logo Typography
Tagline
Imagery
Color
Credits

94. 1 2 3 4 5 6 7
Credits

95. Homepage Landing page Interior

96. Credits

97. 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-
Credits lege Acceptance Club. In 2010,
Academic achievement the following schools earned a

98. Credits

99. Credits

100. Credits

103. STEP 3
Choose Drupal for EL

104. STEP 4
Translate the EL site
into Drupalspeak

105. ?
Sections
Sitemap by Thinkso Creative

106. Primary
menu items
Sections
Contexts

107. ?
Section
landing pages
Sitemap by Thinkso Creative

108. Panels?
Section Views?
landing pages
Secondary
menu

109. Design by Thinkso Creative

110. Logo Breadcrumb Search box

111. Secondary links Primary links

112. Menu (block)

113. Block?
Block?
Block?
Block?
Block?

114. Design by Thinkso Creative

115. Panel!
Design by Thinkso Creative

116. Design by Thinkso Creative

117. Design by Thinkso Creative

118. Page
node
Design by Thinkso Creative

119. Primary
menu item
Section
Context
Sitemap by Thinkso Creative

120. Section Panel
landing page
Sitemap by Thinkso Creative

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

122. STEP 5
Revise site definition and
visual design

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

124. Design on a grid
(And use a CSS framework to implement it!)

125. Unigrid system by Massimo Vignelli; image source: AisleOne

126. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)

127. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)

128. Subtraction.com | Grid Computing… and Design

129. 1) Saves time
2) Saves money
3) Reduces frustration

130. Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)

131. “Embrace constraints”
— Mark Kraemer, National UX Practice Lead, EMC.com
• Constraints narrow the
scope of the design
and encourage
creativity
Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)

132. Enforcing a grid
accelerates design
while maintaining order
Photo: jontidmarsh on Flickr (Creative Commons BY-SA)

133. 960 grid system
• CSS framework for grid-based design
• Download: 960.gs
• NineSixty for Drupal: drupal.org/project/ninesixty
• Live demo at ninesixty.fkdemos.com

135. Don’t start at zero.
Start at Drupal

136. Increase your Drupalspeak vocabulary
by leveraging default Drupal behavior
and contributed modules

137. • Core modules
• Default blocks and menus
• Default theme regions
• Default template variables
• listed at the top of each template file

138. Default output and styling
• Know what the default markup and CSS look like
• Stark theme
• Drupal 7: included in core
• Drupal 6: drupal.org/project/stark

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

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

141. • The problem: CCK outputs values one-by-one in
their own divs

142. • 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!

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

144. Configuring Text Formatter

145. After Text Formatter
No theming required!

146. Find more modules
• Drupal.org: Search + most popular modules
• drupal.org/project/modules
• Lullabot’s “Module Monday” blog series
• lullabot.com/ideas

147. Design for change

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

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

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

151. The site you design today
will change tomorrow.

152. Why?

153. Because it’s not really a
site...

154. It’s a system.
Photo: Snak Shak on Flickr (Creative Commons BY-NC)

155. And designers are its
primary architects.
Photo: Salim Virji on Flickr (Creative Commons BY-SA)

156. Thanks!

157. Credits
• Expeditionary Learning sitemaps, • The items listed to the left are
wireframes, design comps, and exempt from this presentation’s
screenshots are copyright Creative Commons license.
Expeditionary Learning Schools
and/or Thinkso Creative. • This presentation was created and
delivered by Adam Snetman of
• The Simpsons Movie is copyright Thinkso Creative and Todd
Fox or whoever made it. (We Nienkerk of Four Kitchens.
didn’t.)
• Drupal is a registered trademark of
Dries Buytaert.

158. All content in this presentation, except where noted otherwise, is Creative Commons Attribution
3.0 licensed and copyright 2011 Four Kitchens, LLC, and Thinkso Creative, LLC.