Your SlideShare is downloading. ×
0
Designers and CodeDesigners and CodeDesigners and CodeJennifer Robbins@jenvilleand workflows and stufflinks: artfactconf.com...
me, 1993
In June 1993 there 130 websites in the world.The World Wide Web in 1993
Global Network Navigator (GNN)1993
me, 5 years oldHair style hasn’tchanged.
Head-DESKHEAD-DESKHEAD-DESK
Change is hard.
TRENTWALTONI hear ya, Jen!
My wish...
• What does the web design process look like now?• How is HTML/CSS being used as a design tool?• What deliverables make se...
PROCESSPROCESSPROCESS
Product Developmentidea launch
research maintenanceidea launchProduct Development
idea launchUser Experience (UX)user interviewspersonasdesign strategiesscenariosuser stories
idea launchInformation Architecture& Content Strategycard sortscontent audittaxonomiessite maps
idea launchInteraction and UI Designwireframesuser journeysprototypesflow diagrams
idea launchVisual Designtypographylayoutcomps/mockupsmood/atmospherecolorsimagery
idea launchFrontend DevelopmentHTMLCSSJavaScriptperformanceoptimizationaccessibility
idea launchBackend & ServerPHPRubyPythonJava
idea launchWhere I work...strategysite mapswireframesuser journeysflow diagramstypographylayoutcomps/mockupsmood/atmosphere...
idea launch
idea launch
idea launchIn the past, the need for coding skillsincreased as you got closer to launch
idea launchHTML wireframesHTML prototypesI’m seeing code move back into the design process
“Here, code this for me.”FROM
Code as a design toolGit’s not so bad.CHRISTOPHER SCHMITTTO
plan design develop deploy
plan design develop deploywireframes PSD comps codeWaterfall development
designdevelop
Agile development
• 2001 Agile Manifesto• Iterative & incremental• Teams are integrated, not silo’d• Working software trumpsstatic documents...
“Over the wall” handoffsFROM
Frequent iterations byintegrated teamsTO
RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!
• A fluid layout• Flexible images• CSS media queriesComponents of Responsive Design
[courtesy of Brad Frost (bradfrostweb.com)]
[courtesy of Brad Frost (bradfrostweb.com)]
The Web is 960 pixels wide.FROM
The Web is all sizes.TO
The Web is all sizes.It’s at my desk and on the bus andon my couch and in my bed and...It’s keyboard and touch.It’s slow a...
Toward a newWorkflowToward a newworkflowToward a newWORKFLOW
Responsive SummitLondon • February 2012responsivesummit.com
1. Plan2. Sketch3. Lo-fi HTML Prototype4. Increase Fidelity5. Iterate/Talkwww.markboulton.co.uk/journal/responsive-summit-w...
“Responsive Workflow,” by Viljami Salminenviljamis.com/blog/2012/responsive-workflow/
“Web Design Process in a Responsive World,” by Ben Callahanspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-...
“Web Design Process in a Responsive World,” by Ben Callahanplanvisual designHTML prototypeincreased fidelityspeakerdeck.com...
“Responsive Design Workflow,” by Stephen HayplanHTML prototypingincrease fidelityclient deliverablesdeveloperdeliverablespea...
by Stephen Hay
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
A website is made of pages.FROM
A website is a system.TO
• Start with content, real or representative• Identify all content types and components• Treat content as modules• Assign ...
• Content type inventory• Content priority documentContent deliverables
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
“Ideas want to be ugly.”—Jason Santa Maria
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Normally, you’d whip up some wireframesright about now, but...
Wireframe diagramsFROM
HTML prototypesTO
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
• Prioritized content• Minimally styled• NOT necessarily production quality• Shows basic layout, navigation, andinteractiv...
• Can begin testing on various devices• Gives the client a more realistic experience• Saves time overall• May provide a he...
GridpakGridsetProtyping ToolsGrid Systems
Protyping ToolsResponsive Frameworks• Foundation• Bootstrap• Proty• Skeleton• 320 and UpLet’s take ‘em for a spin.JARED PO...
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
• Color and texture• Imagery• White space• Typographic treatmentsVisual DesignGive web fonts a try!JASON PAMENTAL
create vs.communicatecreate vs.communicatecreate vs.communicate
“You suck if you use Photoshop.”Nobody panic.DAN ROSE
Visual Design approaches• “Design in Browser”
www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/—Sarah Parmenter...my designs end up suffering, looking boxy, blan...
Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.
“Let’s change the phrase‘designing in the browser’ to‘deciding in the browser.’”—Dan Mall
css-tricks.com/conferences/BDConf2012-Workflow.pdfChris Coyier does...
“Work in Photoshop and Fireworks, by allmeans (I do). Make static visuals as richand as detailed as you want them to be.Ju...
Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.• Visual...
Adobe Edge Reflowhtml.adobe.com/edge/reflow
froont.comFroont
(webflow.com)Webflow
“Design” begins and endsin PhotoshopFROM
Designing with CSS.TO
Let’s talk deliverables...
Static mockups don’tcut it anymore.
—Andy Clarkehttps://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight“Like bringing a knife to a gunfight.”
• Don’t display web fonts accurately• Can’t show flexible/responsive layouts• Don’t show interactions and transitions• Set ...
?
Design deliverables•Visual style exploration
style tiles style prototypes element collage
style tiles style prototypes element collageBEN CALLAHAN DAN MALLYESENIAPEREZ-CRUZ
Design deliverables• Visual style exploration (independent of layout)•High-fidelity prototype
notnecessarilythisPhoto by Brad Frost
Design deliverables• Visual style exploration (independent of layout)• High-fidelity prototype (for testing)•Image assets
DAVE RUPERTMo pixels?No problem!
Design deliverables• Visual style exploration (independent of layout)• High-fidelity prototype (for testing)• Image assets ...
Style Guides/Pattern Libraries• Documents every content component• Describes how they are used• HTML markup, CSS styles, s...
BBC Global Experience Language (GEL)www.bbc.co.uk/gel/mobile/device-considerations/philosophy
Starbucks style guidewww.starbucks.com/static/reference/styleguide/
South Tees Hospitalwww.southtees.nhs.uk/style-guide/
gim.ie/fZyKCompiled by Anna Debenham
ANDY PRATTLet’s notstop there.
1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
“TA DA!”FROM
Clients as collaborators.TO
www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
JEN SIMMONSMATT GRIFFINDREW CLEMENSKRISTIN ELLINGTON
So...So...So...
Key characteristics of new workflow
Key characteristics of new workflow• From waterfall to agile process• From silo’d departments to integrated teams• From pag...
KEVIN SHARON SOPHIE SHEPARDTry something new!
WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT?BRAD FROSTDiamonds!!
Keep trying things.Keep sharing.Enjoy ARTIFACT!
I’m readyare You?thanks for listening!Jennifer Robbins@jenvilleExcerpt from “Boys Are Sexxy”
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
Upcoming SlideShare
Loading in...5
×

