Embed Size (px)
DESCRIPTION
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
Todd Ross NienkerkDrupalCamp Stockholm | May 7, 2011
Don’t design websites.Design web systems!Creating a Drupal-optimized design
Personal introductions
Photo: Kristin Hillery
Todd NienkerkCo-founder, designer, and developerFour Kitchens
@toddross
Adam SnetmanDesign DirectorThinkso Creative
Photo: Erica Freudenstein
Websites vs.web systems
In the old days...
Photo: eddiecoyote on Flickr (Creative Commons BY)
Photo: eddiecoyote on Flickr (Creative Commons BY)
• Websites were measured in “pages”
• Each page was maintained by hand as a single HTML file
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
Today’s websites are actually web systems
Photo: Snak Shak on Flickr (Creative Commons BY-NC)
Designers are powerful!
Photo: Edward Liu via Wikimedia Commons (CC BY-SA)
“With great powerthere must also come... great responsibility!”STAN LEEAmazing Fantasy #15, August 1962(the first Spiderman story)
Designers determine a site’s functionality
We communicate functionality to developers through sitemaps, process flow diagrams, wireframes, and design comps
Even a tiny “log in” link tells a long and complicated story
• In order to “log in,” users must also be able to:
• Create accounts
• Reset their password
• Update account information
• And what about...
• Permissions?
• Public profiles?
• Email notifications?
We are a site’s primary architects
Designing a web system
Stop! Close Photoshop!
You wouldn’t paint a house before building it...
So how can you design a website before architecting it?
STEP 1
Define the site
• 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?
What’s the purpose of the site?
Gather goals and requirements
List your goals
Make money!
Raise awarenessGenerate
buzz
Make money!
Build a community
Make money!
Make money!
Make money!
Make money!
Make money!
Business and technical requirements
Browser compatibility
Performance
Accessibility
Target audience
Success factors
SEO requirements
Brand guidelines
How will content be organized?
Create a sitemap
• List all sections/pages of the site
• Illustrate how pages are organized within the sections
Sitemaps
Science Sports Business
About us Contact usTerms of use
My account
Blog post
Home page
Search
User tools
Secondary menu
Primary menu
Blog post Blog post
Most popular
Blog post
Arts
Blog post
What kind of content will the site contain?
Define the content types
• In Drupal, di!erent kinds of content are called content types
• Content types are usually defined by the di!erent information they contain
Blog post
Title
Author
Date published
Body
Lead image
Product
Name
Description
Price
Options (sizes, colors)
Images
What will the user experience be like?
Create 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
Wireframes
Content
ScienceSportsBusinessArts
Most popularposts
Search
Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
Advertisement
Blog LogoMy account | Log out
• balsamiq.com
• Cross-platform, lots of plugins
• Free license for open-source “do-gooders”
• Drupal components: bit.ly/drupal-balsamiq
Balsamiq Mockups
Time and budget permitting...
Do some usability testing
Usability testing
Napkin sketch
Paper prototypes
Keynote prototypes
HTML/CSS prototypes
STEP 2
Choose your platform
Drupal isn’t always the best solution
From The Simpsons Movie
STEP 3
Translate everythinginto “Drupalspeak”
Most Drupal sites are comprised of just a few, basic components
• Content
• Usually a node, view, or panel
• Can also be a user profile or admin interface
• 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
• Primary and secondary links
• Special kinds of menus
• Logo
• Search box
• Slogan, mission statement, and footer message
STEP 4
Visual design
Credits
• 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
• 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?
CASE STUDY
Expeditionary Learningelschools.org
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
Credits
Credits
Credits
Credits
Credits
?
Theory vs. practice
1. Define the site
2. Choose your platform
3. Translate to Drupalspeak
4. Visual design
1. Define the site
2. Visual design
3. Choose your platform
4. Translate to Drupalspeak
5. Revise site definition
6. Revise visual design
STEP 1
Define the EL site
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.
And...
Translate the newly redesigned EL brand identity for the web.
Speak to EL’s diverse audiences
Create secure online tools
Dashboard
Student proj-ect archive
Document library
Planner
Groups
Discussion boards
Job listings
Event registration
EL Commons
Plannerhome
ExpeditionsOverview
Publicplanneritems
CreateExpedition
View/EditExpedition
ProjectsOverview
CreateProject
View/EditProject
LessonsOverview
CreateLesson
View/EditLesson
STAsOverview
CreateSTA
View/EditSTA
Search
EL’s content types
EL Commons (log in) | Contact | Find a school
| Stay connected
ALUMNI REGISTRY
Share
Search
10
Legal disclaimer © 2010 Expeditionary Learning. A chartered entity of Outward Bound. Site design by Thinkso Creative
OUR APPROACH EDUCATOR RESOURCES PRESS CENTER ABOUT US
Academic achievement
Evidence of engagement
Quality of stu-dent work
Home » Our Results
OUR RESULTS
Our Results Page description: HTML tags: Keyword tags:
100% College Acceptance Club
[Insert banner image]Our goal for each student is col-lege acceptance. These school are members of our 100% Col-lege Acceptance Club. In 2010, the following schools earned a place in the club:
Calli Olin AcademyTucson, AZ
Codman Academy Charter Public SchoolDorchester, MA
Decatur Discovery AcademyIndianapolis, IN
Mapleton Expeditionary School of the ArtsThornton, CO
Northpoint Expeditionary Learning AcademyPrescott, AZ
Rocky Mountain School of Expeditionary LearningDenver, CO
Silverton School of Expedi-tionary LearningSilverton, CO
Springfield Renaissance School Springfield, MA
Tapestry Charter High School Buffalo, NY,
Vista Grande High SchoolTaos, NM
Our ResultsWe measure student success based on three indicators: academ-ic achievement, evidence of engagement, and quality of student work. We are developing tools to track student progress so we can better assess our schools performance—and our own.
Academic achievementOur students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by substantial margins, with particular success among black and Latino students.Learn more>
Evidence of engagementOur model fosters more than just academic achievement. Our students are 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 education.
Learn more>
Quality of student workWe’ve selected ten projects that demonstrate how our students are producing high-quality work that matters in the real world.
View more student work
EL Commons (log in) | Contact | Find a school
| Stay connected
ALUMNI REGISTRY
Share
Search
10
Legal disclaimer © 2010 Expeditionary Learning. A chartered entity of Outward Bound. Site design by Thinkso Creative
OUR APPROACH EDUCATOR RESOURCES PRESS CENTER ABOUT US
Academic achievement
Evidence of engagement
Quality of stu-dent work
Home » Our Results
OUR RESULTS
Our Results Page description: HTML tags: Keyword tags:
100% College Acceptance Club
[Insert banner image]Our goal for each student is col-lege acceptance. These school are members of our 100% Col-lege Acceptance Club. In 2010, the following schools earned a place in the club:
Calli Olin AcademyTucson, AZ
Codman Academy Charter Public SchoolDorchester, MA
Decatur Discovery AcademyIndianapolis, IN
Mapleton Expeditionary School of the ArtsThornton, CO
Northpoint Expeditionary Learning AcademyPrescott, AZ
Rocky Mountain School of Expeditionary LearningDenver, CO
Silverton School of Expedi-tionary LearningSilverton, CO
Springfield Renaissance School Springfield, MA
Tapestry Charter High School Buffalo, NY,
Vista Grande High SchoolTaos, NM
Our ResultsWe measure student success based on three indicators: academ-ic achievement, evidence of engagement, and quality of student work. We are developing tools to track student progress so we can better assess our schools performance—and our own.
Academic achievementOur students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by substantial margins, with particular success among black and Latino students.Learn more>
Evidence of engagementOur model fosters more than just academic achievement. Our students are 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 education.
Learn more>
Quality of student workWe’ve selected ten projects that demonstrate how our students are producing high-quality work that matters in the real world.
View more student work
Section nav
Main nav Secondary nav
EL Commons (log in) | Contact | Find a school
| Stay connected
ALUMNI REGISTRY
Share
Search
10
Legal disclaimer © 2010 Expeditionary Learning. A chartered entity of Outward Bound. Site design by Thinkso Creative
OUR APPROACH EDUCATOR RESOURCES PRESS CENTER ABOUT US
Academic achievement
Evidence of engagement
Quality of stu-dent work
Home » Our Results
OUR RESULTS
Our Results Page description: HTML tags: Keyword tags:
100% College Acceptance Club
[Insert banner image]Our goal for each student is col-lege acceptance. These school are members of our 100% Col-lege Acceptance Club. In 2010, the following schools earned a place in the club:
Calli Olin AcademyTucson, AZ
Codman Academy Charter Public SchoolDorchester, MA
Decatur Discovery AcademyIndianapolis, IN
Mapleton Expeditionary School of the ArtsThornton, CO
Northpoint Expeditionary Learning AcademyPrescott, AZ
Rocky Mountain School of Expeditionary LearningDenver, CO
Silverton School of Expedi-tionary LearningSilverton, CO
Springfield Renaissance School Springfield, MA
Tapestry Charter High School Buffalo, NY,
Vista Grande High SchoolTaos, NM
Our ResultsWe measure student success based on three indicators: academ-ic achievement, evidence of engagement, and quality of student work. We are developing tools to track student progress so we can better assess our schools performance—and our own.
Academic achievementOur students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by substantial margins, with particular success among black and Latino students.Learn more>
Evidence of engagementOur model fosters more than just academic achievement. Our students are 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 education.
Learn more>
Quality of student workWe’ve selected ten projects that demonstrate how our students are producing high-quality work that matters in the real world.
View more student work
Main content
Page title + intro Sidebar
Planner
39Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
1
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f
Planner Home Expeditions Projects Lessons STAs
Hello, Todd
2
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f
Planner Home Expeditions Projects Lessons STAs
Hello, Todd
3
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f
Planner Home Expeditions Projects Lessons STAs
Hello, Todd
4
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f
Planner Home Expeditions Projects Lessons STAs
Hello, Todd
Create a new:Latest Activity
You added a standard to the expedition It's Not Easy Being Green Today at 2:30 pm
You linked the project Finding Frogs to It's Not Easy Being Green Today at 1:30 pm
You created the project Finding Frogs Mar 20, 2010
You created the expedition It's Not Easy Being Green Feb 18, 2010
You modifi ed the expedition Building Cultural Bridges Aug 20, 2009
Expedition
Create
Expeditions Projects Lessons STAs
Title Grade LevelCreated/Modifi ed Tools
It's Not Easy Being Green 4 Feb 25, 2010 Edit Duplicate Delete
Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete
Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete
Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete
My Portfolio
Create New Expedition
My Portfolio
for
Search
Search:
Create a new:
Expedition
Create
My Portfolio
for
Search
Search:
Latest Activity
You added a standard to the expedition It's Not Easy Being Green Today at 2:30 pm
You linked the project Finding Frogs to It's Not Easy Being Green Today at 1:30 pm
You created the project Finding Frogs Mar 20, 2010
You created the expedition It's Not Easy Being Green Feb 18, 2010
You modifi ed the expedition Building Cultural Bridges Aug 20, 2009
Title Grade LevelCreated/Modifi ed Tools
Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete
World Capitals Map 4 Aug 16, 2009 Edit Duplicate Delete
My Portfolio
Create New Project
Expeditions Projects Lessons STAs
Create a new:
Expedition
Create
My Portfolio
for
Search
Search:
Latest Activity
You added a standard to the expedition It's Not Easy Being Green Today at 2:30 pm
You linked the project Finding Frogs to It's Not Easy Being Green Today at 1:30 pm
You created the project Finding Frogs Mar 20, 2010
You created the expedition It's Not Easy Being Green Feb 18, 2010
You modifi ed the expedition Building Cultural Bridges Aug 20, 2009
Title Grade LevelCreated/Modifi ed Tools
[Lesson title here] 4 Feb 25, 2010 Edit Duplicate Delete
[Lesson title here] 4 Aug 16, 2009 Edit Duplicate Delete
My Portfolio
Create New Lesson
Expeditions Projects Lessons STAs
Create a new:
Expedition
Create
My Portfolio
for
Search
Search:
Latest Activity
You added a standard to the expedition It's Not Easy Being Green Today at 2:30 pm
You linked the project Finding Frogs to It's Not Easy Being Green Today at 1:30 pm
You created the project Finding Frogs Mar 20, 2010
You created the expedition It's Not Easy Being Green Feb 18, 2010
You modifi ed the expedition Building Cultural Bridges Aug 20, 2009
Title Grade LevelCreated/Modifi ed Tools
[STA set title here] 4 Feb 25, 2010 Edit Duplicate Delete
[STA set title here] 4 Aug 16, 2009 Edit Duplicate Delete
My Portfolio
Create New STA set
Expeditions Projects Lessons STAs
Homepage
The homepage of the planner shows latest activity up top with a tabbed view of the complete portfolio down below.
Create new expeditions, proj-ects, lessons or STA sets here.
New items can be created here as well.
Quick links for the various things you can do to existing items.
Choose a scope for search:
Planner
47Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
9
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
10
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
11
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
12
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
Create New Expedition
Expedition Title
School Oliver Hoover Change
Grade level 4 Change
Discipline and Specifi c Topic
Start
End
Save Expedition
Summary Add Summary
Case Studies Add Case Study
Standards, Learning Targets & Assessments Add New
Key Projects Add New Project | Link Existing Project
Guiding Questions Add Question
Connections to the Community and Larger World Add Connection
Save Expedition
Collaborators:Julia Zimmerman Remove
Marcus Flint Remove
Add collaborators
Viewable by: Me & collaborators only Oliver Hoover Elementary All of EL Commons
-- chose grade --
Cancel
Cancel
Culminating Product, Performance & Audience Add Description
Products Students Create Add Product
School Oliver Hoover Change
Grade level 4 Change
Format
Discipline
Start
End
Save Project Create New Project
Project Title
Standards, Learning Targets & Assessments Add New
Key Lessons Add New Lesson | Link Existing Lesson
21th Century Skills Explicitly Addressed Add Skill
Resources & Needs Add Resource
Vocabulary Add Word
Save Project
Linked to:This project is not linked to any expeditions.
Create link
Collaborators:You are not collaborating with anyone on this project.
Add collaborators
Viewable by: Me & collaborators only Oliver Hoover Elementary All of EL Commons
-- chose format --
-- chose grade --
-- chose discipline --
Cancel
Cancel
Resources & Needs Add Resource
Introduction Add instructional step
Body Add instructional step
Synthesis Add instructional step
School Oliver Hoover Change
Grade level 4 Change
Discipline
Lesson Date
Save Lesson Create New Lesson
Lesson Title
Save Lesson
Linked to:This lesson is not linked to any projects.
Create link
Collaborators:You are not collaborating with anyone on this lesson.
Add collaborators
Viewable by: Me & collaborators only Oliver Hoover Elementary All of EL Commons
-- chose discipline --
Cancel
Cancel
-- chose grade --
Save STA set Create New Standards, Targets & Assessment Set
Cancel
Fields TBD
Create new expedition
The “Create New...” view be-gins with a few form elements that are required. The informa-tion down below can be added a la carte.
Collaborators are other mem-bers of the Commons that have permission to view and edit this item. Only owners (initial creators) of items can add and remove collaborators.
Owners can define which groups can view this item once it is created and saved.
Clicking the “Save” button (here or in the sidebar) saves the item and adds it to “My Portfolio.”
Clicking inline “Add” links re-veals inline UI elements to add the relevant information.
“Add New Project” saves the current expedition and brings user to the Create New Proj-ect” page.
“Link Existing” displays a list of the available projects in My Portfolio.
Help text is available for individual elements
Planner
43Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
5
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
6
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
7
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
8
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
Create a new: Create a new: Create a new:
Expedition Expedition Expedition
Create Create Create
Title Grade LevelCreated/Modifi ed Tools
It's Not Easy Being Green 4 Feb 25, 2010 Edit Duplicate Delete
Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete
Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete
Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete
My Expeditions
Create New Expedition
My Portfolio
for
Search
Search:
My Portfolio
for
Search
Search:
My Portfolio
for
Search
Search:
Title Grade LevelCreated/Modifi ed Tools
Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete
World Capitals Map 4 Aug 16, 2009 Edit Duplicate Delete
My Projects
Create New Project
Title Grade LevelCreated/Modifi ed Tools
[Lesson title here] 4 Feb 25, 2010 Edit Duplicate Delete
[Lesson title here] 4 Aug 16, 2009 Edit Duplicate Delete
My Lessons
Create New Lesson
Create a new:
Expedition
Create
My Portfolio
for
Search
Search:
Title Grade LevelCreated/Modifi ed Tools
STA set title here] 4 Feb 25, 2010 Edit Duplicate Delete
[STA set title here] 4 Aug 16, 2009 Edit Duplicate Delete
My Standards, Targets & Assessments Sets
Create New STA set
Expeditions landing page
Choosing the “Expeditions” tab displays the complete list of your expeditions.
Student Project Archive
13Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Search results
Each result includes a repre-sentative image, the project title, the rating, the grade and the project format.
By default, the list of results is sorted according to rating. Clicking any of the column heads (except for “Image”) sorts the results by the chosen parameter.
Student Project Archive | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Student Project Archive
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Archive Home My Archive Submit Project
Search ResultsShowing 10 of 23
Search again
Image Title Rating Grade Format
Finding Frogs Field Guide (28) 4 Field Guide: Natural Science
Bridges of NYC (16) 5 Video: Documentary
It Ain't Easy Being Green (32) 10 Field Guide: Natural Science
Lorem Ipsum Dolor (21) 4 Short Story
Sit Amet Consectetat VeloremIpsum Dolor
(11) 9 Magazine: Historical
Adipiscing Sitemus Est (62) 8 Newspaper
Lorem Ipsum Dolor (45) 12 Model: Architectural
Melus Amet Consectetat VeloremIpsum Dolor
(56) PK Cookbook
Toma Adipiscing Sitemus Est (7) 4 Performance: Play
Velorem Lorem Ipsum Dolor (13) 6 Poetry
Showing 10 of 23 | Show more results
Document Library
25Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Document Library | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Document Library
Uploaded after:
May 25 2010
1
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
Library Home My Library Upload Document
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Search the Library
Search
Any
Any
Main category:
Grade: File type:
PDFEditable(Word, Excel, PPT)
Image(jpg, gif, etc.)
Search for docs from:
EverywhereMy stateMy school
Usefulness rating is at least:
Limit to EL Recommends EL
+ Add sub-category
Browse the LibraryLearning Expeditions/Curriculum
Learning Expeditions: Exemplary Models
Content maps
Skills scope and sequence maps
Case studies
Guiding questions
Big ideas
Projects and products
Fieldwork
Experts
Service learning
Calendars
Integrated arts
Technology
Immersion/kick-off
Culmination/celebration
Active Pedagogy/Instruction
Instructional practice
Lesson design
Protocols for building and assessing background knowledge
Protocols for discussion
Protocols for critique
Classroom layouts for instruction
Reading
Writing
Oral Communication
Research
Math
Science
Social Studies
Arts
Health and Wellness
Special Education
ELL
Differentiation
Culture & Character
Professional culture
Schoolwide culture
Adventure
Initiatives
Readings
Community meetings
Leadership and School Improvement
Observations
Descriptive Feedback
Evaluation
Leadership Job Descriptions
Interviews
Facilitation skills
PD structures
Using data
Leadership teams
Instructional coaching
Implementation Reviews
Faculty study groups
Protocols for staff use
Structures
Physical spaces
Annual schedules
Daily/weekly schedules
Professional development calendars
Extended day structures
Faculty handbooks
Student/family handbooks
Budgets
New schools
Intensives
Sample ads for school hiring
Teacher and Staff Job descriptions
College prep materials
Charter applications
Assessment
Learning Targets
Grading
Reporting
Homework
Student-led conferences
Portfolios
Passages
Documentation panels
Rubrics
Critique
Core Documents
History of EL
Design principles
Core practice benchmarks
Terrains
Offsite PD
Calendar
Catalog
Site seminars
National conference
Institutes
Learning expeditions for educators
Outward Bound for educator courses
The Best of the Library
Lorem ipsum dolor
(15) EL
Velorem dolor
(18)
Dolut nonsequat
(42) EL
Lor acicuis eriusci cons velorem
(27)
Dulummo lortis ado
(15) EL
Homepage
Keyword search to be added at a later date.
Clicking linked text in the “Browse” lists lead to corre-sponding category pages.
For items with “collapsed” ar-rows, clicking the item, but not the actual linked text, expands the item to reveal an additional level of sub-categories.
Arrows at left and right of “Best of” browser show the previous and next set of 5.
Planner
51Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
Planner | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Planner
13
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
14
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
15
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
16
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Planner Home Expeditions Projects Lessons STAs
It's Not Easy Being Green Change
School: Oliver Hoover Change
Grade Level: 4 Change
Discipline and: Life Science, animals and their habitats ChangeSpecifi c Topic
Start: March 2, 2010 Change
End: May 15, 2010 Change
SummaryIn this Learning Expedition students will study the relationship between living things and their habitat. We study local frogs as well as frogs from around the world as an example of how an animal's habitat impacts both its physical characteristics and the ways that it meets its basic needs. This expedition includes extensive fi eldwork and data collection, research, scientifi c observation, and scientifi c drawing leading to the creation of trading cards that spotlight frogs from around the world.
Edit
Case Studies Add Case Study
Standards, Learning Targets & Assessments Add New
Guiding Questions
Edit
Connections to the Community and Larger World Add Connection
Notes
Julia Zimmerman said: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.Mar 8, 2010 at 4:30 pm
Marcus Flint said: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.Today at 1:30 pm
You said: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.Today at 2:30 pm
Add Note
Key Projects
Title Grade LevelCreated/Modifi ed Tools
Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete
Add New Project | Link Existing Project
Collaborators:Julia Zimmerman Remove
Marcus Flint Remove
Add collaborators
Viewable by: Me & collaborators only Oliver Hoover Elementary All of EL Commons
Print Expedition
Customize printout
Finding Frogs Change
School: Oliver Hoover Change
Grade Level: 4 Change
Format: Field guide, natural science Change
Discipline: Life science Change
Start: March 2, 2010 Change
End: April 2, 2010 Change
Culminating Product, Performance & AudienceLorem 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 ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
Edit
Standards, Learning Targets & Assessments
Discipline Standard Targets Assessments Tools
Life science Life Science 1: Physical Characteristics of Organisms
[Targets here] [Assessments here] Edit Delete
Add New
Products Students CreateLorem 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 ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
Edit
21st Century Skills Explicitly AddressedLearning & Innovation Skills
Think creativelyWork creatively with othersReason effectively
Edit
Key Lessons
Title Grade LevelCreated/Modifi ed Tools
[Lesson title here] 4 Feb 25, 2010 Edit Duplicate Delete
Add New Lesson | Link Existing Lesson
Linked to:It's Not Easy Being GreenUn-link
Create link
Collaborators:You are not collaborating with anyone on this project.
Add collaborators
Viewable by: Me & collaborators only Oliver Hoover Elementary All of EL Commons
Print Project
Customize printout
Resources & Needs Frogs of South America Delete
Add Resource
Vocabulary Add Word
Notes Add Note
[Lesson Title Here] Change
School: Oliver Hoover Change
Grade Level: 4 Change
Discipline: Life science Change
Date: March 2, 2010 Change
Introduction
1. [Heading of Step] Edit DeleteLorem 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 ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
Support and/or Extension NeededLorem 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.
Differentiation
2. [Heading of Step 2] Edit DeleteLorem 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.
Support and/or Extension NeededLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.
Differentiation
Add instructional step
Linked to:Finding FrogsUn-link
Create link
Collaborators:Elizabeth Amorose Remove
Add collaborators
Viewable by: Me & collaborators only Oliver Hoover Elementary All of EL Commons
Print Lesson
Customize printout
Synthesis Add instructional step
Body Add instructional step
Resources & Needs Add Resource
Notes
Elizabeth Amorose said: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 ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.
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 ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
Mar 8, 2010 at 4:30 pm
Add Note
[STA Set Title Here] Change
Content TBD
Expedition detail, owner view
Once an expedition has been created, the collaborator view shows the expedition information with inline “edit” or “change” links in the main column. Collaborator controls, view controls and print controls are in the sidebar.
Collaborators can view/add notes.
Student Project Archive
10Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Homepage
Keyword search to be added later.
The Submit tab should only be visible to permissioned EL staff.
Student Project Archive | Expeditionary Learning
http://www.elschools.com/educator-resources/commons/library/some-unique-identifi er-here
Expeditionary Learning
EL COMMONS
Dashboard
Planner
Student Project Archive
Document Library
BEST PRACTICES
PROFESSIONAL DEV.
RECOMMENDED MEDIA
FUND FOR TEACHERS
Home | Educator Resources | EL Commons | Student Project Archive
1
OurApproach
OurResults
EducatorResources
PressCenter
AboutUs
Archive Home My Archive Submit Project
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Search the Archive
The Best of the Archive
Finding Frogs Field Guide
(15)
Bridges of NYC
(18)
It Ain't Easy Being Green
(42)
Lorem Ipsum Dolor
(27)
Sit Amet ConsecTetat Septimus
(15)
Browse the Archive By:
Search
Search for projects from:
EverywhereMy stateMy school
Any
Grade level:
Any
Discipline:
Any
Project format:
Usefulness rating Grade level
Elementary
Middle
High School
Discipline
English Language Arts
Social Studies
Science
Mathematics
Character
Civics
Dance
Health & Wellness
Music
Physical Education
Theatre
Visual Arts
World Language
Project format
3D & Media
Books & Guides
Dramatic Arts
Information Design
Publications
Visual & Narrative Arts
Usefulness rating is at least:
Arrows at left and right of “Best of” browser show the previous and next set of 5.
Clicking linked text in the “Browse” lists lead to corre-sponding category pages.
For items with “collapsed” ar-rows, clicking the item, but not the actual linked text, expands the item to reveal an additional level of sub-categories.
Credits
Planner
63Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
Process Flow Diagrams
Create new expedition
From the planner homepage:
Required information present?
Yes
No
A A
B B
C C
Fill out the infor-mation and click Save Expedition button
Click the Create or Create New Expedition button
Choose Expedition from the sidebar dropdown menu
Click the Expeditions tab under My Portfolio
Click the Expeditions tab at the top of the page
Return to homep-age. Activity and My Portfolio updated
Return to homep-age. Activity and My Portfolio updated
Return to expeditions tab landing page. List updated.
EL’s usability testing
Napkin sketch
Paper prototypes
Keynote prototypes
HTML/CSS prototypes
STEP 2
Design the EL site
Credits
Credits
Logo Typography
Tagline
Imagery
Color
Credits
1 2 3 4 5 6 7
Homepage Landing page Interior
Credits
Credits
EL Commons (log in) | Contact | Find a school
| Stay connected
ALUMNI REGISTRY
Share
Search
10
Legal disclaimer © 2010 Expeditionary Learning. A chartered entity of Outward Bound. Site design by Thinkso Creative
OUR APPROACH EDUCATOR RESOURCES PRESS CENTER ABOUT US
Academic achievement
Evidence of engagement
Quality of stu-dent work
Home » Our Results
OUR RESULTS
Our Results Page description: HTML tags: Keyword tags:
100% College Acceptance Club
[Insert banner image]Our goal for each student is col-lege acceptance. These school are members of our 100% Col-lege Acceptance Club. In 2010, the following schools earned a place in the club:
Calli Olin AcademyTucson, AZ
Codman Academy Charter Public SchoolDorchester, MA
Decatur Discovery AcademyIndianapolis, IN
Mapleton Expeditionary School of the ArtsThornton, CO
Northpoint Expeditionary Learning AcademyPrescott, AZ
Rocky Mountain School of Expeditionary LearningDenver, CO
Silverton School of Expedi-tionary LearningSilverton, CO
Springfield Renaissance School Springfield, MA
Tapestry Charter High School Buffalo, NY,
Vista Grande High SchoolTaos, NM
Our ResultsWe measure student success based on three indicators: academ-ic achievement, evidence of engagement, and quality of student work. We are developing tools to track student progress so we can better assess our schools performance—and our own.
Academic achievementOur students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by substantial margins, with particular success among black and Latino students.Learn more>
Evidence of engagementOur model fosters more than just academic achievement. Our students are 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 education.
Learn more>
Quality of student workWe’ve selected ten projects that demonstrate how our students are producing high-quality work that matters in the real world.
View more student work
Credits
Credits
Credits
STEP 3
Choose Drupal for EL
STEP 4
Translate the EL site into Drupalspeak
Primary menu items
ContextsSections
Sitemap by Thinkso Creative
?
Section landing pages
Section landing pages
Panels?
Views?
Secondary menu
Logo Breadcrumb Search box
Primary linksSecondary links
Menu (block)
Block?
Block?
Block?
Block?
Block?
Sitemap by Thinkso Creative
Primary menu item
ContextSection
Sitemap by Thinkso Creative
PanelSection landing page
Sitemap by Thinkso Creative
Section subpages
Page nodes
Secondary menu items
STEPS 5 & 6
Revise
Better. Faster. Cheaper.How to accelerate the design and theming phases of your project
Design on a grid(And use a CSS framework to implement it!)
Subtraction.com | Grid Computing… and Design
1) Saves time
2) Saves money
3) Reduces frustration
Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
“Embrace constraints”
• Constraints narrow the scope of the design and encourage creativity
— Mark Kraemer, National UX Practice Lead, EMC.com
Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
960 grid system
• CSS framework for grid-based design
• NineSixty: drupal.org/project/ninesixty
• Drupal port of the 960.gs grid system
• Live demo at ninesixty.fkdemos.com
• Zen NineSixty: drupal.org/project/zen_ninesixty
• 960 Robots: drupal.org/project/ninesixtyrobots
Don’t start at zero.Start at Drupal
Increase your Drupalspeak vocabulary by leveraging default Drupal behavior and contributed modules
• Core modules
• Default blocks and menus
• Default theme regions
• Default template variables
• Listed at the top of each template file
Default output and styling
• Know what the default markup and CSS look like
• Stark theme: drupal.org/project/stark
• Stark is included in Drupal 7 core
Drupal 6 Stark theme: drupal.org/project/stark
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
• The problem: CCK outputs values one-by-one in their own divs
• 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!
• Text Formatter: drupal.org/project/textformatter
• Lets you output CCK fields as lists or comma-separated strings
Configuring Text Formatter
After Text Formatter
No theming required!
Design for change
• 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?
Minimize templates
• Your design should be robust enough to handle short and long content
• What happens if your title wraps to two or three lines?
Accommodate content of any length
• What happens if menu items are added?
• How does your design handle multiple levels of navigation?
Anticipate expanding navigation
The site you design today will change tomorrow.
Why?
Because it’s not really a site...
It’s a system.
Photo: Snak Shak on Flickr (Creative Commons BY-NC)
Thanks!
Credits
• Expeditionary Learning sitemaps, wireframes, design comps, and screenshots are copyright Expeditionary Learning Schools and/or Thinkso Creative.
• The Simpsons Movie is copyright Fox or whoever made it. (We didn’t.)
• Drupal is a registered trademark of Dries Buytaert.
• The items listed to the left are exempt from this presentation’s Creative Commons license.
• This presentation was originally created and delivered by Adam Snetman of Thinkso Creative and Todd Nienkerk of Four Kitchens at DrupalCon Chicago.
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2011 Four Kitchens, LLC, and Thinkso Creative, LLC.
