SlideShare a Scribd company logo
1 of 138
Download to read offline
Don’t design websites.
 Design web systems!
 Creating a Drupal-optimized design




Todd Ross Nienkerk
DrupalCamp Stockholm | May 7, 2011
Personal introductions
Todd Nienkerk
                         Co-founder, designer, and developer
                         Four Kitchens

                         todd@fourkitchens.com

                         @toddross




Photo: Kristin Hillery
Adam Snetman
                            Design Director
                            Thinkso Creative

                            snetman@thinkso.com




Photo: Erica Freudenstein
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
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 file




Photo: eddiecoyote on Flickr (Creative Commons BY)
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
Today’s websites are
 actually web systems
Photo: 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 first Spiderman story)




Photo: Edward Liu via Wikimedia Commons (CC BY-SA)
Designers determine a site’s
functionality
We communicate functionality to
developers through sitemaps, process
flow diagrams, wireframes, and design
comps
Even a tiny “log in” link tells a long and
complicated 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 profiles?

 • Email notifications?
We are a site’s primary architects
Designing a web system
Stop! Close Photoshop!
You wouldn’t paint a house before
building it...
So how can you design a website
before architecting it?
STEP 1

Define the site
• 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?
What’s the purpose of the site?

Gather goals and
requirements
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 technical
requirements

   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
Home
page

  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?

Define the content types
• In Drupal, di erent kinds of content are called
 content types
• Content types are usually defined by the di erent
 information they contain
Blog post        Product
Title            Name

Author           Description

Date published   Price

Body             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
                                                                Search

Science
Sports
                                                             Most popular
Business
                                                                posts
Arts


                                Content


                                                             Advertisement




Copyright 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 testing



Napkin   Paper        Keynote      HTML/CSS
sketch   prototypes   prototypes   prototypes
STEP 2

Choose your platform
Drupal isn’t always
the best solution




From The Simpsons Movie
STEP 3

Translate everything
into “Drupalspeak”
Most Drupal sites are comprised of just
a few, basic components
• Content

 • Usually a node, view, or panel

 • Can also be a user profile 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 4

Visual design
Credits
• Now you can make informed decisions about how
 to create a compelling and e ective design
• Use your sitemaps, process flow diagrams, and
 wireframes as blueprints
• Let Drupal’s default components and behavior
 inform your design
• 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?
CASE STUDY


Expeditionary Learning
elschools.org
Who is Expeditionary
Learning?
• 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
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Credits
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Credits
Credits
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Credits
Credits
          ?
Theory vs. practice


1. Define the site   1. Define the site

2. Choose your      2. Visual design
   platform
                    3. Choose your platform
3. Translate to
   Drupalspeak      4. Translate to
                       Drupalspeak
4. Visual design
                    5. Revise site definition

                    6. Revise visual design
STEP 1

Define the EL site
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.
And...


Translate the newly redesigned EL brand
identity for the web.
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Speak to EL’s
diverse audiences




             Create secure
             online tools
EL Commons


Dashboard            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
EL’s 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 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
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, AZ

Section 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
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 engagement
Main
                                                                                                                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

content                    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
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
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 It's 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 It's 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 It's 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

                                          It's 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.
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)

More Related Content

What's hot

Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Robert Stribley
 
A User's Perspective: Innovating Smarter with Invention Machine Goldfire
A User's Perspective: Innovating Smarter with Invention Machine GoldfireA User's Perspective: Innovating Smarter with Invention Machine Goldfire
A User's Perspective: Innovating Smarter with Invention Machine GoldfireIHS Goldfire
 
Design and processes
Design and processesDesign and processes
Design and processesClifford Choy
 
Reviewing the human centered design toolkit by ide oorg
Reviewing the human centered design toolkit by ide oorgReviewing the human centered design toolkit by ide oorg
Reviewing the human centered design toolkit by ide oorgBoukje Vastbinder
 
Shelley: Metaphor Behaviour and Projects
Shelley: Metaphor Behaviour and ProjectsShelley: Metaphor Behaviour and Projects
Shelley: Metaphor Behaviour and ProjectsArthur Shelley
 
EST 200, Design Thinking
EST 200, Design ThinkingEST 200, Design Thinking
EST 200, Design ThinkingCKSunith1
 
