138
Todd Ross Nienkerk DrupalCamp Stockholm | May 7, 2011 Don’t design websites. Design web systems! Creating a Drupal-optimized design

Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)

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

Citation preview

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

[email protected]

@toddross

Adam SnetmanDesign DirectorThinkso Creative

[email protected]

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

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

Sitemap by Thinkso Creative

?

Sections

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?

Design by Thinkso Creative

Panel!

Design by Thinkso Creative

Page node

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!)

1) Saves time

2) Saves money

3) Reduces frustration

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

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.