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

1,773
-1

Published on

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

No Downloads
Views
Total Views
1,773
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

×