So…What Do I Make? (Dan Mall)

2. Web workers are categorized by titles, tools, and output.

3. Web workers are categorized by titles, tools, and output. Designer Developer Content Strategist Information Architect

6. Designer Developer Content Strategist Information Architect

9. GOALS FOR NEW TOOLS AND OUTPUTS Highest fidelity in shortest amount of time Remove abstractions wherever possible All deliverables come with conversation

10. Frameworks, not processes

13. A new framework for designers

14. Designers plan.PLAN01 02 03 04 01

15. Interview PLAN—01 / 02

17. Manifesto PLAN—02 / 02

18. Before I design anything, I write. When I’m having trouble with a design, I write.

19. ommwriter.com

20. brettterpstra.com/projects/nvalt/

21. Manifestos contain creative direction. Manifestos contain a point of view. Manifestos say what you’re going to do, and, more importantly, what you’re not going to do.

22. Home Synopsis The Characters The Actors Trailers

23. Home The Magic of Love Harry, Ron, Hermione & more Seven Movies & Eight Books J.K. Rowling

24. WHAT THE MANIFESTO MUST HAVE SAID The Harry Potter series is one of most popular and best-selling stories of all time. Let’s put front and center what makes it special: a unique approach to deep themes like love and death, as well as the talented crew that brings it to life in the books and movies. The website should reflect that unmatched allure from every angle.

25. is.gd/uiecreativebrief

26. is.gd/cdcamp

27. PLAN Interview Manifesto

28. Designers inventory.PLAN INVENTORY 01 02 03 04 02

29. Interface Inventory INVENTORY—01 / 03

30. is.gd/interfaceinventory

31. Sometime in the middle of your project, do an interface inventory. It’ll help keep you on track.

32. Via @jasonsantamaria

37. Performance Budgets INVENTORY—02 / 03

38. An Open Redesign: is.gd/rferlredesign

42. Performance was literally a matter of life or death.

43. webpagetest.org

45. rferl.mobi Site

46. rferl.mobi 4.193 5.658 7.930 Site Start Render Visually Complete Fully Loaded

47. rferl.mobi 4.193 5.658 7.930 npr.org 5.175 13.542 26.377 theguardian.com 20.87 18.82 22.177 m.bbc.com/news 8.392 15.875 18.067 america.aljazeera.com 6.272 8.022 63.756 Site Start Render Visually Complete Fully Loaded

49. People perceive tasks as faster or slower when there’s at least a 20% time difference. —Tim Kadlec, Fast Enough, is.gd/fastenough

51. rferl.mobi 4.193 5.658 7.930 3.354 4.526 6.344 npr.org 5.175 13.542 26.377 theguardian.com 20.87 18.82 22.177 m.bbc.com/news 8.392 15.875 18.067 america.aljazeera.com 6.272 8.022 63.756 Site Start Render Visually Complete Fully Loaded 80% Start Render 80% Visually Complete 80% Fully Loaded

55. 768 Kilobits per second

56. 8 bits = 1 byte 768

57. 768 Kbsp ÷ 8 bits/byte = 96 kb/s 8 768

58. Start Render target 3.354 s × 96 kb/s = 321.98 kb

59. Start Render target 3.354 s × 96 kb/s = 321.98 kb Visually complete target 4.526 s × 96 kb/s = 434.5 kb

60. Start Render target 3.354 s × 96 kb/s = 321.98 kb Visually complete target 4.526 s × 96 kb/s = 434.5 kb Fully loaded target 6.344 s × 96 kb/s = 609.02 kb

61. You can’t mock up performance in Photoshop.” —Brad Frost, Smashing Conference, is.gd/smashingconf2012 “

62. You can’t mock up performance in Photoshop.” —Brad Frost, Smashing Conference, is.gd/smashingconf2012 “

63. Start Render target 3.354 s × 96 kb/s = 321.98 kb Visually complete target 4.526 s × 96 kb/s = 434.5 kb Fully loaded target 6.344 s × 96 kb/s = 609.02 kb

64. 321.98 kb HTML CSS JS Images Webfonts

65. 321.98 kb HTML CSS JS Images Webfonts 60kb 58kb 295kb Averages taken from httparchive.org

66. 321.98 kb HTML CSS JS Images Webfonts 60kb 58kb 295kb Averages taken from httparchive.org -91kb

