Designing on Purpose - DrupalCon Portland 2013

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

from DrupalCon Portland 2013

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
12. DISCOVER strategists DESIGN designers DEVELOP developers DEPLOY client & users FAMILIAR PROCESS
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
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
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