don't design websites. design web systems! (badcamp 2011)

155
Todd Nienkerk BADCamp | October 22, 2011 Don’t design websites. Design web systems! Creating a Drupal-optimized design

Upload: four-kitchens

Post on 28-Jan-2015

120 views

Category:

Design


2 download

DESCRIPTION

This presentation was given at BADCamp by Todd Nienkerk of Four Kitchens (October 23, 2011) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

TRANSCRIPT

Page 1: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Todd NienkerkBADCamp | October 22, 2011

Don’t design websites.Design web systems!Creating a Drupal-optimized design

Page 2: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Personal introductions

Page 3: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Photo: Kristin Hillery

Todd NienkerkCo-founder, designer, and developerFour Kitchens

[email protected]

Twitter:@toddross

Page 4: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Adam SnetmanDesign DirectorThinkso Creative

[email protected]

Photo: Erica Freudenstein

Page 5: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 6: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Websites vs.web systems

Page 7: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

In the old days...

Photo: eddiecoyote on Flickr (Creative Commons BY)

Page 8: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Photo: eddiecoyote on Flickr (Creative Commons BY)

• Websites were measured in “pages”

• Each page was maintained by hand as a single HTML file

Page 9: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 11: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Designers are powerful!

Page 12: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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)

Page 13: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Designers determine a site’s functionality

Page 14: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

We communicate functionality to developers through sitemaps, wireframes, and design comps

Page 15: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Even a tiny “log in” link tells a long and complicated story

Page 16: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• In order to “log in,” users must also be able to:

• Create accounts

• Reset their password

• Update account information

Page 17: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• And what about...

• Permissions?

• Public profiles?

• Email notifications?

Page 18: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

We are a site’s primary architects

Page 19: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Designing a web system

Page 20: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Stop! Close Photoshop!

Page 21: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

You wouldn’t paint a house before building it...

So how can you design a website before architecting it?

Page 22: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 1

Define the site

Page 23: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• What’s the purpose of the site?

• Who is the audience?

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

• How will people experience the site?

Page 24: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

What’s the purpose of the site?

Gather goals and requirements

Page 25: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

List your goals

Make money!

Raise awarenessGenerate

buzz

Make money!

Build a community

Make money!

Make money!

Page 26: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Business and technical requirements

Browser compatibility

Performance

Accessibility

Mobile devices

Infrastructure

SEO requirements

Brand guidelines

Page 27: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Who is the audience?

Create personas

Page 28: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Personas

• Make a list of target audiences

• Create one persona for each target audience

• Give each persona (at least) a name, age, face, reason for visiting, and “wish list” of tasks

Page 29: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Adam, 34

Reason for visiting:Adam’s wardrobe is roughly 80% plaid shirts. He buys a new plaid shirt most months, and a friend recommended sweet-plaid-shirts.com to him as a good place to shop.

Website wish list:• Sort available shirts by various criteria. (most

popular, newly added, etc.)• See which shirts friends have purchased. • Sign up for a an account to save preferences

and make repeat visits quick and easy.

Persona: NYC-based graphic designers

Page 30: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

What kind of content, and how will it be organized?

Define content types and create a sitemap

Page 31: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• In Drupal, di!erent kinds of content are called content types

• Content types are usually defined by the di!erent information they contain

Content

Page 32: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Blog post

Title

Author

Date published

Lead image

Body text

Product

Name

Description

Price

Sizes, colors

Images

Page 33: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• List all sections/pages of the site

• Illustrate how pages are organized within the sections

Sitemaps

Page 34: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 35: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

How will people experience the site?

Create wireframes

Page 36: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Illustrate navigation and layout

• Demonstrate functionality and how user interfaces work

• Identify static vs. dynamically generated elements

• Identify unique layouts

Wireframes

Page 37: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 38: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Nav

Page 39: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

UI

Page 40: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Curated, “featured” content

Dynamically generated list

Page 41: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Home page layout

Interior page layout