Jennifer Robbins: ARTIFACT Conference Keynote

2,028

Published on

This presentation was given as the opening keynote at the inaugural ARTIFACT conference in Austin, TX, May 13, 2013.

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

No Downloads
Views
Total Views
2,028
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Jennifer Robbins: ARTIFACT Conference Keynote"

  1. 1. Designers and CodeDesigners and CodeDesigners and CodeJennifer Robbins@jenvilleand workflows and stufflinks: artfactconf.com/robbins
  2. 2. me, 1993
  3. 3. In June 1993 there 130 websites in the world.The World Wide Web in 1993
  4. 4. Global Network Navigator (GNN)1993
  5. 5. me, 5 years oldHair style hasn’tchanged.
  6. 6. Head-DESKHEAD-DESKHEAD-DESK
  7. 7. Change is hard.
  8. 8. TRENTWALTONI hear ya, Jen!
  9. 9. My wish...
  10. 10. • 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?
  11. 11. PROCESSPROCESSPROCESS
  12. 12. Product Developmentidea launch
  13. 13. research maintenanceidea launchProduct Development
  14. 14. idea launchUser Experience (UX)user interviewspersonasdesign strategiesscenariosuser stories
  15. 15. idea launchInformation Architecture& Content Strategycard sortscontent audittaxonomiessite maps
  16. 16. idea launchInteraction and UI Designwireframesuser journeysprototypesflow diagrams
  17. 17. idea launchVisual Designtypographylayoutcomps/mockupsmood/atmospherecolorsimagery
  18. 18. idea launchFrontend DevelopmentHTMLCSSJavaScriptperformanceoptimizationaccessibility
  19. 19. idea launchBackend & ServerPHPRubyPythonJava
  20. 20. idea launchWhere I work...strategysite mapswireframesuser journeysflow diagramstypographylayoutcomps/mockupsmood/atmosphereHTMLCSS
  21. 21. idea launch
  22. 22. idea launch
  23. 23. idea launchIn the past, the need for coding skillsincreased as you got closer to launch
  24. 24. idea launchHTML wireframesHTML prototypesI’m seeing code move back into the design process
  25. 25. “Here, code this for me.”FROM
  26. 26. Code as a design toolGit’s not so bad.CHRISTOPHER SCHMITTTO
  27. 27. plan design develop deploy
  28. 28. plan design develop deploywireframes PSD comps codeWaterfall development
  29. 29. designdevelop
  30. 30. Agile development
  31. 31. • 2001 Agile Manifesto• Iterative & incremental• Teams are integrated, not silo’d• Working software trumpsstatic documents about software(“Just start building.”)Agile development
  32. 32. “Over the wall” handoffsFROM
  33. 33. Frequent iterations byintegrated teamsTO
  34. 34. RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!
  35. 35. • A fluid layout• Flexible images• CSS media queriesComponents of Responsive Design
  36. 36. [courtesy of Brad Frost (bradfrostweb.com)]
  37. 37. [courtesy of Brad Frost (bradfrostweb.com)]
  38. 38. The Web is 960 pixels wide.FROM
  39. 39. The Web is all sizes.TO
  40. 40. The Web is all sizes.It’s at my desk and on the bus andon my couch and in my bed and...It’s keyboard and touch.It’s slow and fast.
  41. 41. Toward a newWorkflowToward a newworkflowToward a newWORKFLOW
  42. 42. Responsive SummitLondon • February 2012responsivesummit.com
  43. 43. 1. Plan2. Sketch3. Lo-fi HTML Prototype4. Increase Fidelity5. Iterate/Talkwww.markboulton.co.uk/journal/responsive-summit-workflow
  44. 44. “Responsive Workflow,” by Viljami Salminenviljamis.com/blog/2012/responsive-workflow/
  45. 45. “Web Design Process in a Responsive World,” by Ben Callahanspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
  46. 46. “Web Design Process in a Responsive World,” by Ben Callahanplanvisual designHTML prototypeincreased fidelityspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
  47. 47. “Responsive Design Workflow,” by Stephen HayplanHTML prototypingincrease fidelityclient deliverablesdeveloperdeliverablespeakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012
  48. 48. by Stephen Hay
  49. 49. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  50. 50. A website is made of pages.FROM
  51. 51. A website is a system.TO
  52. 52. • Start with content, real or representative• Identify all content types and components• Treat content as modules• Assign priority to every content typePlan (Content First)
  53. 53. • Content type inventory• Content priority documentContent deliverables
  54. 54. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  55. 55. “Ideas want to be ugly.”—Jason Santa Maria
  56. 56. http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
  57. 57. Normally, you’d whip up some wireframesright about now, but...
  58. 58. Wireframe diagramsFROM
  59. 59. HTML prototypesTO
  60. 60. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  61. 61. • Prioritized content• Minimally styled• NOT necessarily production quality• Shows basic layout, navigation, andinteractivityHTML PrototypesLet’s talk layout.JEN SIMMONS
  62. 62. • Can begin testing on various devices• Gives the client a more realistic experience• Saves time overall• May provide a head-start on productionAdvantages over wireframes
  63. 63. GridpakGridsetProtyping ToolsGrid Systems
  64. 64. Protyping ToolsResponsive Frameworks• Foundation• Bootstrap• Proty• Skeleton• 320 and UpLet’s take ‘em for a spin.JARED PONCHOT
  65. 65. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  66. 66. • Color and texture• Imagery• White space• Typographic treatmentsVisual DesignGive web fonts a try!JASON PAMENTAL
  67. 67. create vs.communicatecreate vs.communicatecreate vs.communicate
  68. 68. “You suck if you use Photoshop.”Nobody panic.DAN ROSE
  69. 69. Visual Design approaches• “Design in Browser”
  70. 70. 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.
  71. 71. Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.
  72. 72. “Let’s change the phrase‘designing in the browser’ to‘deciding in the browser.’”—Dan Mall
  73. 73. css-tricks.com/conferences/BDConf2012-Workflow.pdfChris Coyier does...
  74. 74. “Work in Photoshop and Fireworks, by allmeans (I do). Make static visuals as richand as detailed as you want them to be.Just don’t set the wrong expectations byshowing them to your clients.”—Andy Clarke
  75. 75. Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.• Visual responsive layout tool
  76. 76. Adobe Edge Reflowhtml.adobe.com/edge/reflow
  77. 77. froont.comFroont
  78. 78. (webflow.com)Webflow
  79. 79. “Design” begins and endsin PhotoshopFROM
  80. 80. Designing with CSS.TO
  81. 81. Let’s talk deliverables...
  82. 82. Static mockups don’tcut it anymore.
  83. 83. —Andy Clarkehttps://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight“Like bringing a knife to a gunfight.”
  84. 84. • 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-consumingStatic mockup drawbacks
  85. 85. ?
  86. 86. Design deliverables•Visual style exploration
  87. 87. style tiles style prototypes element collage
  88. 88. style tiles style prototypes element collageBEN CALLAHAN DAN MALLYESENIAPEREZ-CRUZ
  89. 89. Design deliverables• Visual style exploration (independent of layout)•High-fidelity prototype
  90. 90. notnecessarilythisPhoto by Brad Frost
  91. 91. Design deliverables• Visual style exploration (independent of layout)• High-fidelity prototype (for testing)•Image assets
  92. 92. DAVE RUPERTMo pixels?No problem!
  93. 93. Design deliverables• Visual style exploration (independent of layout)• High-fidelity prototype (for testing)• Image assets (think of performance)•Style guides!
  94. 94. Style Guides/Pattern Libraries• Documents every content component• Describes how they are used• HTML markup, CSS styles, scripts• Describes what happens on resizing
  95. 95. BBC Global Experience Language (GEL)www.bbc.co.uk/gel/mobile/device-considerations/philosophy
  96. 96. Starbucks style guidewww.starbucks.com/static/reference/styleguide/
  97. 97. South Tees Hospitalwww.southtees.nhs.uk/style-guide/
  98. 98. gim.ie/fZyKCompiled by Anna Debenham
  99. 99. ANDY PRATTLet’s notstop there.
  100. 100. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  101. 101. “TA DA!”FROM
  102. 102. Clients as collaborators.TO
  103. 103. www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
  104. 104. alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
  105. 105. JEN SIMMONSMATT GRIFFINDREW CLEMENSKRISTIN ELLINGTON
  106. 106. So...So...So...
  107. 107. Key characteristics of new workflow
  108. 108. 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
  109. 109. KEVIN SHARON SOPHIE SHEPARDTry something new!
  110. 110. WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT?BRAD FROSTDiamonds!!
  111. 111. Keep trying things.Keep sharing.Enjoy ARTIFACT!
  112. 112. I’m readyare You?thanks for listening!Jennifer Robbins@jenvilleExcerpt from “Boys Are Sexxy”
  1. A particular slide catching your eye?

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

×