Style Guides Are The New Photoshop (Smashing Conference 2012)

Slide 1

Slide 1 text

STYLE GUIDES ARE THE NEW PHOTOSHOP STEPHEN HAY @ SMASHINGCONF 2012

Slide 2

Slide 2 text

DESIGNING IN THE BROWSER Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workﬂow and helped us to set and manage a client’s expectations better than ever before. Andy Clarke, “Time to stop showing clients static design visuals” (2008)

Slide 3

Slide 3 text

WALLS COME TUMBLING DOWN (2009) Coming up with new and better workflows Designing in the browser Learning to live with constraints Designing systems, rather than sites

Slide 4

Slide 4 text

PHOTOSHOP IS IMPRACTICAL FOR RESPONSIVE DESIGN MOCKUPS

Slide 5

Slide 5 text

PROBLEMS WITH “PHOTOSHOP” COMPS Design changes are time-consuming Too much manual work The image editor is a dependency Responsive design implies multiple and flexible layouts

Slide 6

Slide 6 text

REALITY (Screenshots by Adobe Shadow)

Slide 7

Slide 7 text

WEB TECH IS VERY PRACTICAL FOR RESPONSIVE DESIGN MOCKUPS

Slide 8

Slide 8 text

WEB-BASED COMPS: THE GOOD Doesn’t need to take much longer than Photoshop Automate trivial tasks Realistic presentation / real-life rendering State changes are easily visualized Free and open: everyone has a browser & editor No negative surprises for the client Possible prep for development They can be responsive

Slide 9

Slide 9 text

WE NEED TWO THINGS TO REPLACE PHOTOSHOP FOR COMPS

Slide 10

Slide 10 text

1. Static Web-based Comps 2. Style Guides

Slide 11

Slide 11 text

STYLE GUIDES

Slide 12

Slide 12 text

STYLE GUIDES: THE GOOD No measuring State and breakpoint changes can be included Useful for future designers, devs & others Design consistency and maintainability

Slide 13

Slide 13 text

STYLE GUIDES IN THE WILD Apple Identity Guidelines

Slide 14

Slide 14 text

STYLE GUIDES IN THE WILD BBC GEL

Slide 15

Slide 15 text

ANNA DEBENHAM’S COLLECTION STYLE GUIDES, PATTERN LIBRARIES & TOOLS TO CREATE THEM http://gim.ie/fZyK

Slide 16

Slide 16 text

MY WEB STYLE GUIDE WISHLIST

Slide 17

Slide 17 text

Free-form writable

Slide 18

Slide 18 text

Taking screenshots should be automated

Slide 19

Slide 19 text

Update code snippets automatically when mockup code changes

Slide 20

Slide 20 text

Update screenshots automatically when something changes

Slide 21

Slide 21 text

Elements/modules should not have to be physically split into separate files

Slide 22

Slide 22 text

Syntax highlighting for code

Slide 23

Slide 23 text

AM I TOO DEMANDING? Free-form writable Automated screenshot-taking Update code snippets automatically Update screenshots automatically No separate files for code snippets Syntax highlighting

Slide 24

Slide 24 text

I COULD NOT FIND A SINGLE TOOL TO DO THIS

Slide 25

Slide 25 text

Free-form writing DEXY + PANDOC (OR MARKDOWN) FILTER http://www.dexy.it/

Slide 26

Slide 26 text

Taking screenshots PHANTOM.JS + CASPER.JS http://phantomjs.org/ http://casperjs.org/

Slide 27

Slide 27 text

Code & screenshot updating JINJA TEMPLATES + DEXY’S IDIOPIDAE FILTER

Slide 28

Slide 28 text

Syntax highlighting DEXY’S PYGMENTS FILTER

Slide 29

Slide 29 text

THE COMMAND LINE http://www.flickr.com/photos/evdaimon/337754011/

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

hi.

Slide 34

Slide 34 text

Web-based mockup Style guide Style guide content in Markdown HTML CSS SCREEN CODE screenshots taken, code snippets extracted How this works

Slide 35

Slide 35 text

STEPS

Slide 36

Slide 36 text

1 Create a web-based mockup Use HTML, CSS & when necessary, JavaScript Your goal is to represent the design in the browser Your goal is not to create production code Your CSS should be modular (it will end up in your style guide!)

Slide 37

Slide 37 text

SMACSS MAKE CSS MORE MODULAR WITH… A LUMBERJACK.

Slide 38

Slide 38 text

2 Install Dexy & any dependencies If you’re a designer and can’t do it alone, ask a developer’s help. Before you ask for help, try going to the sites and following the instructions as best you can.

Slide 39

Slide 39 text

2 Install PhantomJS & CasperJS If you’re a designer and can’t do it alone, ask a developer’s help. Before you ask for help, try going to the sites and following the instructions as best you can.

Slide 40

Slide 40 text

3 Write your guide and use Jinja templates Use simple Markdown links to screenshots. Note the filenames you use.

Slide 41

Slide 41 text

4 Script your screenshots with CasperJS Keep things easy by adding a new casper.then() for each screenshot. Code brevity is not the goal.

Slide 42

Slide 42 text

5 Mark the CSS you want to export An export ends when another starts, or with @end.

Slide 43

Slide 43 text

6 Run Dexy Wow, that command line stuff is hard.

Slide 44

Slide 44 text

DONE

Slide 45

Slide 45 text

Changes in design? Run dexy again. Well, okay. In some cases you might want to do dexy cleanup followed by dexy setup and then dexy.

Slide 46

Slide 46 text

This is not without a learning curve. But what is?

Slide 47

Slide 47 text

Choose what works for you. Hopefully something here will inspire you to find your own way. Experiment!

Slide 48

Slide 48 text

These are new times. The problems we have with responsive workflow should encourage us to examine and evaluate our processes and tools.

Slide 49

Slide 49 text

OPEN DEVICE LABS http://klick-ass.com/awesomeness/avoid-the-tamagotchis-a-list-of-open-device-labs/

Slide 50

Slide 50 text

Have fun. Make great stuff. KEEP LEARNING. Thanks! @stephenhay Special thanks to Ana Nelson