Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,474 views

Published on

My talk for Mobilism 2013, (May 16, 2013). The sequel to my talk at Fronteers 2012

Published in: Technology, Art & Photos

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

  1. 1. RevengeTHE NEW PHOTOSHOP, PART 2Web STEPHEN HAYMOBILISM 2013AMSTERDAMof thethe
  2. 2. Image-basedmockupsare
  3. 3. Image-basedmockupsareSORRY TO BE THE BEARER OF BAD NEWS.
  4. 4. DESIGNER MEDIUMI MADE THIS UP. BUT STILL.
  5. 5. DESIGNER MEDIUMfashionfurniture/interiorarchitectureprintwebI MADE THIS UP. BUT STILL.
  6. 6. why?web-basedmockups…
  7. 7. Managingmorethan200PSDfilesisnotonlytedious,butitcanproduceminordiscrepanciesbetweencompsofthesamepageatdifferentbreakpoints.– appendTo ON THE TIME.COM REDESIGNhttp://appendto.com/case-study/responsive-design-time-com
  8. 8. Managingmorethan200PSDfilesisnotonlytedious,butitcanproduceminordiscrepanciesbetweencompsofthesamepageatdifferentbreakpoints.– appendTo ON THE TIME.COM REDESIGNx< 200THAT’S WHY
  9. 9. Web-basedmockupsmoreeffectivelyrepresenttheendresultinthebrowser
  10. 10. Web-basedmockupsmoreeffectivelyrepresenttheendresultinthebrowserbecausetheyarealreadyinthebrowser.
  11. 11. Web-basedmockupsmoreeffectivelyrepresenttheendresultinthebrowserbecausetheyarealreadyinthebrowser.DOH!
  12. 12. flickr.com/photos/uggboy/4098274795/Clientseesthis.
  13. 13. flickr.com/photos/boanerges/70312998/Clientgetsthis.
  14. 14. Designrevisionscanbeanightmare.Get rid of thisMake logothis bigPut some LoremIpsum here andwe’ll tackle it in afuture iteration.Search bar looks great!
  15. 15. Designrevisionscanbeanightmare.Get rid of thisMake logothis bigPut 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. experimentationwin.
  19. 19. versioncontrol.
  20. 20. versioncontrol.
  21. 21. oops.psdisasters.com
  22. 22. oops.psdisasters.com
  23. 23. er…
  24. 24. THE TOOL RULEIt’snotaboutthetools.
  25. 25. THE TOOL RULEIt’snotaboutthetools.It’saboutthemedium.
  26. 26. how?web-basedmockups…
  27. 27. sketch.first,
  28. 28. sketch.first,
  29. 29. sketch.first,SKETCHING IS WHERE DESIGN HAPPENSSKETCHING IS VISUAL THINKINGIT’S THE HARD PART. THE REST IS EXECUTION
  30. 30. getanduserepresentativecontent.
  31. 31. getanduserepresentativecontent.WITHOUT IT, YOU’RE DESIGNING BLINDDESIGN WITHOUT CONTENT IS EITHER ART OR DECORATIONAND I’M PRETTY SURE IT’S NOT ART
  32. 32. Don’tdesignaroundthisEnimurna,pharetrasuscipit,variuset,conguequis,odio.Doneclobortis,elitbibendumeuismodfaucibus,velitnibhegestaslibero,vitaepellentesqueelitaugueutmassa.Nullaconsequateratatmassa.Vivamusid.
  33. 33. whenitshouldbethisEnimurnaPharetrasuscipit,variuset,conguequis,odio.Doneclobortis,elitbibendumeuismodfaucibus• Velitnibhegestaslibero• Vitaepellentesqueelitaugueutmassa.Nullaconsequateratatmassa.Vivamusid…
  34. 34. Youhavetoknowwhatyourcontentis—orisgoingtobe—inordertodealwithitappropriately.
  35. 35. Youhavetoknowwhatyourcontentis—orisgoingtobe—inordertodealwithitappropriately.WHAT IS THE STRUCTURE OF THE CONTENT?
  36. 36. thesethingscanhelpwithspeedLAYOUT/GRID HELPERSSTATIC SITE GENERATORSCSS PREPROCESSORS
  37. 37. Ideally,yourmockupcouldbecomethebaseforfront-endproduction.
  38. 38. Ideally,yourmockupcouldbecomethebaseforfront-endproduction.THOUGH IT DOESN’T NEED TO BE. RELAX.
  39. 39. staticsitegeneratorsFOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXYTHESE PROVIDE WAYS OF SAYING:setup mymockupserve mymockup
  40. 40. JekyllFOR EXAMPLE http://jekyllrb.com/
  41. 41. JekyllFOR EXAMPLE~ $ gem install jekyll~ $ jekyll new mymockup~ $ cd mymockup~/mymockup $ jekyll serveAVAILABLE AT LOCALHOST:4000
  42. 42. DexyFOR EXAMPLE http://dexy.it/
  43. 43. DexyFOR EXAMPLE~ $ dexy gen --t [template] --d [directory]~ $ cd mymockup~/mymockup $ dexy~/mymockup $ dexy serveAVAILABLE AT LOCALHOST:8085
  44. 44. layout/gridhelpersFOR EXAMPLE: SUSY, CSS, YOUR OWNTHESE PROVIDE WAYS OF QUICKLY POSITIONINGELEMENTS TO AN UNDERLYING GRID
  45. 45. SusyFOR EXAMPLE http://susy.oddbird.net/
  46. 46. CSSFOR EXAMPLE http://w3.org/Style/CSSFlexboxGridlayout(Grid)Templatelayouthttp://www.w3.org/TR/css3-flexbox/http://www.w3.org/TR/css3-grid-layout/http://dev.w3.org/csswg/css-template/
  47. 47. CSSpreprocessorsFOR EXAMPLE: SASS, LESSPROVIDE VARIABLES, MIXINS, & MUCH MORE
  48. 48. Tocreateweb-basedmockups,youwillneedsomeknowledgeofthemediumforwhichyouaredesigning.WEB TECH IS SIMPLY ANOTHER TOOLSET.NO NEED TO BE AFRAID.
  49. 49. dowhatcanyouwithweb-basedmockupsonceyouhavethem?
  50. 50. presentthem
  51. 51. presentthemTO CLIENTS, DEVELOPERS, BASICALLY ANYONE
  52. 52. automatedscreenshotsVISUAL ARCHIVE OF THE ITERATION PROCESS~ $ casperjs screenshots.js
  53. 53. livedemosON ACTUAL DEVICES
  54. 54. [usability]testingON ACTUAL DEVICES
  55. 55. usethemasabaseforastyleguide
  56. 56. usethemasabaseforastyleguideSTYLE GUIDES ARE THE NEW PHOTOSHOPslideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012
  57. 57. moreweb-basedmockupsarethanaprettypicture.
  58. 58. moreweb-basedmockupsarethanaprettypicture.CONSIDER THEM!
  59. 59. havefunkeeplearningTHANK YOU! @stephenhay

×