Style Guides Are The New Photoshop (Fronteers 2012)

Stephen Hay
Stephen HaySenior UX Design Lead at Catawiki
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
   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)
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
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 dependency
   Responsive design implies multiple and
   flexible layouts
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 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
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, devs & others
   Design consistency and maintainability
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 screenshots automatically
   No separate files for code snippets
   Syntax highlighting
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/



http://phantomjs.org/
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/
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
hi.
http://xkcd.com/149/
How this works

  Web-based mockup             Style guide content in Markdown     Style guide




                     screenshots taken, code snippets extracted
    HTML   CSS                                                    SCREEN   CODE
STEPS
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!)
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 ask for help, try going to the sites and
  following the instructions as best you can.
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.
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 brevity is not the goal.
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 and then dexy.
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 evaluate our processes and tools.
Have fun.
Make great stuff.
KEEP LEARNING.

Thanks!
@stephenhay


                    Special thanks to Ana Nelson
1 of 52

Recommended

Brad frost: Atomic design (Webdagene 2014) by
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
8.4K views164 slides
The Death of Lorem Ipsum & Pixel Perfect Content by
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
13.1K views98 slides
Responsive Design Workflow by
Responsive Design WorkflowResponsive Design Workflow
Responsive Design WorkflowIntergen
3.7K views72 slides
Responsive Design Workflow: Mobilism 2012 by
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
86.8K views76 slides
Creating Living Style Guides to Improve Performance by
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
149K views83 slides
Responsive Design Workflow: Webshaped 2012 by
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Stephen Hay
2.3K views81 slides

More Related Content

What's hot

The Server Side of Responsive Web Design by
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
13.7K views90 slides
Atomic design by
Atomic designAtomic design
Atomic designBrad Frost
2M views173 slides
MIMA 2014 - Changing your Responsive Design Workflow by
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
1.3K views44 slides
React Storybook, Atomic Design, and ITCSS by
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
2.6K views38 slides
Atomic Design - An Event Apart San Diego by
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
58.4K views181 slides
Atomic Design con Pattern Lab by
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern LabMauricio Angulo Sillas
1.1K views73 slides

What's hot(20)

The Server Side of Responsive Web Design by Dave Olsen
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Dave Olsen13.7K views
MIMA 2014 - Changing your Responsive Design Workflow by easelsolutions
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
easelsolutions1.3K views
React Storybook, Atomic Design, and ITCSS by Trevor Pierce
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
Trevor Pierce2.6K views
Atomic Design - An Event Apart San Diego by Brad Frost
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost58.4K views
Creating Style Guides with Modularity in Mind by Nadya Rodionenko
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko1.6K views
Atomic Design - BDConf Nashville, 2013 by Brad Frost
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Brad Frost50.7K views
An introduction to Emulsify by valuebound
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsify
valuebound5.7K views
Adventures in Atomic Design by Andrew Jones
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
Andrew Jones1.2K views
ACSS: Rethinking CSS Best Practices by Renato Iwashima
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima3.1K views
Atomic Design by Rey Mayson
Atomic Design Atomic Design
Atomic Design
Rey Mayson357 views
Data science for infrastructure dev week 2022 by ZainAsgar1
Data science for infrastructure   dev week 2022Data science for infrastructure   dev week 2022
Data science for infrastructure dev week 2022
ZainAsgar1114 views
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version) by Dave Olsen
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Dave Olsen1.6K views
Beyond Squishy: The Principles of Adaptive Design by Brad Frost
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost116.7K views
So…What Do I Make? (Dan Mall) by Future Insights
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
Future Insights7.3K views
Documenting an Atomic Design System with Jekyll by Todd Moy
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
Todd Moy1.3K views
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015) by David Wesst
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
David Wesst330 views
Learning to be IDE Free (PrDC 2015) by David Wesst
Learning to be IDE Free (PrDC 2015)Learning to be IDE Free (PrDC 2015)
Learning to be IDE Free (PrDC 2015)
David Wesst517 views

Viewers also liked

Tema1 introducción 2009v1 by
Tema1 introducción 2009v1Tema1 introducción 2009v1
Tema1 introducción 2009v1jcbp_peru
3.5K views62 slides
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8) by
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)
Segundo Paquete Económico 2017 Zacatecas - Egresos (4-8)Zacatecas TresPuntoCero
2.8K views46 slides
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis... by
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...
Taller de Preparación para la Certificación (PMI-RMP)® - Realizar el Análisis...David Salomon Rojas Llaullipoma
4.9K views23 slides
Woman3 by
Woman3Woman3
Woman3Anna Forastier
3K views80 slides
Pasivo A Corto Y Largo Plazo by
Pasivo A Corto Y Largo PlazoPasivo A Corto Y Largo Plazo
Pasivo A Corto Y Largo PlazoLuis Alejandro Rodríguez Campos
228.8K views15 slides