Page 42: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• balsamiq.com

• Cross-platform, lots of plugins

• Free license for open-source “do-gooders”

• Drupal components: bit.ly/drupal-balsamiq

Balsamiq Mockups

Page 43: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Time and budget permitting...

Do some usability testing

Page 44: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Usability testing

Napkin sketch

Paper prototypes

Keynote prototypes

HTML/CSS prototypes

Page 45: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 2

Choose your platform

Page 46: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Drupal isn’t always the best solution

From The Simpsons Movie

Page 47: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 3

Translate everythinginto “Drupalspeak”

Page 48: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 49: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Content

• Not always a node

• View, panel, user profile, form, admin interface...

• Blocks

• Menus

• Primary and secondary links

Page 50: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 4

Visual design

Page 51: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 52: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 53: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• How will type, color, and imagery work together to translate the client’s brand identity to the web?

• Generate discussion with the client using mood boards and style tiles

Page 54: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Faster and cheaper than iterating on full comps

• Involves the client in the design process

• Increases client confidence and buy-in

• Fun to make

Mood boards and style tiles

Page 59: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Avoiding a Frankenstein Website Design: Collaborating with Clients

• bit.ly/collab-with-clients

• Why Mood Boards Matter

• bit.ly/mood-boards

• Style Tiles in Practice

• bit.ly/style-tiles

Page 60: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

CASE STUDY

Expeditionary Learningelschools.org

Page 61: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 62: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 63: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 64: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 65: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 66: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 67: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 68: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 69: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

?

Page 70: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 71: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 1

Define the EL site

Page 72: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

What’s the purpose of the site?

• Communicate EL’s mission, vision, and methods

• Translate the new brand identity for the web

• Create secure online tools for EL’s network of teachers that would help them collaborate on projects, tap into existing resources and plan their school year

Page 73: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Who is the audience?

Page 74: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 75: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 76: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Content types

Sitemap

Page 77: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 78: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 79: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Communicate EL’s mission

Create secure online tools

Page 80: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 81: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

How will people experience the site?

Page 82: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 83: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 84: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 85: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 86: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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-hereW X

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-hereW X

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-hereW X

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-hereW X

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 T

2

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f

Planner Home Expeditions Projects Lessons STAs

Hello, Todd T

3

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f

Planner Home Expeditions Projects Lessons STAs

Hello, Todd T

4

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f

Planner Home Expeditions Projects Lessons STAs

Hello, Todd T

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:

Page 87: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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-hereW X

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-hereW X

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-hereW X

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-hereW X

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 T

Planner Home Expeditions Projects Lessons STAs

10

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

Planner Home Expeditions Projects Lessons STAs

11

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

Planner Home Expeditions Projects Lessons STAs

12

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

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:5 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:5 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:5 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-hereW X

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-hereW X

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-hereW X

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-hereW X

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 T

Planner Home Expeditions Projects Lessons STAs

6

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

Planner Home Expeditions Projects Lessons STAs

7

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

Planner Home Expeditions Projects Lessons STAs

8

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

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-hereW X

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 T

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-hereW X

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 T

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 W

Writing W

Oral Communication

Research

Math W

Science W

Social Studies W

Arts W

Health and Wellness W

Special Education

ELL

Differentiation

Culture & Character

Professional culture

Schoolwide culture W

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

W X

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-hereW X

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-hereW X

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-hereW X

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-hereW X

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 T

Planner Home Expeditions Projects Lessons STAs

14

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

Planner Home Expeditions Projects Lessons STAs

15

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

Planner Home Expeditions Projects Lessons STAs

16

OurApproach

OurResults

EducatorResources

PressCenter

AboutUs

SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd T

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:5 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 only5 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 Elementary5 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-hereW X

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 T

Search the Archive

The Best of the Archive

W X

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 W

Middle W

High School W

Discipline

English Language Arts W

Social Studies W

Science W

Mathematics W

Character

Civics

Dance

Health & Wellness

