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

The New Photoshop, Part 2: The Revenge of the W...

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

  2. 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
  3. 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
  4. 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
  5. Web-based mockups more effectively represent the end result in the

    browser because they are already in the browser. DOH!
  6. 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!
  7. 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
  8. sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL

    THINKING IT’S THE HARD PART. THE REST IS EXECUTION
  9. 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. 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. 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. You have to know what your content is— or is

    going to be—in order to deal with it appropriately.
  13. 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. static site generators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE

    PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
  15. Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $

    jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
  16. Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d

    [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
  17. layout/grid helpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE

    WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
  18. 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. 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
  20. 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.
  21. This is about looking outside your comfort zone (and even

    your field) for inspiration… how can you do things more effectively?
  22. You don’t have to learn to code. But learning a

    new approach might benefit you in some way.