Designers and Code
and workflows and stuff

Jennifer Robbins • @jenville
links: artfactconf.com/robbins
me, 1993
The World Wide Web in 1993

In June 1993 there 130 websites in the world.
Global Network Navigator (GNN)
1993
Hair style hasn’t
changed.

me, 5 years old
HEAD-DESK
Head-DESK
Change is hard.
I wish...
•

What does the web design process look like now?

•

How is HTML/CSS being used as a design tool?

•

What deliverables ...
PROCESS
Product Development

idea

launch
Product Development

research

maintenance

idea

launch
User Experience (UX)
user interviews
personas
design strategies

idea
scenarios
user stories

launch
Information Architecture
& Content Strategy
content audit
card sorts

idea

site maps

taxonomies

launch
Interaction and UI Design
wireframes
user journeys

idea

prototypes
flow diagrams

launch
Visual Style Treatments
typography
colors

idea

layout

imagery
mood/atmosphere

launch
Frontend Development
HTML
CSS
JavaScript

idea

performance
optimization
accessibility

launch
Backend & Server
PHP
Ruby

idea

Python

launch

Java
Where I work...
strategy

typography

HTML

user journeys
wireframes
layout

CSS

mood/atmosphere

idea

flow diagrams

sit...
idea

launch
idea

launch
In the past, the need for coding skills
increased as you got closer to launch

idea

launch
I’m seeing code move back into the design process
HTML wireframes

idea

HTML prototypes

launch
FROM

“Here, code this for me.”
TO

Code as a design tool
Git’s not so bad.

CHRI S TO P HER SCHMIT T
plan

design develop deploy
wireframes

plan

PSD comps

code

design develop deploy

Waterfall development
design

develop
Agile development
Agile development

•
•
•
•

2001 Agile Manifesto
Iterative & incremental
Teams are integrated, not silo’d
Working software...
FROM

“Over the wall” handoffs
TO

Frequent iterations by
integrated teams
RESPONSIVE!
RESPONSIVE!
RESPONSIVE!
Components of Responsive Design

• A fluid layout
• Flexible images
• CSS media queries
ETHAN M AR COTT E
[courtesy of Brad Frost (bradfrostweb.com)]
[courtesy of Brad Frost (bradfrostweb.com)]
FROM

The Web is 960 pixels wide.
TO

The Web is all sizes.
The Web is all sizes.
It’s slow and fast.
It’s keyboard and touch.
It’s at my desk and on the bus and
on my couch and in m...
2013 Pew Internet Survey

63%

of cell phone owners
use phone to access Internet

34%

of them mostly or only
use a phone ...
2013 People’s Web Report

“The survey found that speed

(41%) and consistency with the
PC web experience (33.2%) were
clea...
2013 People’s Web Report

“43.3% of consumers surveyed
would wait to use a PC site,
rather than use a version that
does no...
2013 People’s Web Report

“Over 30% simply will not bother
trying to use the non-optimized
site, or will turn to a competi...
Toward a new
workflow
WORKFLOW
Workflow
Responsive Summit
London • February 2012

responsivesummit.com
Plan
Sketch
Lo-fi HTML Prototype
Increase Fidelity
Iterate/Talk
www.markboulton.co.uk/journal/responsive-summit-workflow
“Responsive Workflow,” by Viljami Salminen
viljamis.com/blog/2012/responsive-workflow/
“Web Design Process in a Responsive World,” by Ben Callahan
speakerdeck.com/bencallahan/web-design-process-in-a-responsive...
plan
HTML prototype
visual design
increased fidelity

“Web Design Process in a Responsive World,” by Ben Callahan
speakerde...
plan
HTML prototyping

increase fidelity
client deliverables
developer
deliverable

“Responsive Design Workflow,” by Stephen...
by Stephen Hay
Plan
Sketch
HTML Prototype
Increase Fidelity
Iterate/Talk
FROM

A website is made of pages.
TO

A website is a system.
Plan (Content First)

• Start with content, real or representative
• Identify all content types and components
• Treat con...
Content deliverables

• Content type inventory
• Content priority document
Plan
Sketch
HTML Prototype
Increase Fidelity
Iterate/Talk
“Ideas want to be ugly.”
—Jason Santa Maria
http://bit.ly/jinx8w
Normally, you’d whip up some wireframes
right about now, but...
FROM

Wireframe diagrams
TO

