Abstract image of a woman sitting on books and studying on a laptop

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

Four Kitchens, profile picture
Four Kitchens

The document emphasizes the importance of designing web systems instead of merely websites, outlining a structured approach for creating a Drupal-optimized design. Key steps include defining the site's purpose, content organization, user experience, and visual design, while also addressing the translation of requirements into Drupal components. A case study illustrates how the expeditionary learning organization's site was redesigned to effectively communicate with its diverse audiences and promote collaboration among educators.

DesignTechnology
Related topics:
Web Design Insights
1 of 140
Downloaded 15 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
Don’t design websites. Design web systems! Creating a Drupal-optimized design Todd Nienkerk DrupalCamp LA | August 7, 2011
Personal introductions
Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Twitter:@toddross Photo: Kristin Hillery
Adam Snetman Design Director Thinkso Creative snetman@thinkso.com Photo: Erica Freudenstein
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
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 file Photo: 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 systems Photo: 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’s functionality
We communicate functionality to developers through sitemaps, process flow diagrams, wireframes, and design comps
Even a tiny “log in” link tells a long and complicated story
• In order to “log in,” users must also be able to: • Create accounts • Reset their password • Update account information
• And what about... • Permissions? • Public profiles? • Email notifications?
We are a site’s primary architects
Designing a web system
Stop! Close Photoshop!
You wouldn’t paint a house before building it... So how can you design a website before architecting it?
STEP 1 Define the site
• What’s the purpose of the site? • What kind of content will the site contain? • How will content be organized? • What will the user experience be like?
What’s the purpose of the site? Gather goals and requirements
List your goals Organize a community Raise Provide awareness news Make money! Make money! Host an Make money! event Make money! Make Make money! money!
Business and technical requirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
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 Product Title Name Author Description Date published Price Lead image Sizes, colors Body text Images
How will content be organized? Create a sitemap
Sitemaps • List all sections/pages of the site • Illustrate how pages are organized within the sections
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
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
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
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 testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
STEP 2 Choose your platform
Drupal isn’t always the best solution From The Simpsons Movie
STEP 3 Translate everything into “Drupalspeak”
Most Drupal sites are comprised of just a few, basic components
• Content • Usually a node, View, or Panel • Can also be a user profile or admin interface
• Blocks • Can contain virtually anything: user login, menus, lists of content, custom HTML, Views... • Appear in regions (usually sidebars, but sometimes in the header or footer regions)
• Menus • Added to the page as blocks • Primary and secondary links
STEP 4 Visual design
Credits
• Now you can make informed decisions about how to create a compelling design • Use your sitemaps, process flow diagrams, and wireframes as blueprints • Let Drupal’s default behavior and prevailing modules inform your design
• How will type, color and imagery work together to translate the client’s brand identity to the web? • Are my page templates flexible enough to accommodate the site’s content? • Which site elements will benefit from a more modular, reusable design approach? Which are “one-o s” that require unique design attention?
CASE STUDY Expeditionary Learning elschools.org
Who is Expeditionary Learning? • Expeditionary Learning is an education reform organization that partners with schools, districts and charter boards to bring their project-based learning approach to new and existing schools. • EL partnered with Thinkso Creative and Four Kitchens to relaunch their brand and website
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Credits
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Credits
Credits
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Credits
Credits ?
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 6. Revise visual design
STEP 1 Define the EL site
EL’s site goals • Speak to EL’s diverse audiences: prospective schools and districts, parents, policy makers and the media • Create secure online tools for EL’s network of teachers that would help them collaborate on projects, tap into existing resources and plan their school year.
And... Translate the newly redesigned EL brand identity for the web.
Speak to EL’s diverse audiences Create secure online tools
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
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, 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
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
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
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.
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
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 testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
STEP 2 Design the EL site
Credits
Logo Typography Tagline Imagery Color Credits
1 2 3 4 5 6 7 Credits
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
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
STEP 3 Choose Drupal for EL
STEP 4 Translate the EL site into Drupalspeak
? Sections Sitemap by Thinkso Creative
Primary menu items Sections Contexts
? Section landing pages Sitemap by Thinkso Creative
Panels? Section Views? landing pages Secondary menu
Design by Thinkso Creative
Logo Breadcrumb Search box
Secondary links Primary links
Menu (block)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Block? Block? Block? Block? Block?
Panel! Design by Thinkso Creative
Design by Thinkso Creative
Page node Design by Thinkso Creative
Sitemap by Thinkso Creative
Primary menu item Section Context Sitemap by Thinkso Creative
Section Panel landing page Sitemap by Thinkso Creative
Secondary menu items Section subpages Page nodes Sitemap by Thinkso Creative
STEPS 5 & 6 Revise
Better. Faster. Cheaper. How to accelerate the design and theming phases of your project
Design on a grid (And use a CSS framework to implement it!)
Unigrid system by Massimo Vignelli; image source: AisleOne
Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
Subtraction.com | Grid Computing… and Design
1) Saves time 2) Saves money 3) Reduces frustration
“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)
Enforcing a grid accelerates design while maintaining order Photo: 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 Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don’t start at zero. Start at Drupal
Increase your Drupalspeak vocabulary by leveraging default Drupal behavior and contributed modules
• Core modules • Default blocks and menus • Default theme regions • Default template variables • Listed at the top of each template file
Default output and styling • Know what the default markup and CSS look like • Stark theme: drupal.org/project/stark • Stark is included in Drupal 7 core
Drupal 6 Stark theme: drupal.org/project/stark
Little modules can save you hours of theming • Someone else has probably run into your problem before... and solved it • The trick is finding the module
• The problem: CCK outputs values one-by-one in their own divs
• The (theme) solution: • Override the CCK field’s template file • Write PHP to output each field separated by a comma • There’s got to be a better way!
• Text Formatter: drupal.org/project/textformatter • Lets you output CCK fields as lists or comma- separated strings
Configuring Text Formatter
After Text Formatter No theming required!
Design for change
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 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?
Anticipate expanding navigation • What happens if menu items are added? • How does your design handle multiple levels of navigation?
The site you design today will change tomorrow.
Why?
Because it’s not really a site...
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 a copyright Snetman of Thinkso Creative and of 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.

