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

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

Transcript

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

   View Slide

2. PSD
   

   View Slide

3. PSD
   PRETTY SHITTY DELIVERABLE
   

   View Slide

4. web-based mockup
   HTML, CSS, ?
   

   View Slide

5. PSD
   ON A SMALL SCREEN
   

   View Slide

6. web-based mockup
   ON A SMALL SCREEN
   

   View Slide

7. a responsive design workflow
   

   View Slide

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
   

   View Slide

9. Image-based mockups are
   

   View Slide

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

    View Slide

11. Our design comps are a carryover from print.
    

    View Slide

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

    View Slide

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

    View Slide

14. http://harryborgmanart.blogspot.ch/
    

    View Slide

15. DESIGNER MEDIUM
    

    View Slide

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

    View Slide

17. There is nothing wrong with Photoshop.
    

    View Slide

18. WTF
    psdisasters.com
    

    View Slide

19. er…
    

    View Slide

20. why?
    web-based mockups…
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!
    

    View Slide

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
    

    View Slide

29. experimentation
    

    View Slide

30. experimentation
    win.
    

    View Slide

31. version control.
    

    View Slide

32. version control.
    

    View Slide

33. how?
    web-based mockups…
    

    View Slide

34. sketch.
    first,
    

    View Slide

35. sketch.
    first,
    

    View Slide

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

    View Slide

37. get and use
    representative content.
    

    View Slide

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
    

    View Slide

39. http://harryborgmanart.blogspot.ch/
    

    View Slide

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.
    

    View Slide

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…
    

    View Slide

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

    View Slide

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?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. View Slide

53. Hi, mom.
    

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. present them
    

    View Slide

62. present them
    TO CLIENTS, DEVELOPERS, BASICALLY ANYONE
    

    View Slide

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

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. live demos
    ON ACTUAL DEVICES
    

    View Slide

68. [usability] testing
    ON ACTUAL DEVICES
    

    View Slide

69. use them as a base for a style guide
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. have fun
    keep learning
    THANK YOU! @stephenhay
    

    View Slide