Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
STYLE GUIDES@brad_frost
Great news, team.
We got the green light to
redesign the homepage.
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.
global
north america
latin america
chile
europe
india
australia
china
hong kong
taiwan
huge jerk.
We don’t have time for
cohesion and continuity!
We’re too busy
DISRUPTING!
ONE BRAND
MOREDEVICESENVIRONMENTS
PEOPLELANGUAGES
CONTENT
BROWSERS
MEDIUMS
COUNTRIES
SCREENSIZES
FEATURES
PRODUCTSSERVICESFUNCTIONAL...
STYLE GUIDES
http://cargocollective.com/mcalkins/Walmart-brand-book-design
brand.wvu.edu
BRAND STYLE GUIDES
๏ Purpose: establish guidelines for using core brand assets
๏ Audience: the entire organization, vendor...
https://www.google.com/design/spec/material-design/
DESIGN LANGUAGE GUIDELINES
๏ Purpose: establish a design language for cohesive user
experience across a suite of products ...
voiceandtone.com
VOICE AND TONE GUIDELINES
๏ Purpose: establish and encourage a cohesive, appropriate
tone across the entire user experienc...
http://www.economist.com/styleguide/
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...
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
๏...
http://walmartlabs.github.io/web-style-guide
PATTERN LIBRARIES
๏ Purpose: establish and maintain an effective interface
design system to create consistent UIs, speed u...
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 worr...
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...
By having a pattern you could actually use
that's already 95% of the way there, it brings up
the quality of everything so ...
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 bec...
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a sha...
It is the common ground that designers and
developers are all seeking…and I find that a
style guide is really effective at...
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a sha...
It makes what you change in production a lot
more easy to manage over the long term; you're
able to debug things more effe...
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a sha...
BENEFITS OF PATTERN LIBRARIES
๏ Promotes UI consistency and cohesion
๏ Faster production
๏ Better workflow
๏ Creates a sha...
SHOW, DON’T TELL.
http://cssstats.com
http://bradfrostweb.com/blog/post/interface-inventory
ROUND UP THE TROOPS
1
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
๏ Me...
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...
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 sta...
IN ORDER TO MAKE THE WHOLE,
YOU NEED TO MAKE THE PARTS.
ATOMIC DESIGN
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ENTER KEYWORD
SEARCH THE SITE
SEARCH
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
http://styleguides.io/tools.html
DAVE OLSEN@dmolsen
WHAT PATTERN LAB IS
๏ A design system builder
๏ Your comprehensive interface design system
๏ A style guide starter kit
๏ A...
https://mustache.github.io/
MOLECULE GUTS
code block
<div class="block block-post">
<a href="{{ url }}">
<div class="b-img">
{{> atoms-thumb }}
</div>...
BASIC INCLUDE
code block
{{> molecules-block-post }}
ORGANISM GUTS
code block
<header role="banner">
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
</h...
ORGANISM INCLUDE
code block
{{> organisms-header }}
TEMPLATE GUTS
code block{{> organisms-header }}
<main role="main">
{{# hero }}
{{> molecules-hero-video }}
{{/ hero }}
<se...
CONTENT STRUCTURE ACTUAL CONTENT
PIPING IN REAL CONTENT
code block{
"title" : "Time Inc.",
"bodyClass": "home",
"hero" : {
"headline": "Moving People"
"img...
patternlab.io
http://trentwalton.com/2011/07/14/content-choreography/
…OR DID THEY?
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 v...
MAKE IT MAINTAINABLE
YOU SEEK THE HOLY GRAIL.
http://rizzo.lonelyplanet.com/
MAKE IT CROSS-
DISCIPLINARY
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
...
http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/
styleguides.io/examples.html
Companies are using their style guide as a
testament to what their belief system is
and also an indicator of the quality o...
When I saw Salesforce’s style guide I
thought it was beautiful and it's why I
wanted to join this team.
-Jina Bolton
style...
MAKE IT AGNOSTIC
WARNING:
NAMING THINGS IS
REALLY FREAKING HARD.
https://www.flickr.com/photos/131260238@N08/
MAKE IT CONTEXTUAL
MAKE IT LAST
http://www.google.com/design/spec/whats-new/whats-new.html
https://flic.kr/p/5YnE4z
styleguides.io
http://styleguides.io/podcast
atomicdesign.bradfrost.com
atomicdesign.bradfrost.com
ONLY
$10!!!
THANKS!@brad_frost
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
We don’t have time for
Prochain SlideShare
Chargement dans…5
×

We don’t have time for Style Guide Best Practices

81 851 vues

Publié le

We don’t have time for
cohesion and continuity!

Publié dans : Design, Internet
  • FREE TRAINING: "How to Earn a 6-Figure Side-Income Online" ... ■■■ http://dwz1.cc/G9GauKYg
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Doctor's 2-Minute Ritual For Shocking Daily Belly Fat Loss! Watch This Video ▲▲▲ https://tinyurl.com/bkfitness4u
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • How to stop hair loss in just 2 weeks ◆◆◆ https://tinyurl.com/y49r9d8j
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • How can I sharpen my memory? How can I improve forgetfulness? find out more... ♥♥♥ https://tinyurl.com/brainpill101
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Her "Carb-Pairing" Trick Melted Away 22lbs in Just 13 Days.. ◆◆◆ https://tinyurl.com/poundinc11
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×