Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web workers are
categorized by titles,
tools, and output.
Web workers are
categorized by titles,
tools, and output.
Designer Developer Content
Strategist
Information
Architect
Web workers are
categorized by titles,
tools, and output.
Designer Developer Content
Strategist
Information
Architect
Web workers are
categorized by titles,
tools, and output.
Designer Developer Content
Strategist
Information
Architect
Designer Developer Content
Strategist
Information
Architect
Designer Developer Content
Strategist
Information
Architect
Designer Developer Content
Strategist
Information
Architect
GOALS FOR NEW TOOLS AND OUTPUTS
Highest fidelity in shortest amount of time
Remove abstractions wherever possible
All deli...
Frameworks,
not processes
A new framework
for designers
Designers
plan.PLAN01
02
03
04
01
Interview
PLAN—01 / 02
Manifesto
PLAN—02 / 02
Before I design anything,
I write.
When I’m having trouble
with a design, I write.
ommwriter.com
brettterpstra.com/projects/nvalt/
Manifestos contain creative direction.
Manifestos contain a point of view.
Manifestos say what you’re going to do,
and, mo...
Home Synopsis The Characters The Actors Trailers
Home The Magic
of Love
Harry, Ron,
Hermione &
more
Seven Movies &
Eight Books
J.K. Rowling
WHAT THE MANIFESTO MUST HAVE SAID
The Harry Potter series is one of most
popular and best-selling stories of all
time. Let...
is.gd/uiecreativebrief
is.gd/cdcamp
PLAN
Interview Manifesto
Designers
inventory.PLAN
INVENTORY
01
02
03
04
02
Interface Inventory
INVENTORY—01 / 03
is.gd/interfaceinventory
Sometime in the middle
of your project, do an
interface inventory. It’ll
help keep you on track.
Via @jasonsantamaria
Performance
Budgets
INVENTORY—02 / 03
An Open Redesign: is.gd/rferlredesign
Performance was
literally a matter of
life or death.
webpagetest.org
rferl.mobi
Site
rferl.mobi 4.193 5.658 7.930
Site Start
Render
Visually
Complete
Fully
Loaded
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...
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...
People perceive tasks as faster
or slower when there’s at least
a 20% time difference.
—Tim Kadlec, Fast Enough, is.gd/fas...
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...
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/ne...
768 Kilobits per second
8 bits = 1 byte
768
768 Kbsp ÷ 8 bits/byte = 96 kb/s
8
768
Start Render target
3.354 s × 96 kb/s = 321.98 kb
Start Render target
3.354 s × 96 kb/s = 321.98 kb
Visually complete target
4.526 s × 96 kb/s = 434.5 kb
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 targe...
You can’t mock up
performance in Photoshop.”
—Brad Frost, Smashing Conference, is.gd/smashingconf2012
“
You can’t mock up
performance in Photoshop.”
—Brad Frost, Smashing Conference, is.gd/smashingconf2012
“
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 targe...
321.98 kb
HTML CSS JS Images Webfonts
321.98 kb
HTML CSS JS Images Webfonts
60kb
58kb
295kb
Averages taken from httparchive.org
321.98 kb
HTML CSS JS Images Webfonts
60kb
58kb
295kb
Averages taken from httparchive.org
-91kb
HTML CSS JS Images Webfonts
60kb
58kb 29kb
Averages taken from httparchive.org
87kb
(~4 images)
87kb
(~6 webfonts)
321.98 ...
HTML CSS JS Images Webfonts
60kb
58kb 29kb
Averages taken from httparchive.org
114kb
(~6 images)
60kb
(~4 webfonts)
321.98...
Visual Inventory
INVENTORY—03 / 03
Language was invented to ask
questions. Answers may be given by
grunts and gestures, but questions
must be spoken. Humanne...
Is showing the app on a shiny laptop
the best way to sell it?
Can their brand pull off a minimalist
design approach?
Shoul...
How playful and whimsical should
the new site be? The GoGo squeeZ
site is full of smiles and kitchy
illustrations that mak...
How playful and whimsical should
the new site be? The GoGo squeeZ
site is full of smiles and kitchy
illustrations that mak...
COLOR
Flat
Highlysaturated
Littlecolor
Organictextures
Monochromatic
CONCEPT
Softwareaslifestyle
Human-centerednarratives
...
COLOR
Flat
Highlysaturated
Littlecolor
Organictextures
Monochromatic
CONCEPT
Softwareaslifestyle
Human-centerednarratives
...
is.gd/visualinventory
INVENTORY
Interface
Inventory
Performance
Budget
Visual
Inventory
Designers
sketch.
PLAN
INVENTORY
SKETCH
01
02
03
04
03
Element Collages
SKETCH—01 / 02
element collages
element collages
“Electric”
“Shape, book, heart, bubble”
“Visual Booklists”
“Pages… themed in books”
“Turn the page for step 2”
“Turn the page for step 2”
“Visual Booklists”
“Pages, themed in books”
Turn powerful phrases
into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
is.gd/superfriendlyrif
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Obviously, this isn’t a website,
but I see how it could be one.”
—The perfect reaction to a modern design deliverable
“
Turn powerful phrases into visual hooks.
typecast.com
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
clearleft.com/thinks/visualdesignexplorations
drbl.in/gXno
Element collages are like giving
your client a peek at all those
hidden layers.”
—Paul Lloyd, Designer, The Guardian
“
On designing
in the browser
Designing in the browser
is often the same as
skipping design.
Designers should learn to code”
is often the same as “designers
should just become developers.”
“
Sites that are designed in
the browser often look
designed in the browser.
Let’s change the phrase
designing in the browser
to deciding in the browser.
Prototypes
SKETCH—02 / 02
@jkosoy
Jamie Kosoy
JAMIE’S GUIDELINES FOR PROTOTYPING
Each prototype must take less than
1 hour to make
The first prototype should be
somethi...
Problem & Solution
Statements
SKETCH
PrototypesElement
Collages
Designers
assemble.
PLAN
INVENTORY
SKETCH
ASSEMBLE
01
02
03
04
04
Photo: is.gd/m6eBsL
Mise en place
Creative Cloud
Libraries
ASSEMBLE—01 / 02
Pattern Lab
ASSEMBLE—02 / 02
patternlab.io
ASSEMBLE
Libraries Pattern
Lab
OUTPUT—BEFORE
OUTPUT—AFTER
Interview Manifesto
Interface
Inventory
Performance
Budget
Visual
Inventory
Element
Collages
Prototypes Patte...
TOOLS—BEFORE
TOOLS—AFTER
It’s not reinvention.
It’s evolution.
Special thanks to
The Noun Project for
use of these icons:
Microphone by Edward Boatman
Gauge by Scott Kember
Light Bulb b...
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
Upcoming SlideShare
Loading in …5
×

