Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
STYLE GUIDES ARE THE NEW PHOTOSHOP
                   STEPHEN HAY @ FRONTEERS 2012
DESIGNING IN THE BROWSER


   Demonstrating our designs to clients as
   XHTML/CSS pages rather than as static
   Photosho...
WALLS COME TUMBLING DOWN (2009)

   Coming up with new and better workflows
   Designing in the browser
   Learning to liv...
PHOTOSHOP IS IMPRACTICAL FOR
 RESPONSIVE DESIGN MOCKUPS
PROBLEMS WITH “PHOTOSHOP” COMPS

   Design changes are time-consuming
   Too much manual work
   The image editor is a dep...
REALITY
   (Screenshots by Adobe Edge Inspect)
WEB TECH IS VERY PRACTICAL FOR
 RESPONSIVE DESIGN MOCKUPS
WEB-BASED COMPS: THE GOOD
   Doesn’t need to take much longer than Photoshop
   Automate trivial tasks
   Realistic presen...
WE NEED TWO THINGS TO REPLACE
    PHOTOSHOP FOR COMPS
1. Static Web-based Comps
2. Style Guides
STYLE GUIDES
STYLE GUIDES: THE GOOD


   No measuring
   State and breakpoint changes can be included
   Useful for future designers, d...
STYLE GUIDES IN THE WILD
 Apple Identity Guidelines
STYLE GUIDES IN THE WILD
 BBC GEL
ANNA DEBENHAM’S COLLECTION
                     STYLE GUIDES, PATTERN LIBRARIES & TOOLS TO CREATE THEM

http://gim.ie/fZyK
MY WEB STYLE GUIDE WISHLIST
Free-form writable
Taking screenshots should be automated
Update code snippets automatically
   when mockup code changes
Update screenshots automatically
   when something changes
Elements/modules should not have to be
   physically split into separate files
Syntax highlighting for code
AM I TOO DEMANDING?


   Free-form writable
   Automated screenshot-taking
   Update code snippets automatically
   Update...
I COULD NOT FIND A SINGLE TOOL
          TO DO THIS
Sporf
  http://en.wikipedia.org/wiki/Sporf
Free-form writing
       DEXY + PANDOC (OR MARKDOWN) FILTER
                                            http://www.dexy.it/
Taking screenshots
                 PHANTOM.JS + CASPER.JS




                                  http://casperjs.org/



h...
Code & screenshot updating
       JINJA TEMPLATES + DEXY’S IDIOPIDAE FILTER
Syntax highlighting
       DEXY’S PYGMENTS FILTER
THE
  COMMAND
      LINE
http://www.flickr.com/photos/evdaimon/337754011/
hi.
http://xkcd.com/149/
How this works

  Web-based mockup             Style guide content in Markdown     Style guide




                     sc...
STEPS
1 Create a web-based mockup


   Use HTML, CSS & when necessary, JavaScript
   Your goal is to represent the design in the...
SMACSS

         MAKE CSS MORE MODULAR WITH…
         A LUMBERJACK.
2 Install Dexy & any dependencies




  If you’re a designer and can’t do it alone, ask a
  developer’s help.
  Before you...
2 Install PhantomJS & CasperJS




  If you’re a designer and can’t do it alone, ask a
  developer’s help.
  Before you as...
3 Write your guide and use Jinja templates




     Use simple Markdown links to screenshots. Note the filenames you use.
4 Script your screenshots with CasperJS




 Keep things easy by adding a new casper.then() for each screenshot. Code brev...
5 Mark the CSS you want to export




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




             Wow, that command line stuff is hard.
DONE
Changes in design? Run dexy again.




 Well, okay. In some cases you might want to do dexy cleanup followed by dexy setup...
Demo
This is not without a learning curve.
            But what is?
Choose what works for you.
Hopefully something here will inspire you to find your own way. Experiment!
These are new times.
The problems we have with responsive workflow should encourage us to examine
                   and e...
Have fun.
Make great stuff.
KEEP LEARNING.

Thanks!
@stephenhay


                    Special thanks to Ana Nelson
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Upcoming SlideShare
Loading in …5
×

of

