Style Guides Are The New Photoshop (Fronteers 2012)

  • 11,425 views
Uploaded on

A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012) …

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,425
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
177
Comments
0
Likes
58

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 Comps2. 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 THEMhttp://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 LINEhttp://www.flickr.com/photos/evdaimon/337754011/
  • 31. hi.
  • 32. http://xkcd.com/149/
  • 33. How this works Web-based mockup Style guide content in Markdown Style guide screenshots taken, code snippets extracted HTML CSS SCREEN CODE
  • 34. STEPS
  • 35. 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!)
  • 36. SMACSS MAKE CSS MORE MODULAR WITH… A LUMBERJACK.
  • 37. 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.
  • 38. 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.
  • 39. 3 Write your guide and use Jinja templates Use simple Markdown links to screenshots. Note the filenames you use.
  • 40. 4 Script your screenshots with CasperJS Keep things easy by adding a new casper.then() for each screenshot. Code brevity is not the goal.
  • 41. 5 Mark the CSS you want to export An export ends when another starts, or with @end.
  • 42. 6 Run Dexy Wow, that command line stuff is hard.
  • 43. DONE
  • 44. 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.
  • 45. Demo
  • 46. This is not without a learning curve. But what is?
  • 47. Choose what works for you.Hopefully something here will inspire you to find your own way. Experiment!
  • 48. These are new times.The problems we have with responsive workflow should encourage us to examine and evaluate our processes and tools.
  • 49. Have fun.Make great stuff.KEEP LEARNING.Thanks!@stephenhay Special thanks to Ana Nelson