Music

Physical Education

Theatre

Visual Arts

World Language

Project format

3D & Media W

Books & Guides W

Dramatic Arts W

Information Design W

Publications W

Visual & Narrative Arts W

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.

Page 88: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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.

Page 89: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Usability testing

Napkin sketch

Paper prototypes

Keynote prototypes

HTML/CSS prototypes

Page 90: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 2

Design the EL site

Page 91: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 92: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Logo Typography

Tagline

Imagery

Color

Page 93: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

1 2 3 4 5 6 7

Page 94: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Homepage Landing page Interior

Page 95: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 96: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 97: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 98: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 99: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

Page 100: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 101: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 102: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 3

Choose Drupal for EL

Page 103: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEP 4

Translate the EL site into Drupalspeak

Page 104: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Sitemap by Thinkso Creative

?

Sections

Page 105: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Primary menu items

ContextsSections

Page 106: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Sitemap by Thinkso Creative

?

Section landing pages

Page 107: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Section landing pages

Panels?

Views?

Secondary menu

Page 108: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Design by Thinkso Creative

Page 109: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Logo Breadcrumb Search box

Page 110: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Primary linksSecondary links

Page 111: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Menu (block)

Page 112: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Block?

Block?

Block?

Block?

Block?

Page 113: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Design by Thinkso Creative

Panel!

Page 114: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Design by Thinkso Creative

Page node

Page 115: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Sitemap by Thinkso Creative

Primary menu item

ContextSection

Page 116: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Sitemap by Thinkso Creative

PanelSection landing page

Page 117: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Sitemap by Thinkso Creative

Section subpages

Page nodes

Secondary menu items

Page 118: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

STEPS 5 & 6

Revise site definition and visual design

Page 119: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 120: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 122: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 123: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 125: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

1) Saves time

2) Saves money

3) Reduces frustration

Page 127: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 128: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Photo: jontidmarsh on Flickr (Creative Commons BY-SA)

Enforcing a grid accelerates design while maintaining order

Page 129: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

960 grid system

• CSS framework for grid-based design

• Download: 960.gs

• NineSixty for Drupal: drupal.org/project/ninesixty

• Live demo at ninesixty.fkdemos.com

Page 130: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Page 131: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Don’t start at zero.Start at Drupal

Page 132: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 133: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Core modules

• Default blocks and menus

• Default theme regions

• Default template variables

• Listed at the top of each template file

Page 134: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Default output and styling

• Know what the default markup and CSS look like

• Stark theme

• Drupal 7: included in core

• Drupal 6: drupal.org/project/stark

Page 135: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 136: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 137: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 138: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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

Page 139: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Text Formatter: drupal.org/project/textformatter

• Lets you output CCK fields as lists or comma-separated strings

Page 140: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Configuring Text Formatter

Page 141: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

After Text Formatter

No theming required!

Page 142: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Drupal.org: Search + most popular modules

• drupal.org/project/modules

• Follow @drupal_modules on Twitter

• twitter.com/drupal_modules

Find more modules

Page 143: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• Lullabot’s “Module Monday” blog series

• lullabot.com/ideas

• The Weekly Drop newsletter

• theweeklydrop.com

Find more modules

Page 144: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Design for change

Page 145: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• 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

Page 146: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• 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

Page 147: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

• What happens if menu items are added?

• How does your design handle multiple levels of navigation?

Anticipate expanding navigation

Page 148: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

The site you design today will change tomorrow.

Page 149: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Why?

Page 150: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Because it’s not really a site...

Page 152: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

And designers are its primary architects.

Photo: Salim Virji on Flickr (Creative Commons BY-SA)

Page 153: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Thanks!

Page 154: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

Credits

• Expeditionary Learning sitemaps, wireframes, design comps, and screenshots are copyright Expeditionary Learning Schools and/or Thinkso Creative.

• The Simpsons Movie is a copyright of 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 and DrupalCon London.

Page 155: Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)

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.