so…what do i make? (dan mall)
TRANSCRIPT
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 deliverables come with conversation
Frameworks, not processes
A new framework for designers
Designersplan.PLAN01
02
03
04
01
InterviewP L A N — 0 1 / 0 2
ManifestoP L A N — 0 2 / 0 2
Before I design anything, I write.
When I’m having trouble with a design, I write.
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.
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’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.
P L A N
Interview Manifesto
Designersinventory.PLAN
INVENTORY
01
02
03
04
02
Interface InventoryI N V E N T O R Y— 0 1 / 0 3
Sometime in the middle of your project, do an interface inventory. It’ll help keep you on track.
Performance Budgets
I N V E N T O R Y— 0 2 / 0 3
Performance was literally a matter of life or death.
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
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
People perceive tasks as faster or slower when there’s at least a 20% time difference.
—Tim Kadlec, Fast Enough, is.gd/fastenough
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
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
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 target
6.344 s × 96 kb/s = 609.02 kb
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 target
6.344 s × 96 kb/s = 609.02 kb
321.98 kb
HTML CSS JS Images Webfonts
321.98 kb
HTML CSS JS Images Webfonts
60kb58kb
295kb
Averages taken from httparchive.org
321.98 kb
HTML CSS JS Images Webfonts
60kb58kb
295kb
Averages taken from httparchive.org
-91kb
HTML CSS JS Images Webfonts
60kb58kb 29kb
Averages taken from httparchive.org
87kb (~4 images)
87kb (~6 webfonts)
321.98 kb 175 kb
HTML CSS JS Images Webfonts
60kb58kb 29kb
Averages taken from httparchive.org
114kb (~6 images)
60kb (~4 webfonts)
321.98 kb 175 kb
Visual InventoryI N V E N T O R Y— 0 3 / 0 3
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
“
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?
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
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
COLOR
Flat Highly saturated Little color Organic textures Monochromatic
CONCEPT
Software as lifestyle Human-centered narratives Case-study driven Show the app
TONE
Playful Professional
COLOR
Flat Highly saturated Little color Organic textures Monochromatic
CONCEPT
Software as lifestyle Human-centered narratives Case-study driven Show the app
TONE
Playful Professional
I N V E N T O R Y
Interface Inventory
Performance Budget
Visual Inventory
Designerssketch.
PLAN
INVENTORY
SKETCH
01
02
03
04
03
Element CollagesS K E T C H — 0 1 / 0 2
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.
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.
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.
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.
PrototypesS K E T C H — 0 2 / 0 2
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
Problem & Solution Statements
S K E T C H
PrototypesElement Collages
Designersassemble.
PLAN
INVENTORY
SKETCH
ASSEMBLE
01
02
03
04
04
Creative Cloud Libraries
A S S E M B L E — 0 1 / 0 2
Pattern LabA S S E M B L E — 0 2 / 0 2
A S S E M B L E
Libraries Pattern Lab
OUTPUT—BEFORE
OUTPUT—AFTER
Interview ManifestoInterface Inventory
Performance Budget
Visual Inventory
Element Collages
Prototypes Pattern Lab
Libraries
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 by Matt Brooks Audit by Miroslav Kosa Drawers by Pham Thi Dieu Linh
thenounproject.com