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.

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