Your SlideShare is downloading. ×
Designers and Code                               and workflows and stuff                                                    ...
me, 1993Friday, October 26, 2012
The Web in 1993                           In June 1993 there was a total of 130 websites.Friday, October 26, 2012
Global Network Navigator (GNN)                           1993Friday, October 26, 2012
Friday, October 26, 2012
Head-DESK                           HEAD-DESKFriday, October 26, 2012
•   What does the web design process look like now?                           •   What deliverables make sense?           ...
Product Development                                       Timeline                           idea                         ...
Product Development                                       Timeline        research                                        ...
User Experience (UX)          user interviews                       personas                design strategies             ...
Information Architecture & Content Strategy                           card sorts                               content aud...
Interaction/UI                                  wireframes                                               user journeys    ...
Visual/Graphic Design                                  typography                                           layout        ...
Frontend Development                                            HTML                                                   CSS...
Backend & Server                                                     “black magic”                           idea         ...
Where I work...                                                 typography                                     wireframes ...
idea   launchFriday, October 26, 2012
idea   launchFriday, October 26, 2012
Traditionally, the need for coding skills                                   increases as you get closer to launch         ...
I’m seeing code moving its way back the chain                           idea                                       launchF...
So, what’s changed?Friday, October 26, 2012
AgILE!                           AGILE!Friday, October 26, 2012
plan   design   develop   deployFriday, October 26, 2012
wireframes                           plan      design   develop   deployFriday, October 26, 2012
wireframes   PSD comps                           plan      design    develop   deployFriday, October 26, 2012
wireframes   PSD comps      code                           plan      design    develop          deployFriday, October 26, ...
design                           developFriday, October 26, 2012
Friday, October 26, 2012
MOBILE!!!Friday, October 26, 2012
[courtesy of Brad Frost (bradfrostweb.com)]Friday, October 26, 2012
[courtesy of Brad Frost (bradfrostweb.com)]Friday, October 26, 2012
disruptive                           DisruptiveFriday, October 26, 2012
20% | 35%                            Don’t have Internet access | Don’t have broadband at home                           S...
20% | 35%                           Don’t have Internet access | Don’t have broadband at home                             ...
BUT!                           88% of Americans have a mobile device                              55% use them to access t...
31%                           Americans only or mostly use Internet on mobile                       39%                   ...
Your site on mobile MUST:                           •   Have complete content                           •   Be fully-funct...
Responsive DesignFriday, October 26, 2012
Friday, October 26, 2012
http://mediaqueri.esFriday, October 26, 2012
Android screen size surveyFriday, October 26, 2012
MADNESS!!!Friday, October 26, 2012
Static comps don’t cut it anymore.Friday, October 26, 2012
“Like bringing a knife to a gunfight.”                                                                                —Andy...
Static mockup drawbacks                  •        Don’t display web fonts accurately                  •        Can’t show ...
Friday, October 26, 2012
?Friday, October 26, 2012
Toward a new process                                    PRocess                             (responsive workflow)Friday, Oc...
Responsive Summit                             London • February 2012                               www.responsivesummit.co...
Plan Sketch                  Prototype           Increase Fidelity                   Iterate/Talk                         ...
“Responsive Workflow,” by Viljami Salminen                            http://viljamis.com/blog/2012/responsive-workflow/Frid...
plan                                                                                          HTML prototyping            ...
PlanFriday, October 26, 2012
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                           “Websites are systems rather than pag...
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                             Plan (Content First...
SketchFriday, October 26, 2012
Plan Sketch        Prototype     Increase Fidelity     Iterate/Talk                                                       ...
Normally, you’d whip up some wireframes                                     right about now, but...Friday, October 26, 2012
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                              HTML Prototypes   ...
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                     Advantages over wireframes ...
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                           Protyping Tools: Responsive Framework...
Plan Sketch    Prototype   Increase Fidelity    Iterate/Talk                           Protyping Tools: Online grid genera...
Increase Fidelity                               Visual DesignFriday, October 26, 2012
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                               Visual Design    ...
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                    Visual Design approaches    ...
“I can’t design in the browser.”                           ...my designs end up suffering, looking boxy, bland and uninspir...
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                    Visual Design approaches    ...
“I design in Photoshop, but decide in the browser.”                                                                      —...
“Work in Photoshop and Fireworks, by all                              means (I do). Make static visuals as rich and       ...
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk              Get design ideas into the browser as soon as possi...
Plan Sketch     Prototype   Increase Fidelity   Iterate/Talk                                               CSS shortcut to...
Adobe Edge Reflow                           (html.adobe.com/edge/reflow)Friday, October 26, 2012
Plan Sketch   Prototype   Increase Fidelity   Iterate/Talk                                     Visual Design approaches   ...
Style Tiles (styletil.es)                           Style Tiles are a design deliverable consisting of fonts, colors and i...
Style Prototypes                           (built in HTML/CSS, not Photoshop)                           sparkbox.github.co...
Client deliverables in a                                    responsive workflow                           • Content type in...
But what do you give the developers?!Friday, October 26, 2012
Style GuidesFriday, October 26, 2012
Style Guides                           • Documents every content component on the site                           • HTML ma...
“Style guides are the new Photoshop.”                                                                          —Stephen Ha...
BBC Global Experience Language (GEL)                           www.bbc.co.uk/gel/mobile/device-considerations/philosophyFr...
Starbucks style guide         www.starbucks.com/static/reference/styleguide/Friday, October 26, 2012
South Tees Hospital                           www.southtees.nhs.uk/style-guide/Friday, October 26, 2012
gim.ie/fZyK                           Compiled by Anna DebenhamFriday, October 26, 2012
Developer deliverables                           • High-fidelity prototype                           • Style guide that des...
Iterate and TalkFriday, October 26, 2012
Plan Sketch    Prototype   Increase Fidelity   Iterate/Talk            www.smashingmagazine.com/2012/09/28/better-client-p...
Plan Sketch    Prototype   Increase Fidelity   Iterate/Talk                           www.alistapart.com/articles/responsi...
So...Friday, October 26, 2012
Key characteristics of new workflow                  •        Design systems, not pages                                    ...
what are you trying?                               and, thanks for listening! xo, JenFriday, October 26, 2012
Upcoming SlideShare
Loading in...5
×

Designers and Code and Workflows and Stuff

18,947

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
18,947
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

Transcript of "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

×