HTML prototypes
Plan
Sketch
HTML Prototype
Increase Fidelity
Iterate/Talk
HTML Prototypes

• Prioritized content
Let’s talk layout.
• Minimally styled
• NOT necessarily production quality
• Shows ...
Advantages of Prototypes

• Can begin testing on various devices
• Gives the client a more realistic experience
• Saves ti...
Protyping Tools

Grid Systems

Gridset

Gridpak
Protyping Tools

Responsive Frameworks
• Foundation
• Bootstrap
• Proty

Let’s take ‘em for a spin.

• Skeleton
• 320 and ...
Plan
Sketch
HTML Prototype
Increase Fidelity
Iterate/Talk
Visual Layer
•

Color and texture

•

Imagery

•

White space

•

Typographic treatments

Give web fonts a try!

JASON PAM...
create vs.
communicate
Nobody panic.

“You suck if you use Photoshop.”

DAN R OSE
Creative Exploration

•

“Design in Browser”
www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/

...my designs end up suffering, looking boxy, bland and uninspir...
Creative Exploration
•

“Design in Browser” w/ CSS

•

Photoshop/Fireworks/Illustrator
then move to browser a.s.a.p.
“Let’s change the phrase
‘designing in the browser’ to
‘deciding in the browser.’”
—Dan Mall
Creative Exploration
•

“Design in Browser” w/ CSS

•

Photoshop/Fireworks/Illustrator
then move to browser a.s.a.p.

•

V...
Adobe Edge Reflow

html.adobe.com/edge/reflow
Macaw

macaw.co
Froont

froont.com
Webflow

webflow.com
FROM

“Design” begins and ends
in Photoshop
TO

Designing with CSS
Let’s talk deliverables...
Static mockups don’t
cut it anymore.
“...like bringing a knife to a gunfight.”
—Andy Clarke

https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
Static mockup drawbacks

•
•
•
•
•

Don’t display web fonts accurately
Can’t show flexible/responsive layouts
Don’t show in...
?
Design deliverables

• Style exploration
style tiles

style prototypes

element collage
Y E S ENI A
P E RE Z- CR U Z

style tiles

BEN CAL LAHAN

style prototypes

element collage
Design deliverables
• Style exploration (independent of layout)

• High-fidelity prototype
not
necessarily
this

Photo by Brad Frost
Design deliverables
• Style exploration (independent of layout)
• High-fidelity prototype (for testing)

• Image assets
Mo pixels?
No problem!

DAVE R UP ERT
Design deliverables
• Style exploration (independent of layout)
• High-fidelity prototype (for testing)
• Image assets (thi...
Style Guides/Pattern Libraries

• Documents every content component
• Describes how they are used
• HTML markup, CSS style...
BBC Global Experience Language (GEL)

www.bbc.co.uk/gel/mobile/device-considerations/philosophy
Starbucks

www.starbucks.com/static/reference/styleguide/
South Tees Hospital

www.southtees.nhs.uk/style-guide/
gim.ie/fZyK
Compiled by Anna Debenham
Let’s not
stop there.

AN DY PR AT T
Plan
Sketch
HTML Prototype
Increase Fidelity
Iterate/Talk
FROM

“TA DA!”
TO

Clients as collaborators.
www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
J EN S IM M ON S

M AT T G RI F F IN

DR EW CL EMENS

KRIST IN ELL INGTON
So...
Key characteristics of new workflow
Key characteristics of new workflow

•

From waterfall to agile process

•

From silo’d departments to integrated teams

•
...
Try something new!

K E VI N S HARO N

SOPH IE SHE PHER D
...it’s made out of PEOPLE!

WHAT’S NEXT?
B R AD F R O S T
Keep trying things.
Keep sharing.
Enjoy ARTIFACT!
Excerpt from “Boys Are Sexxy”

I’m ready
are You?
thanks for listening!
Jennifer Robbins
@jenville
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Upcoming SlideShare
Loading in...5
×

Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)

