Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Style Guides Are The New Photoshop (Smashing Co...

Stephen Hay
September 17, 2012

Style Guides Are The New Photoshop (Smashing Conference 2012)

This talk was first presented at Smashing Conference (http://smashingconf.com/).

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.

Stephen Hay

September 17, 2012
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. 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)
  2. 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
  3. 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
  4. 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
  5. STYLE GUIDES: THE GOOD No measuring State and breakpoint changes

    can be included Useful for future designers, devs & others Design consistency and maintainability
  6. 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
  7. hi.

  8. Web-based mockup Style guide Style guide content in Markdown HTML

    CSS SCREEN CODE screenshots taken, code snippets extracted How this works
  9. 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!)
  10. 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.
  11. 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.
  12. 3 Write your guide and use Jinja templates Use simple

    Markdown links to screenshots. Note the filenames you use.
  13. 4 Script your screenshots with CasperJS Keep things easy by

    adding a new casper.then() for each screenshot. Code brevity is not the goal.
  14. 5 Mark the CSS you want to export An export

    ends when another starts, or with @end.
  15. 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.
  16. These are new times. The problems we have with responsive

    workflow should encourage us to examine and evaluate our processes and tools.