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.

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

May 16, 2013
Tweet

Transcript

  1. 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
  2. 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
  3. 10.

    Web-based mockups more effectively represent the end result in the

    browser because they are already in the browser.
  4. 11.

    Web-based mockups more effectively represent the end result in the

    browser because they are already in the browser. DOH!
  5. 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!
  6. 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
  7. 23.
  8. 29.

    sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL

    THINKING IT’S THE HARD PART. THE REST IS EXECUTION
  9. 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
  10. 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.
  11. 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…
  12. 34.

    You have to know what your content is— or is

    going to be—in order to deal with it appropriately.
  13. 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?
  14. 39.

    static site generators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE

    PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
  15. 41.

    Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $

    jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
  16. 43.

    Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d

    [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
  17. 44.

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

    WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
  18. 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/
  19. 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.
  20. 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