Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)

2,043 views

Published on

This presentation was given at DrupalCon London by Todd Nienkerk of Four Kitchens and Adam Snetman of Thinkso Creative (August 24, 2011)


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

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,043
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
65
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)

  1. 1. Don’t design websites. Design web systems! Todd Nienkerk and Adam SnetmanDrupalCon London | August 24, 2011
  2. 2. Personal introductions
  3. 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddrossPhoto: Kristin Hillery
  4. 4. Adam Snetman Design Director Thinkso Creative snetman@thinkso.comPhoto: Erica Freudenstein
  5. 5. Websites vs.web systems
  6. 6. In the old days...Photo: eddiecoyote on Flickr (Creative Commons BY)
  7. 7. • Websites were measured in “pages” • Each page was maintained by hand as a single HTML filePhoto: eddiecoyote on Flickr (Creative Commons BY)
  8. 8. 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
  9. 9. Today’s websites are actually web systemsPhoto: Snak Shak on Flickr (Creative Commons BY-NC)
  10. 10. Designers are powerful!
  11. 11. “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)
  12. 12. Designers determine a site’sfunctionality
  13. 13. We communicate functionality todevelopers through sitemaps,wireframes, and design comps
  14. 14. Even a tiny “log in” link tells a long andcomplicated story
  15. 15. • In order to “log in,” users must also be able to: • Create accounts • Reset their password • Update account information
  16. 16. • And what about... • Permissions? • Public profiles? • Email notifications?
  17. 17. We are a site’s primary architects
  18. 18. Designing a web system
  19. 19. Stop! Close Photoshop!
  20. 20. You wouldn’t paint a house beforebuilding it...So how can you design a websitebefore architecting it?
  21. 21. STEP 1Define the site
  22. 22. • What’s the purpose of the site?• Who is the audience?• What is the content, and how will it be organized?• How will people experience the site?
  23. 23. What’s the purpose of the site?Gather goals andrequirements
  24. 24. Business goals Build a community Raise Generate awareness buzz Make money! Make money! Make Make money! money!
  25. 25. Requirements and constraints Brand Mobile devices SEO guidelines requirements Browser Accessibility compatibility Performance Infrastructure
  26. 26. Who is the audience?Create personas
  27. 27. Personas• Make a list of target audiences• Create one persona for each target audience• Give each persona (at least) a name, age, face, reason for visiting, and “wish list” of tasks
  28. 28. Persona: NYC-based graphic designers Adam, 34 Reason for visiting: Adam’s wardrobe is roughly 80% plaid shirts. He buys a new plaid shirt most months, and a friend recommended sweet-plaid-shirts.com to him as a good place to shop. Website wish list: • Sort available shirts by various criteria. (most popular, newly added, etc.) • See which shirts friends have purchased. • Sign up for a an account to save preferences and make repeat visits quick and easy.
  29. 29. What is the content, and how will it be organized?Define content types andcreate a sitemap
  30. 30. Content• In Drupal, di erent kinds of content are called content types• Content types are usually defined by the di erent information they contain
  31. 31. Blog post ProductTitle NameAuthor DescriptionDate published PriceBody Options (sizes, colors)Lead image Images
  32. 32. Sitemaps• List all sections/pages of the site• Illustrate how pages are organized within the sections
  33. 33. 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
  34. 34. How will people experience the site?Create wireframes
  35. 35. Wireframes• Illustrate navigation and layout• Demonstrate functionality and how user interfaces work• Identify static vs. dynamically generated elements• Identify unique layouts
  36. 36. Nav
  37. 37. UI
  38. 38. Dynamically generated listCurated, “featured” content
  39. 39. Home page layout Interior page layout
  40. 40. Balsamiq Mockups• balsamiq.com• Cross-platform, lots of plugins• Free license for open- source “do-gooders”• Drupal components: bit.ly/drupal-balsamiq
  41. 41. And time & budget permitting...Do some usability testing
  42. 42. Usability testingNapkin Paper Keynote HTML/CSSsketch prototypes prototypes prototypes
  43. 43. STEP 2Choose your platform
  44. 44. Drupal isn’t alwaysthe best solution
  45. 45. Drupal isn’t alwaysthe best solutionFrom The Simpsons Movie
  46. 46. STEP 3Translate everythinginto “Drupalspeak”
  47. 47. Most Drupal sites are comprised of justa few, basic components
  48. 48. • Content • Not always a node • View, panel, user profile, form, admin interface...• Blocks• Menus• Primary and secondary links
  49. 49. STEP 4Visual design
  50. 50. Credits
  51. 51. Now you can make informed decisionsabout how to create a compelling ande ective design
  52. 52. • How will type, color, and imagery work together to translate the client’s brand identity to the web?• Generate discussion with the client using mood boards and style tiles
  53. 53. Mood boards and style tiles• Faster and cheaper than iterating on full comps• Involves the client in the design process• Increases client confidence and buy-in• Fun to make
  54. 54. Mood boardsFrom Why Mood Boards Matter by Mindy Wagner
  55. 55. From Why Mood Boards Matter by Mindy Wagner
  56. 56. Style tilesFrom Why Mood Boards Matter by Mindy Wagner
  57. 57. From Style Tiles in Practice by Samantha Warren
  58. 58. • Avoiding a Frankenstein Website Design: Collaborating with Clients • bit.ly/collab-with-clients• Why Mood Boards Matter • bit.ly/mood-boards• Style Tiles in Practice • bit.ly/style-tiles
  59. 59. CASE STUDYExpeditionary Learningelschools.org
  60. 60. 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
  61. 61. Credits
  62. 62. Credits
  63. 63. Credits
  64. 64. Credits
  65. 65. Credits ?
  66. 66. Theory vs. practice1. Define the site 1. Define the site2. Choose your 2. Visual design platform 3. Choose your platform3. Translate to Drupalspeak 4. Translate to Drupalspeak4. Visual design 5. Revise site definition and visual design
  67. 67. STEP 1Define the EL site
  68. 68. What’s the purpose of thesite?• Communicate EL’s mission, vision, and methods• Translate the new brand identity for the web• Create secure online tools for EL’s network of teachers that would help them collaborate on projects, tap into existing resources and plan their school year
  69. 69. Who is the audience?
  70. 70. What is the content, andhow will it be organized?
  71. 71. Content typesSitemap
  72. 72. Communicate EL’s mission Create secure online tools
  73. 73. 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
  74. 74. How will peopleexperience the site?
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. 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.

×