52
STYLE GUIDES ARE THE NEW PHOTOSHOP STEPHEN HAY @ FRONTEERS 2012

Style Guides Are The New Photoshop (Fronteers 2012)

Embed Size (px)

DESCRIPTION

A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012) Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

Citation preview

Page 1: Style Guides Are The New Photoshop (Fronteers 2012)

STYLE GUIDES ARE THE NEW PHOTOSHOPSTEPHEN HAY @ FRONTEERS 2012

Page 2: Style Guides Are The New Photoshop (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)

Page 3: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 4: Style Guides Are The New Photoshop (Fronteers 2012)

PHOTOSHOP IS IMPRACTICAL FOR RESPONSIVE DESIGN MOCKUPS

Page 5: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 6: Style Guides Are The New Photoshop (Fronteers 2012)

REALITY(Screenshots by Adobe Edge Inspect)

Page 7: Style Guides Are The New Photoshop (Fronteers 2012)

WEB TECH IS VERY PRACTICAL FOR RESPONSIVE DESIGN MOCKUPS

Page 8: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 9: Style Guides Are The New Photoshop (Fronteers 2012)

WE NEED TWO THINGS TO REPLACE PHOTOSHOP FOR COMPS

Page 10: Style Guides Are The New Photoshop (Fronteers 2012)

1. Static Web-based Comps

2. Style Guides

Page 11: Style Guides Are The New Photoshop (Fronteers 2012)

STYLE GUIDES

Page 12: Style Guides Are The New Photoshop (Fronteers 2012)

STYLE GUIDES: THE GOOD

No measuring

State and breakpoint changes can be included

Useful for future designers, devs & others

Design consistency and maintainability

Page 13: Style Guides Are The New Photoshop (Fronteers 2012)

STYLE GUIDES IN THE WILDApple Identity Guidelines

Page 14: Style Guides Are The New Photoshop (Fronteers 2012)

STYLE GUIDES IN THE WILDBBC GEL

Page 15: Style Guides Are The New Photoshop (Fronteers 2012)

ANNA DEBENHAM’S COLLECTIONSTYLE GUIDES, PATTERN LIBRARIES & TOOLS TO CREATE THEM

http://gim.ie/fZyK

Page 16: Style Guides Are The New Photoshop (Fronteers 2012)

MY WEB STYLE GUIDE WISHLIST

Page 17: Style Guides Are The New Photoshop (Fronteers 2012)

Free-form writable

Page 18: Style Guides Are The New Photoshop (Fronteers 2012)

Taking screenshots should be automated

Page 19: Style Guides Are The New Photoshop (Fronteers 2012)

Update code snippets automatically when mockup code changes

Page 20: Style Guides Are The New Photoshop (Fronteers 2012)

Update screenshots automatically when something changes

Page 21: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 22: Style Guides Are The New Photoshop (Fronteers 2012)

Syntax highlighting for code

Page 23: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 24: Style Guides Are The New Photoshop (Fronteers 2012)

I COULD NOT FIND A SINGLE TOOL TO DO THIS

Page 25: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 26: Style Guides Are The New Photoshop (Fronteers 2012)

Free-form writingDEXY + PANDOC (OR MARKDOWN) FILTER

http://www.dexy.it/

Page 27: Style Guides Are The New Photoshop (Fronteers 2012)

Taking screenshotsPHANTOM.JS + CASPER.JS

http://phantomjs.org/

http://casperjs.org/

Page 28: Style Guides Are The New Photoshop (Fronteers 2012)

Code & screenshot updatingJINJA TEMPLATES + DEXY’S IDIOPIDAE FILTER

Page 29: Style Guides Are The New Photoshop (Fronteers 2012)

Syntax highlightingDEXY’S PYGMENTS FILTER

Page 30: Style Guides Are The New Photoshop (Fronteers 2012)

THECOMMANDLINE

http://www.flickr.com/photos/evdaimon/337754011/

Page 31: Style Guides Are The New Photoshop (Fronteers 2012)
Page 32: Style Guides Are The New Photoshop (Fronteers 2012)
Page 33: Style Guides Are The New Photoshop (Fronteers 2012)
Page 34: Style Guides Are The New Photoshop (Fronteers 2012)

hi.

Page 35: Style Guides Are The New Photoshop (Fronteers 2012)

http://xkcd.com/149/

Page 36: Style Guides Are The New Photoshop (Fronteers 2012)

Web-based mockup Style guideStyle guide content in Markdown

HTML CSS SCREEN CODEscreenshots taken, code snippets extracted

How this works

Page 37: Style Guides Are The New Photoshop (Fronteers 2012)

STEPS

Page 38: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 39: Style Guides Are The New Photoshop (Fronteers 2012)

SMACSS

MAKE CSS MORE MODULAR WITH…A LUMBERJACK.

Page 40: Style Guides Are The New Photoshop (Fronteers 2012)

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.

Page 41: Style Guides Are The New Photoshop (Fronteers 2012)

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.

Page 42: Style Guides Are The New Photoshop (Fronteers 2012)

3 Write your guide and use Jinja templates

Use simple Markdown links to screenshots. Note the filenames you use.

Page 43: Style Guides Are The New Photoshop (Fronteers 2012)

4 Script your screenshots with CasperJS

Keep things easy by adding a new casper.then() for each screenshot. Code brevity is not the goal.

Page 44: Style Guides Are The New Photoshop (Fronteers 2012)

5 Mark the CSS you want to export

An export ends when another starts, or with @end.

Page 45: Style Guides Are The New Photoshop (Fronteers 2012)

6 Run Dexy

Wow, that command line stuff is hard.

Page 46: Style Guides Are The New Photoshop (Fronteers 2012)

DONE

Page 47: Style Guides Are The New Photoshop (Fronteers 2012)

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.

Page 48: Style Guides Are The New Photoshop (Fronteers 2012)

Demo

Page 49: Style Guides Are The New Photoshop (Fronteers 2012)

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

Page 50: Style Guides Are The New Photoshop (Fronteers 2012)

Choose what works for you.

Hopefully something here will inspire you to find your own way. Experiment!

Page 51: Style Guides Are The New Photoshop (Fronteers 2012)

These are new times.The problems we have with responsive workflow should encourage us to examine

and evaluate our processes and tools.

Page 52: Style Guides Are The New Photoshop (Fronteers 2012)

Have fun.Make great stuff.

KEEP LEARNING.

Thanks!@stephenhay

Special thanks to Ana Nelson