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.

1. STYLE GUIDES ARE THE NEW PHOTOSHOP
STEPHEN HAY @ FRONTEERS 2012

2. 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)

3. 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

4. PHOTOSHOP IS IMPRACTICAL FOR
RESPONSIVE DESIGN MOCKUPS

5. 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

6. REALITY
(Screenshots by Adobe Edge Inspect)

7. WEB TECH IS VERY PRACTICAL FOR
RESPONSIVE DESIGN MOCKUPS

8. 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

9. WE NEED TWO THINGS TO REPLACE
PHOTOSHOP FOR COMPS

10. 1. Static Web-based Comps
2. Style Guides

11. STYLE GUIDES

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

13. STYLE GUIDES IN THE WILD
Apple Identity Guidelines

14. STYLE GUIDES IN THE WILD
BBC GEL

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

16. MY WEB STYLE GUIDE WISHLIST

17. Free-form writable

18. Taking screenshots should be automated

19. Update code snippets automatically
when mockup code changes

20. Update screenshots automatically
when something changes

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

22. Syntax highlighting for code

23. 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

24. I COULD NOT FIND A SINGLE TOOL
TO DO THIS

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

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

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

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

29. Syntax highlighting
DEXY’S PYGMENTS FILTER

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

34. hi.

35. http://xkcd.com/149/

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

37. STEPS

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

39. SMACSS
MAKE CSS MORE MODULAR WITH…
A LUMBERJACK.

40. 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.

41. 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.

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

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

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

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

46. DONE

47. 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.

48. Demo

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

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

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

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