RevengeTHE NEW PHOTOSHOP, PART 2

Web STEPHEN HAYFRONTENDCONF 2013ZURICH

of the

the

PSD

PSDPRETTY SHITTY DELIVERABLE

web-based mockupHTML, CSS, ?

PSDON A SMALL SCREEN

web-based mockupON A SMALL SCREEN

a responsive design workflow

a responsive design workflow1. Content inventory

2. Content reference wireframes

3. Designing in text

4. Linear design

5. Breakpoint graphing

6. Designing for breakpoints

7. Web-based mockup8. Presenting as screenshots > revise

9. Presenting in browsers > revise

10. Design guidelines / style guide

dead.Image-based mockups are

dead.Image-based mockups are

SORRY TO BE THE BEARER OF BAD NEWS.

Our design comps are a carryover from print.

http://harryborgmanart.blogspot.ch/

http://harryborgmanart.blogspot.ch/

http://harryborgmanart.blogspot.ch/

DESIGNER MEDIUM

DESIGNER MEDIUM

fashionfurniture/interior

architectureprint

web

I MADE THIS UP. BUT STILL.

There is nothing wrong with Photoshop.

WTFpsdisasters.com

er…

why?web-based mockups…

Managing more than 200 PSD files is not only tedious, but it can produce minor discrepancies between comps of the same page at different breakpoints.

– appendTo ON THE T IME.COM REDESIGN

http://appendto.com/case-study/responsive-design-time-com

Managing more than 200 PSD files is not only tedious, but it can produce minor discrepancies between comps of the same page at different breakpoints.

– appendTo ON THE T IME.COM REDESIGNx < 200

THAT’S WHY

Web-based mockups more effectively represent the end result in the browser

Web-based mockups more effectively represent the end result in the browser

because they are already in the browser.DOH!

flickr.com/photos/uggboy/4098274795/

Client sees this.

flickr.com/photos/boanerges/70312998/

Client gets this.

Design revisions can be a

nightmare.Get rid of this

Make logo this big

Put some Lorem Ipsum here and we’ll tackle it in a future iteration.

Search bar looks great!

Design revisions can be a

nightmare.Get rid of this

Make logo this big

Put some Lorem Ipsum here and we’ll tackle it in a future iteration.

Search bar looks great!

GOOD LUCK WITH THAT ON 3 MOCKUPS PER SCREEN

experimentation

experimentation

win.

version control.

version control.

how?web-based mockups…

sketch.first,

sketch.first,

sketch.first,

SKETCHING IS WHERE DESIGN HAPPENS

SKETCHING IS V ISUAL THINKING

IT ’S THE HARD PART. THE REST IS EXECUTION

get and userepresentative content.

get and userepresentative content.WITHOUT IT , YOU’RE DESIGNING BLIND

DESIGN WITHOUT CONTENT IS E ITHER ART OR DECORATION

AND I ’M PRETTY SURE IT ’S NOT ART

http://harryborgmanart.blogspot.ch/

Don’t design around this

Enim urna, pharetra suscipit, varius et, congue quis, odio. Donec lobortis, elit bibendum euismod faucibus, velit nibh egestas libero, vitae pellentesque elit augue ut massa. Nulla consequat erat at massa. Vivamus id.

when it should be this

Enim urnaPharetra suscipit, varius et, congue quis, odio. Donec lobortis, elit bibendum euismod faucibus

• Velit nibh egestas libero

• Vitae pellentesque elit augue ut massa.

Nulla consequat erat at massa.Vivamus id…

You have to know what your content is—or is going to be—in order to deal with it appropriately.

You have to know what your content is—or is going to be—in order to deal with it appropriately.

WHAT IS THE S T R U CT U R E OF THE CONTENT?

these things can help with speed

LAYOUT/GRID HELPERS

STATIC S ITE GENERATORS

CSS PREPROCESSORS

Optionally, your mockup could become the base for front-end production.

Optionally, your mockup could become the base for front-end production.

THOUGH IT DOESN’T NEED TO BE. RELAX.

static site generators

FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY

THESE PROVIDE WAYS OF SAYING:

setup mymockupserve mymockup

JekyllFOR EXAMPLE http://jekyllrb.com/

JekyllFOR EXAMPLE

~ $ gem install jekyll~ $ jekyll new mymockup~ $ cd mymockup~/mymockup $ jekyll serve

AVAILABLE AT LOCALHOST:4000

DexyFOR EXAMPLE http://dexy.it/

DexyFOR EXAMPLE

~ $ dexy gen --t [template] --d [directory]~ $ cd mymockup~/mymockup $ dexy~/mymockup $ dexy serve

AVAILABLE AT LOCALHOST:8085

Hi, mom.

layout/grid helpers

FOR EXAMPLE: SUSY, CSS, YOUR OWN

THESE PROVIDE WAYS OF QUICKLY POSIT IONINGELEMENTS TO AN UNDERLYING GRID

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

CSSFOR EXAMPLE http://w3.org/Style/CSS

Flexbox

Grid layout

(Grid) Template layout

http://www.w3.org/TR/css3-flexbox/

http://www.w3.org/TR/css3-grid-layout/

http://dev.w3.org/csswg/css-template/

CSS preprocessors

FOR EXAMPLE: SASS, LESS

PROVIDE VARIABLES, MIX INS, & MUCH MORE

THE TOOL RULE

It’s not about the tools.

THE TOOL RULE

It’s not about the tools.

It’s about the results.

dowhat can you

with web-based mockups once you have them?

present them

present themTO CLIENTS, DEVELOPERS, BASICALLY ANYONE

automated screenshotsVISUAL ARCHIVE OF THE ITERATION PROCESS

~ $ casperjs screenshots.js

live demosON ACTUAL DEVICES

[usability] testingON ACTUAL DEVICES

use them as a base for a style guide

use them as a base for a style guideSTYLE GUIDES ARE THE NEW PHOTOSHOPslideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012

To create web-based mockups, you will need some knowledge of the medium for which you are designing.

WEB TECH IS S IMPLY ANOTHER TOOLSET.NO NEED TO BE AFRAID.

Forget the useless “should designers code” debate.

This is about looking outside your comfort zone (and even your field) for inspiration… how can you do things more effectively?

You don’t have to learn to code.

But learning a new approach might benefit you in some way.

moreweb-based mockups are

than a pretty picture.

moreweb-based mockups are

than a pretty picture.

CONSIDER THEM!

have funkeep learning

THANK YOU! @stephenhay