• Save
Designers and Code and Workflows and Stuff
Upcoming SlideShare
Loading in...5
×
 

Designers and Code and Workflows and Stuff

on

  • 15,642 views

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.

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.

Statistics

Views

Total Views
15,642
Views on SlideShare
12,805
Embed Views
2,837

Actions

Likes
66
Downloads
0
Comments
2

36 Embeds 2,837

http://digitalsynopsis.com 1535
http://kmilo0.blogspot.com 498
http://mycourses.tstc.edu 224
http://nerds.texastribune.org 188
http://idux.tumblr.com 83
https://twitter.com 70
http://www.simonmccann.com 53
http://efiui.wordpress.com 39
http://tstc.mrooms.net 27
http://connections.cambridge.org 20
http://kmilo0.blogspot.com.es 17
http://kmilo0.blogspot.mx 14
http://www.kmilo0.blogspot.com 7
http://www.idux.com 6
https://si0.twimg.com 5
http://tweetedtimes.com 5
http://kmilo0.blogspot.com.ar 5
http://kmilo0.blogspot.de 4
http://www.facebook.com 4
https://www.facebook.com 3
http://t.co 3
http://kmilo0.blogspot.ru 3
http://kmilo0.blogspot.co.uk 3
http://feedwrangler.net 3
http://feeds.feedburner.com 3
http://techgratiaartis.com 3
http://worstprofessorever.com 2
http://kmilo0.blogspot.ca 2
http://newsblur.com 1
http://twitter.com 1
http://kred.com 1
http://www.tumblr.com 1
http://www.google.com 1
http://kmilo0.blogspot.cz 1
http://kmilo0.blogspot.fr 1
http://kmilo0.blogspot.com.au 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Interesting, nice... good... I'd like to show it my students... but can't download it. That's well... a pity///
    Are you sure you want to
    Your message goes here
    Processing…
  • recommended books?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designers and Code and Workflows and Stuff Designers and Code and Workflows and Stuff Presentation Transcript

  • Designers and Code and workflows and stuff Jennifer Robbins @jenvilleFriday, October 26, 2012
  • 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? • How is HTML/CSS being used by designers? • What tools are available?Friday, October 26, 2012
  • Product Development Timeline idea launchFriday, October 26, 2012
  • Product Development Timeline research maintenance idea launchFriday, October 26, 2012
  • User Experience (UX) user interviews personas design strategies idea launch scenarios usability testsFriday, October 26, 2012
  • Information Architecture & Content Strategy card sorts content audit idea launch site maps taxonomiesFriday, October 26, 2012
  • Interaction/UI wireframes user journeys idea flow diagrams launch prototypesFriday, October 26, 2012
  • Visual/Graphic Design typography layout idea mood/atmosphere launch comps/mockupsFriday, October 26, 2012
  • Frontend Development HTML CSS JavaScript idea launchFriday, October 26, 2012
  • Backend & Server “black magic” idea launchFriday, October 26, 2012
  • 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
  • idea launchFriday, October 26, 2012
  • idea launchFriday, October 26, 2012
  • Traditionally, the need for coding skills increases as you get closer to launch idea launchFriday, October 26, 2012
  • I’m seeing code moving its way back the chain idea launchFriday, October 26, 2012
  • 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, 2012
  • 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 Statistics: http://www.slideshare.net/KMcGrane/uncle-sam-wants-you-to-optimize-your-content-for-mobileFriday, October 26, 2012
  • 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
  • BUT! 88% of Americans have a mobile device 55% use them to access the WebFriday, October 26, 2012
  • 31% Americans only or mostly use Internet on mobile 39% 43% 51% No-college Low-income Black Americans Americans AmericansFriday, October 26, 2012
  • Your site on mobile MUST: • Have complete content • Be fully-functional • Be easy to useFriday, October 26, 2012
  • 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 Clarke https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfightFriday, October 26, 2012
  • 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
  • Friday, October 26, 2012
  • ?Friday, October 26, 2012
  • Toward a new process PRocess (responsive workflow)Friday, October 26, 2012
  • Responsive Summit London • February 2012 www.responsivesummit.comFriday, October 26, 2012
  • 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
  • “Responsive Workflow,” by Viljami Salminen http://viljamis.com/blog/2012/responsive-workflow/Friday, October 26, 2012
  • 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
  • PlanFriday, October 26, 2012
  • Plan Sketch Prototype Increase Fidelity Iterate/Talk “Websites are systems rather than pages.” —Anna DebenhamFriday, October 26, 2012
  • 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
  • SketchFriday, October 26, 2012
  • Plan Sketch Prototype Increase Fidelity Iterate/Talk Sketch http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsFriday, October 26, 2012
  • Normally, you’d whip up some wireframes right about now, but...Friday, October 26, 2012
  • 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
  • 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
  • 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
  • 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
  • Increase Fidelity Visual DesignFriday, October 26, 2012
  • Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design • Typographic treatments • White space • Color and texture • “Atmosphere”Friday, October 26, 2012
  • Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSSFriday, October 26, 2012
  • “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
  • 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
  • “I design in Photoshop, but decide in the browser.” —Chris Coyier, css-tricks.com css-tricks.com/conferences/BDConf2012-Workflow.pdfFriday, October 26, 2012
  • “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
  • 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
  • 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
  • Adobe Edge Reflow (html.adobe.com/edge/reflow)Friday, October 26, 2012
  • 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
  • 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
  • Style Prototypes (built in HTML/CSS, not Photoshop) sparkbox.github.com/style-prototype/Friday, October 26, 2012
  • 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
  • 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 markup, CSS styles, scripts • Description of how it is used (context, limitations) • Instructions for what happens when it resizesFriday, October 26, 2012
  • “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
  • BBC Global Experience Language (GEL) www.bbc.co.uk/gel/mobile/device-considerations/philosophyFriday, October 26, 2012
  • 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 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
  • Iterate and TalkFriday, October 26, 2012
  • Plan Sketch Prototype Increase Fidelity Iterate/Talk www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/Friday, October 26, 2012
  • Plan Sketch Prototype Increase Fidelity Iterate/Talk www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/Friday, October 26, 2012
  • So...Friday, October 26, 2012
  • 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
  • what are you trying? and, thanks for listening! xo, JenFriday, October 26, 2012