Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
5 likes2,378 views
The presentation emphasizes the importance of designing web systems instead of just websites, highlighting the need for dynamic and user-friendly interfaces. It outlines a process for creating a Drupal-optimized design, which includes defining site purpose and audience, creating personas and content types, and structuring with wireframes and visual design. The document also stresses the collaborative nature of web design, incorporating client feedback through mood boards and style tiles.
![Our Results Page description: HTML tags: Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
lege Acceptance Club. In 2010,
Academic achievement the following schools earned a
place in the club:
Our students are outperforming district averages on state and mandated tests. In
many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy
substantial margins, with particular success among black and Latino students. Tucson, AZ
Learn more>
Codman Academy Charter
Public School
Dorchester, MA
Evidence of engagement
Decatur Discovery Academy
Our model fosters more than just academic achievement. Our students are
Indianapolis, IN
engaged in their own learning and in the community around them while our school
and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary
education. School of the Arts
Thornton, CO
Learn more>
Northpoint Expeditionary
Quality of student work Learning Academy
We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ
high-quality work that matters in the real world.
Rocky Mountain School of
Expeditionary Learning
Denver, CO
Silverton School of Expedi-
tionary Learning](https://image.slidesharecdn.com/designwebsystems2011-10-22badcamp-111023110942-phpapp01/85/Don-t-Design-Websites-Design-Web-SYSTEMS-BADCamp-2011-82-320.jpg)
![Our Results
Main nav
Page description: HTML tags:
Secondary nav
Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
lege Acceptance Club. In 2010,
Academic achievement the following schools earned a
place in the club:
Our students are outperforming district averages on state and mandated tests. In
many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy
substantial margins, with particular success among black and Latino students. Tucson, AZ
Section nav Learn more>
Codman Academy Charter
Public School
Dorchester, MA
Evidence of engagement
Decatur Discovery Academy
Our model fosters more than just academic achievement. Our students are
Indianapolis, IN
engaged in their own learning and in the community around them while our school
and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary
education. School of the Arts
Thornton, CO
Learn more>
Northpoint Expeditionary
Quality of student work Learning Academy
We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ
high-quality work that matters in the real world.
Rocky Mountain School of
Expeditionary Learning
Denver, CO
Silverton School of Expedi-
tionary Learning](https://image.slidesharecdn.com/designwebsystems2011-10-22badcamp-111023110942-phpapp01/85/Don-t-Design-Websites-Design-Web-SYSTEMS-BADCamp-2011-83-320.jpg)
![Our Results Page title + introHTML tags:
Page description: Sidebar
Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
lege Acceptance Club. In 2010,
Academic achievement the following schools earned a
place in the club:
Our students are outperforming district averages on state and mandated tests. In
many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy
substantial margins, with particular success among black and Latino students. Tucson, AZ
Learn more>
Codman Academy Charter
Public School
Dorchester, MA
Evidence of engagement
Main
Decatur Discovery Academy
Our model fosters more than just academic achievement. Our students are
Indianapolis, IN
engaged in their own learning and in the community around them while our school
content and district leaders are deeply engaged in the conversations about how to improve
education.
Mapleton Expeditionary
School of the Arts
Thornton, CO
Learn more>
Northpoint Expeditionary
Quality of student work Learning Academy
We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ
high-quality work that matters in the real world.
Rocky Mountain School of
Expeditionary Learning
Denver, CO
Silverton School of Expedi-
tionary Learning](https://image.slidesharecdn.com/designwebsystems2011-10-22badcamp-111023110942-phpapp01/85/Don-t-Design-Websites-Design-Web-SYSTEMS-BADCamp-2011-84-320.jpg)
![Planner Create new expedition Document Library Homepage Planner Expeditions landing page
Planner | Expeditionary Learning
The “Create New...” view be- Planner | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning
Document Library | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning
gins with a few form elements
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
that are required. The informa- http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschool
tion down below can be added
Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd a la carte. Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
SHOP | SUPPORT | ALUMNI Expeditionary Learning Todd
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
Expeditionary Learning | CONTACT | FIND SCHOOL t f Hello, Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Lea
Our Our Educator Press About Our Our Educator Press
Our About
Our Educator Press About Our Our Educator Press About Our Our Our Educator Our Press Educator
About Press About Our Our Educator Press About
Approach Results Resources Center Us Approach Results Resources Center
Approach Us
Results Resources Center Us Approach Results Resources Center Us Approach Results Approach
Resources Results
Center Resources
Us Center Us Approach Results Resources Center Us
Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner
Home | Educator Resources | EL Commons | Document Library Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL
Choosing the “Expeditions” tab
displays the complete list of
Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Projects Lessons STAs
Library Home My Library Upload Document
Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Planner Home
Projects Lessons Expeditions
STAs Projects Lessons STAs your expeditions. Planner Home Expeditions Projects Lessons STAs
EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS
EL COMMONS
Dashboard Create New Expedition Dashboard Create New Project Search the Library Dashboard Create New Lesson My Expeditions
Dashboard Create New Standards, Targets & Assessment Set My Projects
Save Expedition Dashboard Save Project Save Lesson Dashboard Create a new: Save STA set Dashboard Create a new:
Dashboard
Planner Planner Planner Keyword search to be added at Planner
Created/ Created/
Expedition Title Cancel Collaborators are other mem- Project Title Planner Cancel
Search for docs from: Grade: File type:
Lesson Title
a later date.
Cancel Planner Title Grade Level Modified Tools
Expedition
Cancel Planner Title Grade Level Modified Tools
Expedition
Planner
Student Project Archive bers of the Commons that have
Student Project Archive
Student Project Archive Everywhere Any
Student Project Archive
PDF Image Student Project Archive Student Project Archive
It's Not Easy Being Green 4 Fields TBD
Feb 25, 2010 Edit Duplicate Delete Student Project Archive Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete Student Project Archive
School Oliver Hoover Change School Oliver Hoover Change School Oliver Hoover Change
Document Library
Collaborators: permission to view Document Library
and edit My state
Linked to:
Editable
Document Library
(jpg, gif, etc.) Linked to:
Document Library
Create Create
Document Library Document Library Document Library Document Library
Grade level 4 --Change grade --
chose
Julia Zimmerman Remove this item. Only owners (initial Grade level 4 --Change grade --
chose My school
This project is not linked to category:
Main (Word, Excel, PPT) Grade level 4 --Change grade --
chose
This lesson is not linked to Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete World Capitals Map 4 Aug 16, 2009 Edit Duplicate Delete
any expeditions. any projects.
BEST PRACTICES Marcus Flint Remove creators) of items can add and
BEST PRACTICES
BEST PRACTICES Any
BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES
Discipline and Add collaborators remove collaborators. Format -- chose format --
Create link
Usefulness rating is at least: Uploaded after: Discipline -- chose discipline -- Create link Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete Search: Create New Project Search:
PROFESSIONAL DEV. PROFESSIONAL DEV. + Add sub-category PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV.
Specific Topic PROFESSIONAL DEV.
★ May 25 2010 My Portfolio My Portfolio
Discipline -- chose discipline -- Collaborators: Lesson Date Collaborators: Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete
RECOMMENDED MEDIA Viewable by: RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA
Start RECOMMENDED MEDIA for for
Limit to EL Recommends not collaborating with
You are EL
FUND FOR TEACHERS Me & collaborators only Owners can define whichTEACHERS
FUND FOR Start FUND FOR TEACHERS
You are not collaborating with
FUND FOR TEACHERS
FUND FOR TEACHERS anyone on this project. anyone on this lesson. FOR TEACHERS
FUND Create New Expedition FUND FOR TEACHERS FUND FOR TEACHERS
End Oliver Hoover Elementary groups can view this item once
All of EL Commons Add collaborators Search Add collaborators
it is created and saved. End Introduction Search Search
Add instructional step
Summary Viewable by: Viewable by:
Add Summary Culminating Product, Performance & Audience Me & collaborators only Me & collaborators only
The Best of the Library Hoover Elementary
Oliver Body Oliver Hoover Elementary
Add Description All of EL Commons All of EL Commons
Guiding Questions Help text is available for Lorem ipsum dolor Velorem dolor Dolut nonsequat Lor acicuis eriusci Dulummo lortis ado
Add instructional step
individual elements Products Students Create ★★★★ (15) ★★★★ (18) ★★★★ (42) cons velorem ★★★★ (15) Arrows at left and right of “Best
Add Question
EL EL ★★★★ (27) EL Synthesis of” browser show the previous
Add Product
Add instructional stepand next set of 5.
Standards, Learning Targets & Assessments
Add New
Standards, Learning Targets & Assessments Browse the Library
Add New Resources & Needs
Learning Expeditions/ Active Pedagogy/Instruction Leadership and School Assessment
Curriculum Improvement Add Resource
Instructional practice Learning Targets
Case Studies Learning Expeditions: Exemplary Observations
21th Century Skills Explicitly Addressed Models
Lesson design Grading
Add Case Study Clicking inline “Add” links re- Protocols for building and
Descriptive Feedback
Reporting Save Lesson Cancel
Add Skill Content maps
veals inline UI elements to add assessing background Evaluation
Homework
the relevant information. Skills scope and sequence knowledge
Leadership Job Descriptions
Key Projects maps Student-led conferences
Key Lessons Protocols for discussion
Interviews
Clicking linked text in the
Case studies Portfolios
Add New Project | Link Existing Project “Add New Project” saves the Protocols for critique
Facilitation skills
“Browse” lists lead to corre-
Add New Lesson | Link Existing Lesson
current expedition and brings Guiding questions
Classroom layouts for instruction
Passages sponding category pages.
PD structures
Big ideas Documentation panels
user to the Create New Proj- Reading
Using data
Connections to the Community and Larger World ect” page. Resources & Needs Projects and products
Writing
Rubrics For items with “collapsed” ar-
Leadership teams
Add Resource
Fieldwork
Oral Communication
Critique rows, clicking the item, but not
Add Connection Instructional coaching
“Link Existing” displays a list Experts the actual linked text, expands
Research
of the available projects in My Service learning
Implementation Reviews Core Documents the item to reveal an additional
Math
Save Expedition Cancel Portfolio. Vocabulary Calendars
Faculty study groups History of EL level of sub-categories.
Science
Protocols for staff use Design principles
Planner Expedition detail, owner view
Add Word Integrated arts
Social Studies Student Project Archive
Core practice benchmarks
Homepage Student Project Archive Search results
Technology
Arts Structures
Terrains
Immersion/kick-off
Health and Wellness Physical spaces
Save Project Cancel
Culmination/celebration
Special Education Annual schedules Offsite PD
Planner | Expeditionary Learning
Once an expedition has been Daily/weekly schedules
ELL Calendar
Planner | Expeditionary Learning Student Project Archive | Expeditionary Learning Planner | Expeditionary Learning Student Project Archive | Expeditionary Learning Planner | Expeditionary Learning
created, the collaborator
Differentiation Professional development Catalog
Clicking the “Save” button
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
view shows the expedition http://www.elschools.com/educator-resources/commons/library/some-unique-identifihttp://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
calendars
Site seminars
er-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here
(here or in the sidebar) saves information&with inline “edit” Extended day structures
Culture Character National conference
the item and adds it to “My or “change” links in the main Faculty handbooks
Expeditionary Learning
Portfolio.”
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning
Professional culture Institutes Expeditionary Learning | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
SHOP | SUPPORT Expeditionary LearningTodd
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t Expeditionary Learning
f Hello, Todd Expeditionary Learning SHOP t f
SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL | SUPPORT Todd
Hello, | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd
column. Collaborator controls,Student/family handbooks
Schoolwide culture Learning expeditions for
viewAdventure and print controls
controls Budgets educators
are in the sidebar. New schools Outward Bound for educator
Our Our Educator Press About Initiatives Our Our Educator Press
Our About
Our Educator Press About Our Our Educator Press About Our Our Our
Educator Our
Press Educator
About Press About
courses
Approach Results Resources Center Us Intensives Approach Results Resources Center
Approach Us
Results Resources Center Us Approach Results Resources Center Us Approach Results Approach
Resources Results
Center Resources
Us Center Us
Readings
Sample ads for school hiring
Community meetings
Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Student Project Archive Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner
Home | Educator Resources | EL Commons | Student Project Archive
Teacher and Staff Job
descriptions
College prep materials
Charter applications
Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Projects Lessons STAs
Archive Home My Archive Submit Project Planner Home Submit tab should
The Expeditions only be
Projects Lessons STAs Archive Home My Archive Planner Home
Submit Project Expeditions Projects Lessons STAs
visible to permissioned EL staff.
EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS
Dashboard It's Not Easy Being Green Change Dashboard Finding Frogs Change Dashboard Search the Archive Dashboard [Lesson Title Here] Change Dashboard Search Results
Dashboard [STA Set Title Here] Change Search again
Collaborators: Linked to: Linked to:
Showing 10 of 23
Planner School: Oliver Hoover Change
Julia Zimmerman Remove Planner School: Oliver Hoover Change Planner It's Not Easy Being Green Planner Keyword search to be added
School: Oliver Hoover Change
Finding Frogs Planner Planner
9 10 Un-link 11 Discipline: 12
Marcus Flint Remove 1 Search for projects from: Usefulness rating is at least: later. Un-link 5 Image Title Rating Grade Format 6
Student Project Archive Grade Level: 4 Change
Add collaborators
Student Project Archive Grade Level: 4 Change Student Project Archive
Everywhere Create link
★
Student Project Archive
Any
Grade Level: 4 Change Create link Student Project Archive Student Project Archive Content TBD Each result includes a repre-
Document Library Discipline and: Life Science, animals and their habitats Change Document Library Format: Field guide, natural science Change Document Library My state Document Library Discipline: Life science Change Document Library
Finding Frogs Field Guide
Document Library
★★★★ (28) 4 Field Guide: Natural Science sentative image, the project
Specific Topic Collaborators: Grade level: Collaborators:
Viewable by: Discipline: Life science Change My school Project format:
Date: March 2, 2010 Change title, the rating, the grade and
BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES
Start: March 2, 2010 Change Me & collaborators only You are not collaborating
Any Any Elizabeth Amorose Remove the project format.
Start: March 2, 2010 Change with anyone on this project. Bridges of NYC ★★★★ (16) 5 Video: Documentary
PROFESSIONAL DEV. Oliver Hoover Elementary PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. Add collaborators
PROFESSIONAL DEV. PROFESSIONAL DEV.
End: May 15, 2010 Change
All of EL Commons Add collaborators Introduction
End: April 2, 2010 Change By default, the list of results
Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 RECOMMENDED MEDIA 47 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
RECOMMENDED MEDIA RECOMMENDED MEDIA
25 RECOMMENDED MEDIA
Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010
RECOMMENDED MEDIA
Viewable by: RECOMMENDED MEDIA
43 is sorted according to rating.
Search 1. [Heading of Step] Edit Delete It Ain't Easy Being Green ★★★★ (32) 10 Field Guide: Natural Science
Print Expedition Viewable by: Me & collaborators only TEACHERS
FUND FOR TEACHERS Summary FUND FOR TEACHERS
Culminating Product, Performance & Audience
FUND FOR TEACHERS FUND FOR TEACHERS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum FUND FOR FUND FOR TEACHERS Clicking any of the column
Me & collaborators only Oliver Hoover Elementary
In this Learning Expedition students will study the relationship between living things and their habitat. We Customize printout Oliver Hoover Elementary
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
All of EL Commons heads (except for “Image”)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
study local frogs as well as frogs from around the world as an example of how an animal's habitat impacts
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
All of EL Commons Lorem Ipsum Dolor ★★★★ (21) 4 Short Story sorts the results by the chosen
both its physical characteristics and the ways that it meets its basic needs. This expedition includes
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. The Best of the Archive Support and/or Extension Needed Print Lesson
parameter.
extensive fieldwork and data collection, research, scientific observation, and scientific drawing leading to
the creation of trading cards that spotlight frogs from around the world. Edit Print Project Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper. Customize printout Sit Amet Consectetat Velorem ★★★★ (11) 9 Magazine: Historical
Edit Customize printout Ipsum Dolor
Products Students Create Differentiation
Adipiscing Sitemus Est ★★★★ (62) 8 Newspaper
Guiding Questions Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem Arrows at left and right of “Best
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. of” browser show the previous
Lorem Ipsum Dolor ★★★★ (45) 12 Model: Architectural
Edit
Edit
Finding Frogs Field Bridges of NYC It Ain't Easy Being Lorem Ipsum Dolor Sit Amet Consec
and next
2. [Heading of Step 2] set of 5.
Edit Delete
Guide Green Tetat Septimus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
★★★★ (18) ★★★★ (27)
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris.
Standards, Learning Targets & Assessments ★★★★ (15) ★★★★ (42) ★★★★ (15) Melus Amet Consectetat Velorem ★★★★ (56) PK Cookbook
Standards, Learning Targets & Assessments Support and/or Extension Needed Ipsum Dolor
Discipline Standard Targets Assessments Tools Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.
Add New
Browse the Archive By: Toma Adipiscing Sitemus Est ★★★★ (7) 4 Performance: Play
Life science Life Science 1: Physical [Targets here] [Assessments here] Edit Delete Differentiation
Characteristics of Organisms Usefulness rating Grade level Discipline Project format
Case Studies Clicking linked text in the
★★★★ Elementary English Language Arts 3D & Media
Add Case Study Add New “Browse” lists lead to corre- Velorem Lorem Ipsum Dolor ★★★★ (13) 6 Poetry
★★★★ Middle Social Studies Books & Guides sponding category pages.
Add instructional step
★★★★ High School Science Dramatic Arts
Key Projects 21st Century Skills Explicitly Addressed Showing 10 of 23 | Show more results
★★★★ Mathematics Information Design For items with “collapsed” ar-
Created/ Learning & Innovation Skills Body
Title Grade Level Modified Tools Think creatively Character Publications rows, clicking the item, but not
Work creatively with others Civics Visual & Narrative Arts Add instructional step actual linked text, expands
the
Reason effectively
Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete
Dance the item to reveal an additional
Edit level of sub-categories.
Add New Project | Link Existing Project Health & Wellness Synthesis
Music
Add instructional step
Key Lessons Physical Education
Connections to the Community and Larger World Created/
Title Grade Level Modified Tools Theatre
Add Connection
Visual Arts
Resources & Needs
[Lesson title here] 4 Feb 25, 2010 Edit Duplicate Delete Add Resource
World Language
Notes Add New Lesson | Link Existing Lesson
Julia Zimmerman said:
Notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum Collaborators can view/add Resources & Needs Elizabeth Amorose said:
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris.
Mar 8, 2010 at 4:30 pm
notes. Frogs of South America Delete Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
Add Resource
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.
Marcus Flint said:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Vocabulary laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem
Today at 1:30 pm
ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta..
Add Word
You said:
Mar 8, 2010 at 4:30 pm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum
laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Notes Add Note
Today at 2:30 pm
Add Note
Add Note
13 14 1 15 16
Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 51 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 10 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 13](https://image.slidesharecdn.com/designwebsystems2011-10-22badcamp-111023110942-phpapp01/85/Don-t-Design-Websites-Design-Web-SYSTEMS-BADCamp-2011-87-320.jpg)
![Our Results Page description: HTML tags: Keyword tags:
| Stay connected
EL Commons (log in) | Contact | Find a school Search
ALUMNI REGISTRY
OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US
Home » Our Results Share
Academic Our Results 100% College
achievement
We measure student success based on three indicators: academ- Acceptance Club
Evidence of ic achievement, evidence of engagement, and quality of student
engagement [Insert banner image]
work. We are developing tools to track student progress so we Our goal for each student is col-
Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school
dent work are members of our 100% Col-
Credits lege Acceptance Club. In 2010,
Academic achievement the following schools earned a](https://image.slidesharecdn.com/designwebsystems2011-10-22badcamp-111023110942-phpapp01/85/Don-t-Design-Websites-Design-Web-SYSTEMS-BADCamp-2011-96-320.jpg)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
- 1. Don’t design websites. Design web systems! Creating a Drupal-optimized design Todd Nienkerk BADCamp | October 22, 2011
- 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Twitter:@toddross Photo: Kristin Hillery
- 4. Adam Snetman Design Director Thinkso Creative snetman@thinkso.com Photo: Erica Freudenstein
- 7. In the old days... Photo: eddiecoyote on Flickr (Creative Commons BY)
- 8. • Websites were measured in “pages” • Each page was maintained by hand as a single HTML file Photo: eddiecoyote on Flickr (Creative Commons BY)
- 9. Today’s websites... • Are dynamic and always-changing • Allow site maintainers to create and edit content, set user permissions, and connect with other services • Generate their own output
- 10. Today’s websites are actually web systems Photo: Snak Shak on Flickr (Creative Commons BY-NC)
- 12. “With great power there must also come... great responsibility!” STAN LEE Amazing Fantasy #15, August 1962 (the first Spiderman story) Photo: Edward Liu via Wikimedia Commons (CC BY-SA)
- 13. Designers determine a site’s functionality
- 14. We communicate functionality to developers through sitemaps, wireframes, and design comps
- 15. Even a tiny “log in” link tells a long and complicated story
- 16. • In order to “log in,” users must also be able to: • Create accounts • Reset their password • Update account information
- 17. • And what about... • Permissions? • Public profiles? • Email notifications?
- 18. We are a site’s primary architects
- 19. Designing a web system
- 21. You wouldn’t paint a house before building it... So how can you design a website before architecting it?
- 22. STEP 1 Define the site
- 23. • What’s the purpose of the site? • Who is the audience? • What is the content, and how will it be organized? • How will people experience the site?
- 24. What’s the purpose of the site? Gather goals and requirements
- 25. List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make Make money! money!
- 26. Business and technical requirements Brand Mobile devices SEO guidelines requirements Browser Accessibility compatibility Performance Infrastructure
- 27. Who is the audience? Create personas
- 28. Personas • Make a list of target audiences • Create one persona for each target audience • Give each persona (at least) a name, age, face, reason for visiting, and “wish list” of tasks
- 29. Persona: NYC-based graphic designers Adam, 34 Reason for visiting: Adam’s wardrobe is roughly 80% plaid shirts. He buys a new plaid shirt most months, and a friend recommended sweet-plaid-shirts.com to him as a good place to shop. Website wish list: • Sort available shirts by various criteria. (most popular, newly added, etc.) • See which shirts friends have purchased. • Sign up for a an account to save preferences and make repeat visits quick and easy.
- 30. What kind of content, and how will it be organized? Define content types and create a sitemap
- 31. Content • In Drupal, di erent kinds of content are called content types • Content types are usually defined by the di erent information they contain
- 32. Blog post Product Title Name Author Description Date published Price Lead image Sizes, colors Body text Images
- 33. Sitemaps • List all sections/pages of the site • Illustrate how pages are organized within the sections
- 34. Home page Primary menu Most Science Sports Business Arts popular Blog post Blog post Blog post Blog post Blog post Secondary menu About us Terms of use Contact us User tools My account Search
- 35. How will people experience the site? Create wireframes
- 36. Wireframes • Illustrate navigation and layout • Demonstrate functionality and how user interfaces work • Identify static vs. dynamically generated elements • Identify unique layouts
- 38. Nav
- 39. UI
- 40. Dynamically generated list Curated, “featured” content
- 41. Home page layout Interior page layout
- 42. Balsamiq Mockups • balsamiq.com • Cross-platform, lots of plugins • Free license for open- source “do-gooders” • Drupal components: bit.ly/drupal-balsamiq
- 43. Time and budget permitting... Do some usability testing
- 44. Usability testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
- 45. STEP 2 Choose your platform
- 46. Drupal isn’t always the best solution From The Simpsons Movie
- 47. STEP 3 Translate everything into “Drupalspeak”
- 48. Most Drupal sites are comprised of just a few, basic components
- 49. • Content • Not always a node • View, panel, user profile, form, admin interface... • Blocks • Menus • Primary and secondary links
- 51. Credits
- 52. Now you can make informed decisions about how to create a compelling and e ective design
- 53. • 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
- 54. Mood boards and style tiles • Faster and cheaper than iterating on full comps • Involves the client in the design process • Increases client confidence and buy-in • Fun to make
- 55. Mood boards From Why Mood Boards Matter by Mindy Wagner
- 56. From Why Mood Boards Matter by Mindy Wagner
- 57. Style tiles From Why Mood Boards Matter by Mindy Wagner
- 58. From Style Tiles in Practice by Samantha Warren
- 59. • Avoiding a Frankenstein Website Design: Collaborating with Clients • bit.ly/collab-with-clients • Why Mood Boards Matter • bit.ly/mood-boards • Style Tiles in Practice • bit.ly/style-tiles
- 61. 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
- 63. Credits
- 65. Credits
- 66. Credits
- 68. Credits
- 69. Credits ?
- 70. Theory vs. practice 1. Define the site 1. Define the site 2. Choose your 2. Visual design platform 3. Choose your platform 3. Translate to Drupalspeak 4. Translate to Drupalspeak 4. Visual design 5. Revise site definition and visual design
- 71. STEP 1 Define the EL site
- 72. 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
- 73. Who is the audience?
- 75. What is the content, and how will it be organized?
- 79. Communicate EL’s mission Create secure online tools
- 80. EL Commons Dashboard Planner home Student proj- ect archive Document library Expeditions Projects Lessons STAs Overview Overview Overview Overview Planner Create Create Create Create Groups Expedition Project Lesson STA Discussion View/Edit View/Edit View/Edit View/Edit boards Expedition Project Lesson STA Job listings Event Search Public registration planner items
- 81. How will people experience the site?
- 82. Our Results Page description: HTML tags: Keyword tags: | Stay connected EL Commons (log in) | Contact | Find a school Search ALUMNI REGISTRY OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US Home » Our Results Share Academic Our Results 100% College achievement We measure student success based on three indicators: academ- Acceptance Club Evidence of ic achievement, evidence of engagement, and quality of student engagement [Insert banner image] work. We are developing tools to track student progress so we Our goal for each student is col- Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZ Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagement Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our school and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary education. School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ high-quality work that matters in the real world. Rocky Mountain School of Expeditionary Learning Denver, CO Silverton School of Expedi- tionary Learning
- 83. Our Results Main nav Page description: HTML tags: Secondary nav Keyword tags: | Stay connected EL Commons (log in) | Contact | Find a school Search ALUMNI REGISTRY OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US Home » Our Results Share Academic Our Results 100% College achievement We measure student success based on three indicators: academ- Acceptance Club Evidence of ic achievement, evidence of engagement, and quality of student engagement [Insert banner image] work. We are developing tools to track student progress so we Our goal for each student is col- Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZ Section nav Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagement Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our school and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary education. School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ high-quality work that matters in the real world. Rocky Mountain School of Expeditionary Learning Denver, CO Silverton School of Expedi- tionary Learning
- 84. Our Results Page title + introHTML tags: Page description: Sidebar Keyword tags: | Stay connected EL Commons (log in) | Contact | Find a school Search ALUMNI REGISTRY OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US Home » Our Results Share Academic Our Results 100% College achievement We measure student success based on three indicators: academ- Acceptance Club Evidence of ic achievement, evidence of engagement, and quality of student engagement [Insert banner image] work. We are developing tools to track student progress so we Our goal for each student is col- Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZ Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagement Main Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our school content and district leaders are deeply engaged in the conversations about how to improve education. Mapleton Expeditionary School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ high-quality work that matters in the real world. Rocky Mountain School of Expeditionary Learning Denver, CO Silverton School of Expedi- tionary Learning
- 86. Planner Homepage Planner | Expeditionary Learning The homepage of the planner shows latest activity up top with http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-reso a tabbed view of the complete portfolio down below. Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning Our Our Educator Press About Our Approach Results Resources Center Us Approach Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Planner Home Expeditions Projects Lessons S TA s P EL COMMONS EL COMMONS Dashboard Latest Activity Dashboard Latest A Create a new: Planner You added a standard to the expedition It's Not Easy Being Green Today at 2:30 pm Planner You add Expedition Create new expeditions, proj- Student Project Archive You linked the project Finding Frogs to It's Not Easy Being Green Today at 1:30 pm ects, lessons or STA setsProject Archive Student here. You linke Create Document Library You created the project Finding Frogs Mar 20, 2010 Document Library You crea BEST PRACTICES You created the expedition It's Not Easy Being Green Feb 18, 2010 BEST PRACTICES You crea Search: PROFESSIONAL DEV. You modified the expedition Building Cultural Bridges Aug 20, 2009 PROFESSIONAL DEV. You mod My Portfolio Choose a scope for search: RECOMMENDED MEDIA for RECOMMENDED MEDIA FUND FOR TEACHERS My Portfolio FUND FOR TEACHERS My Port Expeditions Projects Lessons STAs Search Expedit Created/ Title Grade Level Modified Tools Title It's Not Easy Being Green 4 Feb 25, 2010 Edit Duplicate Delete Finding Frog Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete Quick links for the various World Capit things you can do to existing Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete items. Create Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete Create New Expedition New items can be created here as well.
- 87. Planner Create new expedition Document Library Homepage Planner Expeditions landing page Planner | Expeditionary Learning The “Create New...” view be- Planner | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning Document Library | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning gins with a few form elements http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here that are required. The informa- http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschool tion down below can be added Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd a la carte. Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd SHOP | SUPPORT | ALUMNI Expeditionary Learning Todd SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning | CONTACT | FIND SCHOOL t f Hello, Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Lea Our Our Educator Press About Our Our Educator Press Our About Our Educator Press About Our Our Educator Press About Our Our Our Educator Our Press Educator About Press About Our Our Educator Press About Approach Results Resources Center Us Approach Results Resources Center Approach Us Results Resources Center Us Approach Results Resources Center Us Approach Results Approach Resources Results Center Resources Us Center Us Approach Results Resources Center Us Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Document Library Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Choosing the “Expeditions” tab displays the complete list of Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Projects Lessons STAs Library Home My Library Upload Document Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Planner Home Projects Lessons Expeditions STAs Projects Lessons STAs your expeditions. Planner Home Expeditions Projects Lessons STAs EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS Dashboard Create New Expedition Dashboard Create New Project Search the Library Dashboard Create New Lesson My Expeditions Dashboard Create New Standards, Targets & Assessment Set My Projects Save Expedition Dashboard Save Project Save Lesson Dashboard Create a new: Save STA set Dashboard Create a new: Dashboard Planner Planner Planner Keyword search to be added at Planner Created/ Created/ Expedition Title Cancel Collaborators are other mem- Project Title Planner Cancel Search for docs from: Grade: File type: Lesson Title a later date. Cancel Planner Title Grade Level Modified Tools Expedition Cancel Planner Title Grade Level Modified Tools Expedition Planner Student Project Archive bers of the Commons that have Student Project Archive Student Project Archive Everywhere Any Student Project Archive PDF Image Student Project Archive Student Project Archive It's Not Easy Being Green 4 Fields TBD Feb 25, 2010 Edit Duplicate Delete Student Project Archive Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete Student Project Archive School Oliver Hoover Change School Oliver Hoover Change School Oliver Hoover Change Document Library Collaborators: permission to view Document Library and edit My state Linked to: Editable Document Library (jpg, gif, etc.) Linked to: Document Library Create Create Document Library Document Library Document Library Document Library Grade level 4 --Change grade -- chose Julia Zimmerman Remove this item. Only owners (initial Grade level 4 --Change grade -- chose My school This project is not linked to category: Main (Word, Excel, PPT) Grade level 4 --Change grade -- chose This lesson is not linked to Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete World Capitals Map 4 Aug 16, 2009 Edit Duplicate Delete any expeditions. any projects. BEST PRACTICES Marcus Flint Remove creators) of items can add and BEST PRACTICES BEST PRACTICES Any BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES Discipline and Add collaborators remove collaborators. Format -- chose format -- Create link Usefulness rating is at least: Uploaded after: Discipline -- chose discipline -- Create link Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete Search: Create New Project Search: PROFESSIONAL DEV. PROFESSIONAL DEV. + Add sub-category PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. Specific Topic PROFESSIONAL DEV. ★ May 25 2010 My Portfolio My Portfolio Discipline -- chose discipline -- Collaborators: Lesson Date Collaborators: Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete RECOMMENDED MEDIA Viewable by: RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA RECOMMENDED MEDIA Start RECOMMENDED MEDIA for for Limit to EL Recommends not collaborating with You are EL FUND FOR TEACHERS Me & collaborators only Owners can define whichTEACHERS FUND FOR Start FUND FOR TEACHERS You are not collaborating with FUND FOR TEACHERS FUND FOR TEACHERS anyone on this project. anyone on this lesson. FOR TEACHERS FUND Create New Expedition FUND FOR TEACHERS FUND FOR TEACHERS End Oliver Hoover Elementary groups can view this item once All of EL Commons Add collaborators Search Add collaborators it is created and saved. End Introduction Search Search Add instructional step Summary Viewable by: Viewable by: Add Summary Culminating Product, Performance & Audience Me & collaborators only Me & collaborators only The Best of the Library Hoover Elementary Oliver Body Oliver Hoover Elementary Add Description All of EL Commons All of EL Commons Guiding Questions Help text is available for Lorem ipsum dolor Velorem dolor Dolut nonsequat Lor acicuis eriusci Dulummo lortis ado Add instructional step individual elements Products Students Create ★★★★ (15) ★★★★ (18) ★★★★ (42) cons velorem ★★★★ (15) Arrows at left and right of “Best Add Question EL EL ★★★★ (27) EL Synthesis of” browser show the previous Add Product Add instructional stepand next set of 5. Standards, Learning Targets & Assessments Add New Standards, Learning Targets & Assessments Browse the Library Add New Resources & Needs Learning Expeditions/ Active Pedagogy/Instruction Leadership and School Assessment Curriculum Improvement Add Resource Instructional practice Learning Targets Case Studies Learning Expeditions: Exemplary Observations 21th Century Skills Explicitly Addressed Models Lesson design Grading Add Case Study Clicking inline “Add” links re- Protocols for building and Descriptive Feedback Reporting Save Lesson Cancel Add Skill Content maps veals inline UI elements to add assessing background Evaluation Homework the relevant information. Skills scope and sequence knowledge Leadership Job Descriptions Key Projects maps Student-led conferences Key Lessons Protocols for discussion Interviews Clicking linked text in the Case studies Portfolios Add New Project | Link Existing Project “Add New Project” saves the Protocols for critique Facilitation skills “Browse” lists lead to corre- Add New Lesson | Link Existing Lesson current expedition and brings Guiding questions Classroom layouts for instruction Passages sponding category pages. PD structures Big ideas Documentation panels user to the Create New Proj- Reading Using data Connections to the Community and Larger World ect” page. Resources & Needs Projects and products Writing Rubrics For items with “collapsed” ar- Leadership teams Add Resource Fieldwork Oral Communication Critique rows, clicking the item, but not Add Connection Instructional coaching “Link Existing” displays a list Experts the actual linked text, expands Research of the available projects in My Service learning Implementation Reviews Core Documents the item to reveal an additional Math Save Expedition Cancel Portfolio. Vocabulary Calendars Faculty study groups History of EL level of sub-categories. Science Protocols for staff use Design principles Planner Expedition detail, owner view Add Word Integrated arts Social Studies Student Project Archive Core practice benchmarks Homepage Student Project Archive Search results Technology Arts Structures Terrains Immersion/kick-off Health and Wellness Physical spaces Save Project Cancel Culmination/celebration Special Education Annual schedules Offsite PD Planner | Expeditionary Learning Once an expedition has been Daily/weekly schedules ELL Calendar Planner | Expeditionary Learning Student Project Archive | Expeditionary Learning Planner | Expeditionary Learning Student Project Archive | Expeditionary Learning Planner | Expeditionary Learning created, the collaborator Differentiation Professional development Catalog Clicking the “Save” button http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here view shows the expedition http://www.elschools.com/educator-resources/commons/library/some-unique-identifihttp://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here calendars Site seminars er-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here (here or in the sidebar) saves information&with inline “edit” Extended day structures Culture Character National conference the item and adds it to “My or “change” links in the main Faculty handbooks Expeditionary Learning Portfolio.” SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning Professional culture Institutes Expeditionary Learning | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd SHOP | SUPPORT Expeditionary LearningTodd SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t Expeditionary Learning f Hello, Todd Expeditionary Learning SHOP t f SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL | SUPPORT Todd Hello, | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd column. Collaborator controls,Student/family handbooks Schoolwide culture Learning expeditions for viewAdventure and print controls controls Budgets educators are in the sidebar. New schools Outward Bound for educator Our Our Educator Press About Initiatives Our Our Educator Press Our About Our Educator Press About Our Our Educator Press About Our Our Our Educator Our Press Educator About Press About courses Approach Results Resources Center Us Intensives Approach Results Resources Center Approach Us Results Resources Center Us Approach Results Resources Center Us Approach Results Approach Resources Results Center Resources Us Center Us Readings Sample ads for school hiring Community meetings Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Student Project Archive Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Student Project Archive Teacher and Staff Job descriptions College prep materials Charter applications Planner Home Expeditions Projects Lessons STAs Planner Home Expeditions Projects Lessons STAs Archive Home My Archive Submit Project Planner Home Submit tab should The Expeditions only be Projects Lessons STAs Archive Home My Archive Planner Home Submit Project Expeditions Projects Lessons STAs visible to permissioned EL staff. EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS EL COMMONS Dashboard It's Not Easy Being Green Change Dashboard Finding Frogs Change Dashboard Search the Archive Dashboard [Lesson Title Here] Change Dashboard Search Results Dashboard [STA Set Title Here] Change Search again Collaborators: Linked to: Linked to: Showing 10 of 23 Planner School: Oliver Hoover Change Julia Zimmerman Remove Planner School: Oliver Hoover Change Planner It's Not Easy Being Green Planner Keyword search to be added School: Oliver Hoover Change Finding Frogs Planner Planner 9 10 Un-link 11 Discipline: 12 Marcus Flint Remove 1 Search for projects from: Usefulness rating is at least: later. Un-link 5 Image Title Rating Grade Format 6 Student Project Archive Grade Level: 4 Change Add collaborators Student Project Archive Grade Level: 4 Change Student Project Archive Everywhere Create link ★ Student Project Archive Any Grade Level: 4 Change Create link Student Project Archive Student Project Archive Content TBD Each result includes a repre- Document Library Discipline and: Life Science, animals and their habitats Change Document Library Format: Field guide, natural science Change Document Library My state Document Library Discipline: Life science Change Document Library Finding Frogs Field Guide Document Library ★★★★ (28) 4 Field Guide: Natural Science sentative image, the project Specific Topic Collaborators: Grade level: Collaborators: Viewable by: Discipline: Life science Change My school Project format: Date: March 2, 2010 Change title, the rating, the grade and BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES Start: March 2, 2010 Change Me & collaborators only You are not collaborating Any Any Elizabeth Amorose Remove the project format. Start: March 2, 2010 Change with anyone on this project. Bridges of NYC ★★★★ (16) 5 Video: Documentary PROFESSIONAL DEV. Oliver Hoover Elementary PROFESSIONAL DEV. PROFESSIONAL DEV. PROFESSIONAL DEV. Add collaborators PROFESSIONAL DEV. PROFESSIONAL DEV. End: May 15, 2010 Change All of EL Commons Add collaborators Introduction End: April 2, 2010 Change By default, the list of results Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 RECOMMENDED MEDIA 47 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 RECOMMENDED MEDIA RECOMMENDED MEDIA 25 RECOMMENDED MEDIA Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 RECOMMENDED MEDIA Viewable by: RECOMMENDED MEDIA 43 is sorted according to rating. Search 1. [Heading of Step] Edit Delete It Ain't Easy Being Green ★★★★ (32) 10 Field Guide: Natural Science Print Expedition Viewable by: Me & collaborators only TEACHERS FUND FOR TEACHERS Summary FUND FOR TEACHERS Culminating Product, Performance & Audience FUND FOR TEACHERS FUND FOR TEACHERS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum FUND FOR FUND FOR TEACHERS Clicking any of the column Me & collaborators only Oliver Hoover Elementary In this Learning Expedition students will study the relationship between living things and their habitat. We Customize printout Oliver Hoover Elementary laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem All of EL Commons heads (except for “Image”) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. study local frogs as well as frogs from around the world as an example of how an animal's habitat impacts laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem All of EL Commons Lorem Ipsum Dolor ★★★★ (21) 4 Short Story sorts the results by the chosen both its physical characteristics and the ways that it meets its basic needs. This expedition includes ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. The Best of the Archive Support and/or Extension Needed Print Lesson parameter. extensive fieldwork and data collection, research, scientific observation, and scientific drawing leading to the creation of trading cards that spotlight frogs from around the world. Edit Print Project Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper. Customize printout Sit Amet Consectetat Velorem ★★★★ (11) 9 Magazine: Historical Edit Customize printout Ipsum Dolor Products Students Create Differentiation Adipiscing Sitemus Est ★★★★ (62) 8 Newspaper Guiding Questions Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem Arrows at left and right of “Best ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. of” browser show the previous Lorem Ipsum Dolor ★★★★ (45) 12 Model: Architectural Edit Edit Finding Frogs Field Bridges of NYC It Ain't Easy Being Lorem Ipsum Dolor Sit Amet Consec and next 2. [Heading of Step 2] set of 5. Edit Delete Guide Green Tetat Septimus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum ★★★★ (18) ★★★★ (27) laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Standards, Learning Targets & Assessments ★★★★ (15) ★★★★ (42) ★★★★ (15) Melus Amet Consectetat Velorem ★★★★ (56) PK Cookbook Standards, Learning Targets & Assessments Support and/or Extension Needed Ipsum Dolor Discipline Standard Targets Assessments Tools Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Add New Browse the Archive By: Toma Adipiscing Sitemus Est ★★★★ (7) 4 Performance: Play Life science Life Science 1: Physical [Targets here] [Assessments here] Edit Delete Differentiation Characteristics of Organisms Usefulness rating Grade level Discipline Project format Case Studies Clicking linked text in the ★★★★ Elementary English Language Arts 3D & Media Add Case Study Add New “Browse” lists lead to corre- Velorem Lorem Ipsum Dolor ★★★★ (13) 6 Poetry ★★★★ Middle Social Studies Books & Guides sponding category pages. Add instructional step ★★★★ High School Science Dramatic Arts Key Projects 21st Century Skills Explicitly Addressed Showing 10 of 23 | Show more results ★★★★ Mathematics Information Design For items with “collapsed” ar- Created/ Learning & Innovation Skills Body Title Grade Level Modified Tools Think creatively Character Publications rows, clicking the item, but not Work creatively with others Civics Visual & Narrative Arts Add instructional step actual linked text, expands the Reason effectively Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete Dance the item to reveal an additional Edit level of sub-categories. Add New Project | Link Existing Project Health & Wellness Synthesis Music Add instructional step Key Lessons Physical Education Connections to the Community and Larger World Created/ Title Grade Level Modified Tools Theatre Add Connection Visual Arts Resources & Needs [Lesson title here] 4 Feb 25, 2010 Edit Duplicate Delete Add Resource World Language Notes Add New Lesson | Link Existing Lesson Julia Zimmerman said: Notes Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum Collaborators can view/add Resources & Needs Elizabeth Amorose said: laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Mar 8, 2010 at 4:30 pm notes. Frogs of South America Delete Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem Add Resource ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Marcus Flint said: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Vocabulary laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Lorem Today at 1:30 pm ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta.. Add Word You said: Mar 8, 2010 at 4:30 pm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar rutrum turpis in porta. Vestibulum laoreet, sapien in egestas pharetra, metus est luctus orci, id ullamcorper massa arcu ut mauris. Notes Add Note Today at 2:30 pm Add Note Add Note 13 14 1 15 16 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 51 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 10 Thinkso Creative / Expeditionary Learning / EL Commons Wireframes / 14 July 2010 13
- 88. Planner Process Flow Diagrams Create new expedition From the planner homepage: Choose Return to homep- A Expedition from age. Activity and A the sidebar My Portfolio dropdown menu updated No Click the Click the Create Fill out the infor- Return to homep- Required Expeditions or Create New mation and click age. Activity and B information Yes B tab under My Expedition Save Expedition My Portfolio present? Portfolio button button updated Click the Return to Expeditions tab expeditions tab C C at the top of the landing page. page List updated. Credits
- 89. Usability testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
- 90. STEP 2 Design the EL site
- 91. Credits
- 92. Logo Typography Tagline Imagery Color Credits
- 93. 1 2 3 4 5 6 7 Credits
- 94. Homepage Landing page Interior
- 95. Credits
- 96. Our Results Page description: HTML tags: Keyword tags: | Stay connected EL Commons (log in) | Contact | Find a school Search ALUMNI REGISTRY OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US Home » Our Results Share Academic Our Results 100% College achievement We measure student success based on three indicators: academ- Acceptance Club Evidence of ic achievement, evidence of engagement, and quality of student engagement [Insert banner image] work. We are developing tools to track student progress so we Our goal for each student is col- Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school dent work are members of our 100% Col- Credits lege Acceptance Club. In 2010, Academic achievement the following schools earned a
- 97. Credits
- 98. Credits
- 99. Credits
- 102. STEP 3 Choose Drupal for EL
- 103. STEP 4 Translate the EL site into Drupalspeak
- 104. ? Sections Sitemap by Thinkso Creative
- 105. Primary menu items Sections Contexts
- 106. ? Section landing pages Sitemap by Thinkso Creative
- 107. Panels? Section Views? landing pages Secondary menu
- 108. Design by Thinkso Creative
- 109. Logo Breadcrumb Search box
- 110. Secondary links Primary links
- 111. Menu (block)
- 112. Block? Block? Block? Block? Block?
- 113. Panel! Design by Thinkso Creative
- 114. Page node Design by Thinkso Creative
- 115. Primary menu item Section Context Sitemap by Thinkso Creative
- 116. Section Panel landing page Sitemap by Thinkso Creative
- 117. Secondary menu items Section subpages Page nodes Sitemap by Thinkso Creative
- 118. STEPS 5 & 6 Revise site definition and visual design
- 119. Better. Faster. Cheaper. How to accelerate the design and theming phases of your project
- 120. Design on a grid (And use a CSS framework to implement it!)
- 121. Unigrid system by Massimo Vignelli; image source: AisleOne
- 122. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
- 123. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
- 124. Subtraction.com | Grid Computing… and Design
- 125. 1) Saves time 2) Saves money 3) Reduces frustration
- 126. Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
- 127. “Embrace constraints” — Mark Kraemer, National UX Practice Lead, EMC.com • Constraints narrow the scope of the design and encourage creativity Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
- 128. Enforcing a grid accelerates design while maintaining order Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
- 129. 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
- 131. Don’t start at zero. Start at Drupal
- 132. Increase your Drupalspeak vocabulary by leveraging default Drupal behavior and contributed modules
- 133. • Core modules • Default blocks and menus • Default theme regions • Default template variables • Listed at the top of each template file
- 134. 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
- 135. Drupal 6 Stark theme: drupal.org/project/stark
- 136. 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
- 137. • The problem: CCK outputs values one-by-one in their own divs
- 138. • 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!
- 139. • Text Formatter: drupal.org/project/textformatter • Lets you output CCK fields as lists or comma- separated strings
- 141. After Text Formatter No theming required!
- 142. Find more modules • Drupal.org: Search + most popular modules • drupal.org/project/modules • Follow @drupal_modules on Twitter • twitter.com/drupal_modules
- 143. Find more modules • Lullabot’s “Module Monday” blog series • lullabot.com/ideas • The Weekly Drop newsletter • theweeklydrop.com
- 144. Design for change
- 145. Minimize templates • More templates mean more maintenance • Consistent styling across templates creates a better user experience • Create a robust default template • What happens if a site administrator creates a new content type without creating a new template?
- 146. Accommodate content of any length • Your design should be robust enough to handle short and long content • What happens if your title wraps to two or three lines?
- 147. Anticipate expanding navigation • What happens if menu items are added? • How does your design handle multiple levels of navigation?
- 148. The site you design today will change tomorrow.
- 149. Why?
- 150. Because it’s not really a site...
- 151. It’s a system. Photo: Snak Shak on Flickr (Creative Commons BY-NC)
- 152. And designers are its primary architects. Photo: Salim Virji on Flickr (Creative Commons BY-SA)
- 153. Thanks!
- 154. Credits • Expeditionary Learning sitemaps, • The items listed to the left are wireframes, design comps, and exempt from this presentation’s screenshots are copyright Creative Commons license. Expeditionary Learning Schools and/or Thinkso Creative. • This presentation was originally created and delivered by Adam • The Simpsons Movie is a copyright Snetman of Thinkso Creative and of Fox or whoever made it. (We Todd Nienkerk of Four Kitchens at didn’t.) DrupalCon Chicago and DrupalCon London. • Drupal is a registered trademark of Dries Buytaert.
- 155. 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.