Successfully reported this slideshow.

Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)

2,066 views

Published on

This presentation was given at Dallas Drupal Days by Aaron Stanush and Todd Nienkerk of Four Kitchens (July 8, 2011)

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

Published in: Design, Technology
  • Be the first to comment

Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)

  1. 1. Don’t design websites. Design web systems! Creating a Drupal-optimized designTodd Nienkerk and Aaron StanushDallas Drupal Days | July 8, 2011
  2. 2. Personal introductions
  3. 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddrossPhoto: Kristin Hillery
  4. 4. Aaron Stanush Co-founder and designer Four Kitchens aaron@fourkitchens.com @aaronstanushPhoto: Kristin Hillery
  5. 5. Adam Snetman Design Director Thinkso Creative snetman@thinkso.comPhoto: Erica Freudenstein
  6. 6. Websites vs.web systems
  7. 7. In the old days...Photo: eddiecoyote on Flickr (Creative Commons BY)
  8. 8. • Websites were measured in “pages” • Each page was maintained by hand as a single HTML filePhoto: eddiecoyote on Flickr (Creative Commons BY)
  9. 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. 10. Today’s websites are actually web systemsPhoto: Snak Shak on Flickr (Creative Commons BY-NC)
  11. 11. Designers are powerful!
  12. 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. 13. Designers determine a site’sfunctionality
  14. 14. We communicate functionality todevelopers through sitemaps, processflow diagrams, wireframes, and designcomps
  15. 15. Even a tiny “log in” link tells a long andcomplicated story
  16. 16. • In order to “log in,” users must also be able to: • Create accounts • Reset their password • Update account information
  17. 17. • And what about... • Permissions? • Public profiles? • Email notifications?
  18. 18. We are a site’s primary architects
  19. 19. Designing a web system
  20. 20. Stop! Close Photoshop!
  21. 21. You wouldn’t paint a house beforebuilding it...So how can you design a websitebefore architecting it?
  22. 22. STEP 1Define the site
  23. 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. 24. What’s the purpose of the site?Gather goals andrequirements
  25. 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. 26. Business and technicalrequirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
  27. 27. What kind of content will the site contain?Define the content types
  28. 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. 29. Blog post ProductTitle NameAuthor DescriptionDate published PriceLead image Sizes, colorsBody text Images
  30. 30. How will content be organized?Create a sitemap
  31. 31. Sitemaps• List all sections/pages of the site• Illustrate how pages are organized within the sections
  32. 32. 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
  33. 33. What will the user experience be like?Create wireframes
  34. 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
  35. 35. Balsamiq Mockups• balsamiq.com• Cross-platform, lots of plugins• Free license for open- source “do-gooders”• Drupal components: bit.ly/drupal-balsamiq
  36. 36. Time and budget permitting...Do some usability testing
  37. 37. Usability testingNapkin Paper Keynote HTML/CSSsketch prototypes prototypes prototypes
  38. 38. STEP 2Choose your platform
  39. 39. Drupal isn’t alwaysthe best solutionFrom The Simpsons Movie
  40. 40. STEP 3Translate everythinginto “Drupalspeak”
  41. 41. Most Drupal sites are comprised of justa few, basic components
  42. 42. • Content • Usually a node, View, or Panel • Can also be a user profile or admin interface
  43. 43. • 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)
  44. 44. • Menus • Added to the page as blocks • Primary and secondary links
  45. 45. STEP 4Visual design
  46. 46. Credits
  47. 47. • 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
  48. 48. • 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?
  49. 49. CASE STUDYExpeditionary Learningelschools.org
  50. 50. 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
  51. 51. Credits
  52. 52. Credits
  53. 53. Credits
  54. 54. Credits
  55. 55. Credits ?
  56. 56. Theory vs. practice1. Define the site 1. Define the site2. Choose your 2. Visual design platform 3. Choose your platform3. Translate to Drupalspeak 4. Translate to Drupalspeak4. Visual design 5. Revise site definition 6. Revise visual design
  57. 57. STEP 1Define the EL site
  58. 58. 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.
  59. 59. And...Translate the newly redesigned EL brandidentity for the web.
  60. 60. Speak to EL’sdiverse audiences Create secure online tools
  61. 61. 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
  62. 62. EL’s content types
  63. 63. 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
  64. 64. Our Results Main nav Page description: HTML tags: Secondary nav Keyword tags: | Stay connected EL Commons (log in) | Contact | Find a school Search ALUMNI REGISTRY OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US Home » Our Results Share Academic Our Results 100% College achievement We measure student success based on three indicators: academ- Acceptance Club Evidence of ic achievement, evidence of engagement, and quality of student engagement [Insert banner image] work. We are developing tools to track student progress so we Our goal for each student is col- Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZSection nav Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagement Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our school and district leaders are deeply engaged in the conversations about how to improve Mapleton Expeditionary education. School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ high-quality work that matters in the real world. Rocky Mountain School of Expeditionary Learning Denver, CO Silverton School of Expedi- tionary Learning
  65. 65. Our Results Page title + introHTML tags: Page description: Sidebar Keyword tags: | Stay connected EL Commons (log in) | Contact | Find a school Search ALUMNI REGISTRY OUR APPROACH OUR RESULTS EDUCATOR RESOURCES PRESS CENTER ABOUT US Home » Our Results Share Academic Our Results 100% College achievement We measure student success based on three indicators: academ- Acceptance Club Evidence of ic achievement, evidence of engagement, and quality of student engagement [Insert banner image] work. We are developing tools to track student progress so we Our goal for each student is col- Quality of stu- can better assess our schools performance—and our own. lege acceptance. These school dent work are members of our 100% Col- lege Acceptance Club. In 2010, Academic achievement the following schools earned a place in the club: Our students are outperforming district averages on state and mandated tests. In many of our schools, students’ test scores exceed state and district averages by Calli Olin Academy substantial margins, with particular success among black and Latino students. Tucson, AZ Learn more> Codman Academy Charter Public School Dorchester, MA Evidence of engagementMain Decatur Discovery Academy Our model fosters more than just academic achievement. Our students are Indianapolis, IN engaged in their own learning and in the community around them while our schoolcontent and district leaders are deeply engaged in the conversations about how to improve education. Mapleton Expeditionary School of the Arts Thornton, CO Learn more> Northpoint Expeditionary Quality of student work Learning Academy We’ve selected ten projects that demonstrate how our students are producing Prescott, AZ high-quality work that matters in the real world. Rocky Mountain School of Expeditionary Learning Denver, CO Silverton School of Expedi- tionary Learning
  66. 66. Planner Homepage Planner | Expeditionary Learning The homepage of the planner shows latest activity up top with http://www.elschools.com/educator-resources/commons/library/some-unique-identifier-here http://www.elschools.com/educator-reso a tabbed view of the complete portfolio down below. Expeditionary Learning SHOP | SUPPORT | ALUMNI | CONTACT | FIND SCHOOL t f Hello, Todd Expeditionary Learning Our Our Educator Press About Our Approach Results Resources Center Us Approach Home | Educator Resources | EL Commons | Planner Home | Educator Resources | EL Commons | Planner Planner Home Expeditions Projects Lessons S TA s P EL COMMONS EL COMMONS Dashboard Latest Activity Dashboard Latest A Create a new: Planner You added a standard to the expedition Its Not Easy Being Green Today at 2:30 pm Planner You add Expedition Create new expeditions, proj- Student Project Archive You linked the project Finding Frogs to Its Not Easy Being Green Today at 1:30 pm ects, lessons or STA setsProject Archive Student here. You linke Create Document Library You created the project Finding Frogs Mar 20, 2010 Document Library You crea BEST PRACTICES You created the expedition Its Not Easy Being Green Feb 18, 2010 BEST PRACTICES You crea Search: PROFESSIONAL DEV. You modified the expedition Building Cultural Bridges Aug 20, 2009 PROFESSIONAL DEV. You mod My Portfolio Choose a scope for search: RECOMMENDED MEDIA for RECOMMENDED MEDIA FUND FOR TEACHERS My Portfolio FUND FOR TEACHERS My Port Expeditions Projects Lessons STAs Search Expedit Created/ Title Grade Level Modified Tools Title Its Not Easy Being Green 4 Feb 25, 2010 Edit Duplicate Delete Finding Frog Building Cultural Bridges 4 Aug 16, 2009 Edit Duplicate Delete Quick links for the various World Capit things you can do to existing Habitats for Humans 4 Jan 5, 2009 Edit Duplicate Delete items. Create Water, Water Everywhere 4 Sep 2, 2008 Edit Duplicate Delete Create New Expedition New items can be created here as well.

×