The New Photoshop, Part 2: The Revenge of the Web (FEC13)

Slide 1

Slide 1 text

Revenge THE NEW PHOTOSHOP, PART 2 Web STEPHEN HAY FRONTENDCONF 2013 ZURICH of the the

Slide 2

Slide 2 text

PSD

Slide 3

Slide 3 text

PSD PRETTY SHITTY DELIVERABLE

Slide 4

Slide 4 text

web-based mockup HTML, CSS, ?

Slide 5

Slide 5 text

PSD ON A SMALL SCREEN

Slide 6

Slide 6 text

web-based mockup ON A SMALL SCREEN

Slide 7

Slide 7 text

a responsive design workflow

Slide 8

Slide 8 text

a responsive design workflow 1. Content inventory 2. Content reference wireframes 3. Designing in text 4. Linear design 5. Breakpoint graphing 6. Designing for breakpoints 7. Web-based mockup 8. Presenting as screenshots > revise 9. Presenting in browsers > revise 10. Design guidelines / style guide

Slide 9

Slide 9 text

Image-based mockups are

Slide 10

Slide 10 text

Image-based mockups are SORRY TO BE THE BEARER OF BAD NEWS.

Slide 11

Slide 11 text

Our design comps are a carryover from print.

Slide 12

Slide 12 text

http://harryborgmanart.blogspot.ch/

Slide 13

Slide 13 text

http://harryborgmanart.blogspot.ch/

Slide 14

Slide 14 text

http://harryborgmanart.blogspot.ch/

Slide 15

Slide 15 text

DESIGNER MEDIUM

Slide 16

Slide 16 text

DESIGNER MEDIUM fashion furniture/interior architecture print web I MADE THIS UP. BUT STILL.

Slide 17

Slide 17 text

There is nothing wrong with Photoshop.

Slide 18

Slide 18 text

WTF psdisasters.com

Slide 19

Slide 19 text

er…

Slide 20

Slide 20 text

why? web-based mockups…

Slide 21

Slide 21 text

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 TIME.COM REDESIGN http://appendto.com/case-study/responsive-design-time-com

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Web-based mockups more effectively represent the end result in the browser because they are already in the browser. DOH!

Slide 25

Slide 25 text

flickr.com/photos/uggboy/4098274795/ Client sees this.

Slide 26

Slide 26 text

flickr.com/photos/boanerges/70312998/ Client gets this.

Slide 27

Slide 27 text

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!

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

experimentation

Slide 30

Slide 30 text

experimentation win.

Slide 31

Slide 31 text

version control.

Slide 32

Slide 32 text

version control.

Slide 33

Slide 33 text

how? web-based mockups…

Slide 34

Slide 34 text

sketch. first,

Slide 35

Slide 35 text

sketch. first,

Slide 36

Slide 36 text

sketch. first, SKETCHING IS WHERE DESIGN HAPPENS SKETCHING IS VISUAL THINKING IT’S THE HARD PART. THE REST IS EXECUTION

Slide 37

Slide 37 text

get and use representative content.

Slide 38

Slide 38 text

get and use representative content. WITHOUT IT, YOU’RE DESIGNING BLIND DESIGN WITHOUT CONTENT IS EITHER ART OR DECORATION AND I’M PRETTY SURE IT’S NOT ART

Slide 39

Slide 39 text

http://harryborgmanart.blogspot.ch/

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

when it should be 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…

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

You have to know what your content is— or is going to be—in order to deal with it appropriately. WHAT IS THE STRUCTURE OF THE CONTENT?

Slide 44

Slide 44 text

these things can help with speed LAYOUT/GRID HELPERS STATIC SITE GENERATORS CSS PREPROCESSORS

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Optionally, your mockup could become the base for front-end production. THOUGH IT DOESN’T NEED TO BE. RELAX.

Slide 47

Slide 47 text

static site generators FOR EXAMPLE: JEKYLL, HYDE, NANOC, DEXY THESE PROVIDE WAYS OF SAYING: setup mymockup serve mymockup

Slide 48

Slide 48 text

Jekyll FOR EXAMPLE http://jekyllrb.com/

Slide 49

Slide 49 text

Jekyll FOR EXAMPLE ~ $ gem install jekyll ~ $ jekyll new mymockup ~ $ cd mymockup ~/mymockup $ jekyll serve AVAILABLE AT LOCALHOST:4000

Slide 50

Slide 50 text

Dexy FOR EXAMPLE http://dexy.it/

Slide 51

Slide 51 text

Dexy FOR EXAMPLE ~ $ dexy gen --t [template] --d [directory] ~ $ cd mymockup ~/mymockup $ dexy ~/mymockup $ dexy serve AVAILABLE AT LOCALHOST:8085

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Hi, mom.

Slide 54

Slide 54 text

layout/grid helpers FOR EXAMPLE: SUSY, CSS, YOUR OWN THESE PROVIDE WAYS OF QUICKLY POSITIONING ELEMENTS TO AN UNDERLYING GRID

Slide 55

Slide 55 text

Susy FOR EXAMPLE http://susy.oddbird.net/

Slide 56

Slide 56 text

CSS FOR 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/

Slide 57

Slide 57 text

CSS preprocessors FOR EXAMPLE: SASS, LESS PROVIDE VARIABLES, MIXINS, & MUCH MORE

Slide 58

Slide 58 text

THE TOOL RULE It’s not about the tools.

Slide 59

Slide 59 text

THE TOOL RULE It’s not about the tools. It’s about the results.

Slide 60

Slide 60 text

do what can you with web-based mockups once you have them?

Slide 61

Slide 61 text

present them

Slide 62

Slide 62 text

present them TO CLIENTS, DEVELOPERS, BASICALLY ANYONE

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

live demos ON ACTUAL DEVICES

Slide 68

Slide 68 text

[usability] testing ON ACTUAL DEVICES

Slide 69

Slide 69 text

use them as a base for a style guide

Slide 70

Slide 70 text

use them as a base for a style guide STYLE GUIDES ARE THE NEW PHOTOSHOP slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012

Slide 71

Slide 71 text

To create web-based mockups, you will need some knowledge of the medium for which you are designing. WEB TECH IS SIMPLY ANOTHER TOOLSET. NO NEED TO BE AFRAID.

Slide 72

Slide 72 text

Forget the useless “should designers code” debate.

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

You don’t have to learn to code. But learning a new approach might benefit you in some way.