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

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
August 29, 2013

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

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

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

August 29, 2013
Tweet

Transcript

  1. Revenge THE NEW PHOTOSHOP, PART 2 Web STEPHEN HAY FRONTENDCONF

    2013 ZURICH of the the
  2. PSD

  3. PSD PRETTY SHITTY DELIVERABLE

  4. web-based mockup HTML, CSS, ?

  5. PSD ON A SMALL SCREEN

  6. web-based mockup ON A SMALL SCREEN

  7. a responsive design workflow

  8. a responsive design workflow 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-based mockups are

  10. Image-based mockups are SORRY TO BE THE BEARER OF BAD

    NEWS.
  11. Our design comps are a carryover from print.

  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. There is nothing wrong with Photoshop.

  18. WTF psdisasters.com

  19. er…

  20. why? web-based mockups…

  21. Managing more than 200 PSD files is not only tedious,

    but it can produce minor discrepancies between comps of the same page at different breakpoints. – appendTo ON THE TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com
  22. Managing more than 200 PSD files is not only tedious,

    but it can produce minor discrepancies between comps of the same page at different breakpoints. – appendTo ON THE TIME.COM REDESIGN x < 200 THAT’S WHY
  23. Web-based mockups more effectively represent the end result in the

    browser
  24. Web-based mockups more effectively represent the end result in the

    browser because they are already in the browser. DOH!
  25. flickr.com/photos/uggboy/4098274795/ Client sees this.

  26. flickr.com/photos/boanerges/70312998/ Client gets this.

  27. Design revisions can be a nightmare. Get rid of this

    Make logo this big Put some Lorem Ipsum here and we’ll tackle it in a future iteration. Search bar looks great!
  28. Design revisions can be a nightmare. Get rid of this

    Make logo this big Put some Lorem Ipsum here and we’ll tackle it in a future iteration. Search bar looks great! GOOD LUCK WITH THAT ON 3 MOCKUPS PER SCREEN
  29. experimentation

  30. experimentation win.

  31. version control.

  32. version control.

  33. how? web-based mockups…

  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. get and use representative content.

  38. get and use representative content. 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’t design around this Enim urna, pharetra suscipit, varius et,

    congue quis, odio. Donec lobortis, elit bibendum euismod faucibus, velit nibh egestas libero, vitae pellentesque elit augue ut massa. Nulla consequat erat at massa. Vivamus id.
  41. when it should be this Enim urna Pharetra suscipit, varius

    et, congue quis, odio. Donec lobortis, elit bibendum euismod faucibus • Velit nibh egestas libero • Vitae pellentesque elit augue ut massa. Nulla consequat erat at massa. Vivamus id…
  42. You have to know what your content is— or is

    going to be—in order to deal with it appropriately.
  43. You have to know what your content is— or is

    going to be—in order to deal with it appropriately. WHAT IS THE STRUCTURE OF THE CONTENT?
  44. these things can help with speed LAYOUT/GRID HELPERS STATIC SITE

    GENERATORS CSS PREPROCESSORS
  45. Optionally, your mockup could become the base for front-end production.

  46. Optionally, your mockup could become the base for front-end production.

    THOUGH IT DOESN’T NEED TO BE. RELAX.
  47. static site generators 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. None
  53. Hi, mom.

  54. layout/grid helpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE

    WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
  55. Susy FOR EXAMPLE http://susy.oddbird.net/

  56. CSS FOR EXAMPLE http://w3.org/Style/CSS Flexbox Grid layout (Grid) Template layout

    http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-grid-layout/ http://dev.w3.org/csswg/css-template/
  57. CSS preprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, &

    MUCH MORE
  58. THE TOOL RULE It’s not about the tools.

  59. THE TOOL RULE It’s not about the tools. It’s about

    the results.
  60. do what can you with web-based mockups once you have

    them?
  61. present them

  62. present them TO CLIENTS, DEVELOPERS, BASICALLY ANYONE

  63. automated screenshots VISUAL ARCHIVE OF THE ITERATION PROCESS ~ $

    casperjs screenshots.js
  64. None
  65. None
  66. None
  67. live demos ON ACTUAL DEVICES

  68. [usability] testing ON ACTUAL DEVICES

  69. use them as a base for a style guide

  70. use them as a base for a style guide STYLE

    GUIDES ARE THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012
  71. To create web-based mockups, you will need some knowledge of

    the medium for which you are designing. WEB TECH IS SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.
  72. Forget the useless “should designers code” debate.

  73. This is about looking outside your comfort zone (and even

    your field) for inspiration… how can you do things more effectively?
  74. You don’t have to learn to code. But learning a

    new approach might benefit you in some way.
  75. more web-based mockups are than a pretty picture.

  76. more web-based mockups are than a pretty picture. CONSIDER THEM!

  77. have fun keep learning THANK YOU! @stephenhay