More Related Content

PDF
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Four Kitchens
 
PDF
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Four Kitchens
 
PDF
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Four Kitchens
 
PDF
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Four Kitchens
 
KEY
It's Not About You: Designing for Web
Paul Hart
 
PPTX
Alternative Professional Development
Student Information Systems & Technology at UCSB
 
PDF
Career Fair Networking
University of British Columbia Career Services
 
PDF
A Leg Up In Linked In
Nathan Acosta
 
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Four Kitchens
 
It's Not About You: Designing for Web
Paul Hart
 
Alternative Professional Development
Student Information Systems & Technology at UCSB
 
Career Fair Networking
University of British Columbia Career Services
 
A Leg Up In Linked In
Nathan Acosta
 

What's hot (6)

PDF
Project management
Simon Collison
 
PPT
Community in HER corner
Her Corner
 
PDF
Keynote
TargetX
 
PDF
Old Dog, New Tricks
Simon Collison
 
PPTX
Alumni Engagement: Gettting Them to Comeback
Agilon LLC
 
PDF
Eportfolio workshop
williamcromar
 
Project management
Simon Collison
 
Community in HER corner
Her Corner
 
Keynote
TargetX
 
Old Dog, New Tricks
Simon Collison
 
Alumni Engagement: Gettting Them to Comeback
Agilon LLC
 
Eportfolio workshop
williamcromar
 
Ad

Viewers also liked (8)

PPT
Final webquest4
amhigdon
 
PPTX
Food compass: Final Report for OAP
Resort Lifestyle Network
 
DOCX
HPH Project Report
Mehul Jain
 
PDF
Fyp list batch-2009 (project approval -rejected list)
Mr SMAK
 
PDF
Final Year Projects (Computer Science 2013) - Syed Ubaid Ali Jafri
Syed Ubaid Ali Jafri
 
PDF
Final Year Projects Computer Science (Information security) -2015
Syed Ubaid Ali Jafri
 
DOCX
FINAL YEAR PROJECT
prince mpwiniza
 
PPTX
Customer ordering system
Suriey Tafar
 
Final webquest4
amhigdon
 
Food compass: Final Report for OAP
Resort Lifestyle Network
 
HPH Project Report
Mehul Jain
 
Fyp list batch-2009 (project approval -rejected list)
Mr SMAK
 
Final Year Projects (Computer Science 2013) - Syed Ubaid Ali Jafri
Syed Ubaid Ali Jafri
 
Final Year Projects Computer Science (Information security) -2015
Syed Ubaid Ali Jafri
 
FINAL YEAR PROJECT
prince mpwiniza
 
Customer ordering system
Suriey Tafar
 
Ad

Similar to Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011) (20)

PDF
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Four Kitchens
 
PDF
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Four Kitchens
 
PPTX
Social media admissions - #POLS2013
Seth Hinz
 
PPTX
Social Media in Schools
Seth Hinz
 
