things we learned

lessons from working in the design and web development business

“Styleguides are the new Photoshop” – Notes from Stephen Hay’s Talk at Smashing Conference in Freiburg


Andy Clarke already said it in his talk in 2009:

  • Come up with new workflows
  • Design in the browser

Photoshop is impractical for responsive design mockups

Problems with Photoshop comps

  • Design changes are time-consuming
  • Too much manual work
  • Image editor is dependency
  • Responsive design implies multiple and flexible layouts

Web based comps – The Pros

  • Doesn’t take longer than photoshop
  • Automated trivial taks
  • Realistic presentation
  • Free and open – every has a browser
  • No negative surprises for the client
  • Possible prep for development
  • They can be responsive

We need two things to replace Photoshop

  1. Static web-based comps
  2. Style guides

Style Guides – The Pros

  • No measuring of pixels
  • Breakpoint changes can be included
  • Useful for designers, debs and others
  • Design consistency and maintainability

Twitter Bootstrap is not a style guide, it’s a pattern lib

The web style guide wish list

  • Free form writable
  • Taking screenshots should be automated
  • Update documentation code when mock-up changes, and also change screenshots
  • Elements and modules should not be physically split
  • Syntax highlighting for documentation code
  • Free form writing

The tools to get the job done – The flexible documentation tool

Automated page walkthroughs with Phantom.js

Automated screenhots with Casper.js

Templating with Jinja

Syntax highlighting with Pygments

Are you scared of the command line?

  • The command line is your waiter where you ask for what you want
  • Photoshop is your big buffet, where you just take what you think that you need.

Steps of creating the a web based mockup

  • Use HTML and css when necessary, JS
  • The goal is to represent the design in the browser
  • Your goal is not to create production code
  • Your css should be modular, because it will end up in your style guide

Install dexy and any all required dependencies

  • If you’re a designer, get help from a developer
  • Before asking for help, try on your own as far as you can make it
Holger Bartel

Author: Holger Bartel

Digital Strategy & Design // Front-End Developer // Reg Ex Fanboy // Skateboarding Revisited // Work: // Personal Blog: // Photo Blog: // Twitter @foobartel

Leave a Reply

Required fields are marked *.