Viewers also liked(20)

Tema1 introducción 2009v1 by jcbp_peru
Tema1 introducción 2009v1Tema1 introducción 2009v1
Tema1 introducción 2009v1
jcbp_peru3.5K views
Plan estratégico seguridad de los pacientes de extremadura by SociosaniTec
Plan estratégico seguridad de los pacientes de extremaduraPlan estratégico seguridad de los pacientes de extremadura
Plan estratégico seguridad de los pacientes de extremadura
SociosaniTec10K views
Assessment on Skin, Hair & Nails / HEENT by Tim Bersabe
Assessment on Skin, Hair & Nails / HEENTAssessment on Skin, Hair & Nails / HEENT
Assessment on Skin, Hair & Nails / HEENT
Tim Bersabe146.8K views
Informe mantenimiento mecanico by JDPVasquez
Informe mantenimiento mecanicoInforme mantenimiento mecanico
Informe mantenimiento mecanico
JDPVasquez41.3K views
Training Schrijven voor het Web by Simone Levie
Training Schrijven voor het WebTraining Schrijven voor het Web
Training Schrijven voor het Web
Simone Levie5.2K views
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,... by Janeth Lozano Lozano
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
Contabilidad General: Práctica y Dinámica Contable - Contabilidad de Activos,...
Marco del buen desempeño docente by 0013
Marco del buen desempeño docenteMarco del buen desempeño docente
Marco del buen desempeño docente
00138.6K views
De Reis van de Heldin december 2015 by Peter de Kuster
De Reis van de Heldin december 2015De Reis van de Heldin december 2015
De Reis van de Heldin december 2015
Peter de Kuster7.2K views
Trabajp 30 agosto by AdrianaAcuna
Trabajp 30 agostoTrabajp 30 agosto
Trabajp 30 agosto
AdrianaAcuna3.4K views
Error messages by rtinkelman
Error messagesError messages
Error messages
rtinkelman7.2K views

Similar to Style Guides Are The New Photoshop (Fronteers 2012)

Creating a Business Oriented UI in APEX by
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXEnkitec
4.2K views92 slides
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework by
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka
57 views43 slides
No Feature Solutions with SharePoint by
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePointmikehuguet
539 views23 slides
JavaScript Presentation Frameworks and Libraries by
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi
5.8K views37 slides
Designing in the Browser - Design for Drupal, Boston 2010 by
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason
2.2K views48 slides
Morden F2E Education - Think of Progressive Web Apps by
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsCaesar Chi
657 views58 slides

Similar to Style Guides Are The New Photoshop (Fronteers 2012)(20)

Creating a Business Oriented UI in APEX by Enkitec
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEX
Enkitec4.2K views
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework by crystalenka
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
crystalenka57 views
No Feature Solutions with SharePoint by mikehuguet
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
mikehuguet539 views
JavaScript Presentation Frameworks and Libraries by Oleksii Prohonnyi
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
Oleksii Prohonnyi5.8K views
Designing in the Browser - Design for Drupal, Boston 2010 by canarymason
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
canarymason2.2K views
Morden F2E Education - Think of Progressive Web Apps by Caesar Chi
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
Caesar Chi657 views
How to manage a big scale HTML/CSS project by Renoir Boulanger
How to manage a big scale HTML/CSS projectHow to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS project
Renoir Boulanger4.1K views
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team! by Evan Mullins
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins1.3K views
Intro to html5 Boilerplate by Michael Enslow
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
Michael Enslow3.4K views
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step by Bootstrap Creative
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative12.3K views
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development by Evan Mullins
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins356 views
CSS3 and a brief introduction to Google Maps API v3 by Jeffrey Barke
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
Jeffrey Barke1.2K views
Implementing Vanilla Web Components by sonumanoj
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
sonumanoj151 views
Powerful tools for building web solutions by Andrea Tino
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
Andrea Tino637 views
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302) by Nathaniel Bagnell
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Application Development with HTML5 (Microsoft TechDays 2011 - DEV302)
Nathaniel Bagnell793 views
VS Code and Modern Development Environment Preview by Roberto Stefanetti
VS Code and Modern Development Environment PreviewVS Code and Modern Development Environment Preview
VS Code and Modern Development Environment Preview
Roberto Stefanetti2.5K views
How I learned to stop worrying and love embedding JavaScript by Kevin Read
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
Kevin Read1.4K views
Embedding V8 in Android apps with Ejecta-V8 by Kevin Read
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
Kevin Read258 views

More from Stephen Hay

From Deception to Clarity by
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
3.6K views77 slides
The Backside of the Class (CSS Day 2015) by
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
3.6K views66 slides
The Art of Deception by
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
17.3K views65 slides
Sculpting Text: Easing the Pain of Designing in the Browser by
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
6.8K views45 slides
Power Tools For Browser-Based Design by
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
3.3K views119 slides
UIE Virtual Seminar: Responsive Web Design Workflow by
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
5.9K views8 slides

