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
2. Image-based mockups are
3. Image-based mockups are SORRY TO BE THE BEARER OF BAD NEWS.
4. DESIGNER MEDIUM I MADE THIS UP. BUT STILL.
5. DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE THIS UP. BUT STILL.
6. why? web-based mockups…
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
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
9. Web-based mockups more effectively represent the end result in the browser
10. Web-based mockups more effectively represent the end result in the browser because they are already in the browser.
11. Web-based mockups more effectively represent the end result in the browser because they are already in the browser. DOH!
12. flickr.com/photos/uggboy/4098274795/ Client sees this.
13. flickr.com/photos/boanerges/70312998/ Client gets this.
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!
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
16. experimentation
17. experimentation
18. experimentation win.
19. version control.
20. version control.
21. oops. psdisasters.com
22. oops. psdisasters.com
23. er…
24. THE TOOL RULE It’s not about the tools.
25. THE TOOL RULE It’s not about the tools. It’s about the medium.
26. how? web-based mockups…
27. sketch. first,
28. sketch. first,
29. sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL THINKING IT’S THE HARD PART. THE REST IS EXECUTION
30. get and use representative content.
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
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.
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…
34. You have to know what your content is— or is going to be—in order to deal with it appropriately.
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?
36. these things can help with speed LAYOUT/GRID HELPERS STATIC SITE GENERATORS CSS PREPROCESSORS
37. Ideally, your mockup could become the base for front-end production.
38. Ideally, your mockup could become the base for front-end production. THOUGH IT DOESN’T NEED TO BE. RELAX.
39. static site generators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
40. Jekyll FOR EXAMPLE http://jekyllrb.com/
41. Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
42. Dexy FOR EXAMPLE http://dexy.it/
43. Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
44. layout/grid helpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
45. Susy FOR EXAMPLE http://susy.oddbird.net/
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/
47. CSS preprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
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.
49. do what can you with web-based mockups once you have them?
50. present them
51. present them TO CLIENTS, DEVELOPERS, BASICALLY ANYONE
52. automated screenshots VISUAL ARCHIVE OF THE ITERATION PROCESS ~ $ casperjs screenshots.js
53. live demos ON ACTUAL DEVICES
54. [usability] testing ON ACTUAL DEVICES
55. use them as a base for a style guide
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
57. more web-based mockups are than a pretty picture.
58. more web-based mockups are than a pretty picture. CONSIDER THEM!
59. have fun keep learning THANK YOU! @stephenhay