Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
-
Upload
jenrobbins -
Category
Design
-
view
118 -
download
1
description
Transcript of Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
![Page 1: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/1.jpg)
Designers and CodeDesigners and CodeDesigners and Code
Jennifer Robbins • @jenville
and workflows and stuff
links: artfactconf.com/robbins
![Page 2: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/2.jpg)
me, 1993
![Page 3: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/3.jpg)
In June 1993 there 130 websites in the world.
!e World Wide Web in 1993
![Page 4: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/4.jpg)
Global Network Navigator (GNN)1993
![Page 5: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/5.jpg)
me, 5 years old
Hair style hasn’t changed.
![Page 6: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/6.jpg)
![Page 7: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/7.jpg)
![Page 8: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/8.jpg)
![Page 9: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/9.jpg)
Head-DESKHEAD-DESKHEAD-DESK
![Page 10: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/10.jpg)
Change is hard.
![Page 11: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/11.jpg)
I wish...
![Page 12: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/12.jpg)
![Page 13: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/13.jpg)
![Page 14: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/14.jpg)
• What does the web design process look like now?
• How is HTML/CSS being used as a design tool?
• What deliverables make sense?
• What tools are available?
• What do we tell our clients and bosses?
![Page 15: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/15.jpg)
PROCESSPROCESSPROCESS
![Page 16: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/16.jpg)
Product Development
idea launch
![Page 17: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/17.jpg)
research maintenance
idea launch
Product Development
![Page 18: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/18.jpg)
idea launch
User Experience (UX)user interviews
personas
design strategies
scenarios
user stories
![Page 19: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/19.jpg)
idea launch
Information Architecture& Content Strategy
card sorts
content audit
taxonomies
site maps
![Page 20: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/20.jpg)
idea launch
Interaction and UI Design
wireframes
user journeys
prototypes
flow diagrams
![Page 21: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/21.jpg)
idea launch
Visual Style Treatments
typography
layout
mood/atmosphere
colors
imagery
![Page 22: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/22.jpg)
idea launch
Frontend Development
HTML
CSS
JavaScript
performance optimization
accessibility
![Page 23: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/23.jpg)
idea launch
Backend & Server
PHP
Ruby
Python
Java
![Page 24: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/24.jpg)
idea launch
Where I work...
strategy
site maps
wireframesuser journeys
flow diagrams
typography
layout
comps/mockups
mood/atmosphere
HTML
CSS
![Page 25: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/25.jpg)
idea launch
![Page 26: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/26.jpg)
idea launch
![Page 27: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/27.jpg)
idea launch
In the past, the need for coding skills increased as you got closer to launch
![Page 28: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/28.jpg)
idea launch
HTML wireframes
HTML prototypes
I’m seeing code move back into the design process
![Page 29: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/29.jpg)
“Here, code this for me.”
FROM
![Page 30: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/30.jpg)
Code as a design toolGit’s not so bad.
CHRISTOPHER SCHMITT
TO
![Page 31: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/31.jpg)
plan design develop deploy
![Page 32: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/32.jpg)
plan design develop deploy
wireframes PSD comps code
Waterfall development
![Page 33: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/33.jpg)
design
develop
![Page 34: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/34.jpg)
Agile development
![Page 35: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/35.jpg)
• 2001 Agile Manifesto
• Iterative & incremental
• Teams are integrated, not silo’d
• Working so"ware trumps static documents about so"ware(“Just start building.”)
Agile development
![Page 36: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/36.jpg)
“Over the wall” handoffs
FROM
![Page 37: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/37.jpg)
Frequent iterations by integrated teams
TO
![Page 38: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/38.jpg)
RESPONSIVE!RESPONSIVE!RESPONSIVE!
RESPONSIVE!RESPONSIVE!RESPONSIVE!
RESPONSIVE!RESPONSIVE!RESPONSIVE!
![Page 39: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/39.jpg)
• A fluid layout
• Flexible images
• CSS media queries
Components of Responsive Design
![Page 40: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/40.jpg)
ETHAN MARCOTTE
![Page 41: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/41.jpg)
[courtesy of Brad Frost (bradfrostweb.com)]
![Page 42: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/42.jpg)
[courtesy of Brad Frost (bradfrostweb.com)]
![Page 43: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/43.jpg)
"e Web is 960 pixels wide.
FROM
![Page 44: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/44.jpg)
The Web is all sizes.
TO
![Page 45: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/45.jpg)
The Web is all sizes.
It’s at my desk and on the bus and on my couch and in my bed and...
It’s keyboard and touch.
It’s slow and fast.
It’s 10 inches and 10 feet away
![Page 46: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/46.jpg)
63% of cell phone owners
use phone to access Internet
34% of them mostly or only
use a phone to access Internet
2013 Pew Internet Survey
bit.ly/14VCt8R
![Page 47: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/47.jpg)
“The survey found that speed (41%) and consistency with the PC web experience (33.2%) were
clearly the most important things to mobile web users.”
2013 People’s Web Report
bit.ly/12ndU11
![Page 48: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/48.jpg)
“43.3% of consumers surveyed would wait to use a PC site,
rather than use a version that does not function well on a
mobile device.”
2013 People’s Web Report
bit.ly/12ndU11
![Page 49: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/49.jpg)
“Over 30% simply will not bother trying to use the non-optimized site, or will turn to a competitor
instead.”
2013 People’s Web Report
bit.ly/12ndU11
![Page 50: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/50.jpg)
Toward a new Workflow
Toward a new workflow
Toward a new WORKFLOW
![Page 51: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/51.jpg)
Responsive SummitLondon • February 2012
responsivesummit.com
![Page 52: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/52.jpg)
PlanSketchLo-fi HTML Prototype Increase FidelityIterate/Talk
www.markboulton.co.uk/journal/responsive-summit-workflow
![Page 53: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/53.jpg)
“Responsive Workflow,” by Viljami Salminen
viljamis.com/blog/2012/responsive-workflow/
![Page 54: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/54.jpg)
“Web Design Process in a Responsive World,” by Ben Callahan
speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
![Page 55: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/55.jpg)
“Web Design Process in a Responsive World,” by Ben Callahan
plan
visual design
HTML prototype
increased fidelity
speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
![Page 56: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/56.jpg)
“Responsive Design Workflow,” by Stephen Hay
plan
HTML prototyping
increase fidelity
client deliverables
developer deliverable
speakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012
![Page 57: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/57.jpg)
by Stephen Hay
![Page 58: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/58.jpg)
PlanSketchHTML PrototypeIncrease FidelityIterate/Talk
![Page 59: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/59.jpg)
A website is made of pages.
FROM
![Page 60: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/60.jpg)
A website is a system.
TO
![Page 61: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/61.jpg)
• Start with content, real or representative
• Identify all content types and components
• Treat content as modules
• Assign priority to every content type
Plan (Content First)
![Page 62: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/62.jpg)
• Content type inventory
• Content priority document
Content deliverables
![Page 63: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/63.jpg)
PlanSketchHTML PrototypeIncrease FidelityIterate/Talk
![Page 64: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/64.jpg)
“Ideas want to be ugly.”—Jason Santa Maria
![Page 65: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/65.jpg)
http://bit.ly/jinx8w
![Page 66: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/66.jpg)
![Page 67: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/67.jpg)
Normally, you’d whip up some wireframes right about now, but...
![Page 68: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/68.jpg)
Wireframe diagrams
FROM
![Page 69: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/69.jpg)
HTML prototypes
TO
![Page 70: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/70.jpg)
PlanSketchHTML PrototypeIncrease FidelityIterate/Talk
![Page 71: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/71.jpg)
• Prioritized content
• Minimally styled
• NOT necessarily production quality
• Shows basic layout, navigation, and interactivity
HTML Prototypes
Let’s talk layout.
JEN SIMMONS
![Page 72: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/72.jpg)
• Can begin testing on various devices
• Gives the client a more realistic experience
• Saves time overall
• May provide a head-start on production
Advantages of Prototypes
![Page 73: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/73.jpg)
GridpakGridset
Protyping Tools
Grid Systems
![Page 74: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/74.jpg)
Protyping Tools
Responsive Frameworks
• Foundation
• Bootstrap
• Proty
• Skeleton
• 320 and Up
• Jeet
Let’s take ‘em for a spin.
JARED PONCHOT
![Page 75: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/75.jpg)
PlanSketchHTML PrototypeIncrease FidelityIterate/Talk
![Page 76: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/76.jpg)
• Color and texture
• Imagery
• White space
• Typographic treatments
Visual Layer
Give web fonts a try!
JASON PAMENTAL
![Page 77: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/77.jpg)
create vs.communicatecreate vs.
communicatecreate vs.
communicate
![Page 78: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/78.jpg)
“You suck if you use Photoshop.”
Nobody panic.
DAN ROSE
![Page 79: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/79.jpg)
Creative Exploration
• “Design in Browser”
![Page 80: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/80.jpg)
www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/
—Sarah Parmenter...my designs end up suffering, looking boxy, bland and uninspiring.
![Page 81: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/81.jpg)
Creative Exploration
• “Design in Browser” w/ CSS
• Photoshop/Fireworks/Illustrator then move to browser a.s.a.p.
![Page 82: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/82.jpg)
“Let’s change the phrase ‘designing in the browser’ to
‘deciding in the browser.’”
—Dan Mall
![Page 83: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/83.jpg)
Creative Exploration
• “Design in Browser” w/ CSS
• Photoshop/Fireworks/Illustrator then move to browser a.s.a.p.
• Visual responsive layout tool
![Page 84: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/84.jpg)
Adobe Edge Reflow
html.adobe.com/edge/reflow
![Page 85: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/85.jpg)
Macaw
macaw.co
![Page 86: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/86.jpg)
froont.com
Froont
![Page 87: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/87.jpg)
webflow.com
Webflow
![Page 88: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/88.jpg)
“Design” begins and ends in Photoshop
FROM
![Page 89: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/89.jpg)
Designing with CSS
TO
![Page 90: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/90.jpg)
Let’s talk deliverables...
![Page 91: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/91.jpg)
Static mockups don’t cut it anymore.
![Page 92: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/92.jpg)
—Andy Clarke
https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
“...like bringing a knife to a gunfight.”
![Page 93: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/93.jpg)
• Don’t display web fonts accurately
• Can’t show flexible/responsive layouts
• Don’t show interactions and transitions
• Set wrong expectations
• Design changes are time-consuming
Static mockup drawbacks
![Page 94: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/94.jpg)
![Page 95: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/95.jpg)
?
![Page 96: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/96.jpg)
Design deliverables
•Style exploration
![Page 97: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/97.jpg)
style tiles style prototypes element collage
![Page 98: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/98.jpg)
style tiles style prototypes element collage
BEN CALLAHANYESENIA PEREZ-CRUZ
![Page 99: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/99.jpg)
Design deliverables
• Style exploration (independent of layout)
•High-fidelity prototype
![Page 100: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/100.jpg)
notnecessarilythis
Photo by Brad Frost
![Page 101: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/101.jpg)
Design deliverables
• Style exploration (independent of layout)
• High-fidelity prototype (for testing)
•Image assets
![Page 102: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/102.jpg)
DAVE RUPERT
Mo pixels?No problem!
![Page 103: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/103.jpg)
Design deliverables
• Style exploration (independent of layout)
• High-fidelity prototype (for testing)
• Image assets (think of performance)
•Style guides!
![Page 104: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/104.jpg)
Style Guides/Pattern Libraries
• Documents every content component
• Describes how they are used
• HTML markup, CSS styles, scripts
• Describes what happens on resizing
![Page 105: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/105.jpg)
BBC Global Experience Language (GEL)
www.bbc.co.uk/gel/mobile/device-considerations/philosophy
![Page 106: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/106.jpg)
Starbucks
www.starbucks.com/static/reference/styleguide/
![Page 107: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/107.jpg)
South Tees Hospital
www.southtees.nhs.uk/style-guide/
![Page 108: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/108.jpg)
gim.ie/fZyKCompiled by Anna Debenham
![Page 109: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/109.jpg)
ANDY PRATT
Let’s not stop there.
![Page 110: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/110.jpg)
PlanSketchHTML PrototypeIncrease FidelityIterate/Talk
![Page 111: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/111.jpg)
“TA DA!”
FROM
![Page 112: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/112.jpg)
Clients as collaborators.
TO
![Page 113: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/113.jpg)
www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
![Page 114: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/114.jpg)
alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
![Page 115: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/115.jpg)
JEN SIMMONS
MATT GRIFFIN
DREW CLEMENS
KRISTIN ELLINGTON
![Page 116: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/116.jpg)
So...So...So...
![Page 117: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/117.jpg)
Key characteristics of new workflow
![Page 118: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/118.jpg)
Key characteristics of new workflow
• From waterfall to agile process
• From silo’d departments to integrated teams
• From pages to systems (content modules)
• From static deliverables to working prototypes
• From “Big Reveal” to clients as collaborators
![Page 119: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/119.jpg)
KEVIN SHARON SOPHIE SHEPHERD
Try something new!
![Page 120: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/120.jpg)
WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT?
BRAD FROST
...it’s made out of PEOPLE!
![Page 121: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/121.jpg)
Keep trying things.
Keep sharing.
Enjoy ARTIFACT!
![Page 122: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/122.jpg)
I’m readyare You?
thanks for listening!
Jennifer Robbins@jenville
Excerpt from “Boys Are Sexxy”
![Page 123: Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)](https://reader033.fdocuments.us/reader033/viewer/2022042607/54c71b594a795926358b45ca/html5/thumbnails/123.jpg)