Don't design websites. Design web SYSTEMS! (BADCamp 2011)

Don’t design websites. Design web systems! Creating a Drupal-optimized designTodd NienkerkBADCamp | October 22, 2011

Personal introductions

Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Twitter:@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 ﬁlePhoto: 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 ﬁrst Spiderman story)Photo: Edward Liu via Wikimedia Commons (CC BY-SA)

Designers determine a site’sfunctionality

We communicate functionality todevelopers through sitemaps,wireframes, and design comps

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 proﬁles? • Email notiﬁcations?

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 1Deﬁne the site

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

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 Make money! money!

Business and technicalrequirements Brand Mobile devices SEO guidelines requirements Browser Accessibility compatibility Performance Infrastructure

Who is the audience?Create personas

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

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.

What kind of content, and how will it be organized?Deﬁne content types andcreate a sitemap

Content• In Drupal, di erent kinds of content are called content types• Content types are usually deﬁned by the di erent information they contain

Blog post ProductTitle NameAuthor DescriptionDate published PriceLead image Sizes, colorsBody text Images

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

How will people experience the site?Create wireframes

Wireframes• Illustrate navigation and layout• Demonstrate functionality and how user interfaces work• Identify static vs. dynamically generated elements• Identify unique layouts

Dynamically generated listCurated, “featured” content

Home page layout Interior page layout

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 • Not always a node • View, panel, user proﬁle, form, admin interface...• Blocks• Menus• Primary and secondary links

STEP 4Visual design

Credits

Now you can make informed decisionsabout how to create a compelling ande ective design

• 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

Mood boards and style tiles• Faster and cheaper than iterating on full comps• Involves the client in the design process• Increases client conﬁdence and buy-in• Fun to make

Mood boardsFrom Why Mood Boards Matter by Mindy Wagner

From Why Mood Boards Matter by Mindy Wagner

Style tilesFrom Why Mood Boards Matter by Mindy Wagner

From Style Tiles in Practice by Samantha Warren

• 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

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 ?

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

STEP 1Deﬁne the EL site

What’s the purpose of thesite?• 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

Who is the audience?

What is the content, andhow will it be organized?

Content typesSitemap

Communicate EL’s mission Create secure online tools

EL CommonsDashboard Planner home Student project 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

How will peopleexperience the site?

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

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

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?

Panel!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 site deﬁnition andvisual design

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

Unigrid system by Massimo Vignelli; image source: AisleOne

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

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 gridaccelerates designwhile maintaining orderPhoto: jontidmarsh on Flickr (Creative Commons BY-SA)

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

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 ﬁle

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

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 ﬁnding 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 ﬁelds as lists or comma- separated strings

Conﬁguring Text Formatter

After Text Formatter No theming required!

Find more modules• Drupal.org: Search + most popular modules • drupal.org/project/modules• Follow @drupal_modules on Twitter • twitter.com/drupal_modules

Find more modules• Lullabot’s “Module Monday” blog series • lullabot.com/ideas• The Weekly Drop newsletter • theweeklydrop.com

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.

Because it’s not really asite...

It’s a system.Photo: Snak Shak on Flickr (Creative Commons BY-NC)

And designers are its primary architects.Photo: Salim Virji on Flickr (Creative Commons BY-SA)

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

http://www.scoop.it	28
http://192.168.0.117	17
http://lanyrd.com	7
http://us-w1.rockmelt.com	6
http://paper.li	5
http://a0.twimg.com	2
http://translate.googleusercontent.com	1

Don't design websites. Design web SYSTEMS! (BADCamp 2011)

by Four Kitchens on Oct 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 66

Statistics

Don’t design websites. Design web SYSTEMS! (BADCamp 2011) — Presentation Transcript