Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Stephen Hay

August 29, 2013
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. Revenge
    THE NEW PHOTOSHOP, PART 2
    Web STEPHEN HAY
    FRONTENDCONF 2013
    ZURICH
    of the
    the

    View full-size slide

  2. PSD
    PRETTY SHITTY DELIVERABLE

    View full-size slide

  3. web-based mockup
    HTML, CSS, ?

    View full-size slide

  4. PSD
    ON A SMALL SCREEN

    View full-size slide

  5. web-based mockup
    ON A SMALL SCREEN

    View full-size slide

  6. a responsive design workflow

    View full-size slide

  7. 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

    View full-size slide

  8. Image-based mockups are

    View full-size slide

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

    View full-size slide

  10. Our design comps are a carryover from print.

    View full-size slide

  11. http://harryborgmanart.blogspot.ch/

    View full-size slide

  12. http://harryborgmanart.blogspot.ch/

    View full-size slide

  13. http://harryborgmanart.blogspot.ch/

    View full-size slide

  14. DESIGNER MEDIUM

    View full-size slide

  15. DESIGNER MEDIUM
    fashion
    furniture/interior
    architecture
    print
    web
    I MADE THIS UP. BUT STILL.

    View full-size slide

  16. There is nothing wrong with Photoshop.

    View full-size slide

  17. WTF
    psdisasters.com

    View full-size slide

  18. why?
    web-based mockups…

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

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

    View full-size slide

  22. Web-based mockups more effectively
    represent the end result in the browser
    because they are already in the browser.
    DOH!

    View full-size slide

  23. flickr.com/photos/uggboy/4098274795/
    Client sees this.

    View full-size slide

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

    View full-size slide

  25. 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!

    View full-size slide

  26. 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

    View full-size slide

  27. experimentation

    View full-size slide

  28. experimentation
    win.

    View full-size slide

  29. version control.

    View full-size slide

  30. version control.

    View full-size slide

  31. how?
    web-based mockups…

    View full-size slide

  32. sketch.
    first,

    View full-size slide

  33. sketch.
    first,

    View full-size slide

  34. sketch.
    first,
    SKETCHING IS WHERE DESIGN HAPPENS
    SKETCHING IS VISUAL THINKING
    IT’S THE HARD PART. THE REST IS EXECUTION

    View full-size slide

  35. get and use
    representative content.

    View full-size slide

  36. 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

    View full-size slide

  37. http://harryborgmanart.blogspot.ch/

    View full-size slide

  38. 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.

    View full-size slide

  39. 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…

    View full-size slide

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

    View full-size slide

  41. 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?

    View full-size slide

  42. these things can help with speed
    LAYOUT/GRID HELPERS
    STATIC SITE GENERATORS
    CSS PREPROCESSORS

    View full-size slide

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

    View full-size slide

  44. Optionally, your mockup could become
    the base for front-end production.
    THOUGH IT DOESN’T NEED TO BE. RELAX.

    View full-size slide

  45. static site generators
    FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY
    THESE PROVIDE WAYS OF SAYING:
    setup mymockup
    serve mymockup

    View full-size slide

  46. Jekyll
    FOR EXAMPLE http://jekyllrb.com/

    View full-size slide

  47. Jekyll
    FOR EXAMPLE
    ~ $ gem install jekyll
    ~ $ jekyll new mymockup
    ~ $ cd mymockup
    ~/mymockup $ jekyll serve
    AVAILABLE AT LOCALHOST:4000

    View full-size slide

  48. Dexy
    FOR EXAMPLE http://dexy.it/

    View full-size slide

  49. Dexy
    FOR EXAMPLE
    ~ $ dexy gen --t [template] --d [directory]
    ~ $ cd mymockup
    ~/mymockup $ dexy
    ~/mymockup $ dexy serve
    AVAILABLE AT LOCALHOST:8085

    View full-size slide

  50. layout/grid helpers
    FOR EXAMPLE: SUSY, CSS, YOUR OWN
    THESE PROVIDE WAYS OF QUICKLY POSITIONING
    ELEMENTS TO AN UNDERLYING GRID

    View full-size slide

  51. Susy
    FOR EXAMPLE http://susy.oddbird.net/

    View full-size slide

  52. 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/

    View full-size slide

  53. CSS preprocessors
    FOR EXAMPLE: SASS, LESS
    PROVIDE VARIABLES, MIXINS, & MUCH MORE

    View full-size slide

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

    View full-size slide

  55. THE TOOL RULE
    It’s not about the tools.
    It’s about the results.

    View full-size slide

  56. do
    what can you
    with web-based mockups
    once you have them?

    View full-size slide

  57. present them

    View full-size slide

  58. present them
    TO CLIENTS, DEVELOPERS, BASICALLY ANYONE

    View full-size slide

  59. automated screenshots
    VISUAL ARCHIVE OF THE ITERATION PROCESS
    ~ $ casperjs screenshots.js

    View full-size slide

  60. live demos
    ON ACTUAL DEVICES

    View full-size slide

  61. [usability] testing
    ON ACTUAL DEVICES

    View full-size slide

  62. use them as a base for a style guide

    View full-size slide

  63. 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

    View full-size slide

  64. 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.

    View full-size slide

  65. Forget the useless
    “should designers code” debate.

    View full-size slide

  66. This is about
    looking outside your comfort zone
    (and even your field) for inspiration…
    how can you do things more effectively?

    View full-size slide

  67. You don’t have to learn to code.
    But learning a new approach
    might benefit you in some way.

    View full-size slide

  68. more
    web-based mockups are
    than a pretty picture.

    View full-size slide

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

    View full-size slide

  70. have fun
    keep learning
    THANK YOU! @stephenhay

    View full-size slide