Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015 Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.

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

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

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

6. Designer Developer Content
Strategist
Information
Architect

7. Designer Developer Content
Strategist
Information
Architect

8. 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

48. 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

50. 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

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.

96. Turn powerful phrases into visual hooks.

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

98. Turn powerful phrases into visual hooks.

99. Turn powerful phrases into visual hooks.

100. Turn powerful phrases into visual hooks.

101. Turn powerful phrases into visual hooks.

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

104. Turn powerful phrases into visual hooks.

105. typecast.com

109. Turn powerful phrases into visual hooks.

110. Turn powerful phrases into visual hooks.

111. Turn powerful phrases into visual hooks.

112. Turn powerful phrases into visual hooks.

113. Turn powerful phrases into visual hooks.

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