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

  • Published on

  • View

  • Download

Embed Size (px)


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


  • 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 @toddrossPhoto: Kristin Hillery
  • Adam Snetman Design Director Thinkso Creative snetman@thinkso.comPhoto: Erica Freudenstein
  • Websites vs.web systems
  • In the old days...Photo: eddiecoyote on Flickr (Creative Commons BY)
  • Websites were measured in pages Each page was maintained by hand as a single HTML lePhoto: eddiecoyote on Flickr (Creative Commons BY)
  • 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 Cross-platform, lots of plugins Free license for open- source do-gooders Drupal components:
  • 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
  • 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...