jennifer robbins: artifact conference keynote
DESCRIPTION
This presentation was given as the opening keynote at the inaugural ARTIFACT conference in Austin, TX, May 13, 2013.TRANSCRIPT
![Page 1: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/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 Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/2.jpg)
me, 1993
![Page 3: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/3.jpg)
In June 1993 there 130 websites in the world.
!e World Wide Web in 1993
![Page 4: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/4.jpg)
Global Network Navigator (GNN)1993
![Page 5: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/5.jpg)
me, 5 years old
Hair style hasn’t changed.
![Page 6: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/6.jpg)
![Page 7: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/7.jpg)
![Page 8: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/8.jpg)
![Page 9: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/9.jpg)
Head-DESKHEAD-DESKHEAD-DESK
![Page 10: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/10.jpg)
Change is hard.
![Page 11: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/11.jpg)
TRENT WALTON
I hear ya, Jen!
![Page 12: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/12.jpg)
My wish...
![Page 13: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/13.jpg)
![Page 14: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/14.jpg)
![Page 15: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/15.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 16: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/16.jpg)
PROCESSPROCESSPROCESS
![Page 17: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/17.jpg)
Product Development
idea launch
![Page 18: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/18.jpg)
research maintenance
idea launch
Product Development
![Page 19: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/19.jpg)
idea launch
User Experience (UX)user interviews
personas
design strategies
scenarios
user stories
![Page 20: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/20.jpg)
idea launch
Information Architecture& Content Strategy
card sorts
content audit
taxonomies
site maps
![Page 21: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/21.jpg)
idea launch
Interaction and UI Design
wireframes
user journeys
prototypes
flow diagrams
![Page 22: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/22.jpg)
idea launch
Visual Design
typography
layout
comps/mockups
mood/atmosphere
colors
imagery
![Page 23: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/23.jpg)
idea launch
Frontend Development
HTML
CSS
JavaScript
performance optimization
accessibility
![Page 24: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/24.jpg)
idea launch
Backend & Server
PHP
Ruby
Python
Java
![Page 25: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/25.jpg)
idea launch
Where I work...
strategy
site maps
wireframesuser journeys
flow diagrams
typography
layout
comps/mockups
mood/atmosphere
HTML
CSS
![Page 26: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/26.jpg)
idea launch
![Page 27: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/27.jpg)
idea launch
![Page 28: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/28.jpg)
idea launch
In the past, the need for coding skills increased as you got closer to launch
![Page 29: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/29.jpg)
idea launch
HTML wireframes
HTML prototypes
I’m seeing code move back into the design process
![Page 30: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/30.jpg)
“Here, code this for me.”
FROM
![Page 31: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/31.jpg)
Code as a design toolGit’s not so bad.
CHRISTOPHER SCHMITT
TO
![Page 32: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/32.jpg)
plan design develop deploy
![Page 33: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/33.jpg)
plan design develop deploy
wireframes PSD comps code
Waterfall development
![Page 34: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/34.jpg)
design
develop
![Page 35: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/35.jpg)
Agile development
![Page 36: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/36.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 37: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/37.jpg)
“Over the wall” handoffs
FROM
![Page 38: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/38.jpg)
Frequent iterations by integrated teams
TO
![Page 39: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/39.jpg)
RESPONSIVE!RESPONSIVE!RESPONSIVE!
RESPONSIVE!RESPONSIVE!RESPONSIVE!
RESPONSIVE!RESPONSIVE!RESPONSIVE!
![Page 40: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/40.jpg)
• A fluid layout
• Flexible images
• CSS media queries
Components of Responsive Design
![Page 41: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/41.jpg)
[courtesy of Brad Frost (bradfrostweb.com)]
![Page 42: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/42.jpg)
[courtesy of Brad Frost (bradfrostweb.com)]
![Page 43: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/43.jpg)
!e Web is 960 pixels wide.
FROM
![Page 44: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/44.jpg)
The Web is all sizes.
TO
![Page 45: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/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.
![Page 46: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/46.jpg)
Toward a new Workflow
Toward a new workflow
Toward a new WORKFLOW
![Page 47: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/47.jpg)
Responsive SummitLondon • February 2012
responsivesummit.com
![Page 48: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/48.jpg)
1. Plan2. Sketch3. Lo-fi HTML Prototype 4. Increase Fidelity5. Iterate/Talk
www.markboulton.co.uk/journal/responsive-summit-workflow
![Page 49: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/49.jpg)
“Responsive Workflow,” by Viljami Salminen
viljamis.com/blog/2012/responsive-workflow/
![Page 50: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/50.jpg)
“Web Design Process in a Responsive World,” by Ben Callahan
speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
![Page 51: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/51.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 52: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/52.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 53: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/53.jpg)
by Stephen Hay
![Page 54: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/54.jpg)
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
![Page 55: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/55.jpg)
A website is made of pages.
FROM
![Page 56: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/56.jpg)
A website is a system.
TO
![Page 57: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/57.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 58: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/58.jpg)
• Content type inventory
• Content priority document
Content deliverables
![Page 59: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/59.jpg)
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
![Page 60: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/60.jpg)
“Ideas want to be ugly.”—Jason Santa Maria
![Page 61: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/61.jpg)
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
![Page 62: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/62.jpg)
![Page 63: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/63.jpg)
Normally, you’d whip up some wireframes right about now, but...
![Page 64: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/64.jpg)
Wireframe diagrams
FROM
![Page 65: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/65.jpg)
HTML prototypes
TO
![Page 66: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/66.jpg)
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
![Page 67: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/67.jpg)
• Prioritized content
• Minimally styled
• NOT necessarily production quality
• Shows basic layout, navigation, and interactivity
HTML Prototypes
Let’s talk layout.
JEN SIMMONS
![Page 68: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/68.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 over wireframes
![Page 69: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/69.jpg)
GridpakGridset
Protyping Tools
Grid Systems
![Page 70: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/70.jpg)
Protyping Tools
Responsive Frameworks
• Foundation
• Bootstrap
• Proty
• Skeleton
• 320 and Up
Let’s take ‘em for a spin.
JARED PONCHOT
![Page 71: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/71.jpg)
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
![Page 72: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/72.jpg)
• Color and texture
• Imagery
• White space
• Typographic treatments
Visual Design
Give web fonts a try!
JASON PAMENTAL
![Page 73: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/73.jpg)
create vs.communicatecreate vs.
communicatecreate vs.
communicate
![Page 74: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/74.jpg)
“You suck if you use Photoshop.”
Nobody panic.
DAN ROSE
![Page 75: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/75.jpg)
Visual Design approaches
• “Design in Browser”
![Page 76: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/76.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 77: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/77.jpg)
Visual Design approaches
• “Design in Browser” w/ CSS
• Photoshop/Fireworks/Illustrator then move to browser a.s.a.p.
![Page 78: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/78.jpg)
“Let’s change the phrase ‘designing in the browser’ to
‘deciding in the browser.’”
—Dan Mall
![Page 79: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/79.jpg)
css-tricks.com/conferences/BDConf2012-Workflow.pdf
Chris Coyier does...
![Page 80: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/80.jpg)
“Work in Photoshop and Fireworks, by all means (I do). Make static visuals as rich and as detailed as you want them to be.
Just don’t set the wrong expectations by showing them to your clients.”
—Andy Clarke
![Page 81: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/81.jpg)
Visual Design approaches
• “Design in Browser” w/ CSS
• Photoshop/Fireworks/Illustrator then move to browser a.s.a.p.
• Visual responsive layout tool
![Page 82: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/82.jpg)
Adobe Edge Reflow
html.adobe.com/edge/reflow
![Page 83: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/83.jpg)
froont.com
Froont
![Page 84: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/84.jpg)
(webflow.com)
Webflow
![Page 85: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/85.jpg)
“Design” begins and ends in Photoshop
FROM
![Page 86: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/86.jpg)
Designing with CSS.
TO
![Page 87: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/87.jpg)
Let’s talk deliverables...
![Page 88: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/88.jpg)
Static mockups don’t cut it anymore.
![Page 89: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/89.jpg)
—Andy Clarke
https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
“Like bringing a knife to a gunfight.”
![Page 90: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/90.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 91: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/91.jpg)
![Page 92: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/92.jpg)
?
![Page 93: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/93.jpg)
Design deliverables
•Visual style exploration
![Page 94: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/94.jpg)
style tiles style prototypes element collage
![Page 95: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/95.jpg)
style tiles style prototypes element collage
BEN CALLAHAN DAN MALLYESENIA PEREZ-CRUZ
![Page 96: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/96.jpg)
Design deliverables
• Visual style exploration (independent of layout)
•High-fidelity prototype
![Page 97: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/97.jpg)
notnecessarilythis
Photo by Brad Frost
![Page 98: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/98.jpg)
Design deliverables
• Visual style exploration (independent of layout)
• High-fidelity prototype (for testing)
•Image assets
![Page 99: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/99.jpg)
DAVE RUPERT
Mo pixels?No problem!
![Page 100: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/100.jpg)
Design deliverables
• Visual style exploration (independent of layout)
• High-fidelity prototype (for testing)
• Image assets (think of performance)
•Style guides!
![Page 101: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/101.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 102: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/102.jpg)
BBC Global Experience Language (GEL)
www.bbc.co.uk/gel/mobile/device-considerations/philosophy
![Page 103: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/103.jpg)
Starbucks style guide
www.starbucks.com/static/reference/styleguide/
![Page 104: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/104.jpg)
South Tees Hospital
www.southtees.nhs.uk/style-guide/
![Page 105: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/105.jpg)
gim.ie/fZyKCompiled by Anna Debenham
![Page 106: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/106.jpg)
ANDY PRATT
Let’s not stop there.
![Page 107: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/107.jpg)
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
![Page 108: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/108.jpg)
“TA DA!”
FROM
![Page 109: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/109.jpg)
Clients as collaborators.
TO
![Page 110: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/110.jpg)
www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
![Page 111: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/111.jpg)
alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
![Page 112: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/112.jpg)
JEN SIMMONS
MATT GRIFFIN
DREW CLEMENS
KRISTIN ELLINGTON
![Page 113: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/113.jpg)
So...So...So...
![Page 114: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/114.jpg)
Key characteristics of new workflow
![Page 115: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/115.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 116: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/116.jpg)
KEVIN SHARON SOPHIE SHEPARD
Try something new!
![Page 117: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/117.jpg)
WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT?
BRAD FROST
Diamonds!!
![Page 118: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/118.jpg)
Keep trying things.
Keep sharing.
Enjoy ARTIFACT!
![Page 119: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/119.jpg)
I’m readyare You?
thanks for listening!
Jennifer Robbins@jenville
Excerpt from “Boys Are Sexxy”
![Page 120: Jennifer Robbins: ARTIFACT Conference Keynote](https://reader033.vdocument.in/reader033/viewer/2022051412/54c71b724a7959090e8b4675/html5/thumbnails/120.jpg)