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

2.
Image-basedmockupsare

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.

6.
why?
web-basedmockups…

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

9.
Web-basedmockupsmoreeffectively
representtheendresultinthebrowser

10.
Web-basedmockupsmoreeffectively
representtheendresultinthebrowser
becausetheyarealreadyinthebrowser.

11.
Web-basedmockupsmoreeffectively
representtheendresultinthebrowser
becausetheyarealreadyinthebrowser.
DOH!

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

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

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

18.
experimentation
win.

19.
versioncontrol.

20.
versioncontrol.

21.
oops.
psdisasters.com

22.
oops.
psdisasters.com

23.
er…

24.
THE TOOL RULE
It’snotaboutthetools.

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

26.
how?
web-basedmockups…

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.
getanduse
representativecontent.

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.
Don’tdesignaroundthis
Enimurna,pharetrasuscipit,varius
et,conguequis,odio.Doneclobortis,
elitbibendumeuismodfaucibus,velit
nibhegestaslibero,vitae
pellentesqueelitaugueutmassa.
Nullaconsequateratatmassa.
Vivamusid.

33.
whenitshouldbethis
Enimurna
Pharetrasuscipit,variuset,congue
quis,odio.Doneclobortis,elit
bibendumeuismodfaucibus
• Velitnibhegestaslibero
• Vitaepellentesqueelitaugueut
massa.
Nullaconsequateratatmassa.
Vivamusid…

34.
Youhavetoknowwhatyourcontentis—
orisgoingtobe—inordertodealwithit
appropriately.

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

36.
thesethingscanhelpwithspeed
LAYOUT/GRID HELPERS
STATIC SITE GENERATORS
CSS PREPROCESSORS

37.
Ideally,yourmockupcouldbecomethe
baseforfront-endproduction.

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

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/gridhelpers
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
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.
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.

49.
do
whatcanyou
withweb-basedmockups
onceyouhavethem?

50.
presentthem

51.
presentthem
TO CLIENTS, DEVELOPERS, BASICALLY ANYONE

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

53.
livedemos
ON ACTUAL DEVICES

54.
[usability]testing
ON ACTUAL DEVICES

55.
usethemasabaseforastyleguide

56.
usethemasabaseforastyleguide
STYLE GUIDES ARE THE NEW PHOTOSHOP
slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012

57.
more
web-basedmockupsare
thanaprettypicture.

58.
more
web-basedmockupsare
thanaprettypicture.
CONSIDER THEM!

59.
havefun
keeplearning
THANK YOU! @stephenhay