Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing on Purpose - DrupalCon Portland 2013

Designing on Purpose - DrupalCon Portland 2013

Designing on Purpose: Design Process & Deliverables in the Responsive Age

from DrupalCon Portland 2013

Jared Ponchot

May 21, 2013
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. Jared Ponchot // @jponch // DrupalCon Portland 2013
    Design Process & Deliverables in the Responsive Age
    DESIGNING ON PURPOSE

    View full-size slide


  2. — Jason Santa Maria, August 2005
    Photo by Adam Wintle http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
    A list apart has always tried to be one of those sites at the
    front of the pack. We don't support 800 x 600 anymore,
    nor do we 640 x 480. Do you? People ipped when sites
    stopped supporting 640 x 480... now no one says a word.
    ings change. Trust me, you are going to see more sites
    stretching out their legs and putting their feet up.

    View full-size slide

  3. MO’ DEVICES
    MO’ PROBLEMS
    Photo wallpaper of Notorious BIG from alphacoders.com

    View full-size slide

  4. PURPOSE, NOT PREFERENCE
    PRIORITY, NOT PLACEMENT
    SYSTEMS, NOT PAGES

    View full-size slide


  5. — Victor Papanek
    DESIGN IS THE CONSCIOUS EFFORT
    TO IMPOSE A MEANINGFUL ORDER

    View full-size slide

  6. Audi A7 Sportback plans from the-blueprints.com

    View full-size slide

  7. Audi A7 Sportback plans from the-blueprints.com

    REQUREMENTS GATHERING

    CONCEPT DESIGN

    MARKET RESEARCH

    TEST CAR

    FINAL DESIGN

    View full-size slide

  8. DISCOVER
    strategists
    DESIGN
    designers
    DEVELOP
    developers
    DEPLOY
    client & users
    SOUND FAMILIAR?

    View full-size slide

  9. Audio A7 Sportback photo from exclusivecardesign.blogspot.com

    View full-size slide

  10. Audio A7 Sportback photo from exclusivecardesign.blogspot.com

    View full-size slide

  11. DISCOVER
    strategists
    DESIGN
    designers
    DEVELOP
    developers
    DEPLOY
    client & users
    FAMILIAR PROCESS

    View full-size slide

  12. WHISPER DOWN THE
    LANE DESIGN
    Photo from http://failblog.cheezburger.com

    View full-size slide

  13. WHY HAVE WE
    DONE IT THIS WAY?

    View full-size slide

  14. ALLITERATION is
    ALMOST
    ALWAYS
    AWESOME

    View full-size slide

  15. FAMILIARITY IS
    FANTASTIC

    View full-size slide


  16. — Paul Rand
    THE PUBLIC IS MORE FAMILIAR WITH BAD
    DESIGN THAN GOOD DESIGN. IT IS, IN EFFECT,
    CONDITIONED TO PREFER BAD DESIGN, BECAUSE
    THAT IS WHAT IT LIVES WITH. THE NEW BECOMES
    THREATENING, THE OLD REASSURING.

    View full-size slide

  17. DIVISION OF LABOR

    View full-size slide

  18. STRATEGISTS UX/DESIGNERS FRONTEND DEVS BACKEND DEVS
    DIVISION OF LABOR

    View full-size slide

  19. STRATEGISTS UX/DESIGNERS FRONTEND DEVS BACKEND DEVS
    DIVISION OF LABOR: RESPONSIVE DESIGN

    View full-size slide


  20. — Fred Brooks
    9 WOMEN CAN’T MAKE
    A BABY IN 1 MONTH!

    View full-size slide

  21. KEEP EVERYONE FOCUSED
    ON PURPOSE & CONTENT
    not process or deliverables

    View full-size slide

  22. CREATE LIGHTER WEIGHT,
    LIVING DELIVERABLES

    View full-size slide

  23. THE BIG
    REVEAL

    View full-size slide

  24. DISCOVER
    strategists
    DESIGN
    designers
    DEVELOP
    developers
    DEPLOY
    client & users
    INSTEAD OF THIS ...

    View full-size slide

  25. PURPOSE CONTENT
    & HIERARCHY
    SYSTEMS
    & STYLE
    STRATEGY
    DESIGN
    DEVELOPMENT

    View full-size slide

  26. PURPOSE
    CONTENT & HIERARCHY
    SYSTEMS & STYLE

    View full-size slide

  27. DESIGN IS PROBLEM DISCOVERY
    & problem Solving

    View full-size slide


  28. — Albert Einstein
    IF I HAD AN HOUR TO SOLVE A PROBLEM AND MY LIFE
    DEPENDED ON THE SOLUTION, I WOULD SPEND THE FIRST
    55 MINUTES DETERMINING THE PROPER QUESTION TO
    ASK, FOR ONCE I KNOW THE PROPER QUESTION, I COULD
    SOLVE THE PROBLEM IN LESS THAN 5 MINUTES.

    View full-size slide

  29. http://www.youtube.com/watch?v=SnXtuktNdlM

    View full-size slide

  30. THE RIGHT QUESTIONS CAN
    HELP THE CLIENT DO THEIR JOB,
    & SET YOU UP TO DO YOURS

    View full-size slide


  31. — Andy Rutledge
    YOU MAY BE SURPRISED, BUT I
    NEVER ASK DESIGN-RELATED
    QUESTIONS IN DESIGN PROJECT
    DISCOVERY MEETINGS.

    View full-size slide


  32. — Andy Rutledge
    THE REASON I DON’T ASK DESIGN
    QUESTIONS OF THE CLIENT IS THE SAME
    REASON AN ARCHITECT DOESN’T ASK
    THE CLIENT WHAT PSI THE BUILDING’S
    LOAD-BEARING FOUNDATIONAL
    STRUCTURES WILL NEED TO ENDURE.

    View full-size slide

  33. WE CAN’T SOLVE PROBLEMS FOR
    OUR CLIENTS BASED ON THEIR
    PERSONAL PREFERENCES IN
    COLOR, TYPOGRAPHY & TEXTURE!

    View full-size slide

  34. Photo from http://www.deceptology.com/2010/04/upside-down-world-map-shows-north-is-up.html

    View full-size slide

  35. Tesco Subway Store in South Korea image from littledoremi.com

    View full-size slide

  36. What is the sum of 3+3?
    What numbers can be added up to 6?

    View full-size slide

  37. photo from theofficedealer.com

    View full-size slide


  38. — Harry West, Contimuum
    I WANTED TO LOOK AT THE PROBLEM
    AS THOUGH I’D JUST STEPPED OFF A
    SPACESHIP FROM MARS.

    View full-size slide

  39. Photo from http://optigarden.com/tag/coffee-grounds/

    View full-size slide

  40. Swiffer photo from ivillage.com

    View full-size slide

  41. CONTEXT &
    RELATIONSHIP

    View full-size slide

  42. photo from washingtoncitypaper.com

    View full-size slide

  43. Washington Post: Stop & Hear the Music http://www.youtube.com/watch?v=hnOPu0_YWhw

    View full-size slide

  44. WHERE & WHEN YOU ASK
    REALLY MATTERS!

    View full-size slide

  45. http://bit.ly/187yUef

    View full-size slide

  46. CREATE WONDER

    View full-size slide

  47. PURPOSE
    STATEMENT
    ‣ Keeps things on track when they’re going off the rails
    ‣ Generates big ideas
    ‣ Helps simplify complexity
    ‣ Helps communicate and facilitate organizational change

    View full-size slide

  48. HAVE A STAR TO SAIL
    YOUR SHIP BY

    View full-size slide

  49. PURPOSE
    CONTENT & HIERARCHY
    SYSTEMS & STYLE

    View full-size slide

  50. FOCUS ON PRIORITY,
    NOT POSITION!

    View full-size slide


  51. — Jeffrey Zeldman
    LOREM IPSUM DOLOR SIT
    AMET, CONSECTETUR
    ADIPISCING ELIT.

    View full-size slide


  52. — Jeffrey Zeldman
    DESIGN IN THE ABSENCE OF
    CONTENT IS NOT DESIGN,
    IT’S DECORATION.

    View full-size slide

  53. DESIGNING WITH
    CONTENT & HIERARCHY
    ‣ Content Model
    ‣ Component Hierarchy Document

    View full-size slide

  54. THE CONTENT MODEL
    A detailed map of ...
    ‣ the types of content your project needs
    ‣ the discrete attributes that make up each content type
    ‣ the relationships between them
    ‣ and the structure through which they’re displayed

    View full-size slide

  55. http://bit.ly/13FTHlG

    View full-size slide

  56. Story Announcement Event Page
    Special Feature Advert
    Newsletter Issue Top Level Category
    Quiz Poll
    Photo Gallery
    ACME News Content Model
    Sub-category
    Homepage
    Content Assets
    Structural Types
    Presentation Types

    View full-size slide

  57. COMPONENT
    HIERARCHY
    DOCUMENT

    View full-size slide

  58. SYSTEMS & STYLE

    View full-size slide

  59. FOCUS ON STYLE, NOT
    LAYOUTS OR PAGES

    View full-size slide

  60. STYLE:
    COLOR, TYPOGRAPHY & TEXTURE

    View full-size slide

  61. WORKING
    WIREFRAMES

    View full-size slide

  62. CATEGORIES
    OF FOCUS
    STYLE
    PROTOTYPES

    View full-size slide

  63. CATEGORIES
    OF FOCUS
    STYLE
    PROTOTYPES
    From Sparkbox - http://sparkbox.github.io/dr-style-prototype/

    View full-size slide

  64. CATEGORIES
    OF FOCUS
    Style Tile examples by HappyCog - Kevin Sharon & Sophie Shepherd - https://speakerdeck.com/kevinsharon/a-new-toolbox

    View full-size slide

  65. http://bit.ly/Zvm1b5

    View full-size slide

  66. AS FEW “MOCKS” AS POSSIBLE

    View full-size slide

  67. Purpose Doc
    all team
    Content Model
    all team
    Component Hierarchy Doc
    all team
    Working Wireframes
    frontend developer, designer
    CMS Configuration
    backend developer
    Development
    backend developer
    Styled Wireframes
    designer, frontend developer
    Component Collage
    designer
    CMS Templates
    frontend developer, designer
    CMS
    strategist, backend developer
    Website, Tada!
    all team
    THE TEAM
    Strategist
    Designer (UX/IA/Style)
    Frontend Developer
    Backend Developer
    Client

    View full-size slide

  68. PURPOSE, NOT PREFERENCE
    PRIORITY, NOT PLACEMENT
    SYSTEMS, NOT PAGES

    View full-size slide

  69. LIGHT-WEIGHT, LIVING
    DELIVERABLES

    View full-size slide

  70. THANKS!
    WHAT DID YOU THINK?
    Evaluate this session at:
    portland2013.drupal.org/schedule.
    Jared Ponchot // @jponch // DrupalCon Portland 2013

    View full-size slide