Finding Design in the Process

I gave this talk at the 2013 HOW Design Live Conference.

Full writeup here: http://www.newfangled.com/finding_design_in_the_process

Transcript

1. Christopher Butler Newfangled.com @chrbutler Finding Design in the Process
3. Understanding how design functions in interactive projects 1. Knowing Design 2. Showing Design How we demonstrate our expertise before we get paid for it 3. Distributing Design Creating a holistic, design-centric workflow 4. Amending Design Making changes and preserving sanity 10 min #HOWlive @chrbutler #HOWlive @chrbutler
4. Understanding how design functions in interactive projects 1. Knowing Design 2. Showing Design How we demonstrate our expertise before we get paid for it 3. Distributing Design Creating a holistic, design-centric workflow 4. Amending Design Making changes and preserving sanity 10 min 5 min #HOWlive @chrbutler
5. Understanding how design functions in interactive projects 1. Knowing Design 2. Showing Design How we demonstrate our expertise before we get paid for it 3. Distributing Design Creating a holistic, design-centric workflow 4. Amending Design Making changes and preserving sanity 10 min 5 min 25 min #HOWlive @chrbutler
6. Understanding how design functions in interactive projects 1. Knowing Design 2. Showing Design How we demonstrate our expertise before we get paid for it 3. Distributing Design Creating a holistic, design-centric workflow 4. Amending Design Making changes and preserving sanity 10 min 5 min 25 min 15 min #HOWlive @chrbutler
7. Design is not a thing. #HOWlive @chrbutler
8. Design is not a thing. But without design, there are no things. #HOWlive @chrbutler
9. Design is not a thing. But without design, there are no things. #HOWlive @chrbutler
10. Website design is not container design. #HOWlive @chrbutler
11. Not This #HOWlive @chrbutler
12. Not This This #HOWlive @chrbutler
13. #HOWlive @chrbutler
14. #HOWlive @chrbutler
15. #HOWlive @chrbutler
17. Book design reflects content; web design anticipates it. #HOWlive @chrbutler
19. Web conversions are the result of engagement, not seduction. #HOWlive @chrbutler
21. Visual clutter is the evidence of a failed search for clarity. #HOWlive @chrbutler
23. Could I see some examples of your work? #HOWlive @chrbutler
24. Showing your best work is not showing design. It's showing outcomes. #HOWlive @chrbutler
25. #HOWlive @chrbutler
26. Design is a custom application of your expertise. #HOWlive @chrbutler
28. There is no design phase. #HOWlive @chrbutler
29. It’s all design, Charlie. Every last bit of it! #HOWlive @chrbutler
31. Isolating design isolates expertise. #HOWlive @chrbutler
32. Every decision is a design decision. #HOWlive @chrbutler
34. Project Timeline #HOWlive @chrbutler
35. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Production Commitment to Building What is Specified by Prototype and Composition QA Post-Production Launch Project Timeline #HOWlive @chrbutler
36. Project Timeline Mission Statement Commitment to Purpose Project Timeline #HOWlive @chrbutler
37. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Project Timeline #HOWlive @chrbutler
38. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Project Timeline #HOWlive @chrbutler
39. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Project Timeline Sketches Ideation #HOWlive @chrbutler
40. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Project Timeline Sketches Ideation #HOWlive @chrbutler
41. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Project Timeline Sketches Ideation #HOWlive @chrbutler
42. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Project Timeline Sketches Ideation #HOWlive @chrbutler
43. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Project Timeline #HOWlive @chrbutler
44. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Project Timeline #HOWlive @chrbutler
45. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Project Timeline #HOWlive @chrbutler
46. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Project Timeline #HOWlive @chrbutler
47. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Project Timeline #HOWlive @chrbutler
48. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Project Timeline #HOWlive @chrbutler
49. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Project Timeline #HOWlive @chrbutler
50. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Project Timeline #HOWlive @chrbutler
51. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Project Timeline #HOWlive @chrbutler
52. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Production Commitment to Building What is Specified by Prototype and Composition Project Timeline #HOWlive @chrbutler
53. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Production Commitment to Building What is Specified by Prototype and Composition QA Project Timeline #HOWlive @chrbutler
54. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Production Commitment to Building What is Specified by Prototype and Composition QA Post-Production Project Timeline #HOWlive @chrbutler
55. Project Timeline Mission Statement Commitment to Purpose Strategy Commitment to Audience, Content, and Marketing Plan Discovery Commitment to Scope Information Architecture Sketches Ideation Wireframes Flow Prototype Logic & Page- level Info Mood Boards Commitment to Look and Feel Composition Commitment to Representation of All Decisions Made So Far Production Commitment to Building What is Specified by Prototype and Composition QA Post-Production Launch Project Timeline #HOWlive @chrbutler
56. Plan → Design → Code #HOWlive @chrbutler
57. re-Plan → re-Design → re-Code #HOWlive @chrbutler
58. There are no tweaks. There are only bugs or change orders. #HOWlive @chrbutler
59. Project Timeline Production Project Timeline QA Post-Production
60. Project Timeline Production Project Timeline QA Post-Production QA #HOWlive @chrbutler
61. Project Timeline Production Project Timeline QA Post-Production QA Post-Prod. #HOWlive @chrbutler
62. Project Timeline Production Project Timeline QA Post-Production QA Post-Prod. #HOWlive @chrbutler
63. Project Timeline Production Project Timeline QA Post-Production QA Post-Prod. #HOWlive @chrbutler
64. Project Timeline Production Project Timeline QA Post-Production QA Post-Prod. #HOWlive @chrbutler
65. Project Timeline Production Project Timeline QA Post-Production QA Post-Prod. #HOWlive @chrbutler
66. Project Timeline Production Project Timeline QA Post-Production QA Post-Prod. #HOWlive @chrbutler
67. Planning, design and implmentation are the building blocks of interactive design. #HOWlive @chrbutler
68. Understanding how design functions in interactive projects 1. Knowing Design 2. Showing Design How we demonstrate our expertise before we get paid for it 3. Distributing Design Creating a holistic, design-centric workflow 4. Amending Design Making changes and preserving sanity #HOWlive @chrbutler
69. Thank you! #HOWlive @chrbutler