PPTX
Begin at the Beginning and [Blog] On
Melissa A. Venable
 
PPTX
PSEWEB: Pre-Conference Web & Social Media 101/Crash Course
Melissa Cheater
 
PPTX
Secrets to Web Marketing Success
PlattForm Advertising
 
KEY
OU Web Communications - eduWeb 2011
Erin 'Hughes' Yarbrough
 
PPT
Handout website, social media and branding for schools
kconner123
 
KEY
These Kids Today: Usability Testing with Current and Prospective Students
Lori Packer
 
PPT
Active learning presentation 2012 final ppt
kgsinstructor
 
PPTX
Dschoolpresentationalumni
dschool-co
 
KEY
Content Realism - mStoner Webinar
Susan T. Evans
 
PDF
Implementing a Content Strategy During a Brand Refresh: Teach For America Cas...
KristinHodgson
 
PDF
Implementing a Content Strategy During a Brand Refresh: Teach For America Cas...
Khodgson
 
PDF
Implementing a Content Strategy During a Brand Refresh: Teach For America Cas...
KristinHodgson
 
PPTX
S23 Columbia
studio23creative
 
PDF
2010 Wissahickon Summer Institute
Dianne Krause
 
PDF
Sustainable UX
Nick Finck
 
PDF
Your Social Media Journey Begins Here
Pam Broviak
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Four Kitchens
 
Social media admissions - #POLS2013
Seth Hinz
 
Social Media in Schools
Seth Hinz
 
Begin at the Beginning and [Blog] On
Melissa A. Venable
 
PSEWEB: Pre-Conference Web & Social Media 101/Crash Course
Melissa Cheater
 
Secrets to Web Marketing Success
PlattForm Advertising
 
OU Web Communications - eduWeb 2011
Erin 'Hughes' Yarbrough
 
Handout website, social media and branding for schools
kconner123
 
These Kids Today: Usability Testing with Current and Prospective Students
Lori Packer
 
Active learning presentation 2012 final ppt
kgsinstructor
 
Dschoolpresentationalumni
dschool-co
 
Content Realism - mStoner Webinar
Susan T. Evans
 
Implementing a Content Strategy During a Brand Refresh: Teach For America Cas...
KristinHodgson
 
Implementing a Content Strategy During a Brand Refresh: Teach For America Cas...
Khodgson
 
Implementing a Content Strategy During a Brand Refresh: Teach For America Cas...
KristinHodgson
 
S23 Columbia
studio23creative
 
2010 Wissahickon Summer Institute
Dianne Krause
 
Sustainable UX
Nick Finck
 
Your Social Media Journey Begins Here
Pam Broviak
 

More from Four Kitchens (20)

PDF
Four Kitchens Presents: Future of the CMS
Four Kitchens
 
PDF
Four Kitchens: We make BIG websites
Four Kitchens
 
PDF
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
Four Kitchens
 
PDF
Big Websites for Small Screens: ICANN.org Case Study
Four Kitchens
 
PDF
UX design for every screen
Four Kitchens
 
PDF
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Four Kitchens
 
KEY
Building Responsive Websites and Apps with Drupal
Four Kitchens
 
PDF
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Four Kitchens
 
KEY
Intro to Drush
Four Kitchens
 
KEY
Teaching Drupal
Four Kitchens
 
KEY
Big Websites
Four Kitchens
 
KEY
Designing future proof websites
Four Kitchens
 
PDF
Making drupal beautiful with web fonts
Four Kitchens
 
PDF
The type revolutionary's cookbook
Four Kitchens
 
PDF
The Web Chef Cookbook
Four Kitchens
 
PDF
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Four Kitchens
 
KEY
The state of web typography
Four Kitchens
 
PDF
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Four Kitchens
 
KEY
PHP for NonProgrammers (DrupalCon SF 2010)
Four Kitchens
 
PDF
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
Four Kitchens
 
Four Kitchens Presents: Future of the CMS
Four Kitchens
 
Four Kitchens: We make BIG websites
Four Kitchens
 
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
Four Kitchens
 
Big Websites for Small Screens: ICANN.org Case Study
Four Kitchens
 
UX design for every screen
Four Kitchens
 
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Four Kitchens
 
Building Responsive Websites and Apps with Drupal
Four Kitchens
 
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Four Kitchens
 
Intro to Drush
Four Kitchens
 
Teaching Drupal
Four Kitchens
 
Big Websites
Four Kitchens
 
Designing future proof websites
Four Kitchens
 
Making drupal beautiful with web fonts
Four Kitchens
 
