1.
RevengeTHE NEW PHOTOSHOP, PART 2Web STEPHEN HAYMOBILISM 2013AMSTERDAMof thethe

2.
Image-basedmockupsare

3.
Image-basedmockupsareSORRY TO BE THE BEARER OF BAD NEWS.

4.
DESIGNER MEDIUMI MADE THIS UP. BUT STILL.

5.
DESIGNER MEDIUMfashionfurniture/interiorarchitectureprintwebI MADE THIS UP. BUT STILL.

6.
why?web-basedmockups…

7.
Managingmorethan200PSDfilesisnotonlytedious,butitcanproduceminordiscrepanciesbetweencompsofthesamepageatdifferentbreakpoints.– appendTo ON THE TIME.COM REDESIGNhttp://appendto.com/case-study/responsive-design-time-com

8.
Managingmorethan200PSDfilesisnotonlytedious,butitcanproduceminordiscrepanciesbetweencompsofthesamepageatdifferentbreakpoints.– appendTo ON THE TIME.COM REDESIGNx< 200THAT’S WHY

9.
Web-basedmockupsmoreeffectivelyrepresenttheendresultinthebrowser

10.
Web-basedmockupsmoreeffectivelyrepresenttheendresultinthebrowserbecausetheyarealreadyinthebrowser.

11.
Web-basedmockupsmoreeffectivelyrepresenttheendresultinthebrowserbecausetheyarealreadyinthebrowser.DOH!

12.
flickr.com/photos/uggboy/4098274795/Clientseesthis.

13.
flickr.com/photos/boanerges/70312998/Clientgetsthis.

14.
Designrevisionscanbeanightmare.Get rid of thisMake logothis bigPut some LoremIpsum here andwe’ll tackle it in afuture iteration.Search bar looks great!

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

17.
experimentation

18.
experimentationwin.

19.
versioncontrol.

20.
versioncontrol.

21.
oops.psdisasters.com

22.
oops.psdisasters.com

23.
er…

24.
THE TOOL RULEIt’snotaboutthetools.

25.
THE TOOL RULEIt’snotaboutthetools.It’saboutthemedium.

26.
how?web-basedmockups…

27.
sketch.first,

28.
sketch.first,

29.
sketch.first,SKETCHING IS WHERE DESIGN HAPPENSSKETCHING IS VISUAL THINKINGIT’S THE HARD PART. THE REST IS EXECUTION

30.
getanduserepresentativecontent.

31.
getanduserepresentativecontent.WITHOUT IT, YOU’RE DESIGNING BLINDDESIGN WITHOUT CONTENT IS EITHER ART OR DECORATIONAND I’M PRETTY SURE IT’S NOT ART

32.
Don’tdesignaroundthisEnimurna,pharetrasuscipit,variuset,conguequis,odio.Doneclobortis,elitbibendumeuismodfaucibus,velitnibhegestaslibero,vitaepellentesqueelitaugueutmassa.Nullaconsequateratatmassa.Vivamusid.

33.
whenitshouldbethisEnimurnaPharetrasuscipit,variuset,conguequis,odio.Doneclobortis,elitbibendumeuismodfaucibus• Velitnibhegestaslibero• Vitaepellentesqueelitaugueutmassa.Nullaconsequateratatmassa.Vivamusid…

34.
Youhavetoknowwhatyourcontentis—orisgoingtobe—inordertodealwithitappropriately.

35.
Youhavetoknowwhatyourcontentis—orisgoingtobe—inordertodealwithitappropriately.WHAT IS THE STRUCTURE OF THE CONTENT?

36.
thesethingscanhelpwithspeedLAYOUT/GRID HELPERSSTATIC SITE GENERATORSCSS PREPROCESSORS

37.
Ideally,yourmockupcouldbecomethebaseforfront-endproduction.

38.
Ideally,yourmockupcouldbecomethebaseforfront-endproduction.THOUGH IT DOESN’T NEED TO BE. RELAX.

39.
staticsitegeneratorsFOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXYTHESE PROVIDE WAYS OF SAYING:setup mymockupserve mymockup

40.
JekyllFOR EXAMPLE http://jekyllrb.com/

41.
JekyllFOR EXAMPLE~ $ gem install jekyll~ $ jekyll new mymockup~ $ cd mymockup~/mymockup $ jekyll serveAVAILABLE AT LOCALHOST:4000

42.
DexyFOR EXAMPLE http://dexy.it/

43.
DexyFOR EXAMPLE~ $ dexy gen --t [template] --d [directory]~ $ cd mymockup~/mymockup $ dexy~/mymockup $ dexy serveAVAILABLE AT LOCALHOST:8085

44.
layout/gridhelpersFOR EXAMPLE: SUSY, CSS, YOUR OWNTHESE PROVIDE WAYS OF QUICKLY POSITIONINGELEMENTS TO AN UNDERLYING GRID

45.
SusyFOR EXAMPLE http://susy.oddbird.net/

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.
CSSpreprocessorsFOR EXAMPLE: SASS, LESSPROVIDE VARIABLES, MIXINS, & MUCH MORE

48.
Tocreateweb-basedmockups,youwillneedsomeknowledgeofthemediumforwhichyouaredesigning.WEB TECH IS SIMPLY ANOTHER TOOLSET.NO NEED TO BE AFRAID.

49.
dowhatcanyouwithweb-basedmockupsonceyouhavethem?

50.
presentthem

51.
presentthemTO CLIENTS, DEVELOPERS, BASICALLY ANYONE

52.
automatedscreenshotsVISUAL ARCHIVE OF THE ITERATION PROCESS~ $ casperjs screenshots.js

53.
livedemosON ACTUAL DEVICES

54.
[usability]testingON ACTUAL DEVICES

55.
usethemasabaseforastyleguide

56.
usethemasabaseforastyleguideSTYLE GUIDES ARE THE NEW PHOTOSHOPslideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012

57.
moreweb-basedmockupsarethanaprettypicture.

58.
moreweb-basedmockupsarethanaprettypicture.CONSIDER THEM!

59.
havefunkeeplearningTHANK YOU! @stephenhay