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
Dont design websites. Design web systems! Creating a Drupal-optimized designTodd Ross NienkerkDrupalCamp Stockholm | May 7, 2011
Todd Nienkerk Co-founder, designer, and developer Four Kitchens firstname.lastname@example.org @toddrossPhoto: Kristin Hillery
Adam Snetman Design Director Thinkso Creative email@example.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
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
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
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
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...