The New Photoshop, Part 2: The Revenge of the Web (FEC13)

7,364 views
6,369 views

Published on

Slides for my talk at FrontendConf (CH) in Zürich.

Published in: Technology, Design
3 Comments
37 Likes
Statistics
Notes
No Downloads
Views
Total views
7,364
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
63
Comments
3
Likes
37
Embeds 0
No embeds

No notes for slide

The New Photoshop, Part 2: The Revenge of the Web (FEC13)

  1. Revenge THE NEW PHOTOSHOP, PART 2 Web STEPHEN HAY FRONTENDCONF 2013 ZURICH of the the
  2. PSD
  3. PSDPRETTY SHITTY DELIVERABLE
  4. web-basedmockup HTML, CSS, ?
  5. PSDON A SMALL SCREEN
  6. web-basedmockup ON A SMALL SCREEN
  7. aresponsivedesignworkflow
  8. aresponsivedesignworkflow 1. Content inventory 2. Content reference wireframes 3. Designing in text 4. Linear design 5. Breakpoint graphing 6. Designing for breakpoints 7. Web-based mockup 8. Presenting as screenshots > revise 9. Presenting in browsers > revise 10. Design guidelines / style guide
  9. Image-basedmockupsare
  10. Image-basedmockupsare SORRY TO BE THE BEARER OF BAD NEWS.
  11. Ourdesigncompsareacarryoverfromprint.
  12. http://harryborgmanart.blogspot.ch/
  13. http://harryborgmanart.blogspot.ch/
  14. http://harryborgmanart.blogspot.ch/
  15. DESIGNER MEDIUM
  16. DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE THIS UP. BUT STILL.
  17. ThereisnothingwrongwithPhotoshop.
  18. WTF psdisasters.com
  19. er…
  20. why? web-basedmockups…
  21. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com
  22. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN x< 200 THAT’S WHY
  23. Web-basedmockupsmoreeffectively representtheendresultinthebrowser
  24. Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser. DOH!
  25. flickr.com/photos/uggboy/4098274795/ Clientseesthis.
  26. flickr.com/photos/boanerges/70312998/ Clientgetsthis.
  27. Designrevisionscanbea nightmare. Get rid of this Make logo this big Put some LoremIpsum here andwe’ll tackle it in afuture iteration. Search bar looks great!
  28. Designrevisionscanbea nightmare. Get rid of this Make logo this big Put some LoremIpsum here andwe’ll tackle it in afuture iteration. Search bar looks great! GOOD LUCK WITH THAT ON 3 MOCKUPS PER SCREEN
  29. experimentation
  30. experimentation win.
  31. versioncontrol.
  32. versioncontrol.
  33. how? web-basedmockups…
  34. sketch. first,
  35. sketch. first,
  36. sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL THINKING IT’S THE HARD PART. THE REST IS EXECUTION
  37. getanduse representativecontent.
  38. getanduse representativecontent. WITHOUT IT, YOU’RE DESIGNING BLIND DESIGN WITHOUT CONTENT IS EITHER ART OR DECORATION AND I’M PRETTY SURE IT’S NOT ART
  39. http://harryborgmanart.blogspot.ch/
  40. Don’tdesignaroundthis Enimurna,pharetrasuscipit,varius et,conguequis,odio.Doneclobortis, elitbibendumeuismodfaucibus,velit nibhegestaslibero,vitae pellentesqueelitaugueutmassa. Nullaconsequateratatmassa. Vivamusid.
  41. whenitshouldbethis Enimurna Pharetrasuscipit,variuset,congue quis,odio.Doneclobortis,elit bibendumeuismodfaucibus • Velitnibhegestaslibero • Vitaepellentesqueelitaugueut massa. Nullaconsequateratatmassa. Vivamusid…
  42. Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately.
  43. Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately. WHAT IS THE STRUCTURE OF THE CONTENT?
  44. thesethingscanhelpwithspeed LAYOUT/GRID HELPERS STATIC SITE GENERATORS CSS PREPROCESSORS
  45. Optionally,yourmockupcouldbecome thebaseforfront-endproduction.
  46. Optionally,yourmockupcouldbecome thebaseforfront-endproduction. THOUGH IT DOESN’T NEED TO BE. RELAX.
  47. staticsitegenerators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
  48. Jekyll FOR EXAMPLE http://jekyllrb.com/
  49. Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
  50. Dexy FOR EXAMPLE http://dexy.it/
  51. Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
  52. Hi,mom.
  53. layout/gridhelpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
  54. Susy FOR EXAMPLE http://susy.oddbird.net/
  55. CSS FOR EXAMPLE http://w3.org/Style/CSS Flexbox Gridlayout (Grid)Templatelayout http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-grid-layout/ http://dev.w3.org/csswg/css-template/
  56. CSSpreprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
  57. THE TOOL RULE It’snotaboutthetools.
  58. THE TOOL RULE It’snotaboutthetools. It’sabouttheresults.
  59. do whatcanyou withweb-basedmockups onceyouhavethem?
  60. presentthem
  61. presentthem TO CLIENTS, DEVELOPERS, BASICALLY ANYONE
  62. automatedscreenshots VISUAL ARCHIVE OF THE ITERATION PROCESS ~ $ casperjs screenshots.js
  63. livedemos ON ACTUAL DEVICES
  64. [usability]testing ON ACTUAL DEVICES
  65. usethemasabaseforastyleguide
  66. usethemasabaseforastyleguide STYLE GUIDES ARE THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012
  67. Tocreateweb-basedmockups,youwill needsomeknowledgeofthemediumfor whichyouaredesigning. WEB TECH IS SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.
  68. Forgettheuseless “shoulddesignerscode”debate.
  69. Thisisabout lookingoutsideyourcomfortzone (andevenyourfield)forinspiration… howcanyoudothingsmoreeffectively?
  70. Youdon’thavetolearntocode. Butlearninganewapproach mightbenefityouinsomeway.
  71. more web-basedmockupsare thanaprettypicture.
  72. more web-basedmockupsare thanaprettypicture. CONSIDER THEM!
  73. havefun keeplearning THANK YOU! @stephenhay

×