Lifeworks - World at Work Presentation
Lifeworks - World at Work PresentationLifeworks - World at Work Presentation
Lifeworks - World at Work PresentationDavid McGinty
 
"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked
"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked
"So UX Designers Just Make Things Pretty, Right?" and Other Myths DebunkedKaitlan Chu
 
Practicing What We Preach: designing usage centered deliverables
Practicing What We Preach: designing usage centered deliverablesPracticing What We Preach: designing usage centered deliverables
Practicing What We Preach: designing usage centered deliverablesAviva Rosenstein
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessMichael Zarro, Ph.D.
 
How do you build an innovation culture in your team? – An 8-Step Guide
How do you build an innovation culture in your team? – An 8-Step GuideHow do you build an innovation culture in your team? – An 8-Step Guide
How do you build an innovation culture in your team? – An 8-Step GuidePinkesh Shah
 
Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...
Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...
Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...LUXr
 
BLUG 2012: Get social but not THAT social
BLUG 2012: Get social but not THAT socialBLUG 2012: Get social but not THAT social
BLUG 2012: Get social but not THAT socialFemke Goedhart
 
User Experience Design Fundamentals - Part 3: From People to Product
User Experience Design Fundamentals - Part 3: From People to ProductUser Experience Design Fundamentals - Part 3: From People to Product
User Experience Design Fundamentals - Part 3: From People to ProductLaura B
 
Bamboostones Evaluating the Experiment
Bamboostones Evaluating the ExperimentBamboostones Evaluating the Experiment
Bamboostones Evaluating the ExperimentVenturespring
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of InterfaceChristina Wodtke
 

What's hot (19)

Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17
 
iAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UXiAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UX
 
A User's Perspective: Innovating Smarter with Invention Machine Goldfire
A User's Perspective: Innovating Smarter with Invention Machine GoldfireA User's Perspective: Innovating Smarter with Invention Machine Goldfire
A User's Perspective: Innovating Smarter with Invention Machine Goldfire
 
Design and processes
Design and processesDesign and processes
Design and processes
 
Reviewing the human centered design toolkit by ide oorg
Reviewing the human centered design toolkit by ide oorgReviewing the human centered design toolkit by ide oorg
Reviewing the human centered design toolkit by ide oorg
 
Shelley: Metaphor Behaviour and Projects
Shelley: Metaphor Behaviour and ProjectsShelley: Metaphor Behaviour and Projects
Shelley: Metaphor Behaviour and Projects
 
EST 200, Design Thinking
EST 200, Design ThinkingEST 200, Design Thinking
EST 200, Design Thinking
 
Lifeworks - World at Work Presentation
Lifeworks - World at Work PresentationLifeworks - World at Work Presentation
Lifeworks - World at Work Presentation
 
"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked
"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked
"So UX Designers Just Make Things Pretty, Right?" and Other Myths Debunked
 
Practicing What We Preach: designing usage centered deliverables
Practicing What We Preach: designing usage centered deliverablesPracticing What We Preach: designing usage centered deliverables
Practicing What We Preach: designing usage centered deliverables
 
Utah PMA Quarterly Meeting, June, 2010
Utah PMA Quarterly Meeting, June, 2010Utah PMA Quarterly Meeting, June, 2010
Utah PMA Quarterly Meeting, June, 2010
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense Process
 