1,496

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,496
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)

  1. 1. Designers and Code and workflows and stuff Jennifer Robbins • @jenville links: artfactconf.com/robbins
  2. 2. me, 1993
  3. 3. The World Wide Web in 1993 In June 1993 there 130 websites in the world.
  4. 4. Global Network Navigator (GNN) 1993
  5. 5. Hair style hasn’t changed. me, 5 years old
  6. 6. HEAD-DESK Head-DESK
  7. 7. Change is hard.
  8. 8. I wish...
  9. 9. • 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?
  10. 10. PROCESS
  11. 11. Product Development idea launch
  12. 12. Product Development research maintenance idea launch
  13. 13. User Experience (UX) user interviews personas design strategies idea scenarios user stories launch
  14. 14. Information Architecture & Content Strategy content audit card sorts idea site maps taxonomies launch
  15. 15. Interaction and UI Design wireframes user journeys idea prototypes flow diagrams launch
  16. 16. Visual Style Treatments typography colors idea layout imagery mood/atmosphere launch
  17. 17. Frontend Development HTML CSS JavaScript idea performance optimization accessibility launch
  18. 18. Backend & Server PHP Ruby idea Python launch Java
  19. 19. Where I work... strategy typography HTML user journeys wireframes layout CSS mood/atmosphere idea flow diagrams site maps comps/mockups launch
  20. 20. idea launch
  21. 21. idea launch
  22. 22. In the past, the need for coding skills increased as you got closer to launch idea launch
  23. 23. I’m seeing code move back into the design process HTML wireframes idea HTML prototypes launch
  24. 24. FROM “Here, code this for me.”
  25. 25. TO Code as a design tool Git’s not so bad. CHRI S TO P HER SCHMIT T
  26. 26. plan design develop deploy
  27. 27. wireframes plan PSD comps code design develop deploy Waterfall development
  28. 28. design develop
  29. 29. Agile development
  30. 30. Agile development • • • • 2001 Agile Manifesto Iterative & incremental Teams are integrated, not silo’d Working software trumps static documents about software (“Just start building.”)
  31. 31. FROM “Over the wall” handoffs
  32. 32. TO Frequent iterations by integrated teams
  33. 33. RESPONSIVE! RESPONSIVE! RESPONSIVE!
  34. 34. Components of Responsive Design • A fluid layout • Flexible images • CSS media queries
  35. 35. ETHAN M AR COTT E
  36. 36. [courtesy of Brad Frost (bradfrostweb.com)]
  37. 37. [courtesy of Brad Frost (bradfrostweb.com)]
  38. 38. FROM The Web is 960 pixels wide.
  39. 39. TO The Web is all sizes.
  40. 40. The Web is all sizes. It’s slow and fast. It’s keyboard and touch. It’s at my desk and on the bus and on my couch and in my bed and... It’s 10 inches and 10 feet away
  41. 41. 2013 Pew Internet Survey 63% of cell phone owners use phone to access Internet 34% of them mostly or only use a phone to access Internet bit.ly/14VCt8R
  42. 42. 2013 People’s Web Report “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.” bit.ly/12ndU11
  43. 43. 2013 People’s Web Report “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.” bit.ly/12ndU11
  44. 44. 2013 People’s Web Report “Over 30% simply will not bother trying to use the non-optimized site, or will turn to a competitor instead.” bit.ly/12ndU11
  45. 45. Toward a new workflow WORKFLOW Workflow
  46. 46. Responsive Summit London • February 2012 responsivesummit.com
  47. 47. Plan Sketch Lo-fi HTML Prototype Increase Fidelity Iterate/Talk www.markboulton.co.uk/journal/responsive-summit-workflow
  48. 48. “Responsive Workflow,” by Viljami Salminen viljamis.com/blog/2012/responsive-workflow/
  49. 49. “Web Design Process in a Responsive World,” by Ben Callahan speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
  50. 50. plan HTML prototype visual design increased fidelity “Web Design Process in a Responsive World,” by Ben Callahan speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
  51. 51. plan HTML prototyping increase fidelity client deliverables developer deliverable “Responsive Design Workflow,” by Stephen Hay speakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012
  52. 52. by Stephen Hay
  53. 53. Plan Sketch HTML Prototype Increase Fidelity Iterate/Talk
  54. 54. FROM A website is made of pages.
  55. 55. TO A website is a system.
  56. 56. Plan (Content First) • Start with content, real or representative • Identify all content types and components • Treat content as modules • Assign priority to every content type
  57. 57. Content deliverables • Content type inventory • Content priority document
  58. 58. Plan Sketch HTML Prototype Increase Fidelity Iterate/Talk
  59. 59. “Ideas want to be ugly.” —Jason Santa Maria
  60. 60. http://bit.ly/jinx8w
  61. 61. Normally, you’d whip up some wireframes right about now, but...
  62. 62. FROM Wireframe diagrams
  63. 63. TO HTML prototypes
  64. 64. Plan Sketch HTML Prototype Increase Fidelity Iterate/Talk
  65. 65. HTML Prototypes • Prioritized content Let’s talk layout. • Minimally styled • NOT necessarily production quality • Shows basic layout, navigation, and interactivity JE N SIMMONS
  66. 66. Advantages of Prototypes • Can begin testing on various devices • Gives the client a more realistic experience • Saves time overall • May provide a head-start on production
  67. 67. Protyping Tools Grid Systems Gridset Gridpak
  68. 68. Protyping Tools Responsive Frameworks • Foundation • Bootstrap • Proty Let’s take ‘em for a spin. • Skeleton • 320 and Up • Jeet JARED P ONCHOT
  69. 69. Plan Sketch HTML Prototype Increase Fidelity Iterate/Talk
  70. 70. Visual Layer • Color and texture • Imagery • White space • Typographic treatments Give web fonts a try! JASON PAMENTAL
  71. 71. create vs. communicate
  72. 72. Nobody panic. “You suck if you use Photoshop.” DAN R OSE
  73. 73. Creative Exploration • “Design in Browser”
  74. 74. www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/ ...my designs end up suffering, looking boxy, bland and uninspiring. —Sarah Parmenter
  75. 75. Creative Exploration • “Design in Browser” w/ CSS • Photoshop/Fireworks/Illustrator then move to browser a.s.a.p.
  76. 76. “Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser.’” —Dan Mall
  77. 77. Creative Exploration • “Design in Browser” w/ CSS • Photoshop/Fireworks/Illustrator then move to browser a.s.a.p. • Visual responsive layout tool
  78. 78. Adobe Edge Reflow html.adobe.com/edge/reflow
  79. 79. Macaw macaw.co
  80. 80. Froont froont.com
  81. 81. Webflow webflow.com
  82. 82. FROM “Design” begins and ends in Photoshop
  83. 83. TO Designing with CSS
  84. 84. Let’s talk deliverables...
  85. 85. Static mockups don’t cut it anymore.
  86. 86. “...like bringing a knife to a gunfight.” —Andy Clarke https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
  87. 87. Static mockup drawbacks • • • • • 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
  88. 88. ?
  89. 89. Design deliverables • Style exploration
  90. 90. style tiles style prototypes element collage
  91. 91. Y E S ENI A P E RE Z- CR U Z style tiles BEN CAL LAHAN style prototypes element collage
  92. 92. Design deliverables • Style exploration (independent of layout) • High-fidelity prototype
  93. 93. not necessarily this Photo by Brad Frost
  94. 94. Design deliverables • Style exploration (independent of layout) • High-fidelity prototype (for testing) • Image assets
  95. 95. Mo pixels? No problem! DAVE R UP ERT
  96. 96. Design deliverables • Style exploration (independent of layout) • High-fidelity prototype (for testing) • Image assets (think of performance) • Style guides!
  97. 97. Style Guides/Pattern Libraries • Documents every content component • Describes how they are used • HTML markup, CSS styles, scripts • Describes what happens on resizing
  98. 98. BBC Global Experience Language (GEL) www.bbc.co.uk/gel/mobile/device-considerations/philosophy
  99. 99. Starbucks www.starbucks.com/static/reference/styleguide/
  100. 100. South Tees Hospital www.southtees.nhs.uk/style-guide/
  101. 101. gim.ie/fZyK Compiled by Anna Debenham
  102. 102. Let’s not stop there. AN DY PR AT T
  103. 103. Plan Sketch HTML Prototype Increase Fidelity Iterate/Talk
  104. 104. FROM “TA DA!”
  105. 105. TO Clients as collaborators.
  106. 106. www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
  107. 107. alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
  108. 108. J EN S IM M ON S M AT T G RI F F IN DR EW CL EMENS KRIST IN ELL INGTON
  109. 109. So...
  110. 110. Key characteristics of new workflow
  111. 111. 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
  112. 112. Try something new! K E VI N S HARO N SOPH IE SHE PHER D
  113. 113. ...it’s made out of PEOPLE! WHAT’S NEXT? B R AD F R O S T
  114. 114. Keep trying things. Keep sharing. Enjoy ARTIFACT!
  115. 115. Excerpt from “Boys Are Sexxy” I’m ready are You? thanks for listening! Jennifer Robbins @jenville
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×