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.
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
15. Backend & Server
“black magic”
idea launch
Friday, October 26, 2012
16. Where I work...
typography
wireframes HTML
design strategies user journeys layout
CSS
mood/atmosphere
idea flow diagrams launch
comps/mockups
site maps
Friday, October 26, 2012
30. [courtesy of Brad Frost (bradfrostweb.com)]
Friday, October 26, 2012
31. [courtesy of Brad Frost (bradfrostweb.com)]
Friday, October 26, 2012
32. disruptive
Disruptive
Friday, October 26, 2012
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-mobile
Friday, October 26, 2012
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 disabilities
Friday, October 26, 2012
35. BUT!
88% of Americans have a mobile device
55% use them to access the Web
Friday, October 26, 2012
36. 31%
Americans only or mostly use Internet on mobile
39% 43% 51%
No-college Low-income Black
Americans Americans Americans
Friday, October 26, 2012
37. Your site on mobile MUST:
• Have complete content
• Be fully-functional
• Be easy to use
Friday, October 26, 2012
44. “Like bringing a knife to a gunfight.”
—Andy Clarke
https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
Friday, October 26, 2012
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-consuming
Friday, October 26, 2012
48. Toward a new process
PRocess
(responsive workflow)
Friday, October 26, 2012
49. Responsive Summit
London • February 2012
www.responsivesummit.com
Friday, October 26, 2012
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-workflow
Friday, October 26, 2012
51. “Responsive Workflow,” by Viljami Salminen
http://viljamis.com/blog/2012/responsive-workflow/
Friday, October 26, 2012
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-2012
Friday, October 26, 2012
54. Plan Sketch Prototype Increase Fidelity Iterate/Talk
“Websites are systems rather than pages.”
—Anna Debenham
Friday, October 26, 2012
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 type
Friday, October 26, 2012
57. Plan Sketch Prototype Increase Fidelity Iterate/Talk
Sketch
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Friday, October 26, 2012
58. Normally, you’d whip up some wireframes
right about now, but...
Friday, October 26, 2012
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 quality
Friday, October 26, 2012
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 production
Friday, October 26, 2012
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. 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
64. Plan Sketch Prototype Increase Fidelity Iterate/Talk
Visual Design
• Typographic treatments
• White space
• Color and texture
• “Atmosphere”
Friday, October 26, 2012
65. Plan Sketch Prototype Increase Fidelity Iterate/Talk
Visual Design approaches
• “Design in Browser” w/ CSS
Friday, October 26, 2012
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. Plan Sketch Prototype Increase Fidelity Iterate/Talk
Visual Design approaches
• “Design in Browser” w/ CSS
• Photoshop/Fireworks then move to browser asap
Friday, October 26, 2012
68. “I design in Photoshop, but decide in the browser.”
—Chris Coyier, css-tricks.com
css-tricks.com/conferences/BDConf2012-Workflow.pdf
Friday, October 26, 2012
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. 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. 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. Adobe Edge Reflow
(html.adobe.com/edge/reflow)
Friday, October 26, 2012
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. 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 Warren
Friday, October 26, 2012
75. Style Prototypes
(built in HTML/CSS, not Photoshop)
sparkbox.github.com/style-prototype/
Friday, October 26, 2012
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. But what do you give the developers?!
Friday, October 26, 2012
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 resizes
Friday, October 26, 2012
80. “Style guides are the new Photoshop.”
—Stephen Hay
speakerdeck.com/u/stephenhay/p/style-guides-are-the-new-photoshop-smashing-conference-2012
Friday, October 26, 2012
81. BBC Global Experience Language (GEL)
www.bbc.co.uk/gel/mobile/device-considerations/philosophy
Friday, October 26, 2012
82. Starbucks style guide
www.starbucks.com/static/reference/styleguide/
Friday, October 26, 2012
83. South Tees Hospital
www.southtees.nhs.uk/style-guide/
Friday, October 26, 2012
84. gim.ie/fZyK
Compiled by Anna Debenham
Friday, October 26, 2012
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
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 dust
Friday, October 26, 2012
91. what are you trying?
and, thanks for listening! xo, Jen
Friday, October 26, 2012