How do you build an innovation culture in your team? – An 8-Step Guide
How do you build an innovation culture in your team? – An 8-Step GuideHow do you build an innovation culture in your team? – An 8-Step Guide
How do you build an innovation culture in your team? – An 8-Step Guide
 
Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...
Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...
Rally Roundtable : Lean Startup + User Experience = Awesome, July 11, 2012 [S...
 
BLUG 2012: Get social but not THAT social
BLUG 2012: Get social but not THAT socialBLUG 2012: Get social but not THAT social
BLUG 2012: Get social but not THAT social
 
Creative thinking
Creative thinkingCreative thinking
Creative thinking
 
User Experience Design Fundamentals - Part 3: From People to Product
User Experience Design Fundamentals - Part 3: From People to ProductUser Experience Design Fundamentals - Part 3: From People to Product
User Experience Design Fundamentals - Part 3: From People to Product
 
Bamboostones Evaluating the Experiment
Bamboostones Evaluating the ExperimentBamboostones Evaluating the Experiment
Bamboostones Evaluating the Experiment
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
 

Viewers also liked

Goals Of Software Design - The main goals
Goals Of Software Design - The main goalsGoals Of Software Design - The main goals
Goals Of Software Design - The main goalsparag
 
Framework for Designing and Evaluating Game Achievements
Framework for Designing and Evaluating Game AchievementsFramework for Designing and Evaluating Game Achievements
Framework for Designing and Evaluating Game AchievementsJuho Hamari
 
Design Thinking in Business: An Introduction to Imagineering and an Illustrat...
Design Thinking in Business: An Introduction to Imagineering and an Illustrat...Design Thinking in Business: An Introduction to Imagineering and an Illustrat...
Design Thinking in Business: An Introduction to Imagineering and an Illustrat...Mario Ramirez Reyes
 
Disney diversity
Disney diversityDisney diversity
Disney diversityLogan Hays
 
The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...
The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...
The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...Lou Prosperi
 
Disney: Leading the Way Into Diversity
Disney: Leading the Way Into Diversity Disney: Leading the Way Into Diversity
Disney: Leading the Way Into Diversity Natalie Zarate
 

Viewers also liked (8)

Goals Of Software Design - The main goals
Goals Of Software Design - The main goalsGoals Of Software Design - The main goals
Goals Of Software Design - The main goals
 
Framework for Designing and Evaluating Game Achievements
Framework for Designing and Evaluating Game AchievementsFramework for Designing and Evaluating Game Achievements
Framework for Designing and Evaluating Game Achievements
 
Design Thinking in Business: An Introduction to Imagineering and an Illustrat...
Design Thinking in Business: An Introduction to Imagineering and an Illustrat...Design Thinking in Business: An Introduction to Imagineering and an Illustrat...
Design Thinking in Business: An Introduction to Imagineering and an Illustrat...
 
Disney diversity
Disney diversityDisney diversity
Disney diversity
 
The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...
The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...
The Imagineering Model: Applying Disney Theme Park Design Principles to Instr...
 
Disney: Leading the Way Into Diversity
Disney: Leading the Way Into Diversity Disney: Leading the Way Into Diversity
Disney: Leading the Way Into Diversity
 
Codesmells for AspectJ
Codesmells for AspectJCodesmells for AspectJ
Codesmells for AspectJ
 
Atomic design
Atomic designAtomic design
Atomic design
 

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

Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Four Kitchens
 
Using E-portfolios to Showcase Your Work, Experience, and Skills
Using E-portfolios to Showcase Your Work, Experience, and SkillsUsing E-portfolios to Showcase Your Work, Experience, and Skills
Using E-portfolios to Showcase Your Work, Experience, and SkillsLisa Chow
 
E-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians MeetupE-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians MeetupLisa Chow
 
Creating a Winning Content Strategy
Creating a Winning Content StrategyCreating a Winning Content Strategy
Creating a Winning Content StrategyEktron
 
Rock Your School's Website - Stacy Jagodowski & Peter Baron
Rock Your School's Website - Stacy Jagodowski & Peter BaronRock Your School's Website - Stacy Jagodowski & Peter Baron
Rock Your School's Website - Stacy Jagodowski & Peter BaronBlackbaud
 
Professional Portfolios for the Creative Professional
Professional Portfolios for the Creative ProfessionalProfessional Portfolios for the Creative Professional
Professional Portfolios for the Creative ProfessionalLouellen Coker
 
Building a website in less than 3h and less than $100!
Building a website in less than 3h and less than $100! Building a website in less than 3h and less than $100!
Building a website in less than 3h and less than $100! Agence Tesla
 
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and SkillsSLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and SkillsLisa Chow
 
Professional Portfolios
Professional PortfoliosProfessional Portfolios
Professional PortfoliosLouellen Coker
 
PSEWEB: Pre-Conference Web & Social Media 101/Crash Course
PSEWEB: Pre-Conference Web & Social Media 101/Crash CoursePSEWEB: Pre-Conference Web & Social Media 101/Crash Course
PSEWEB: Pre-Conference Web & Social Media 101/Crash CourseMelissa Cheater
 
Inbound School Marketing: Is Your Website Helping The Bottom Line?
Inbound School Marketing: Is Your Website Helping The Bottom Line?Inbound School Marketing: Is Your Website Helping The Bottom Line?
Inbound School Marketing: Is Your Website Helping The Bottom Line?Kyle James
 
Share point saturday putting you at the centre of the intranet
Share point saturday   putting you at the centre of the intranetShare point saturday   putting you at the centre of the intranet
Share point saturday putting you at the centre of the intranetWes Hackett
 

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

Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
 
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
 
Project management
Project managementProject management
Project management
 
Eifel2012 freeweb2
Eifel2012 freeweb2Eifel2012 freeweb2
Eifel2012 freeweb2
 
Using E-portfolios to Showcase Your Work, Experience, and Skills
Using E-portfolios to Showcase Your Work, Experience, and SkillsUsing E-portfolios to Showcase Your Work, Experience, and Skills
Using E-portfolios to Showcase Your Work, Experience, and Skills
 
E-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians MeetupE-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians Meetup
 
GreenLite Overview
GreenLite OverviewGreenLite Overview
GreenLite Overview
 
Creating a Winning Content Strategy
Creating a Winning Content StrategyCreating a Winning Content Strategy
Creating a Winning Content Strategy
 
Rock Your School's Website - Stacy Jagodowski & Peter Baron
Rock Your School's Website - Stacy Jagodowski & Peter BaronRock Your School's Website - Stacy Jagodowski & Peter Baron
Rock Your School's Website - Stacy Jagodowski & Peter Baron
 
Professional Portfolios for the Creative Professional
Professional Portfolios for the Creative ProfessionalProfessional Portfolios for the Creative Professional
Professional Portfolios for the Creative Professional
 
Building a website in less than 3h and less than $100!
Building a website in less than 3h and less than $100! Building a website in less than 3h and less than $100!
Building a website in less than 3h and less than $100!
 
Web's Voice
Web's VoiceWeb's Voice
Web's Voice
 
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and SkillsSLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
 
Professional Portfolios
Professional PortfoliosProfessional Portfolios
Professional Portfolios
 
PSEWEB: Pre-Conference Web & Social Media 101/Crash Course
PSEWEB: Pre-Conference Web & Social Media 101/Crash CoursePSEWEB: Pre-Conference Web & Social Media 101/Crash Course
PSEWEB: Pre-Conference Web & Social Media 101/Crash Course
 
Inbound School Marketing: Is Your Website Helping The Bottom Line?
Inbound School Marketing: Is Your Website Helping The Bottom Line?Inbound School Marketing: Is Your Website Helping The Bottom Line?
Inbound School Marketing: Is Your Website Helping The Bottom Line?
 
Share point saturday putting you at the centre of the intranet
Share point saturday   putting you at the centre of the intranetShare point saturday   putting you at the centre of the intranet
Share point saturday putting you at the centre of the intranet
 

More from Four Kitchens

Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens
 
Four Kitchens: We make BIG websites
Four Kitchens: We make BIG websitesFour Kitchens: We make BIG websites
Four Kitchens: We make BIG websitesFour Kitchens
 
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...Four Kitchens
 
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyBig Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyFour Kitchens
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)Four Kitchens
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalFour Kitchens
 
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Four Kitchens
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websitesFour Kitchens
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbookFour Kitchens
 