67. HTML CSS JS Images Webfonts 60kb 58kb 29kb Averages taken from httparchive.org 87kb (~4 images) 87kb (~6 webfonts) 321.98 kb 175 kb

68. HTML CSS JS Images Webfonts 60kb 58kb 29kb Averages taken from httparchive.org 114kb (~6 images) 60kb (~4 webfonts) 321.98 kb 175 kb

69. Visual Inventory INVENTORY—03 / 03

70. Language was invented to ask questions. Answers may be given by grunts and gestures, but questions must be spoken. Humanness came of age when man asked the first question.” —Eric Hoffer, American moral & social philosopher “

71. Is showing the app on a shiny laptop the best way to sell it? Can their brand pull off a minimalist design approach? Should the copy be more playful?

75. How playful and whimsical should the new site be? The GoGo squeeZ site is full of smiles and kitchy illustrations that make you grin as you explore the site. gogosqueez.com/go-playfully

76. How playful and whimsical should the new site be? The GoGo squeeZ site is full of smiles and kitchy illustrations that make you grin as you explore the site. gogosqueez.com/go-playfully

77. COLOR Flat Highlysaturated Littlecolor Organictextures Monochromatic CONCEPT Softwareaslifestyle Human-centerednarratives Case-studydriven Showtheapp TONE Playful Professional

78. COLOR Flat Highlysaturated Littlecolor Organictextures Monochromatic CONCEPT Softwareaslifestyle Human-centerednarratives Case-studydriven Showtheapp TONE Playful Professional

79. is.gd/visualinventory

80. INVENTORY Interface Inventory Performance Budget Visual Inventory

81. Designers sketch. PLAN INVENTORY SKETCH 01 02 03 04 03

82. Element Collages SKETCH—01 / 02

84. element collages

85. element collages

86. “Electric”

87. “Shape, book, heart, bubble”

88. “Visual Booklists”

89. “Pages… themed in books”

90. “Turn the page for step 2”

92. “Turn the page for step 2”

93. “Visual Booklists”

94. “Pages, themed in books”

95. Turn powerful phrases into visual hooks.

97. Turn powerful phrases into visual hooks. is.gd/superfriendlyrif

102. Obviously, this isn’t a website, but I see how it could be one.” —The perfect reaction to a modern design deliverable “

105. typecast.com

114. clearleft.com/thinks/visualdesignexplorations

116. drbl.in/gXno

119. Element collages are like giving your client a peek at all those hidden layers.” —Paul Lloyd, Designer, The Guardian “

120. On designing in the browser

121. Designing in the browser is often the same as skipping design.

122. Designers should learn to code” is often the same as “designers should just become developers.” “

123. Sites that are designed in the browser often look designed in the browser.

126. Let’s change the phrase designing in the browser to deciding in the browser.

127. Prototypes SKETCH—02 / 02

129. @jkosoy Jamie Kosoy

130. JAMIE’S GUIDELINES FOR PROTOTYPING Each prototype must take less than 1 hour to make The first prototype should be something that anyone can build Build ugly

144. Problem & Solution Statements

159. SKETCH PrototypesElement Collages

160. Designers assemble. PLAN INVENTORY SKETCH ASSEMBLE 01 02 03 04 04

161. Photo: is.gd/m6eBsL Mise en place

162. Creative Cloud Libraries ASSEMBLE—01 / 02

164. Pattern Lab ASSEMBLE—02 / 02

165. patternlab.io

169. ASSEMBLE Libraries Pattern Lab

170. OUTPUT—BEFORE

171. OUTPUT—AFTER Interview Manifesto Interface Inventory Performance Budget Visual Inventory Element Collages Prototypes Pattern Lab Libraries

172. TOOLS—BEFORE

173. TOOLS—AFTER

174. It’s not reinvention. It’s evolution.

176. Special thanks to The Noun Project for use of these icons: Microphone by Edward Boatman Gauge by Scott Kember Light Bulb by Matt Brooks Audit by Miroslav Kosa Drawers by Pham Thi Dieu Linh thenounproject.com

So…What Do I Make? (Dan Mall)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to So…What Do I Make? (Dan Mall)

Similar to So…What Do I Make? (Dan Mall) (20)

More from Future Insights

More from Future Insights (20)

Recently uploaded

Recently uploaded (20)

So…What Do I Make? (Dan Mall)