More from Stephen Hay(20)

From Deception to Clarity by Stephen Hay
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
Stephen Hay3.6K views
The Backside of the Class (CSS Day 2015) by Stephen Hay
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay3.6K views
The Art of Deception by Stephen Hay
The Art of DeceptionThe Art of Deception
The Art of Deception
Stephen Hay17.3K views
Sculpting Text: Easing the Pain of Designing in the Browser by Stephen Hay
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Stephen Hay6.8K views
Power Tools For Browser-Based Design by Stephen Hay
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
Stephen Hay3.3K views
UIE Virtual Seminar: Responsive Web Design Workflow by Stephen Hay
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay5.9K views
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013) by Stephen Hay
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Stephen Hay5.7K views
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013) by Stephen Hay
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay3.9K views
The New Photoshop, Part 2: The Revenge of the Web (FEC13) by Stephen Hay
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Stephen Hay11.5K views
Flexbox: One Giant Leap for Web Layout (CSS Day 2013) by Stephen Hay
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Stephen Hay2.8K views
The New Photoshop, Part 2: The Revenge of the Web by Stephen Hay
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
Stephen Hay3.6K views
Go With The Flow by Stephen Hay
Go With The FlowGo With The Flow
Go With The Flow
Stephen Hay13.7K views
Fronteers Workshop: Rabid Prototyping by Stephen Hay
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay3K views
Meta layout: a closer look at media queries by Stephen Hay
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
Stephen Hay32.5K views
Real-world Responsive Design @ Breaking Development 2011 by Stephen Hay
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Stephen Hay5.3K views
HTML5 & Webrichtlijnen 2 by Stephen Hay
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Stephen Hay986 views
Real-world Responsive Design by Stephen Hay
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
Stephen Hay2.1K views
De aanvrager wint by Stephen Hay
De aanvrager wintDe aanvrager wint
De aanvrager wint
Stephen Hay918 views
The Future State of Layout by Stephen Hay
The Future State of LayoutThe Future State of Layout
The Future State of Layout
Stephen Hay3.2K views
Web Guidelines Fronteers Teachers Day 2009 by Stephen Hay
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009
Stephen Hay691 views

Recently uploaded

BeatsFest Brand Guidelines Final.pdf by
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdfEddiePena9
8 views12 slides
Essay 29.docx by
Essay 29.docxEssay 29.docx
Essay 29.docxOrlySiquihua
9 views1 slide
EL FODA.pdf by
EL FODA.pdfEL FODA.pdf
EL FODA.pdfestefanimilenca
23 views1 slide
Subzero Report (1).pdf by
Subzero Report (1).pdfSubzero Report (1).pdf
Subzero Report (1).pdfsidhantkhanna8
11 views21 slides
type book PDF to PPT.pptx by
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptxsamboggiano
7 views54 slides
slide deck by
slide deckslide deck
slide deckshamailalsabri
7 views6 slides

Recently uploaded(20)

BeatsFest Brand Guidelines Final.pdf by EddiePena9
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdf
EddiePena98 views
type book PDF to PPT.pptx by samboggiano
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptx
samboggiano7 views
boggiano_project 2.pptx by samboggiano
boggiano_project 2.pptxboggiano_project 2.pptx
boggiano_project 2.pptx
samboggiano25 views
Sugar Air Kiss Lipstick by aryasheel1
Sugar Air Kiss LipstickSugar Air Kiss Lipstick
Sugar Air Kiss Lipstick
aryasheel111 views
ATPMOUSE_융합2조.pptx by kts120898
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptx
kts12089826 views
DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd226 views
Using Experiential Design to Understand the Future of AI & Immersive Storytel... by Kent Bye
Using Experiential Design to Understand the Future of AI & Immersive Storytel...Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Kent Bye20 views
Samsung Galaxy Watch 5 Presentation by aryasheel1
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentation
aryasheel113 views
Indian wedding dresses design.pdf by Aur Dikhao
Indian wedding dresses design.pdfIndian wedding dresses design.pdf
Indian wedding dresses design.pdf
Aur Dikhao5 views
tony moura bio.pdf by jenki442
tony moura bio.pdftony moura bio.pdf
tony moura bio.pdf
jenki4427 views
Legal PPT Presentation.pptx by 125071063
Legal PPT Presentation.pptxLegal PPT Presentation.pptx
Legal PPT Presentation.pptx
1250710635 views
500% Sales Growth with Amazon A+ Content by Fahima
500% Sales Growth with Amazon A+ Content500% Sales Growth with Amazon A+ Content
500% Sales Growth with Amazon A+ Content
Fahima12 views

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