Style Guides Are The New Photoshop (Fronteers 2012) Slide 1 Style Guides Are The New Photoshop (Fronteers 2012) Slide 2 Style Guides Are The New Photoshop (Fronteers 2012) Slide 3 Style Guides Are The New Photoshop (Fronteers 2012) Slide 4 Style Guides Are The New Photoshop (Fronteers 2012) Slide 5 Style Guides Are The New Photoshop (Fronteers 2012) Slide 6 Style Guides Are The New Photoshop (Fronteers 2012) Slide 7 Style Guides Are The New Photoshop (Fronteers 2012) Slide 8 Style Guides Are The New Photoshop (Fronteers 2012) Slide 9 Style Guides Are The New Photoshop (Fronteers 2012) Slide 10 Style Guides Are The New Photoshop (Fronteers 2012) Slide 11 Style Guides Are The New Photoshop (Fronteers 2012) Slide 12 Style Guides Are The New Photoshop (Fronteers 2012) Slide 13 Style Guides Are The New Photoshop (Fronteers 2012) Slide 14 Style Guides Are The New Photoshop (Fronteers 2012) Slide 15 Style Guides Are The New Photoshop (Fronteers 2012) Slide 16 Style Guides Are The New Photoshop (Fronteers 2012) Slide 17 Style Guides Are The New Photoshop (Fronteers 2012) Slide 18 Style Guides Are The New Photoshop (Fronteers 2012) Slide 19 Style Guides Are The New Photoshop (Fronteers 2012) Slide 20 Style Guides Are The New Photoshop (Fronteers 2012) Slide 21 Style Guides Are The New Photoshop (Fronteers 2012) Slide 22 Style Guides Are The New Photoshop (Fronteers 2012) Slide 23 Style Guides Are The New Photoshop (Fronteers 2012) Slide 24 Style Guides Are The New Photoshop (Fronteers 2012) Slide 25 Style Guides Are The New Photoshop (Fronteers 2012) Slide 26 Style Guides Are The New Photoshop (Fronteers 2012) Slide 27 Style Guides Are The New Photoshop (Fronteers 2012) Slide 28 Style Guides Are The New Photoshop (Fronteers 2012) Slide 29 Style Guides Are The New Photoshop (Fronteers 2012) Slide 30 Style Guides Are The New Photoshop (Fronteers 2012) Slide 31 Style Guides Are The New Photoshop (Fronteers 2012) Slide 32 Style Guides Are The New Photoshop (Fronteers 2012) Slide 33 Style Guides Are The New Photoshop (Fronteers 2012) Slide 34 Style Guides Are The New Photoshop (Fronteers 2012) Slide 35 Style Guides Are The New Photoshop (Fronteers 2012) Slide 36 Style Guides Are The New Photoshop (Fronteers 2012) Slide 37 Style Guides Are The New Photoshop (Fronteers 2012) Slide 38 Style Guides Are The New Photoshop (Fronteers 2012) Slide 39 Style Guides Are The New Photoshop (Fronteers 2012) Slide 40 Style Guides Are The New Photoshop (Fronteers 2012) Slide 41 Style Guides Are The New Photoshop (Fronteers 2012) Slide 42 Style Guides Are The New Photoshop (Fronteers 2012) Slide 43 Style Guides Are The New Photoshop (Fronteers 2012) Slide 44 Style Guides Are The New Photoshop (Fronteers 2012) Slide 45 Style Guides Are The New Photoshop (Fronteers 2012) Slide 46 Style Guides Are The New Photoshop (Fronteers 2012) Slide 47 Style Guides Are The New Photoshop (Fronteers 2012) Slide 48 Style Guides Are The New Photoshop (Fronteers 2012) Slide 49 Style Guides Are The New Photoshop (Fronteers 2012) Slide 50 Style Guides Are The New Photoshop (Fronteers 2012) Slide 51 Style Guides Are The New Photoshop (Fronteers 2012) Slide 52
Upcoming SlideShare
Líneas de transmisión
Next
Download to read offline and view in fullscreen.

86 Likes

Share

Download to read offline

Style Guides Are The New Photoshop (Fronteers 2012)

Download to read offline

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Style Guides Are The New Photoshop (Fronteers 2012)

  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/
  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
  • NicoleMedina48

    Nov. 30, 2021
  • TraMyHoang3

    Nov. 30, 2020
  • BBocanegra

    Feb. 28, 2018
  • nuhaalnoor

    Jul. 12, 2017
  • paulmichaelramos

    Nov. 11, 2016
  • popcornstudios

    Jun. 27, 2016
  • douglasleemiller

    Apr. 6, 2016
  • alpha_lambda

    Mar. 9, 2016
  • architectaIA

    Jan. 12, 2016
  • fu4k6pingu

    Jan. 7, 2016
  • bussolon

    Jan. 7, 2016
  • didoo

    Jan. 7, 2016
  • AndreaCattani1

    Sep. 23, 2015
  • dreq72

    Sep. 23, 2015
  • michaaax

    Sep. 10, 2015
  • justinschmidt80

    Jun. 21, 2015
  • bro-mi

    Apr. 28, 2015
  • oskardave

    Apr. 23, 2015
  • thomsorianis

    Apr. 8, 2015
  • hanna-maria

    Apr. 2, 2015

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.

Views

Total views

47,209

On Slideshare

0

From embeds

0

Number of embeds

610

Actions

Downloads

268

Shares

0

Comments

0

Likes

86

×