The Web Chef Cookbook
The Web Chef CookbookThe Web Chef Cookbook
The Web Chef CookbookFour Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)Four Kitchens
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typographyFour Kitchens
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)Four Kitchens
 
PHP for NonProgrammers (DrupalCon SF 2010)
PHP for NonProgrammers (DrupalCon SF 2010)PHP for NonProgrammers (DrupalCon SF 2010)
PHP for NonProgrammers (DrupalCon SF 2010)Four Kitchens
 

More from Four Kitchens (20)

Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMS
 
Four Kitchens: We make BIG websites
Four Kitchens: We make BIG websitesFour Kitchens: We make BIG websites
Four Kitchens: We make BIG websites
 
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
 
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyBig Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
 
Intro to Drush
Intro to DrushIntro to Drush
Intro to Drush
 
Teaching Drupal
Teaching DrupalTeaching Drupal
Teaching Drupal
 
Big Websites
Big WebsitesBig Websites
Big Websites
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
The Web Chef Cookbook
The Web Chef CookbookThe Web Chef Cookbook
The Web Chef Cookbook
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)
 
PHP for NonProgrammers (DrupalCon SF 2010)
PHP for NonProgrammers (DrupalCon SF 2010)PHP for NonProgrammers (DrupalCon SF 2010)
PHP for NonProgrammers (DrupalCon SF 2010)
 

