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




Todd Nienkerk
UT Austin | June 19, 2012
Personal introductions
Todd Nienkerk
                         Co-founder, designer, and developer
                         Four Kitchens

                         todd@fourkitchens.com

                         Twitter:@toddross




Photo: Kristin Hillery
Adam Snetman
                            Design Director
                            Thinkso Creative

                            snetman@thinkso.com




Photo: 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 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,
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?

• Who is the audience?

• What is the content, and how will it be organized?

• How will people experience the site?
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          Make
                money!        money!
Business and technical
requirements

   Brand          Mobile devices        SEO
 guidelines                         requirements


                                     Browser
  Accessibility
                                   compatibility

         Performance         Infrastructure
Who is the audience?

Create personas
Personas


• Make a list of target audiences

• Create one persona for each target audience

• Give each persona (at least) a name, age, face,
 reason for visiting, and “wish list” of tasks
Persona: NYC-based graphic designers


              Adam, 34

              Reason for visiting:
              Adam’s wardrobe is roughly 80% plaid shirts.
              He buys a new plaid shirt most months, and a
              friend recommended sweet-plaid-shirts.com to
              him as a good place to shop.

              Website wish list:
              • Sort available shirts by various criteria. (most
                popular, newly added, etc.)
              • See which shirts friends have purchased.
              • Sign up for a an account to save preferences
                and make repeat visits quick and easy.
What kind of content, and how will it be organized?

Define content types and
create a sitemap
Content


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

Author           Description

Date published   Price

Lead image       Sizes, colors

Body text        Images
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
How will people experience the site?

Create wireframes
Wireframes


• Illustrate navigation and layout

• Demonstrate functionality and how user
 interfaces work
• Identify static vs. dynamically generated
 elements
• Identify unique layouts
Nav
UI
Dynamically
                              generated list




Curated, “featured” content
Home page layout




                   Interior page layout
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
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

 • Not always a node

 • View, panel, user profile, form, admin interface...

• Blocks

• Menus

• Primary and secondary links
STEP 4

Visual design
Credits
Now you can make informed decisions
about how to create a compelling and
effective design
• How will type, color, and imagery work together to
 translate the client’s brand identity to the web?
• Generate discussion with the client using mood
 boards and style tiles
Mood boards and style tiles


• Faster and cheaper than iterating on full comps

• Involves the client in the design process

• Increases client confidence and buy-in

• Fun to make
Mood boards




From Why Mood Boards Matter by Mindy Wagner
From Why Mood Boards Matter by Mindy Wagner
Style tiles




From Why Mood Boards Matter by Mindy Wagner
From Style Tiles in Practice by Samantha Warren
• Avoiding a Frankenstein Website Design:
 Collaborating with Clients
 • bit.ly/collab-with-clients

• Why Mood Boards Matter

 • bit.ly/mood-boards

• Style Tiles in Practice

 • bit.ly/style-tiles
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
Credits
Credits
Credits
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
                       and visual design
STEP 1

Define the EL site
What’s the purpose of the
site?
• Communicate EL’s mission, vision, and methods

• Translate the new brand identity for the web

• Create secure online tools for EL’s network of
 teachers that would help them collaborate on
 projects, tap into existing resources and plan their
 school year
Who is the audience?
What is the content, and
how will it be organized?
Content types

Sitemap
Communicate
 EL’s mission




                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
How will people
experience the site?
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
                                                                                                                Decatur Discovery Academy
Main                       Our model fosters more than just academic achievement. Our students are
                           engaged in their own learning and in the community around them while our school
                                                                                                                Indianapolis, IN


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
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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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! (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)

More Related Content

What's hot

Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage SystemsColdwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
Angie Javier
 
DrupalCon: Using Drupal to build digital signage solutions
DrupalCon: Using Drupal to build digital signage solutionsDrupalCon: Using Drupal to build digital signage solutions
DrupalCon: Using Drupal to build digital signage solutions
Dmitry Drozdik
 
Digital Signage for YMCA and the Drupal role
Digital Signage for YMCA and the Drupal roleDigital Signage for YMCA and the Drupal role
Digital Signage for YMCA and the Drupal role
Dmitry Drozdik
 
Creating online communities
Creating online communitiesCreating online communities
Creating online communities
Victor Teo
 

What's hot (20)

Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage SystemsColdwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
 
Allen Radwill
Allen RadwillAllen Radwill
Allen Radwill
 
DrupalCon: Using Drupal to build digital signage solutions
DrupalCon: Using Drupal to build digital signage solutionsDrupalCon: Using Drupal to build digital signage solutions
DrupalCon: Using Drupal to build digital signage solutions
 
Partner Day at DrupalCon Sydney
Partner Day at DrupalCon SydneyPartner Day at DrupalCon Sydney
Partner Day at DrupalCon Sydney
 
