Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
ROUND UP THE TROOPS 1
Nächste SlideShare
Wird geladen in …5
×

ROUND UP THE TROOPS 1 Style Guide Best Practices

79.446 Aufrufe

Veröffentlicht am

ROUND UP THE TROOPS
1

Veröffentlicht in: Design, Internet
  • Visit this site: tinyurl.com/sexinarea and find sex in your area for one night)) You can find me on this site too)
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Your opinions matter! get paid for them! click here for more info...★★★ https://tinyurl.com/realmoneystreams2019
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ■■■ http://ishbv.com/rockhardx/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • The methods and techniques in the PE Bible are exclusive to this unique program. The two step system involves low cost off the shelf natural supplements and a specially designed exercise program. Many users experience gains of almost an inch within just a few weeks of starting this unique program! Imagine having 2-4 inches of extra length and girth added onto your penis size, this Penis Enlargement Bible makes it possible. Over 5000 copies of this product have already been sold, and unlike most products on the market there is real video proof from actual users that show REAL results. You can see the video here ➤➤ https://tinyurl.com/yaygh4xh
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×