$30 off During Our Annual Pro Sale. View Details »

The New Photoshop, Part 2: The Revenge of the Web

The New Photoshop, Part 2: The Revenge of the Web

My talk for Mobilism 2013, (May 16, 2013). The sequel to my talk at Fronteers 2012.

Stephen Hay

May 16, 2013
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. Revenge
    THE NEW PHOTOSHOP, PART 2
    Web STEPHEN HAY
    MOBILISM 2013
    AMSTERDAM
    of the
    the

    View Slide

  2. Image-based mockups are

    View Slide

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

    View Slide

  4. DESIGNER MEDIUM
    I MADE THIS UP. BUT STILL.

    View Slide

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

    View Slide

  6. why?
    web-based mockups…

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

  16. experimentation

    View Slide

  17. experimentation

    View Slide

  18. experimentation
    win.

    View Slide

  19. version control.

    View Slide

  20. version control.

    View Slide

  21. oops.
    psdisasters.com

    View Slide

  22. oops.
    psdisasters.com

    View Slide

  23. er…

    View Slide

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

    View Slide

  25. THE TOOL RULE
    It’s not about the tools.
    It’s about the medium.

    View Slide

  26. how?
    web-based mockups…

    View Slide

  27. sketch.
    first,

    View Slide

  28. sketch.
    first,

    View Slide

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

    View Slide

  30. get and use
    representative content.

    View Slide

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

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

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

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

    View Slide

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

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

    View Slide

  37. Ideally, your mockup could become the
    base for front-end production.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

  50. present them

    View Slide

  51. present them
    TO CLIENTS, DEVELOPERS, BASICALLY ANYONE

    View Slide

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

    View Slide

  53. live demos
    ON ACTUAL DEVICES

    View Slide

  54. [usability] testing
    ON ACTUAL DEVICES

    View Slide

  55. use them as a base for a style guide

    View Slide

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

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

    View Slide

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

    View Slide

  59. have fun
    keep learning
    THANK YOU! @stephenhay

    View Slide