The New Photoshop, Part 2: The Revenge of the Web
•
5 likes•3,598 views
My talk for Mobilism 2013, (May 16, 2013). The sequel to my talk at Fronteers 2012
Recommended
More Related Content
Viewers also liked
Viewers also liked (17)
Similar to The New Photoshop, Part 2: The Revenge of the Web
Similar to The New Photoshop, Part 2: The Revenge of the Web (20)
More from Stephen Hay
More from Stephen Hay (20)
Recently uploaded
Recently uploaded (20)
The New Photoshop, Part 2: The Revenge of the Web
- 1. Revenge THE NEW PHOTOSHOP, PART 2 Web STEPHEN HAY MOBILISM 2013 AMSTERDAM of the the
- 3. Image-basedmockupsare 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.
- 7. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com
- 8. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN x< 200 THAT’S WHY
- 10. Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser.
- 14. Designrevisionscanbea nightmare. Get rid of this Make logo this big Put some LoremIpsum here andwe’ll tackle it in afuture iteration. Search bar looks great!
- 15. Designrevisionscanbea nightmare. Get rid of this Make logo this big Put some LoremIpsum here andwe’ll tackle it in afuture iteration. Search bar looks great! GOOD LUCK WITH THAT ON 3 MOCKUPS PER SCREEN
- 16. experimentation
- 17. experimentation
- 19. versioncontrol.
- 20. versioncontrol.
- 23. er…
- 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
- 31. getanduse representativecontent. WITHOUT IT, YOU’RE DESIGNING BLIND DESIGN WITHOUT CONTENT IS EITHER ART OR DECORATION AND I’M PRETTY SURE IT’S NOT ART
- 35. Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately. WHAT IS THE STRUCTURE OF THE CONTENT?
- 36. thesethingscanhelpwithspeed LAYOUT/GRID HELPERS STATIC SITE GENERATORS CSS PREPROCESSORS
- 38. Ideally,yourmockupcouldbecomethe baseforfront-endproduction. THOUGH IT DOESN’T NEED TO BE. RELAX.
- 39. staticsitegenerators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
- 41. Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
- 43. Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
- 44. layout/gridhelpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
- 47. CSSpreprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
- 48. Tocreateweb-basedmockups,youwill needsomeknowledgeofthemediumfor whichyouaredesigning. WEB TECH IS SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.
- 50. presentthem
- 51. presentthem TO CLIENTS, DEVELOPERS, BASICALLY ANYONE
- 52. automatedscreenshots VISUAL ARCHIVE OF THE ITERATION PROCESS ~ $ casperjs screenshots.js
- 56. usethemasabaseforastyleguide STYLE GUIDES ARE THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012