Digital Signage for YMCA and the Drupal role
Digital Signage for YMCA and the Drupal roleDigital Signage for YMCA and the Drupal role
Digital Signage for YMCA and the Drupal role
 
Collaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment TechnologiesCollaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment Technologies
 
Creating a knowledge community across your organization sug dc
Creating a knowledge community across your organization sug dcCreating a knowledge community across your organization sug dc
Creating a knowledge community across your organization sug dc
 
Web maker - Web making Tools
Web maker - Web making Tools Web maker - Web making Tools
Web maker - Web making Tools
 
Power four collaborative1
Power four collaborative1Power four collaborative1
Power four collaborative1
 
Webinar: Windows Server 2003 End of Support
Webinar: Windows Server 2003 End of SupportWebinar: Windows Server 2003 End of Support
Webinar: Windows Server 2003 End of Support
 
Colaboration tools and digital presence ricardo aragon
Colaboration tools and digital presence ricardo aragonColaboration tools and digital presence ricardo aragon
Colaboration tools and digital presence ricardo aragon
 
Creating online communities
Creating online communitiesCreating online communities
Creating online communities
 
test2
test2test2
test2
 
Steven h. palaganas 2
Steven h. palaganas 2Steven h. palaganas 2
Steven h. palaganas 2
 
Meet drupal
Meet drupalMeet drupal
Meet drupal
 
Chicago counts collaboration tools
Chicago counts collaboration toolsChicago counts collaboration tools
Chicago counts collaboration tools
 
Collaborative ict development
Collaborative ict developmentCollaborative ict development
Collaborative ict development
 
Web design
Web designWeb design
Web design
 
IBM Connections ready for students at University of Zurich
IBM Connections ready for students at University of ZurichIBM Connections ready for students at University of Zurich
IBM Connections ready for students at University of Zurich
 
Colaboration tools and digital presence
Colaboration tools and digital presenceColaboration tools and digital presence
Colaboration tools and digital presence
 

Similar to Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)

Professional Portfolios for the Creative Professional
Professional Portfolios for the Creative ProfessionalProfessional Portfolios for the Creative Professional
Professional Portfolios for the Creative Professional
Louellen Coker
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Sara Rosso
 

Similar to Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group) (20)

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)
 
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! (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! (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)
 
Project management
Project managementProject management
Project management
 
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
 
Web's Voice
Web's VoiceWeb's Voice
Web's Voice
 
Professional Portfolios for the Creative Professional
Professional Portfolios for the Creative ProfessionalProfessional Portfolios for the Creative Professional
Professional Portfolios for the Creative Professional
 
Introduction to Information Architecture & Design - SVA Workshop 02/15/14
Introduction to Information Architecture & Design - SVA Workshop 02/15/14Introduction to Information Architecture & Design - SVA Workshop 02/15/14
Introduction to Information Architecture & Design - SVA Workshop 02/15/14
 
Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.Tools for Entrepreneurs: Create. Collaborate. Communicate.
Tools for Entrepreneurs: Create. Collaborate. Communicate.
 
Putting together a web app
Putting together a web appPutting together a web app
Putting together a web app
 
40Plus_WPCOM_Slides_Sept_19_2022_PLAIN.pptx
40Plus_WPCOM_Slides_Sept_19_2022_PLAIN.pptx40Plus_WPCOM_Slides_Sept_19_2022_PLAIN.pptx
40Plus_WPCOM_Slides_Sept_19_2022_PLAIN.pptx
 
Managing Your Career
Managing Your CareerManaging Your Career
Managing Your Career
 
Website design and marketing workshop slides
Website design and marketing workshop slidesWebsite design and marketing workshop slides
Website design and marketing workshop slides
 
Making the most of your content investments
Making the most of your content investmentsMaking the most of your content investments
Making the most of your content investments
 
Design: the new expectation
Design: the new expectationDesign: the new expectation
Design: the new expectation
 
Engineering content-champions-todd-stc-2017
Engineering content-champions-todd-stc-2017Engineering content-champions-todd-stc-2017
Engineering content-champions-todd-stc-2017
 
Creating a Winning Content Strategy
Creating a Winning Content StrategyCreating a Winning Content Strategy
Creating a Winning Content Strategy
 

More from 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 Drupal
Four Kitchens
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
Four Kitchens
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
Four Kitchens
 

More from Four Kitchens (20)

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 ...
 
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 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)
 
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
From Photoshop to Drupal Theme (DrupalCon San Francisco 2010)
 
Accelerated grid theming using NineSixty (DrupalCon San Francisco 2010)
Accelerated grid theming using NineSixty (DrupalCon San Francisco 2010)Accelerated grid theming using NineSixty (DrupalCon San Francisco 2010)
Accelerated grid theming using NineSixty (DrupalCon San Francisco 2010)
 
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
 
Drupal theming using the 960.gs grid system
Drupal theming using the 960.gs grid systemDrupal theming using the 960.gs grid system
Drupal theming using the 960.gs grid system
 

