don't design websites. design web systems! (drupalcamp stockholm 2011)

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

Post on 17-Aug-2014

15.061 views

Category:

Technology

21 download

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

  • 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 todd@fourkitchens.com @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 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