The type revolutionary's cookbook
Four Kitchens
 
The Web Chef Cookbook
Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Four Kitchens
 
The state of web typography
Four Kitchens
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Four Kitchens
 
PHP for NonProgrammers (DrupalCon SF 2010)
Four Kitchens
 
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
Four Kitchens
 

Recently uploaded (20)

PDF
This presentation is made for a design foundation class at Avantika Universit...
nitindrak
 
PPTX
Anjali synopsis seminar (15) (1) (1).pptx
ravisuman02498
 
PPT
GIT Bleeding presentation for undergrads
moushumi1042
 
PPTX
WHY UPLOADING IS IMPORTANT TO DOWNLOAD SLIDES.pptx
abdullahinbzamanborn
 
PPTX
Re-Fruit_Business_Plan_Presentation.pptx
asifnafish
 
PDF
Design and Work Portfolio by Karishma Goradia
karishmagoradia1
 
PPTX
lecture-8-entropy-and-the-second-law-of-thermodynamics.pptx
AhmedSalem711613
 
PPTX
History.pptxjsjsiisjjsjsidididididididksk
deepanshbhatnagar53
 
PPTX
Applied Anthropology Report.pptx paulapuhin
BRYONTAPUHIN1
 
PDF
Timeless Interiors by PEE VEE INTERIORS
peeveeinteriors
 
PDF
xử lý ảnh thu nhận và xử lý trên FPGA ứng dụng
oHngTrng
 
PPT
Sustainable cities- concepts and approaches
JIT KUMAR GUPTA
 
PDF
How Animation is Used by Sports Teams and Leagues
Neil Horowitz
 
PDF
crrative nonfiction lesson 2 liteary genres
pleaselangbabyilovey
 
PPTX
Textile fibers are classified based on their origin, composition, and structu...
vishaltrivedi2289
 
PDF
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
SarouarVloge360
 
PDF
Humans do not die they live happily without
abhishekkharwar808
 
PPTX
immunotherapy.pptx in pregnancy outcome f
sumansachdev98
 
PPT
416170345656655446879265596558865588.ppt
1422774761
 
PDF
Control and coordination isdorjdmdndjke
shauryasin2205
 
This presentation is made for a design foundation class at Avantika Universit...
nitindrak
 
Anjali synopsis seminar (15) (1) (1).pptx
ravisuman02498
 
GIT Bleeding presentation for undergrads
moushumi1042
 
WHY UPLOADING IS IMPORTANT TO DOWNLOAD SLIDES.pptx
abdullahinbzamanborn
 
Re-Fruit_Business_Plan_Presentation.pptx
asifnafish
 
Design and Work Portfolio by Karishma Goradia
karishmagoradia1
 
lecture-8-entropy-and-the-second-law-of-thermodynamics.pptx
AhmedSalem711613
 
History.pptxjsjsiisjjsjsidididididididksk
deepanshbhatnagar53
 
Applied Anthropology Report.pptx paulapuhin
BRYONTAPUHIN1
 
Timeless Interiors by PEE VEE INTERIORS
peeveeinteriors
 
xử lý ảnh thu nhận và xử lý trên FPGA ứng dụng
oHngTrng
 
Sustainable cities- concepts and approaches
JIT KUMAR GUPTA
 
How Animation is Used by Sports Teams and Leagues
Neil Horowitz
 
crrative nonfiction lesson 2 liteary genres
pleaselangbabyilovey
 
Textile fibers are classified based on their origin, composition, and structu...
vishaltrivedi2289
 
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
SarouarVloge360
 
Humans do not die they live happily without
abhishekkharwar808
 
immunotherapy.pptx in pregnancy outcome f
sumansachdev98
 
416170345656655446879265596558865588.ppt
1422774761
 
