Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 15,071 views

This presentation was given at DrupalCamp Stockholm by Todd Nienkerk of Four Kitchens (May 7, 2011) ...

This presentation was given at DrupalCamp Stockholm by Todd Nienkerk of Four Kitchens (May 7, 2011)

For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

Statistics

Views

Total Views
15,071
Views on SlideShare
14,547
Embed Views
524

Actions

Likes
61
Downloads
806
Comments
3

29 Embeds 524

http://www.claudepenland.com 230
http://localhost 121
http://progranetcr.com 49
http://es.community.dell.com 25
http://www.aldibier.com 23
http://capitalcertainty.globalincubator.net 12
http://www.adviseplus.de 11
http://aldibier.com 8
http://willmarketforfun.com 5
http://morrisclay.posterous.com 5
http://alphaomegalib.blogspot.com 4
http://testwiki2277.pbworks.com 3
http://www.linkedin.com 3
http://twitter.com 3
http://www.fc-kunden.de 3
http://paper.li 2
http://www.flashquix.com 2
http://badaiaeuskalbloga.blogspot.com.es 2
http://badaiaeuskalbloga.blogspot.com 2
http://www.slideshare.net 2
http://fc-kunden.de 1
http://kskre.blogspot.com 1
http://www.xsiden.com 1
http://www.flane.be 1
http://posterous.com 1
http://www.aulanz.org 1
http://otp39.ru 1
http://www.srcf.ucam.org 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Don’t design websites. Design web systems! Creating a Drupal-optimized designTodd Ross NienkerkDrupalCamp Stockholm | May 7, 2011
  • Personal introductions
  • Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddrossPhoto: Kristin Hillery
  • Adam Snetman Design Director Thinkso Creative snetman@thinkso.comPhoto: Erica Freudenstein
  • Websites vs.web systems
  • In the old days...Photo: eddiecoyote on Flickr (Creative Commons BY)
  • • Websites were measured in “pages” • Each page was maintained by hand as a single HTML filePhoto: eddiecoyote on Flickr (Creative Commons BY)
  • Today’s websites...• Are dynamic and always-changing• Allow site maintainers to create and edit content, set user permissions, and connect with other services• Generate their own output
  • Today’s websites are actually web systemsPhoto: Snak Shak on Flickr (Creative Commons BY-NC)
  • Designers are powerful!
  • “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)
  • Designers determine a site’sfunctionality
  • We communicate functionality todevelopers through sitemaps, processflow diagrams, wireframes, and designcomps
  • Even a tiny “log in” link tells a long andcomplicated story
  • • In order to “log in,” users must also be able to: • Create accounts • Reset their password • Update account information
  • • And what about... • Permissions? • Public profiles? • Email notifications?
  • We are a site’s primary architects
  • Designing a web system
  • Stop! Close Photoshop!
  • You wouldn’t paint a house beforebuilding it...So how can you design a websitebefore architecting it?
  • STEP 1Define the site
  • • What’s the purpose of the site?• What kind of content will the site contain?• How will content be organized?• What will the user experience be like?
  • What’s the purpose of the site?Gather goals andrequirements
  • List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make money! Make money! Make money! Make Make money! money!
  • Business and technicalrequirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
  • How will content be organized?Create a sitemap
  • Sitemaps• List all sections/pages of the site• Illustrate how pages are organized within the sections
  • Homepage 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
  • What kind of content will the site contain?Define the content types
  • • In Drupal, di erent kinds of content are called content types• Content types are usually defined by the di erent information they contain
  • Blog post ProductTitle NameAuthor DescriptionDate published PriceBody Options (sizes, colors)Lead image Images
  • What will the user experience be like?Create wireframes
  • Wireframes• Illustrate page layout and functionality• Demonstrate how a user will navigate the site• Demonstrate how user interfaces/interactive tools work• Identify static and dynamically-generated content areas
  • My account | Log out Blog Logo SearchScienceSports Most popularBusiness postsArts Content AdvertisementCopyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
  • Balsamiq Mockups• balsamiq.com• Cross-platform, lots of plugins• Free license for open- source “do-gooders”• Drupal components: bit.ly/drupal-balsamiq
  • Time and budget permitting...Do some usability testing
  • Usability testingNapkin Paper Keynote HTML/CSSsketch prototypes prototypes prototypes
  • STEP 2Choose your platform
  • Drupal isn’t alwaysthe best solutionFrom The Simpsons Movie
  • STEP 3Translate everythinginto “Drupalspeak”
  • Most Drupal sites are comprised of justa few, basic components
  • • Content • Usually a node, view, or panel • Can also be a user profile or admin interface
  • • Blocks • Can contain virtually anything: user login, menus, lists of content, custom HTML, views... • Appear in regions (usually sidebars, but sometimes in the header or footer regions)• Menus • Added to the page as blocks
  • • Primary and secondary links • Special kinds of menus• Logo• Search box• Slogan, mission statement, and footer message
  • STEP 4Visual design
  • Credits
  • • Now you can make informed decisions about how to create a compelling and e ective design• Use your sitemaps, process flow diagrams, and wireframes as blueprints• Let Drupal’s default components and behavior inform your design
  • • How will type, color and imagery work together to translate the client’s brand identity to the web?• Are my page templates flexible enough to accommodate the site’s content?• Which site elements will benefit from a more modular, reusable design approach? Which are “one-o s” that require unique design attention?
  • CASE STUDYExpeditionary Learningelschools.org
  • Who is ExpeditionaryLearning?• Expeditionary Learning is an education reform organization that partners with schools, districts and charter boards to bring their project-based learning approach to new and existing schools.• EL partnered with Thinkso Creative and Four Kitchens to relaunch their brand and website
  • Credits
  • Credits
  • Credits
  • Credits
  • Credits ?
  • Theory vs. practice1. Define the site 1. Define the site2. Choose your 2. Visual design platform 3. Choose your platform3. Translate to Drupalspeak 4. Translate to Drupalspeak4. Visual design 5. Revise site definition 6. Revise visual design
  • STEP 1Define the EL site
  • EL’s site goals• Speak to EL’s diverse audiences: prospective schools and districts, parents, policy makers and the media• Create secure online tools for EL’s network of teachers that would help them collaborate on projects, tap into existing resources and plan their school year.
  • And...Translate the newly redesigned EL brandidentity for the web.
  • Speak to EL’sdiverse audiences Create secure online tools
  • EL CommonsDashboard 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
  • EL’s content types
  • 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
  • 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, AZSection 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
  • 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 engagementMain 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 schoolcontent 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
  • 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 Its 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 Its 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 Its 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 Its 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.
  • 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 Its 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 Its 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 Its 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 resultsThinkso 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 Aint 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 animals 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 Aint 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
  • 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
  • EL’s usability testingNapkin Paper Keynote HTML/CSSsketch prototypes prototypes prototypes
  • STEP 2Design the EL site
  • Credits
  • Logo Typography Tagline Imagery ColorCredits
  • 1 2 3 4 5 6 7Credits
  • Homepage Landing page Interior
  • Credits
  • 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
  • Credits
  • Credits
  • Credits
  • STEP 3Choose Drupal for EL
  • STEP 4Translate the EL siteinto Drupalspeak
  • ? SectionsSitemap by Thinkso Creative
  • Primary menu itemsSections Contexts
  • ? Section landing pagesSitemap by Thinkso Creative
  • Panels? Section Views?landing pages Secondary menu
  • Design by Thinkso Creative
  • Logo Breadcrumb Search box
  • Secondary links Primary links
  • Menu (block)
  • Block?Block? Block?Block?Block?
  • Design by Thinkso Creative
  • Panel!Design by Thinkso Creative
  • Design by Thinkso Creative
  • Page nodeDesign by Thinkso Creative
  • Primary menu item Section ContextSitemap by Thinkso Creative
  • Section Panel landing pageSitemap by Thinkso Creative
  • Secondary menu items Section subpages Page nodesSitemap by Thinkso Creative
  • STEPS 5 & 6Revise
  • Better. Faster. Cheaper.How to accelerate the design and theming phasesof your project
  • Design on a grid(And use a CSS framework to implement it!)
  • Subtraction.com | Grid Computing… and Design
  • 1) Saves time2) Saves money3) Reduces frustration
  • Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
  • “Embrace constraints” — Mark Kraemer, National UX Practice Lead, EMC.com • Constraints narrow the scope of the design and encourage creativityPhoto: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
  • Enforcing a grid canaccelerate design whilemaintaining orderPhoto: jontidmarsh on Flickr (Creative Commons BY-SA)
  • 960 grid system• CSS framework for grid-based design• NineSixty: drupal.org/project/ninesixty • Drupal port of the 960.gs grid system • Live demo at ninesixty.fkdemos.com• Zen NineSixty: drupal.org/project/zen_ninesixty• 960 Robots: drupal.org/project/ninesixtyrobots
  • Don’t start at zero.Start at Drupal
  • Increase your Drupalspeak vocabularyby leveraging default Drupal behaviorand contributed modules
  • • Core modules• Default blocks and menus• Default theme regions• Default template variables • Listed at the top of each template file
  • Default output and styling• Know what the default markup and CSS look like• Stark theme: drupal.org/project/stark• Stark is included in Drupal 7 core
  • Drupal 6 Stark theme: drupal.org/project/stark
  • Little modules can save youhours of theming• Someone else has probably run into your problem before... and solved it• The trick is finding the module
  • • The problem: CCK outputs values one-by-one in their own divs
  • • The (theme) solution: • Override the CCK field’s template file • Write PHP to output each field separated by a comma• There’s got to be a better way!
  • • Text Formatter: drupal.org/project/textformatter • Lets you output CCK fields as lists or comma- separated strings
  • Configuring Text Formatter
  • After Text Formatter No theming required!
  • Design for change
  • 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?
  • Accommodate content of anylength• Your design should be robust enough to handle short and long content• What happens if your title wraps to two or three lines?
  • Anticipate expandingnavigation• What happens if menu items are added?• How does your design handle multiple levels of navigation?
  • The site you design todaywill change tomorrow.
  • Why?
  • Because it’s not really asite...
  • It’s a system.Photo: Snak Shak on Flickr (Creative Commons BY-NC)
  • Thanks!
  • 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 copyright Snetman of Thinkso Creative and Fox or whoever made it. (We Todd Nienkerk of Four Kitchens at didn’t.) DrupalCon Chicago.• Drupal is a registered trademark of Dries Buytaert.
  • 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.