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

of 138/138
Todd Ross Nienkerk DrupalCamp Stockholm | May 7, 2011 Don’t design websites. Design web systems! Creating a Drupal-optimized design
  • date post

    17-Aug-2014
  • Category

    Technology

  • view

    15.256
  • download

    61

Embed Size (px)

description

This presentation was given at DrupalCamp Stockholm by Todd Nienkerk of Four Kitchens (May 7, 2011) For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

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

  • Dont design websites. Design web systems! Creating a Drupal-optimized designTodd Ross NienkerkDrupalCamp Stockholm | May 7, 2011
  • Personal introductions
  • Todd Nienkerk Co-founder, designer, and developer Four Kitchens [email protected] @toddrossPhoto: Kristin Hillery
  • Adam Snetman Design Director Thinkso Creative [email protected]: Erica Freudenstein
  • Websites vs.web systems
  • In the old days...Photo: eddiecoyote on Flickr (Creative Commons BY)
  • Websites were measured in pages Each page was maintained by hand as a single HTML lePhoto: eddiecoyote on Flickr (Creative Commons BY)
  • Todays 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
  • Todays websites are actually web systemsPhoto: Snak Shak on Flickr (Creative Commons BY-NC)
  • Designers are powerful!
  • With great power there must also come... great responsibility! STAN LEE Amazing Fantasy #15, August 1962 (the rst Spiderman story)Photo: Edward Liu via Wikimedia Commons (CC BY-SA)
  • Designers determine a sitesfunctionality
  • We communicate functionality todevelopers through sitemaps, processow diagrams, wireframes, and designcomps
  • Even a tiny log in link tells a long andcomplicated story
  • In order to log in, users must also be able to: Create accounts Reset their password Update account information
  • And what about... Permissions? Public proles? Email notications?
  • We are a sites primary architects
  • Designing a web system
  • Stop! Close Photoshop!
  • You wouldnt paint a house beforebuilding it...So how can you design a websitebefore architecting it?
  • STEP 1Dene the site
  • Whats 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?
  • Whats the purpose of the site?Gather goals andrequirements
  • List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make money! Make money! Make money! Make Make money! money!
  • Business and technicalrequirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
  • How will content be organized?Create a sitemap
  • Sitemaps List all sections/pages of the site Illustrate how pages are organized within the sections
  • Homepage Primary menu Most Science Sports Business Arts popular Blog post Blog post Blog post Blog post Blog post Secondary menu About us Terms of use Contact us User tools My account Search
  • What kind of content will the site contain?Dene the content types
  • In Drupal, di erent kinds of content are called content types Content types are usually dened by the di erent information they contain
  • Blog post ProductTitle NameAuthor DescriptionDate published PriceBody Options (sizes, colors)Lead image Images
  • What will the user experience be like?Create wireframes
  • Wireframes Illustrate page layout and functionality Demonstrate how a user will navigate the site Demonstrate how user interfaces/interactive tools work Identify static and dynamically-generated content areas
  • My account | Log out Blog Logo SearchScienceSports Most popularBusiness postsArts Content AdvertisementCopyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
  • Balsamiq Mockups balsamiq.com Cross-platform, lots of plugins Free license for open- source do-gooders Drupal components: bit.ly/drupal-balsamiq
  • Time and budget permitting...Do some usability testing
  • Usability testingNapkin Paper Keynote HTML/CSSsketch prototypes prototypes prototypes
  • STEP 2Choose your platform
  • Drupal isnt alwaysthe best solutionFrom The Simpsons Movie
  • STEP 3Translate everythinginto Drupalspeak
  • Most Drupal sites are comprised of justa few, basic components
  • Content Usually a node, view, or panel Can also be a user prole or admin interface
  • Blocks Can contain virtually anything: user login, menus, lists of content, custom HTML, views... Appear in regions (usually sidebars, but sometimes in the header or footer regions) Menus Added to the page as blocks
  • Primary and secondary links Special kinds of menus Logo Search box Slogan, mission statement, and footer message
  • STEP 4Visual design
  • Credits
  • Now you can make informed decisions about how to create a compelling and e ective design Use your sitemaps, process ow diagrams, and wireframes as blueprints Let Drupals default components and behavior inform your design
  • How will type, color and imagery work together to translate the clients brand identity to the web? Are my page templates exible enough to accommodate the sites content? Which site elements will benet from a more modular, reusable design approach? Which are one-o s that require unique design attention?
  • CASE STUDYExpeditionary Learningelschools.org
  • Who is ExpeditionaryLearning? Expeditionary Learning is an education reform organization that partners with schools, districts and charter boards to bring their project-based learning approach to new and existing schools. EL partnered with Thinkso Creative and Four Kitchens to relaunch their brand and website
  • Credits
  • Credits
  • Credits
  • Credits
  • Credits ?
  • Theory vs. practice1. Dene the site 1. Dene the site2. Choose your 2. Visual design platform 3. Choose your platform3. Translate to Drupalspeak 4. Translate to Drupalspeak4. Visual design 5. Revise site denition 6. Revise visual design
  • STEP 1Dene the EL site
  • ELs site goals Speak to ELs diverse audiences: prospective schools and districts, parents, policy makers and the media Create secure online tools for ELs network of teachers that would help them collaborate on projects, tap into existing resources and plan their school year.
  • And...Translate the newly redesigned EL brandidentity for the web.
  • Speak to ELsdiverse audiences Create secure online tools
  • EL CommonsDashboard Planner home Student proj- ect archive Document library Expeditions Projects Lessons STAs Overview Overview Overview Overview Planner Create Create Create Create Groups Expedition Project Lesson STA Discussion View/Edit View/Edit View/Edit View/Edit boards Expedition Project Lesson STA Job listings Event Search Public registration planner items
  • ELs 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 performanceand 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 Weve 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 performanceand our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZSection nav Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagement Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our school and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary education. School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy Weve 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 performanceand our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZ Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagementMain Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our schoolcontent and district leaders are deeply engaged in the conversations about how to improve education. Mapleton Expeditionary School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy Weve selected ten projects that demonstrate how our students are producing Prescott, AZ high-quality work that matters in the real world. Rocky Mountain School of Expeditionary Learning Denver, CO Silverton School of Expedi- tionary Learning
  • Planner Homepage Planner | Expeditionary Learning The homepage of the planner shows latest activity up top with http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here http://www.elschools.com/educator-reso a tabbed view of the complete portfolio down below. Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning Our Our Educator Press About Our Approach Results Resources Center Us Approach Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Planner Home Expeditions Projects Lessons S TA s P EL COMMONS EL COMMONS Dashboard Latest Activity Dashboard Latest A Create a new: Planner You added a standard to the expedition Its Not Easy Being Green Today at 2:30 pm Planner You add Expedition Create new expeditions, proj- Student Project Archive You linked the project Finding Frogs to Its Not Easy Being Green Today at 1:30 pm ects, lessons or STA setsProject Archive Student here. You linke Create Document Library You created the project Finding Frogs Mar 20, 2010 Document Library You crea BEST PRACTICES You created the expedition Its Not Easy Being Green Feb 18, 2010 BEST PRACTICES You crea Search: PROFESSIONAL DEV. You modied 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 Modied Tools Title Its Not Easy Being Green 4 Feb 25, 2010 Edit Duplicate Delete Finding Frog Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete Quick links for the various World Capit things you can do to existing Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete items. Create Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete Create New Expedition New items can be created here as well.
  • Planner Create new expedition Document Library Homepage Planner Expeditions landing page Planner | Expeditionary Learning The Create New... view be- Planner | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning Document Library | Expeditionary Learning Planner | Expeditionary Learning Planner | Expeditionary Learning gins with a few form elements http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here that are required. The informa- http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identier-here http://www.elschools.com/educator-resources/commons/library/some-unique-identier-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 Modied Tools Expedition Cancel Planner Title Grade Level Modied Tools Expedition Planner Student Project Archive bers of the Commons that have Student Project Archive Student Project Archive Everywhere Any Student Project Archive PDF Image Student Project Archive Student Project Archive Its Not Easy Being Green 4 Fields TBD Feb 25, 2010 Edit Duplicate Delete Student Project Archive Finding Frogs 4 Feb 25, 2010 Edit Duplicate Delete Student Project Archive School Oliver Hoover Change School Oliver Hoover Change School Oliver Hoover Change Document Library Collaborators: permission to view Document Library and edit My state Linked to: Editable Document Library (jpg, gif, etc.) Linked to: Document Library Create Create Document Library Document Library Document Library Document Library Grade level 4 --Change grade -- chose Julia Zimmerman Remove this item. Only owners (initial Grade level 4 --Change grade -- chose My school This project is not linked to category: Main (Word, Excel, PPT) Grade level 4 --Change grade -- chose This lesson is not linked to Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete World Capitals Map 4 Aug 16, 2009 Edit Duplicate Delete any expeditions. any projects. BEST PRACTICES Marcus Flint Remove creators) of items can add and BEST PRACTICES BEST PRACTICES Any BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES BEST PRACTICES Discipline and Add collaborators remove collaborators. Format -- chose format -- Create link Usefulness rating is at least: Uploaded after: Discipline -- chose discipline -- Create link Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete Search: Create New Project Search: PROFESSIONAL DEV. PROFESSIONAL DEV.