Successfully reported this slideshow.
Your SlideShare is downloading. ×

The New Photoshop, Part 2: The Revenge of the Web

Ad

Revenge
THE NEW PHOTOSHOP, PART 2
Web STEPHEN HAY
MOBILISM 2013
AMSTERDAM
of the
the

Ad

Image-basedmockupsare

Ad

Image-basedmockupsare
SORRY TO BE THE BEARER OF BAD NEWS.

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Dont try these at home
Dont try these at home
Loading in …3
×

Check these out next

1 of 59 Ad
1 of 59 Ad

More Related Content

The New Photoshop, Part 2: The Revenge of the Web

  1. 1. Revenge THE NEW PHOTOSHOP, PART 2 Web STEPHEN HAY MOBILISM 2013 AMSTERDAM of the the
  2. 2. Image-basedmockupsare
  3. 3. Image-basedmockupsare SORRY TO BE THE BEARER OF BAD NEWS.
  4. 4. DESIGNER MEDIUM I MADE THIS UP. BUT STILL.
  5. 5. DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE THIS UP. BUT STILL.
  6. 6. why? web-basedmockups…
  7. 7. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com
  8. 8. Managingmorethan200PSDfilesisnot onlytedious,butitcanproduceminor discrepanciesbetweencompsofthe samepageatdifferentbreakpoints. – appendTo ON THE TIME.COM REDESIGN x< 200 THAT’S WHY
  9. 9. Web-basedmockupsmoreeffectively representtheendresultinthebrowser
  10. 10. Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser.
  11. 11. Web-basedmockupsmoreeffectively representtheendresultinthebrowser becausetheyarealreadyinthebrowser. DOH!
  12. 12. flickr.com/photos/uggboy/4098274795/ Clientseesthis.
  13. 13. flickr.com/photos/boanerges/70312998/ Clientgetsthis.
  14. 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. 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. 16. experimentation
  17. 17. experimentation
  18. 18. experimentation win.
  19. 19. versioncontrol.
  20. 20. versioncontrol.
  21. 21. oops. psdisasters.com
  22. 22. oops. psdisasters.com
  23. 23. er…
  24. 24. THE TOOL RULE It’snotaboutthetools.
  25. 25. THE TOOL RULE It’snotaboutthetools. It’saboutthemedium.
  26. 26. how? web-basedmockups…
  27. 27. sketch. first,
  28. 28. sketch. first,
  29. 29. sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL THINKING IT’S THE HARD PART. THE REST IS EXECUTION
  30. 30. getanduse representativecontent.
  31. 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
  32. 32. Don’tdesignaroundthis Enimurna,pharetrasuscipit,varius et,conguequis,odio.Doneclobortis, elitbibendumeuismodfaucibus,velit nibhegestaslibero,vitae pellentesqueelitaugueutmassa. Nullaconsequateratatmassa. Vivamusid.
  33. 33. whenitshouldbethis Enimurna Pharetrasuscipit,variuset,congue quis,odio.Doneclobortis,elit bibendumeuismodfaucibus • Velitnibhegestaslibero • Vitaepellentesqueelitaugueut massa. Nullaconsequateratatmassa. Vivamusid…
  34. 34. Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately.
  35. 35. Youhavetoknowwhatyourcontentis— orisgoingtobe—inordertodealwithit appropriately. WHAT IS THE STRUCTURE OF THE CONTENT?
  36. 36. thesethingscanhelpwithspeed LAYOUT/GRID HELPERS STATIC SITE GENERATORS CSS PREPROCESSORS
  37. 37. Ideally,yourmockupcouldbecomethe baseforfront-endproduction.
  38. 38. Ideally,yourmockupcouldbecomethe baseforfront-endproduction. THOUGH IT DOESN’T NEED TO BE. RELAX.
  39. 39. staticsitegenerators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup
  40. 40. Jekyll FOR EXAMPLE http://jekyllrb.com/
  41. 41. Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000
  42. 42. Dexy FOR EXAMPLE http://dexy.it/
  43. 43. Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085
  44. 44. layout/gridhelpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID
  45. 45. Susy FOR EXAMPLE http://susy.oddbird.net/
  46. 46. CSS FOR EXAMPLE http://w3.org/Style/CSS Flexbox Gridlayout (Grid)Templatelayout http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-grid-layout/ http://dev.w3.org/csswg/css-template/
  47. 47. CSSpreprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE
  48. 48. Tocreateweb-basedmockups,youwill needsomeknowledgeofthemediumfor whichyouaredesigning. WEB TECH IS SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.
  49. 49. do whatcanyou withweb-basedmockups onceyouhavethem?
  50. 50. presentthem
  51. 51. presentthem TO CLIENTS, DEVELOPERS, BASICALLY ANYONE
  52. 52. automatedscreenshots VISUAL ARCHIVE OF THE ITERATION PROCESS ~ $ casperjs screenshots.js
  53. 53. livedemos ON ACTUAL DEVICES
  54. 54. [usability]testing ON ACTUAL DEVICES
  55. 55. usethemasabaseforastyleguide
  56. 56. usethemasabaseforastyleguide STYLE GUIDES ARE THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012
  57. 57. more web-basedmockupsare thanaprettypicture.
  58. 58. more web-basedmockupsare thanaprettypicture. CONSIDER THEM!
  59. 59. havefun keeplearning THANK YOU! @stephenhay

×