Designers and Code and Workflows and Stuff

22,203
-1

Published on

Static Photoshop comps no longer cut it for responsive web design. But if not Photoshop, WHAT?! This talk describes the new responsive workflow and what deliverables make sense.

Published in: Design
2 Comments
67 Likes
Statistics
Notes
  • Interesting, nice... good... I'd like to show it my students... but can't download it. That's well... a pity///
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • recommended books?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
22,203
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
2
Likes
67
Embeds 0
No embeds

No notes for slide

Designers and Code and Workflows and Stuff

  1. 1. Designers and Code and workflows and stuff Jennifer Robbins @jenvilleFriday, October 26, 2012
  2. 2. me, 1993Friday, October 26, 2012
  3. 3. The Web in 1993 In June 1993 there was a total of 130 websites.Friday, October 26, 2012
  4. 4. Global Network Navigator (GNN) 1993Friday, October 26, 2012
  5. 5. Friday, October 26, 2012
  6. 6. Head-DESK HEAD-DESKFriday, October 26, 2012
  7. 7. • What does the web design process look like now? • What deliverables make sense? • How is HTML/CSS being used by designers? • What tools are available?Friday, October 26, 2012
  8. 8. Product Development Timeline idea launchFriday, October 26, 2012
  9. 9. Product Development Timeline research maintenance idea launchFriday, October 26, 2012
  10. 10. User Experience (UX) user interviews personas design strategies idea launch scenarios usability testsFriday, October 26, 2012
  11. 11. Information Architecture & Content Strategy card sorts content audit idea launch site maps taxonomiesFriday, October 26, 2012
  12. 12. Interaction/UI wireframes user journeys idea flow diagrams launch prototypesFriday, October 26, 2012
  13. 13. Visual/Graphic Design typography layout idea mood/atmosphere launch comps/mockupsFriday, October 26, 2012
  14. 14. Frontend Development HTML CSS JavaScript idea launchFriday, October 26, 2012
  15. 15. Backend & Server “black magic” idea launchFriday, October 26, 2012
  16. 16. Where I work... typography wireframes HTML design strategies user journeys layout CSS mood/atmosphere idea flow diagrams launch comps/mockups site mapsFriday, October 26, 2012
  17. 17. idea launchFriday, October 26, 2012
  18. 18. idea launchFriday, October 26, 2012
  19. 19. Traditionally, the need for coding skills increases as you get closer to launch idea launchFriday, October 26, 2012
  20. 20. I’m seeing code moving its way back the chain idea launchFriday, October 26, 2012
  21. 21. So, what’s changed?Friday, October 26, 2012
  22. 22. AgILE! AGILE!Friday, October 26, 2012
  23. 23. plan design develop deployFriday, October 26, 2012
  24. 24. wireframes plan design develop deployFriday, October 26, 2012
  25. 25. wireframes PSD comps plan design develop deployFriday, October 26, 2012
  26. 26. wireframes PSD comps code plan design develop deployFriday, October 26, 2012
  27. 27. design developFriday, October 26, 2012
  28. 28. Friday, October 26, 2012
  29. 29. MOBILE!!!Friday, October 26, 2012
  30. 30. [courtesy of Brad Frost (bradfrostweb.com)]Friday, October 26, 2012
  31. 31. [courtesy of Brad Frost (bradfrostweb.com)]Friday, October 26, 2012
  32. 32. disruptive DisruptiveFriday, October 26, 2012
  33. 33. 20% | 35% Don’t have Internet access | Don’t have broadband at home Statistics: http://www.slideshare.net/KMcGrane/uncle-sam-wants-you-to-optimize-your-content-for-mobileFriday, October 26, 2012
  34. 34. 20% | 35% Don’t have Internet access | Don’t have broadband at home 29% | 51% Black Americans 38% | 59% Low income (<30K) 57% | 88% Americans with disabilitiesFriday, October 26, 2012
  35. 35. BUT! 88% of Americans have a mobile device 55% use them to access the WebFriday, October 26, 2012
  36. 36. 31% Americans only or mostly use Internet on mobile 39% 43% 51% No-college Low-income Black Americans Americans AmericansFriday, October 26, 2012
  37. 37. Your site on mobile MUST: • Have complete content • Be fully-functional • Be easy to useFriday, October 26, 2012
  38. 38. Responsive DesignFriday, October 26, 2012
  39. 39. Friday, October 26, 2012
  40. 40. http://mediaqueri.esFriday, October 26, 2012
  41. 41. Android screen size surveyFriday, October 26, 2012
  42. 42. MADNESS!!!Friday, October 26, 2012
  43. 43. Static comps don’t cut it anymore.Friday, October 26, 2012
  44. 44. “Like bringing a knife to a gunfight.” —Andy Clarke https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfightFriday, October 26, 2012
  45. 45. 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-consumingFriday, October 26, 2012
  46. 46. Friday, October 26, 2012
  47. 47. ?Friday, October 26, 2012
  48. 48. Toward a new process PRocess (responsive workflow)Friday, October 26, 2012
  49. 49. Responsive Summit London • February 2012 www.responsivesummit.comFriday, October 26, 2012
  50. 50. Plan Sketch Prototype Increase Fidelity Iterate/Talk (in HTML) (visual design applied to prototype) (from Mark Boulton’s notes of the Responsive Design Summit) http://www.markboulton.co.uk/journal/responsive-summit-workflowFriday, October 26, 2012
  51. 51. “Responsive Workflow,” by Viljami Salminen http://viljamis.com/blog/2012/responsive-workflow/Friday, October 26, 2012
  52. 52. plan HTML prototyping increase fidelity client deliverables developer deliverable “Responsive Design Workflow,” by Stephen Hay https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012Friday, October 26, 2012
  53. 53. PlanFriday, October 26, 2012
  54. 54. Plan Sketch Prototype Increase Fidelity Iterate/Talk “Websites are systems rather than pages.” —Anna DebenhamFriday, October 26, 2012
  55. 55. Plan Sketch Prototype Increase Fidelity Iterate/Talk Plan (Content First) • A module-based approach • Identify content types/components • Consider the goals and context of each component • Assign priority to every content typeFriday, October 26, 2012
  56. 56. SketchFriday, October 26, 2012
  57. 57. Plan Sketch Prototype Increase Fidelity Iterate/Talk Sketch http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsFriday, October 26, 2012
  58. 58. Normally, you’d whip up some wireframes right about now, but...Friday, October 26, 2012
  59. 59. Plan Sketch Prototype Increase Fidelity Iterate/Talk HTML Prototypes wireframes • Structured (preferably actual) content • Unstyled (maybe a set of generic CSS rules) • Addresses layout, navigation, basic interactivity • Start with single-column layout first • NOT necessarily production qualityFriday, October 26, 2012
  60. 60. Plan Sketch Prototype Increase Fidelity Iterate/Talk Advantages over wireframes • Can begin testing on various devices • You can see how the page behaves at different widths • Gives the client a more realistic experience • May provide a head-start on productionFriday, October 26, 2012
  61. 61. Plan Sketch Prototype Increase Fidelity Iterate/Talk Protyping Tools: Responsive Frameworks • Bootstrap from Twitter (twitter.github.com/bootstrap/) • Foundation (foundation.zurb.com) • Skeleton (getskeleton.com) • 1140 CSS Grid (cssgrid.net) • 320 and Up (stuffandnonsense.co.uk/projects/320andup/)Friday, October 26, 2012
  62. 62. Plan Sketch Prototype Increase Fidelity Iterate/Talk Protyping Tools: Online grid generators Gridset, by Mark Boulton & team Gridpak (gridpak.com) (gridsetapp.com)Friday, October 26, 2012
  63. 63. Increase Fidelity Visual DesignFriday, October 26, 2012
  64. 64. Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design • Typographic treatments • White space • Color and texture • “Atmosphere”Friday, October 26, 2012
  65. 65. Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSSFriday, October 26, 2012
  66. 66. “I can’t design in the browser.” ...my designs end up suffering, looking boxy, bland and uninspiring. —Sarah Parmenter www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/Friday, October 26, 2012
  67. 67. Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSS • Photoshop/Fireworks then move to browser asapFriday, October 26, 2012
  68. 68. “I design in Photoshop, but decide in the browser.” —Chris Coyier, css-tricks.com css-tricks.com/conferences/BDConf2012-Workflow.pdfFriday, October 26, 2012
  69. 69. “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 www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/Friday, October 26, 2012
  70. 70. Plan Sketch Prototype Increase Fidelity Iterate/Talk Get design ideas into the browser as soon as possible. (style every content component)Friday, October 26, 2012
  71. 71. Plan Sketch Prototype Increase Fidelity Iterate/Talk CSS shortcut tools • CSS Hat (csshat.com/) — turns Photoshop layer styles to CSS • CSS Professionalizr— cleans up CSS generated by Fireworks CS6 (mattstow.com/css-professionalzr.html) • Adobe Edge Reflow — first WYSIWYG responsive design tool (unreleased) (html.adobe.com/edge/reflow/)Friday, October 26, 2012
  72. 72. Adobe Edge Reflow (html.adobe.com/edge/reflow)Friday, October 26, 2012
  73. 73. Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSS • Photoshop/Fireworks then “move to browser” early • Treat “look and feel” separately (Style Tiles)Friday, October 26, 2012
  74. 74. Style Tiles (styletil.es) Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. —Samantha WarrenFriday, October 26, 2012
  75. 75. Style Prototypes (built in HTML/CSS, not Photoshop) sparkbox.github.com/style-prototype/Friday, October 26, 2012
  76. 76. Client deliverables in a responsive workflow • Content type inventory (prioritized) • Low-fidelity HTML prototype (layout, interaction) • Style tiles (visual vocabulary) • High-fidelity prototype (working design)Friday, October 26, 2012
  77. 77. But what do you give the developers?!Friday, October 26, 2012
  78. 78. Style GuidesFriday, October 26, 2012
  79. 79. Style Guides • Documents every content component on the site • HTML markup, CSS styles, scripts • Description of how it is used (context, limitations) • Instructions for what happens when it resizesFriday, October 26, 2012
  80. 80. “Style guides are the new Photoshop.” —Stephen Hay speakerdeck.com/u/stephenhay/p/style-guides-are-the-new-photoshop-smashing-conference-2012Friday, October 26, 2012
  81. 81. BBC Global Experience Language (GEL) www.bbc.co.uk/gel/mobile/device-considerations/philosophyFriday, October 26, 2012
  82. 82. Starbucks style guide www.starbucks.com/static/reference/styleguide/Friday, October 26, 2012
  83. 83. South Tees Hospital www.southtees.nhs.uk/style-guide/Friday, October 26, 2012
  84. 84. gim.ie/fZyK Compiled by Anna DebenhamFriday, October 26, 2012
  85. 85. Developer deliverables • High-fidelity prototype • Style guide that describes the system ACTUALLY... it’s likely that the developers have been working in tandem with design all along, so no big HANDOFF.Friday, October 26, 2012
  86. 86. Iterate and TalkFriday, October 26, 2012
  87. 87. Plan Sketch Prototype Increase Fidelity Iterate/Talk www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/Friday, October 26, 2012
  88. 88. Plan Sketch Prototype Increase Fidelity Iterate/Talk www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/Friday, October 26, 2012
  89. 89. So...Friday, October 26, 2012
  90. 90. Key characteristics of new workflow • Design systems, not pages You’ll need to know • HTML & CSS for this part Treat content as mix-n-match modules • Get into HTML/CSS as early in the process as possible • Leave static comps in the dustFriday, October 26, 2012
  91. 91. what are you trying? and, thanks for listening! xo, JenFriday, October 26, 2012

×