Recently uploaded

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Recently uploaded (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

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

  • 1. Don’t design websites. Design web systems! Creating a Drupal-optimized design Todd Ross Nienkerk DrupalCamp Stockholm | May 7, 2011
  • 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com @toddross Photo: Kristin Hillery
  • 4. Adam Snetman Design Director Thinkso Creative snetman@thinkso.com Photo: Erica Freudenstein
  • 7. In the old days... Photo: eddiecoyote on Flickr (Creative Commons BY)
  • 8. • Websites were measured in “pages” • Each page was maintained by hand as a single HTML file Photo: eddiecoyote on Flickr (Creative Commons BY)
  • 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. Today’s websites are actually web systems Photo: Snak Shak on Flickr (Creative Commons BY-NC)
  • 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. Designers determine a site’s functionality
  • 14. We communicate functionality to developers through sitemaps, process flow diagrams, wireframes, and design comps
  • 15. Even a tiny “log in” link tells a long and complicated story
  • 16. • In order to “log in,” users must also be able to: • Create accounts • Reset their password • Update account information
  • 17. • And what about... • Permissions? • Public profiles? • Email notifications?
  • 18. We are a site’s primary architects
  • 19. Designing a web system
  • 21. You wouldn’t paint a house before building it... So how can you design a website before architecting it?
  • 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. What’s the purpose of the site? Gather goals and requirements
  • 25. List your goals Build a community Raise Generate awareness buzz Make money! Make money! Make money! Make money! Make money! Make Make money! money!
  • 26. Business and technical requirements Brand Target audience SEO guidelines requirements Browser Accessibility compatibility Performance Success factors
  • 27. How will content be organized? Create a sitemap
  • 28. Sitemaps • List all sections/pages of the site • Illustrate how pages are organized within the sections
  • 29. Home page 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
  • 30. What kind of content will the site contain? Define the content types
  • 31. • In Drupal, di erent kinds of content are called content types • Content types are usually defined by the di erent information they contain
  • 32. Blog post Product Title Name Author Description Date published Price Body Options (sizes, colors) Lead image Images
  • 33. What will the user experience be like? Create wireframes
  • 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. My account | Log out Blog Logo Search Science Sports Most popular Business posts Arts Content Advertisement Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
  • 36. Balsamiq Mockups • balsamiq.com • Cross-platform, lots of plugins • Free license for open- source “do-gooders” • Drupal components: bit.ly/drupal-balsamiq
  • 37. Time and budget permitting... Do some usability testing
  • 38. Usability testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
  • 39. STEP 2 Choose your platform
  • 40. Drupal isn’t always the best solution From The Simpsons Movie
  • 41. STEP 3 Translate everything into “Drupalspeak”
  • 42. Most Drupal sites are comprised of just a few, basic components
  • 43. • Content • Usually a node, view, or panel • Can also be a user profile or admin interface
  • 44. • 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
  • 45. • Primary and secondary links • Special kinds of menus • Logo • Search box • Slogan, mission statement, and footer message
  • 48. • Now you can make informed decisions about how to create a compelling and e ective design • Use your sitemaps, process flow diagrams, and wireframes as blueprints • Let Drupal’s default components and behavior inform your design
  • 49. • 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?
  • 51. Who is Expeditionary Learning? • 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
  • 59. Credits ?
  • 60. Theory vs. practice 1. Define the site 1. Define the site 2. Choose your 2. Visual design platform 3. Choose your platform 3. Translate to Drupalspeak 4. Translate to Drupalspeak 4. Visual design 5. Revise site definition 6. Revise visual design
  • 62. 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.
  • 63. And... Translate the newly redesigned EL brand identity for the web.
  • 66. Speak to EL’s diverse audiences Create secure online tools
  • 67. EL Commons Dashboard 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
  • 69. 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
  • 70. 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, AZ Section 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
  • 71. 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 engagement Main 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 content 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
  • 73. 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 It's 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 It's 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 It's 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 It's 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.