Recently uploaded

Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
mikehavy0
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
joshuaclack73
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Avoid these common UI/UX design mistakes
 Avoid these common UI/UX design mistakes Avoid these common UI/UX design mistakes
Avoid these common UI/UX design mistakes
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 

Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)

  • 1. Don’t design websites. Design web systems! Creating a Drupal-optimized design Todd Nienkerk UT Austin | June 19, 2012
  • 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Twitter:@toddross Photo: Kristin Hillery
  • 4. Adam Snetman Design Director Thinkso Creative snetman@thinkso.com Photo: Erica Freudenstein
  • 5.
  • 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, 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? • Who is the audience? • What is the content, and how will it be organized? • How will people experience the site?
  • 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 Make money! money!
  • 26. Business and technical requirements Brand Mobile devices SEO guidelines requirements Browser Accessibility compatibility Performance Infrastructure
  • 27. Who is the audience? Create personas
  • 28. Personas • Make a list of target audiences • Create one persona for each target audience • Give each persona (at least) a name, age, face, reason for visiting, and “wish list” of tasks
  • 29. Persona: NYC-based graphic designers Adam, 34 Reason for visiting: Adam’s wardrobe is roughly 80% plaid shirts. He buys a new plaid shirt most months, and a friend recommended sweet-plaid-shirts.com to him as a good place to shop. Website wish list: • Sort available shirts by various criteria. (most popular, newly added, etc.) • See which shirts friends have purchased. • Sign up for a an account to save preferences and make repeat visits quick and easy.
  • 30. What kind of content, and how will it be organized? Define content types and create a sitemap
  • 31. Content • In Drupal, different kinds of content are called content types • Content types are usually defined by the different information they contain
  • 32. Blog post Product Title Name Author Description Date published Price Lead image Sizes, colors Body text Images
  • 33. Sitemaps • List all sections/pages of the site • Illustrate how pages are organized within the sections
  • 34. 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
  • 35. How will people experience the site? Create wireframes
  • 36. Wireframes • Illustrate navigation and layout • Demonstrate functionality and how user interfaces work • Identify static vs. dynamically generated elements • Identify unique layouts
  • 37.
  • 38. Nav
  • 39. UI
  • 40. Dynamically generated list Curated, “featured” content
  • 41. Home page layout Interior page layout
  • 42. Balsamiq Mockups • balsamiq.com • Cross-platform, lots of plugins • Free license for open- source “do-gooders” • Drupal components: bit.ly/drupal-balsamiq
  • 43. Time and budget permitting... Do some usability testing
  • 44. Usability testing Napkin Paper Keynote HTML/CSS sketch prototypes prototypes prototypes
  • 45. STEP 2 Choose your platform
  • 46. Drupal isn’t always the best solution
  • 47. Drupal isn’t always the best solution From The Simpsons Movie
  • 48. STEP 3 Translate everything into “Drupalspeak”
  • 49. Most Drupal sites are comprised of just a few, basic components
  • 50. • Content • Not always a node • View, panel, user profile, form, admin interface... • Blocks • Menus • Primary and secondary links
  • 53. Now you can make informed decisions about how to create a compelling and effective design
  • 54. • How will type, color, and imagery work together to translate the client’s brand identity to the web? • Generate discussion with the client using mood boards and style tiles
  • 55. Mood boards and style tiles • Faster and cheaper than iterating on full comps • Involves the client in the design process • Increases client confidence and buy-in • Fun to make
  • 56. Mood boards From Why Mood Boards Matter by Mindy Wagner
  • 57. From Why Mood Boards Matter by Mindy Wagner
  • 58. Style tiles From Why Mood Boards Matter by Mindy Wagner
  • 59. From Style Tiles in Practice by Samantha Warren
  • 60. • Avoiding a Frankenstein Website Design: Collaborating with Clients • bit.ly/collab-with-clients • Why Mood Boards Matter • bit.ly/mood-boards • Style Tiles in Practice • bit.ly/style-tiles
  • 62. 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
  • 63.
  • 65.
  • 68.
  • 70. Credits ?
  • 71. 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 and visual design
  • 73. What’s the purpose of the site? • Communicate EL’s mission, vision, and methods • Translate the new brand identity for the web • Create secure online tools for EL’s network of teachers that would help them collaborate on projects, tap into existing resources and plan their school year
  • 74. Who is the audience?
  • 75.
  • 76. What is the content, and how will it be organized?
  • 78.
  • 79.
  • 80. Communicate EL’s mission Create secure online tools
  • 81. 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
  • 83. 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
  • 84. 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
  • 85. 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 Decatur Discovery Academy Main Our model fosters more than just academic achievement. Our students are engaged in their own learning and in the community around them while our school Indianapolis, IN 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
  • 86.
  • 87. 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.