SlideShare a Scribd company logo
STYLE GUIDES@brad_frost
Style Guide Best Practices
Great news, team.
We got the green light to
redesign the homepage.
Style Guide Best Practices
That’s great
news, boss!
Yeah, the current
homepage is super ugly!
Yeah and don’t even ask
about the code quality lol.
Exciting! It will be great to do
things right this time.
Yeah we’re going to
use BEM…
And the visuals will be
clean and flat.
Yeah and we’re definitely
looking into React.js
And maybe this will give us
the chance to finally
migrate to a new CMS.
Grunt.
Make it so.
LATHER. RINSE. REPEAT.
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
global
north america
latin america
chile
europe
india
australia
china
hong kong
taiwan
Style Guide Best Practices
huge jerk.
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
We don’t have time for
cohesion and continuity!
We’re too busy
DISRUPTING!
ONE BRAND
MOREDEVICESENVIRONMENTS
PEOPLELANGUAGES
CONTENT
BROWSERS
MEDIUMS
COUNTRIES
SCREENSIZES
FEATURES
PRODUCTSSERVICESFUNCTIONALITY
CUSTOMERS
FORMA
USER
FORMFACTORSCONTEXT
STYLE GUIDES
Style Guide Best Practices
Style Guide Best Practices
http://cargocollective.com/mcalkins/Walmart-brand-book-design
brand.wvu.edu
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
BRAND STYLE GUIDES
๏ Purpose: establish guidelines for using core brand assets
๏ Audience: the entire organization, vendors and anyone
making use of brand assets
๏ Can include: Logos, typography, color palette, file templates,
assets, downloads, etc
Style Guide Best Practices
https://www.google.com/design/spec/material-design/
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
DESIGN LANGUAGE GUIDELINES
๏ Purpose: establish a design language for cohesive user
experience across a suite of products and services
๏ Audience: anyone creating user experiences for the
organization, mostly designers
๏ Can include: design principles, brand overlap, aesthetics, ux
principles, motion, etc
Style Guide Best Practices
voiceandtone.com
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
VOICE AND TONE GUIDELINES
๏ Purpose: establish and encourage a cohesive, appropriate
tone across the entire user experience
๏ Audience: content creators and editors, anyone writing copy
for the brand
๏ Can include: interface copy, marketing, documentation, blog
posts, legal, alerts, etc
Style Guide Best Practices
http://www.economist.com/styleguide/
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html
WRITING STYLE GUIDES
๏ Purpose: establish and encourage a cohesive writing style
across all properties
๏ Audience: content creators and editors, anyone writing copy
for the brand
๏ Can include: grammar, proper content structure, general
writing best practices
Style Guide Best Practices
Style Guide Best Practices
code block
.thisishowwedoit {
}
CSS SYNTAX GUIDELINES
code block
.this-is-how-we-do-it {
}
CSS SYNTAX GUIDELINES
code block
.thisIsHowWeDoIt {
}
CSS SYNTAX GUIDELINES
code block
.this__is__how__we__do—-it {
}
CSS SYNTAX GUIDELINES
code block
.- -...- - ..- - —— .. . ..—— — {
}
CSS SYNTAX GUIDELINES
https://github.com/styleguide
https://github.com/styleguide/javascript
https://github.com/styleguide/javascript
CODE STYLE GUIDES
๏ Purpose: establish code standards for teams to write more
cohesive, efficient, and maintainable code
๏ Audience: front-end developers, back-end developers, 3rd
party developers, summer interns, developers developers
developers
๏ Can include: development principles, HTML structure
guidelines, CSS architecture, syntax, best practices, JS style
and best practices, backend language syntax and best
practices
Style Guide Best Practices
http://walmartlabs.github.io/web-style-guide
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
PATTERN LIBRARIES
๏ Purpose: establish and maintain an effective interface
design system to create consistent UIs, speed up
production, and create a watering hole for the team
๏ Audience: anyone touching the project: designers,
developers, project managers, product owners, etc
๏ Can include: global elements, typography, image types, lists,
navigation, blocks, media, animations, literally anything you
include in a UI
Style Guide Best Practices
Style Guide Best Practices
MAKING PATTERN LIBRARIES HAPPEN
$ELL IT.
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
Consistency is one of the most powerful
usability principles: when things always
behave the same, users don't have to worry
about what will happen. Instead, they know
what will happen based on earlier experience.
-Jakob Nielson
http://www.nngroup.com/articles/top-10-mistakes-web-design/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
We just copied and pasted a pattern, changed a few
things, and in twenty minutes we had built a
system that was responsive; it looked great on
mobile and it was nice to look at. [The status page]
was one of those pages that not a lot of people will
see. We call them the dark corners.
-Federico Holgado
http://styleguides.io/podcast/federico-holgado/
By having a pattern you could actually use
that's already 95% of the way there, it brings up
the quality of everything so those dark corners
actually aren't so dark any more.
-Federico Holgado
http://styleguides.io/podcast/federico-holgado/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
Mostly designers will come up with rough
representations of where things might live without
going into too much detail because there's no
longer a need to do that work up front and we can
just tweak it in the browser afterwards.
-Ian Feather
http://styleguides.io/podcast/ian-feather/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
It is the common ground that designers and
developers are all seeking…and I find that a
style guide is really effective at providing
that common ground.
-Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
๏ Easier to test
It makes what you change in production a lot
more easy to manage over the long term; you're
able to debug things more effectively. You're
able to have a view into how your code base is
looking across a site versus having various
artifacts show up across hundreds of pages.
-Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
๏ Easier to test
๏ Useful reference
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a shared vocabulary
๏ Easier to test
๏ Useful reference
๏ Future-friendly foundation
SHOW, DON’T TELL.
http://cssstats.com
Style Guide Best Practices
Style Guide Best Practices
http://bradfrostweb.com/blog/post/interface-inventory
Style Guide Best Practices
Style Guide Best Practices
ROUND UP THE TROOPS
1
Style Guide Best Practices
PREPARE TO SCREENSHOT
2
http://bradfrost.com/blog/post/conducting-an-interface-inventory/
SCREENSHOT EXERCISE
3
INTERFACE INVENTORY CATEGORIES
๏ Global
๏ Image types
๏ Icons
๏ Navigation
๏ Forms
๏ Buttons
๏ Interactive Components
๏ Media
๏ Headings
๏ Blocks
๏ Lists
๏ 3rd party stuff
๏ Advertising
๏ Messaging
๏ Animation
๏ Colors
Style Guide Best Practices
Style Guide Best Practices
PRESENT FINDINGS
4
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
REGROUP & NEXT STEPS
5
๏ Documents your interface design patterns
๏ Points out inconsistencies
๏ Helps get buy-in from organization
๏ Establishes scope of work
๏ Is the genesis of a shared vocabulary
๏ Lays the groundwork for a future pattern library
INTERFACE INVENTORY
AND IF THE BOSS STILL SAYS NO,
DO IT ANYWAYS.
You just sneak it in. It's what I'm going to do to
make the quality of the work better. And I don't
have to say it. It starts in the sales process. You
just build enough budget so that you can do it. You
don't have a conversation about it, it's just par for
the course. You don't have to ask permission.
-Dan Mall
http://www.stuffandnonsense.co.uk/blog/about/unfinished-business-episode-105-seventeen-coats-of-bullshit
IN ORDER TO MAKE THE WHOLE,
YOU NEED TO MAKE THE PARTS.
ATOMIC DESIGN
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
http://styleguides.io/tools.html
Style Guide Best Practices
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ Your comprehensive interface design system
๏ A style guide starter kit
๏ A design toolkit (viewport resizer and other tools)
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
https://mustache.github.io/
Style Guide Best Practices
MOLECULE GUTS
code block
<div class="block block-post">
<a href="{{ url }}">
<div class="b-img">
{{> atoms-thumb }}
</div>
<h3 class="b-title">{{ headline }}</h3>
<p class="b-excerpt">{{ excerpt }}</p>
</a>
</div>
BASIC INCLUDE
code block
{{> molecules-block-post }}
Style Guide Best Practices
Style Guide Best Practices
ORGANISM GUTS
code block
<header role="banner">
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
</header>
ORGANISM INCLUDE
code block
{{> organisms-header }}
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
{{# hero }}
{{> molecules-hero-video }}
{{/ hero }}
<section>
{{# experience }}
{{> organisms-story-feature }}
{{/ experience }}
</section>
<section>
{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}
Style Guide Best Practices
CONTENT STRUCTURE ACTUAL CONTENT
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
PIPING IN REAL CONTENT
code block{
"title" : "Time Inc.",
"bodyClass": "home",
"hero" : {
"headline": "Moving People"
"img": {
"src": "/images/hero_beyonce.jpg",
"alt": "Beyonce"
}
}
patternlab.io
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
http://trentwalton.com/2011/07/14/content-choreography/
Style Guide Best Practices
…OR DID THEY?
Style Guide Best Practices
Putting a style guide off to the end or
treating it as a separate thing is just asking
for it to just sort of die on the vine or become
outdated and obsolete.
-Jina Bolton
styleguides.io/podcast/jina-bolton
Style Guide Best Practices
Style Guide Best Practices
MAKE IT MAINTAINABLE
YOU SEEK THE HOLY GRAIL.
http://rizzo.lonelyplanet.com/
Style Guide Best Practices
MAKE IT CROSS-
DISCIPLINARY
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
MAKE IT APPROACHABLE
http://www.yelp.com/styleguide
http://sfdc-styleguide.herokuapp.com
http://purple.herokuapp.com
MAKE IT VISIBLE
When you start to place these kinds of
assets behind constraints, many teams
either take an outrageously long time to get
access, or they never get access.
-Nathan Curtis
http://styleguides.io/podcast/nathan-curtis
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
styleguides.io/examples.html
Style Guide Best Practices
Companies are using their style guide as a
testament to what their belief system is
and also an indicator of the quality of
their organization; they're essentially
using it as a recruiting tool.
-Nathan Curtis
http://styleguides.io/podcast/nathan-curtis/
When I saw Salesforce’s style guide I
thought it was beautiful and it's why I
wanted to join this team.
-Jina Bolton
styleguides.io/podcast/jina-bolton
MAKE IT AGNOSTIC
Style Guide Best Practices
Style Guide Best Practices
Style Guide Best Practices
WARNING:
NAMING THINGS IS
REALLY FREAKING HARD.
https://www.flickr.com/photos/131260238@N08/
Style Guide Best Practices
Style Guide Best Practices
MAKE IT CONTEXTUAL
Style Guide Best Practices
MAKE IT LAST
http://www.google.com/design/spec/whats-new/whats-new.html
Style Guide Best Practices
https://flic.kr/p/5YnE4z
Style Guide Best Practices
styleguides.io
http://styleguides.io/podcast
atomicdesign.bradfrost.com
atomicdesign.bradfrost.com
ONLY
$10!!!
THANKS!@brad_frost
Ad

More Related Content

What's hot (20)

User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingUser Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
Hans Põldoja
 
Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...
Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...
Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...
Rosenfeld Media
 
Measuring What Matters in Your Product by Amazon Product Leader.pdf
Measuring What Matters in Your Product by Amazon Product Leader.pdfMeasuring What Matters in Your Product by Amazon Product Leader.pdf
Measuring What Matters in Your Product by Amazon Product Leader.pdf
Product School
 
Shaping and implementing a DesignOps function
Shaping and implementing a DesignOps functionShaping and implementing a DesignOps function
Shaping and implementing a DesignOps function
Matt Gottschalk
 
Business & Revenue Models - Emad Saif
Business & Revenue Models - Emad SaifBusiness & Revenue Models - Emad Saif
Business & Revenue Models - Emad Saif
European Innovation Academy
 
Purpose-driven Business: Leading from Purpose & Core Values
Purpose-driven Business: Leading from Purpose & Core ValuesPurpose-driven Business: Leading from Purpose & Core Values
Purpose-driven Business: Leading from Purpose & Core Values
fmarinescu
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Digital Surgeons
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience Design
Deb Aoki
 
Product Workshop - Finding Your North Star - handout
Product Workshop - Finding Your North Star - handoutProduct Workshop - Finding Your North Star - handout
Product Workshop - Finding Your North Star - handout
Amplitude
 
Jira Align Presentation
Jira Align PresentationJira Align Presentation
Jira Align Presentation
Mark Livingstone
 
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken SkistimasConsistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
uxpin
 
Centrica Global DesignOps Conference 2019
Centrica Global DesignOps Conference 2019Centrica Global DesignOps Conference 2019
Centrica Global DesignOps Conference 2019
Matt Gottschalk
 
Design for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More FeaturesDesign for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More Features
Vitaly Golomb
 
Typography for [Digital] Humanists
Typography for [Digital] HumanistsTypography for [Digital] Humanists
Typography for [Digital] Humanists
Amy Papaelias
 
GE User Experience Playbook
GE User Experience PlaybookGE User Experience Playbook
GE User Experience Playbook
Melinda Belcher
 
Personas in Interaction Design
Personas in Interaction DesignPersonas in Interaction Design
Personas in Interaction Design
Hans Põldoja
 
NYT Product Discovery Activity Guide
NYT Product Discovery Activity GuideNYT Product Discovery Activity Guide
NYT Product Discovery Activity Guide
Al Ming
 
Scrum Roles Workshop
Scrum Roles WorkshopScrum Roles Workshop
Scrum Roles Workshop
Jade Stephen, PSM II
 
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingUser Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
Hans Põldoja
 
Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...
Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...
Communicating and Establishing DesignOps as a New Function (Brennan Hartich a...
Rosenfeld Media
 
Measuring What Matters in Your Product by Amazon Product Leader.pdf
Measuring What Matters in Your Product by Amazon Product Leader.pdfMeasuring What Matters in Your Product by Amazon Product Leader.pdf
Measuring What Matters in Your Product by Amazon Product Leader.pdf
Product School
 
Shaping and implementing a DesignOps function
Shaping and implementing a DesignOps functionShaping and implementing a DesignOps function
Shaping and implementing a DesignOps function
Matt Gottschalk
 
Purpose-driven Business: Leading from Purpose & Core Values
Purpose-driven Business: Leading from Purpose & Core ValuesPurpose-driven Business: Leading from Purpose & Core Values
Purpose-driven Business: Leading from Purpose & Core Values
fmarinescu
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Digital Surgeons
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience Design
Deb Aoki
 
Product Workshop - Finding Your North Star - handout
Product Workshop - Finding Your North Star - handoutProduct Workshop - Finding Your North Star - handout
Product Workshop - Finding Your North Star - handout
Amplitude
 
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken SkistimasConsistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
uxpin
 
Centrica Global DesignOps Conference 2019
Centrica Global DesignOps Conference 2019Centrica Global DesignOps Conference 2019
Centrica Global DesignOps Conference 2019
Matt Gottschalk
 
Design for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More FeaturesDesign for Startups - Build Better Products, Not More Features
Design for Startups - Build Better Products, Not More Features
Vitaly Golomb
 
Typography for [Digital] Humanists
Typography for [Digital] HumanistsTypography for [Digital] Humanists
Typography for [Digital] Humanists
Amy Papaelias
 
GE User Experience Playbook
GE User Experience PlaybookGE User Experience Playbook
GE User Experience Playbook
Melinda Belcher
 
Personas in Interaction Design
Personas in Interaction DesignPersonas in Interaction Design
Personas in Interaction Design
Hans Põldoja
 
NYT Product Discovery Activity Guide
NYT Product Discovery Activity GuideNYT Product Discovery Activity Guide
NYT Product Discovery Activity Guide
Al Ming
 

Similar to Style Guide Best Practices (20)

RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
Jasvinder Singh
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
Teamstudio
 
How long do websites last?
How long do websites last?How long do websites last?
How long do websites last?
Dan Moriarty
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
Christian Heilmann
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
Filip Rakowski
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
JenRobbins
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
Christian Heilmann
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
Diego Eis
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
Matthew Gerrior
 
Let's Work Together
Let's Work TogetherLet's Work Together
Let's Work Together
Aquent
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Doug Gapinski
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Association Paris-Web
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
Doug Gapinski
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design Process
Steve Fisher
 
Creating UI Marketers Won't F*Up
Creating UI Marketers Won't F*UpCreating UI Marketers Won't F*Up
Creating UI Marketers Won't F*Up
LOIC BURDET
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
JenRobbins
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
Teamstudio
 
How long do websites last?
How long do websites last?How long do websites last?
How long do websites last?
Dan Moriarty
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
Christian Heilmann
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
Filip Rakowski
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
JenRobbins
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
Christian Heilmann
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
Diego Eis
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
Matthew Gerrior
 
Let's Work Together
Let's Work TogetherLet's Work Together
Let's Work Together
Aquent
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Doug Gapinski
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Association Paris-Web
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
Doug Gapinski
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design Process
Steve Fisher
 
Creating UI Marketers Won't F*Up
Creating UI Marketers Won't F*UpCreating UI Marketers Won't F*Up
Creating UI Marketers Won't F*Up
LOIC BURDET
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
JenRobbins
 
Ad

More from Brad Frost (15)

Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!
Brad Frost
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
Brad Frost
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Brad Frost
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
Brad Frost
 
Atomic design
Atomic designAtomic design
Atomic design
Brad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
Brad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
Brad Frost
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Brad Frost
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Brad Frost
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
Brad Frost
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
Brad Frost
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
Brad Frost
 
Let's Work Together!
Let's Work Together!Let's Work Together!
Let's Work Together!
Brad Frost
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
Brad Frost
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Brad Frost
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
Brad Frost
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
Brad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
Brad Frost
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Brad Frost
 
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Beyond Media Queries: An Anatomy of an Adaptive Web Design (at Smashing Confe...
Brad Frost
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
Brad Frost
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
Brad Frost
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
Brad Frost
 
Ad

Recently uploaded (20)

19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accounts19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accounts
https://sellsusa.com/product/buy-verified-cash-app-accounts/
 
Templates Wind Generator.pdf ahí. Ais d Ai d f
Templates Wind Generator.pdf ahí. Ais d Ai d fTemplates Wind Generator.pdf ahí. Ais d Ai d f
Templates Wind Generator.pdf ahí. Ais d Ai d f
jeremysegundob
 
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator
 
10.1155-2024-1048933Figurefig0008.pptx.ppt
10.1155-2024-1048933Figurefig0008.pptx.ppt10.1155-2024-1048933Figurefig0008.pptx.ppt
10.1155-2024-1048933Figurefig0008.pptx.ppt
suchandasaha7
 
Prof House interior Design Project exter
Prof House interior Design Project exterProf House interior Design Project exter
Prof House interior Design Project exter
NagudiBridget
 
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptxDesign of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
BapujiBanothu
 
STOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan sSTOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan s
kfdpontianak2012
 
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxPPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
rachmatunnisa29
 
325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf
shivsin165
 
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfMOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
asfianoor1
 
Internet Download Manager Crack Patch Latest IDM Free Download
Internet Download Manager Crack Patch Latest IDM Free DownloadInternet Download Manager Crack Patch Latest IDM Free Download
Internet Download Manager Crack Patch Latest IDM Free Download
Designer
 
An updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdfAn updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdf
Elle Geraghty
 
Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...
kochars428
 
Presentation for Schoool Management System
Presentation for Schoool Management SystemPresentation for Schoool Management System
Presentation for Schoool Management System
kolay922013
 
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdfAR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
akshayap23
 
presentation on healing architecture .pptx
presentation on healing architecture .pptxpresentation on healing architecture .pptx
presentation on healing architecture .pptx
buildnpl
 
Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx
Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxHalstead’s_Software_Science_&_Putnam’s_Model[1].pptx
Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx
prachiikumarii1
 
Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.
vanzan01
 
Oversized Off White Pulka Dot Cotton Shirt
Oversized Off White Pulka Dot Cotton ShirtOversized Off White Pulka Dot Cotton Shirt
Oversized Off White Pulka Dot Cotton Shirt
ZNKL.in
 
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptxCOTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
ayushjadon04
 
Templates Wind Generator.pdf ahí. Ais d Ai d f
Templates Wind Generator.pdf ahí. Ais d Ai d fTemplates Wind Generator.pdf ahí. Ais d Ai d f
Templates Wind Generator.pdf ahí. Ais d Ai d f
jeremysegundob
 
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator
 
10.1155-2024-1048933Figurefig0008.pptx.ppt
10.1155-2024-1048933Figurefig0008.pptx.ppt10.1155-2024-1048933Figurefig0008.pptx.ppt
10.1155-2024-1048933Figurefig0008.pptx.ppt
suchandasaha7
 
Prof House interior Design Project exter
Prof House interior Design Project exterProf House interior Design Project exter
Prof House interior Design Project exter
NagudiBridget
 
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptxDesign of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
BapujiBanothu
 
STOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan sSTOCK ANALYSYS.pptx manajemen keuangan s
STOCK ANALYSYS.pptx manajemen keuangan s
kfdpontianak2012
 
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptxPPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
PPT UNTUK ISU STRATEGIS (1).pptx PPT UNTUK ISU STRATEGIS (1).pptx
rachmatunnisa29
 
325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf
shivsin165
 
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfMOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
asfianoor1
 
Internet Download Manager Crack Patch Latest IDM Free Download
Internet Download Manager Crack Patch Latest IDM Free DownloadInternet Download Manager Crack Patch Latest IDM Free Download
Internet Download Manager Crack Patch Latest IDM Free Download
Designer
 
An updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdfAn updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdf
Elle Geraghty
 
Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...
kochars428
 
Presentation for Schoool Management System
Presentation for Schoool Management SystemPresentation for Schoool Management System
Presentation for Schoool Management System
kolay922013
 
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdfAR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
akshayap23
 
presentation on healing architecture .pptx
presentation on healing architecture .pptxpresentation on healing architecture .pptx
presentation on healing architecture .pptx
buildnpl
 
Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx
Halstead’s_Software_Science_&_Putnam’s_Model[1].pptxHalstead’s_Software_Science_&_Putnam’s_Model[1].pptx
Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx
prachiikumarii1
 
Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.
vanzan01
 
Oversized Off White Pulka Dot Cotton Shirt
Oversized Off White Pulka Dot Cotton ShirtOversized Off White Pulka Dot Cotton Shirt
Oversized Off White Pulka Dot Cotton Shirt
ZNKL.in
 
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptxCOTTER and  KNUCKleeeeeeeeeeeeeeeeeee.pptx
COTTER and KNUCKleeeeeeeeeeeeeeeeeee.pptx
ayushjadon04
 

Style Guide Best Practices