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
  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.
  3. MO’ DEVICES MO’ PROBLEMS Photo wallpaper of Notorious BIG from

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

  5. “ — Victor Papanek DESIGN IS THE CONSCIOUS EFFORT TO

    IMPOSE A MEANINGFUL ORDER
  6. Audi A7 Sportback plans from the-blueprints.com

  7. Audi A7 Sportback plans from the-blueprints.com ‣ REQUREMENTS GATHERING ‣

    CONCEPT DESIGN ‣ MARKET RESEARCH ‣ TEST CAR ‣ FINAL DESIGN
  8. DISCOVER strategists DESIGN designers DEVELOP developers DEPLOY client & users

    SOUND FAMILIAR?
  9. Audio A7 Sportback photo from exclusivecardesign.blogspot.com

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

  11. None
  12. DISCOVER strategists DESIGN designers DEVELOP developers DEPLOY client & users

    FAMILIAR PROCESS
  13. None
  14. WHISPER DOWN THE LANE DESIGN Photo from http://failblog.cheezburger.com

  15. WHY HAVE WE DONE IT THIS WAY?

  16. ALLITERATION is ALMOST ALWAYS AWESOME

  17. FAMILIARITY IS FANTASTIC

  18. “ — 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.
  19. DIVISION OF LABOR

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

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

    DESIGN
  22. “ — Fred Brooks 9 WOMEN CAN’T MAKE A BABY

    IN 1 MONTH!
  23. ⌘N

  24. KEEP EVERYONE FOCUSED ON PURPOSE & CONTENT not process or

    deliverables
  25. CREATE LIGHTER WEIGHT, LIVING DELIVERABLES

  26. THE BIG REVEAL

  27. DISCOVER strategists DESIGN designers DEVELOP developers DEPLOY client & users

    INSTEAD OF THIS ...
  28. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE STRATEGY DESIGN DEVELOPMENT

  29. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE

  30. DESIGN IS PROBLEM DISCOVERY & problem Solving

  31. “ — 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.
  32. http://www.youtube.com/watch?v=SnXtuktNdlM

  33. None
  34. THE RIGHT QUESTIONS CAN HELP THE CLIENT DO THEIR JOB,

    & SET YOU UP TO DO YOURS
  35. “ — Andy Rutledge YOU MAY BE SURPRISED, BUT I

    NEVER ASK DESIGN-RELATED QUESTIONS IN DESIGN PROJECT DISCOVERY MEETINGS.
  36. “ — 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.
  37. WE CAN’T SOLVE PROBLEMS FOR OUR CLIENTS BASED ON THEIR

    PERSONAL PREFERENCES IN COLOR, TYPOGRAPHY & TEXTURE!
  38. Photo from http://www.deceptology.com/2010/04/upside-down-world-map-shows-north-is-up.html

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

  40. What is the sum of 3+3? What numbers can be

    added up to 6?
  41. photo from theofficedealer.com

  42. “ — Harry West, Contimuum I WANTED TO LOOK AT

    THE PROBLEM AS THOUGH I’D JUST STEPPED OFF A SPACESHIP FROM MARS.
  43. Photo from http://optigarden.com/tag/coffee-grounds/

  44. Swiffer photo from ivillage.com

  45. CONTEXT & RELATIONSHIP

  46. photo from washingtoncitypaper.com

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

  48. WHERE & WHEN YOU ASK REALLY MATTERS!

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

  50. CREATE WONDER

  51. 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
  52. HAVE A STAR TO SAIL YOUR SHIP BY

  53. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE

  54. FOCUS ON PRIORITY, NOT POSITION!

  55. “ — Jeffrey Zeldman LOREM IPSUM DOLOR SIT AMET, CONSECTETUR

    ADIPISCING ELIT.
  56. “ — Jeffrey Zeldman DESIGN IN THE ABSENCE OF CONTENT

    IS NOT DESIGN, IT’S DECORATION.
  57. DESIGNING WITH CONTENT & HIERARCHY ‣ Content Model ‣ Component

    Hierarchy Document
  58. 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
  59. http://bit.ly/13FTHlG

  60. 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
  61. COMPONENT HIERARCHY DOCUMENT

  62. COMPONENT

  63. None
  64. SYSTEMS & STYLE

  65. FOCUS ON STYLE, NOT LAYOUTS OR PAGES

  66. STYLE: COLOR, TYPOGRAPHY & TEXTURE

  67. WORKING WIREFRAMES

  68. CATEGORIES OF FOCUS STYLE PROTOTYPES

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

  70. CATEGORIES OF FOCUS Style Tile examples by HappyCog - Kevin

    Sharon & Sophie Shepherd - https://speakerdeck.com/kevinsharon/a-new-toolbox
  71. http://bit.ly/Zvm1b5

  72. AS FEW “MOCKS” AS POSSIBLE

  73. 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
  74. PURPOSE, NOT PREFERENCE PRIORITY, NOT PLACEMENT SYSTEMS, NOT PAGES

  75. LIGHT-WEIGHT, LIVING DELIVERABLES

  76. REMEMBER

  77. THANKS! WHAT DID YOU THINK? Evaluate this session at: portland2013.drupal.org/schedule.

    Jared Ponchot // @jponch // DrupalCon Portland 2013