STYLE GUIDES ARE THE NEW
PHOTOSHOP STEPHEN HAY @ FRONTEERS 2012

DESIGNING IN THE BROWSER Demonstrating
our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow 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)

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

PHOTOSHOP IS IMPRACTICAL FOR RESPONSIVE
DESIGN MOCKUPS

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

REALITY (Screenshots by Adobe Edge
Inspect)

WEB TECH IS VERY PRACTICAL
FOR RESPONSIVE DESIGN MOCKUPS

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

WE NEED TWO THINGS TO
REPLACE PHOTOSHOP FOR COMPS

1. Static Web-based Comps 2.
Style Guides

STYLE GUIDES

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

STYLE GUIDES IN THE WILD
Apple Identity Guidelines

STYLE GUIDES IN THE WILD
BBC GEL

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

MY WEB STYLE GUIDE WISHLIST

Free-form writable

Taking screenshots should be automated

Update code snippets automatically when
mockup code changes

Update screenshots automatically when something
changes

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

Syntax highlighting for code

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

I COULD NOT FIND A
SINGLE TOOL TO DO THIS

Sporf
http://en.wikipedia.org/wiki/Sporf

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

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

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

Syntax highlighting
DEXY’S PYGMENTS FILTER

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

hi.

http://xkcd.com/149/

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

STEPS

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!)

SMACSS MAKE CSS MORE MODULAR
WITH… A LUMBERJACK.

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.

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.

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

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

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

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

DONE

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.

Demo

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

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

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

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