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
clients 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
Doesnt 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 DEBENHAMS 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 + DEXYS IDIOPIDAE FILTER
Syntax highlighting
DEXYS 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 youre a designer and cant do it alone, ask a

developers help.
Before you ask for help, try going to the sites and
following the instructions as best you can.
2 Install PhantomJS & CasperJS

If youre a designer and cant do it alone, ask a

developers 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