Control and coordination isdorjdmdndjke
shauryasin2205
 

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

  • 1. Don’t design websites. Design web systems! Creating a Drupal-optimized design Todd Nienkerk DrupalCamp LA | August 7, 2011
  • 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens [email protected] Twitter:@toddross Photo: Kristin Hillery
  • 4. Adam Snetman Design Director Thinkso Creative [email protected] 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, process flow diagrams, 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?
  • 23. • 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?
  • 24. What’s the purpose of the site? Gather goals and requirements
  • 25. List your goals Organize a community Raise Provide awareness news Make money! Make money! Host an Make money! event Make money! Make Make money! money!
  • 26. Business and technical requirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
  • 27. What kind of content will the site contain? Define the content types
  • 28. • In Drupal, di erent kinds of content are called content types • Content types are usually defined by the di erent information they contain
  • 29. Blog post Product Title Name Author Description Date published Price Lead image Sizes, colors Body text Images
  • 30. How will content be organized? Create a sitemap
  • 31. Sitemaps • List all sections/pages of the site • Illustrate how pages are organized within the sections
  • 32. 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
  • 33. What will the user experience be like? Create wireframes
  • 34. 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
  • 36. Balsamiq Mockups • balsamiq.com • Cross-platform, lots of plugins • Free license for open- source “do-gooders” • Drupal components: bit.ly/drupal-balsamiq
  • 37. Time and budget permitting... Do some usability testing
  • 38. Usability testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
  • 39. STEP 2 Choose your platform
  • 40. Drupal isn’t always the best solution From The Simpsons Movie
  • 41. STEP 3 Translate everything into “Drupalspeak”
  • 42. Most Drupal sites are comprised of just a few, basic components
  • 43. • Content • Usually a node, View, or Panel • Can also be a user profile or admin interface
  • 44. • 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)
  • 45. • Menus • Added to the page as blocks • Primary and secondary links
  • 48. • Now you can make informed decisions about how to create a compelling design • Use your sitemaps, process flow diagrams, and wireframes as blueprints • Let Drupal’s default behavior and prevailing modules inform your design
  • 49. • 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?
  • 51. 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
  • 59. Credits ?
  • 60. 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 6. Revise visual design
  • 62. 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.
  • 63. And... Translate the newly redesigned EL brand identity for the web.
  • 64. Speak to EL’s diverse audiences Create secure online tools
  • 65. 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
  • 67. 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
  • 68. 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
  • 69. 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
  • 71. 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.
  • 72. 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
  • 73. 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
  • 74. EL’s usability testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
  • 75. STEP 2 Design the EL site
  • 77. Logo Typography Tagline Imagery Color Credits
  • 78. 1 2 3 4 5 6 7 Credits
  • 79. Homepage Landing page Interior
  • 81. 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
  • 88. STEP 4 Translate the EL site into Drupalspeak
  • 89. ? Sections Sitemap by Thinkso Creative
  • 90. Primary menu items Sections Contexts
  • 91. ? Section landing pages Sitemap by Thinkso Creative
  • 92. Panels? Section Views? landing pages Secondary menu
  • 93. Design by Thinkso Creative
  • 94. Logo Breadcrumb Search box
  • 95. Secondary links Primary links
  • 98. Block? Block? Block? Block? Block?
  • 100. Design by Thinkso Creative
  • 101. Page node Design by Thinkso Creative
  • 102. Sitemap by Thinkso Creative
  • 103. Primary menu item Section Context Sitemap by Thinkso Creative
  • 104. Section Panel landing page Sitemap by Thinkso Creative
  • 105. Secondary menu items Section subpages Page nodes Sitemap by Thinkso Creative
  • 106. STEPS 5 & 6 Revise
  • 107. Better. Faster. Cheaper. How to accelerate the design and theming phases of your project
  • 108. Design on a grid (And use a CSS framework to implement it!)
  • 109. Unigrid system by Massimo Vignelli; image source: AisleOne
  • 110. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
  • 111. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
  • 112. Subtraction.com | Grid Computing… and Design
  • 113. 1) Saves time 2) Saves money 3) Reduces frustration
  • 114. “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)
  • 115. Enforcing a grid accelerates design while maintaining order Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
  • 116. 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
  • 119. Don’t start at zero. Start at Drupal
  • 120. Increase your Drupalspeak vocabulary by leveraging default Drupal behavior and contributed modules
  • 121. • Core modules • Default blocks and menus • Default theme regions • Default template variables • Listed at the top of each template file
  • 122. 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
  • 123. Drupal 6 Stark theme: drupal.org/project/stark
  • 124. 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
  • 125. • The problem: CCK outputs values one-by-one in their own divs
  • 126. • 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!
  • 127. • Text Formatter: drupal.org/project/textformatter • Lets you output CCK fields as lists or comma- separated strings
  • 129. After Text Formatter No theming required!
  • 131. 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?
  • 132. 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?
  • 133. Anticipate expanding navigation • What happens if menu items are added? • How does your design handle multiple levels of navigation?
  • 134. The site you design today will change tomorrow.
  • 135. Why?
  • 136. Because it’s not really a site...
  • 137. It’s a system. Photo: Snak Shak on Flickr (Creative Commons BY-NC)
  • 139. 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. • Drupal is a registered trademark of Dries Buytaert.
  • 140. 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.