So…What Do I Make? (Dan Mall)

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.

So…What Do I Make? (Dan Mall)

  1. 1. Web workers are categorized by titles, tools, and output.
  2. 2. Web workers are categorized by titles, tools, and output. Designer Developer Content Strategist Information Architect
  3. 3. Web workers are categorized by titles, tools, and output. Designer Developer Content Strategist Information Architect
  4. 4. Web workers are categorized by titles, tools, and output. Designer Developer Content Strategist Information Architect
  5. 5. Designer Developer Content Strategist Information Architect
  6. 6. Designer Developer Content Strategist Information Architect
  7. 7. Designer Developer Content Strategist Information Architect
  8. 8. GOALS FOR NEW TOOLS AND OUTPUTS Highest fidelity in shortest amount of time Remove abstractions wherever possible All deliverables come with conversation
  9. 9. Frameworks, not processes
  10. 10. A new framework for designers
  11. 11. Designers plan.PLAN01 02 03 04 01
  12. 12. Interview PLAN—01 / 02
  13. 13. Manifesto PLAN—02 / 02
  14. 14. Before I design anything, I write. When I’m having trouble with a design, I write.
  15. 15. ommwriter.com
  16. 16. brettterpstra.com/projects/nvalt/
  17. 17. 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.
  18. 18. Home Synopsis The Characters The Actors Trailers
  19. 19. Home The Magic of Love Harry, Ron, Hermione & more Seven Movies & Eight Books J.K. Rowling
  20. 20. 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.
  21. 21. is.gd/uiecreativebrief
  22. 22. is.gd/cdcamp
  23. 23. PLAN Interview Manifesto
  24. 24. Designers inventory.PLAN INVENTORY 01 02 03 04 02
  25. 25. Interface Inventory INVENTORY—01 / 03
  26. 26. is.gd/interfaceinventory
  27. 27. Sometime in the middle of your project, do an interface inventory. It’ll help keep you on track.
  28. 28. Via @jasonsantamaria
  29. 29. Performance Budgets INVENTORY—02 / 03
  30. 30. An Open Redesign: is.gd/rferlredesign
  31. 31. Performance was literally a matter of life or death.
  32. 32. webpagetest.org
  33. 33. rferl.mobi Site
  34. 34. rferl.mobi 4.193 5.658 7.930 Site Start Render Visually Complete Fully Loaded
  35. 35. 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
  36. 36. 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
  37. 37. People perceive tasks as faster or slower when there’s at least a 20% time difference. —Tim Kadlec, Fast Enough, is.gd/fastenough
  38. 38. 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
  39. 39. 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
  40. 40. 768 Kilobits per second
  41. 41. 8 bits = 1 byte 768
  42. 42. 768 Kbsp ÷ 8 bits/byte = 96 kb/s 8 768
  43. 43. Start Render target 3.354 s × 96 kb/s = 321.98 kb
  44. 44. Start Render target 3.354 s × 96 kb/s = 321.98 kb Visually complete target 4.526 s × 96 kb/s = 434.5 kb
  45. 45. 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
  46. 46. You can’t mock up performance in Photoshop.” —Brad Frost, Smashing Conference, is.gd/smashingconf2012 “
  47. 47. You can’t mock up performance in Photoshop.” —Brad Frost, Smashing Conference, is.gd/smashingconf2012 “
  48. 48. 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
  49. 49. 321.98 kb HTML CSS JS Images Webfonts
  50. 50. 321.98 kb HTML CSS JS Images Webfonts 60kb 58kb 295kb Averages taken from httparchive.org
  51. 51. 321.98 kb HTML CSS JS Images Webfonts 60kb 58kb 295kb Averages taken from httparchive.org -91kb
  52. 52. HTML CSS JS Images Webfonts 60kb 58kb 29kb Averages taken from httparchive.org 87kb (~4 images) 87kb (~6 webfonts) 321.98 kb 175 kb
  53. 53. HTML CSS JS Images Webfonts 60kb 58kb 29kb Averages taken from httparchive.org 114kb (~6 images) 60kb (~4 webfonts) 321.98 kb 175 kb
  54. 54. Visual Inventory INVENTORY—03 / 03
  55. 55. 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 “
  56. 56. 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?
  57. 57. 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
  58. 58. 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
  59. 59. COLOR Flat Highlysaturated Littlecolor Organictextures Monochromatic CONCEPT Softwareaslifestyle Human-centerednarratives Case-studydriven Showtheapp TONE Playful Professional
  60. 60. COLOR Flat Highlysaturated Littlecolor Organictextures Monochromatic CONCEPT Softwareaslifestyle Human-centerednarratives Case-studydriven Showtheapp TONE Playful Professional
  61. 61. is.gd/visualinventory
  62. 62. INVENTORY Interface Inventory Performance Budget Visual Inventory
  63. 63. Designers sketch. PLAN INVENTORY SKETCH 01 02 03 04 03
  64. 64. Element Collages SKETCH—01 / 02
  65. 65. element collages
  66. 66. element collages
  67. 67. “Electric”
  68. 68. “Shape, book, heart, bubble”
  69. 69. “Visual Booklists”
  70. 70. “Pages… themed in books”
  71. 71. “Turn the page for step 2”
  72. 72. “Turn the page for step 2”
  73. 73. “Visual Booklists”
  74. 74. “Pages, themed in books”
  75. 75. Turn powerful phrases into visual hooks.
  76. 76. Turn powerful phrases into visual hooks.
  77. 77. Turn powerful phrases into visual hooks. is.gd/superfriendlyrif
  78. 78. Turn powerful phrases into visual hooks.
  79. 79. Turn powerful phrases into visual hooks.
  80. 80. Turn powerful phrases into visual hooks.
  81. 81. Turn powerful phrases into visual hooks.
  82. 82. Obviously, this isn’t a website, but I see how it could be one.” —The perfect reaction to a modern design deliverable “
  83. 83. Turn powerful phrases into visual hooks.
  84. 84. typecast.com
  85. 85. Turn powerful phrases into visual hooks.
  86. 86. Turn powerful phrases into visual hooks.
  87. 87. Turn powerful phrases into visual hooks.
  88. 88. Turn powerful phrases into visual hooks.
  89. 89. Turn powerful phrases into visual hooks.
  90. 90. clearleft.com/thinks/visualdesignexplorations
  91. 91. drbl.in/gXno
  92. 92. Element collages are like giving your client a peek at all those hidden layers.” —Paul Lloyd, Designer, The Guardian “
  93. 93. On designing in the browser
  94. 94. Designing in the browser is often the same as skipping design.
  95. 95. Designers should learn to code” is often the same as “designers should just become developers.” “
  96. 96. Sites that are designed in the browser often look designed in the browser.
  97. 97. Let’s change the phrase designing in the browser to deciding in the browser.
  98. 98. Prototypes SKETCH—02 / 02
  99. 99. @jkosoy Jamie Kosoy
  100. 100. 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
  101. 101. Problem & Solution Statements
  102. 102. SKETCH PrototypesElement Collages
  103. 103. Designers assemble. PLAN INVENTORY SKETCH ASSEMBLE 01 02 03 04 04
  104. 104. Photo: is.gd/m6eBsL Mise en place
  105. 105. Creative Cloud Libraries ASSEMBLE—01 / 02
  106. 106. Pattern Lab ASSEMBLE—02 / 02
  107. 107. patternlab.io
  108. 108. ASSEMBLE Libraries Pattern Lab
  109. 109. OUTPUT—BEFORE
  110. 110. OUTPUT—AFTER Interview Manifesto Interface Inventory Performance Budget Visual Inventory Element Collages Prototypes Pattern Lab Libraries
  111. 111. TOOLS—BEFORE
  112. 112. TOOLS—AFTER
  113. 113. It’s not reinvention. It’s evolution.
  114. 114. 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

×