style guides are the new photoshop (smashing conference 2012)
DESCRIPTION
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.TRANSCRIPT
![Page 1: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/1.jpg)
STYLE GUIDES ARE THE NEW PHOTOSHOPSTEPHEN HAY @ SMASHINGCONF 2012
![Page 2: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/2.jpg)
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)
![Page 3: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/3.jpg)
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
![Page 4: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/4.jpg)
PHOTOSHOP IS IMPRACTICAL FOR RESPONSIVE DESIGN MOCKUPS
![Page 5: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/5.jpg)
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
![Page 6: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/6.jpg)
REALITY(Screenshots by Adobe Shadow)
![Page 7: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/7.jpg)
WEB TECH IS VERY PRACTICAL FOR RESPONSIVE DESIGN MOCKUPS
![Page 8: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/8.jpg)
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
![Page 9: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/9.jpg)
WE NEED TWO THINGS TO REPLACE PHOTOSHOP FOR COMPS
![Page 10: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/10.jpg)
1. Static Web-based Comps
2. Style Guides
![Page 11: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/11.jpg)
STYLE GUIDES
![Page 12: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/12.jpg)
STYLE GUIDES: THE GOOD
No measuring
State and breakpoint changes can be included
Useful for future designers, devs & others
Design consistency and maintainability
![Page 13: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/13.jpg)
STYLE GUIDES IN THE WILDApple Identity Guidelines
![Page 14: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/14.jpg)
STYLE GUIDES IN THE WILDBBC GEL
![Page 15: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/15.jpg)
ANNA DEBENHAM’S COLLECTIONSTYLE GUIDES, PATTERN LIBRARIES & TOOLS TO CREATE THEM
http://gim.ie/fZyK
![Page 16: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/16.jpg)
MY WEB STYLE GUIDE WISHLIST
![Page 17: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/17.jpg)
Free-form writable
![Page 18: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/18.jpg)
Taking screenshots should be automated
![Page 19: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/19.jpg)
Update code snippets automatically when mockup code changes
![Page 20: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/20.jpg)
Update screenshots automatically when something changes
![Page 21: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/21.jpg)
Elements/modules should not have to be physically split into separate files
![Page 22: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/22.jpg)
Syntax highlighting for code
![Page 23: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/23.jpg)
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
![Page 24: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/24.jpg)
I COULD NOT FIND A SINGLE TOOL TO DO THIS
![Page 25: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/25.jpg)
Free-form writingDEXY + PANDOC (OR MARKDOWN) FILTER
http://www.dexy.it/
![Page 26: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/26.jpg)
Taking screenshotsPHANTOM.JS + CASPER.JS
http://phantomjs.org/
http://casperjs.org/
![Page 27: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/27.jpg)
Code & screenshot updatingJINJA TEMPLATES + DEXY’S IDIOPIDAE FILTER
![Page 28: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/28.jpg)
Syntax highlightingDEXY’S PYGMENTS FILTER
![Page 29: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/29.jpg)
THECOMMANDLINE
http://www.flickr.com/photos/evdaimon/337754011/
![Page 30: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/30.jpg)
![Page 31: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/31.jpg)
![Page 32: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/32.jpg)
![Page 33: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/33.jpg)
hi.
![Page 34: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/34.jpg)
Web-based mockup Style guideStyle guide content in Markdown
HTML CSS SCREEN CODEscreenshots taken, code snippets extracted
How this works
![Page 35: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/35.jpg)
STEPS
![Page 36: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/36.jpg)
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!)
![Page 37: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/37.jpg)
SMACSS
MAKE CSS MORE MODULAR WITH…A LUMBERJACK.
![Page 38: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/38.jpg)
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.
![Page 39: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/39.jpg)
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.
![Page 40: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/40.jpg)
3 Write your guide and use Jinja templates
Use simple Markdown links to screenshots. Note the filenames you use.
![Page 41: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/41.jpg)
4 Script your screenshots with CasperJS
Keep things easy by adding a new casper.then() for each screenshot. Code brevity is not the goal.
![Page 42: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/42.jpg)
5 Mark the CSS you want to export
An export ends when another starts, or with @end.
![Page 43: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/43.jpg)
6 Run Dexy
Wow, that command line stuff is hard.
![Page 44: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/44.jpg)
DONE
![Page 45: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/45.jpg)
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.
![Page 46: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/46.jpg)
This is not without a learning curve.But what is?
![Page 47: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/47.jpg)
Choose what works for you.
Hopefully something here will inspire you to find your own way. Experiment!
![Page 48: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/48.jpg)
These are new times.The problems we have with responsive workflow should encourage us to examine
and evaluate our processes and tools.
![Page 49: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/49.jpg)
OPEN DEVICE LABShttp://klick-ass.com/awesomeness/avoid-the-tamagotchis-a-list-of-open-device-labs/
![Page 50: Style Guides Are The New Photoshop (Smashing Conference 2012)](https://reader033.vdocument.in/reader033/viewer/2022051819/54c791494a795963448b4583/html5/thumbnails/50.jpg)
Have fun.Make great stuff.
KEEP LEARNING.
Thanks!@stephenhay
Special thanks to Ana Nelson