aktuelle.kurse/m152/auftraege/x_gitressourcen/Styleguide_Anleitungen/Beispiele für einen perfekten Styleguide

1718 lines
306 KiB
Plaintext
Raw Normal View History

2021-06-25 16:17:59 +02:00
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>7 Beispiele für einen perfekten Styleguide</title>
<meta name="description" content="Ein Styleguide legt fest, wie Unternehmenslogos, Slogans und andere Gestaltungselemente genutzt werden dürfen. Diese Beispiele zeigen, wie es geht." />
<meta name="robots" content="index, follow, noodp, noarchive" />
<link rel="canonical" href="https://t3n.de/news/styleguide-beispiele-794708/" />
<meta property="og:type" content="article">
<meta property="og:url" content="https://t3n.de/news/styleguide-beispiele-794708/">
<meta property="og:title" content="7 Beispiele für einen perfekten Styleguide">
<meta property="og:description" content="Ein Styleguide legt fest, wie Unternehmenslogos, Slogans und andere Gestaltungselemente genutzt werden dürfen. Diese Beispiele zeigen, wie es geht.">
<meta property="og:image" content="https://assets.t3n.sc/news/wp-content/uploads/2017/02/styleguide-macaroni-1.jpeg?auto=format&#038;h=&#038;ixlib=php-3.3.1&#038;w=">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://assets.t3n.sc/news/wp-content/uploads/2017/02/styleguide-macaroni-1.jpeg?auto=format&#038;h=&#038;ixlib=php-3.3.1&#038;w=">
<meta name="twitter:site" content="@t3n">
<meta name="twitter:title" content="7 Beispiele für einen perfekten Styleguide">
<meta name="twitter:description" content="Ein Styleguide legt fest, wie Unternehmenslogos, Slogans und andere Gestaltungselemente genutzt werden dürfen. Diese Beispiele zeigen, wie es geht.">
<meta name="date" content="2018-12-18 14:25:37"/>
<meta name="last-modified" content="2020-11-10 14:46:54"/>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="750">
<meta property="article:opinion" content="false"/>
<meta property="article:content_tier" content="free"/>
<meta property="article:tag" content="Entwicklung & Design"/>
<meta property="og:site_name" content="t3n Magazin">
<meta property="article:publisher" content="https://www.facebook.com/t3nMagazin">
<meta name="theme-color" content="#F9423A">
<meta name=viewport content="width=1280">
<meta property="fb:app_id" content="318363754884229">
<meta property="fb:pages" content="100942084485">
<meta name="robots" content="max-image-preview:large">
<link rel="stylesheet" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/styles/main-1624363010.css">
<link rel="icon" type="image/png" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-apple-touch-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-apple-touch-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-apple-touch-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/icons/t3n-apple-touch-180x180.png">
<link rel="alternate" type="application/rss+xml" title="t3n digital pioneers | RSS Feed" href="https://t3n.de/rss.xml"/>
<script>!function (e, t, n, a, c, l, m, o, d, f, h, i) {
c[l] && (d = e.createElement(t), d[n] = c[l], e[a]("head")[0].appendChild(d), e.documentElement.className += " wf-cached"), function s() {
for (d = e[a](t), f = "", h = 0; h < d.length; h++) i = d[h][n], i.match(m) && (f += i);
f && (c[l] = "/**/" + f), setTimeout(s, o += o)
}()
}(document, "style", "innerHTML", "getElementsByTagName", localStorage, "tk", /^@font|^\.tk-/, 100);
</script>
<script>
(function (d) {
var config = {
kitId: 'aaw7wzt',
scriptTimeout: 3000,
async: true
},
h = d.documentElement, t = setTimeout(function () {
h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
}, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a;
h.className += " wf-loading";
tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
tk.async = true;
tk.onload = tk.onreadystatechange = function () {
a = this.readyState;
if (f || a && a != "complete" && a != "loaded") return;
f = true;
clearTimeout(t);
try {
Typekit.load(config)
} catch (e) {
}
};
s.parentNode.insertBefore(tk, s)
})(document);
</script>
<script type="text/javascript">
!function () { var e = function () { var e, t = "__tcfapiLocator", a = [], n = window;
for (; n;) { try { if (n.frames[t]) { e = n; break } } catch (e) { } if (n ===
window.top) break; n = n.parent } e || (!function e() { var a = n.document, r =
!!n.frames[t]; if (!r) if (a.body) { var i = a.createElement("iframe"); i.style.cssText
= "display:none", i.name = t, a.body.appendChild(i) } else setTimeout(e, 5); return !r
}(), n.__tcfapi = function () { for (var e, t = arguments.length, n = new Array(t), r =
0; r < t; r++)n[r] = arguments[r]; if (!n.length) return a; if ("setGdprApplies" ===
n[0]) n.length > 3 && 2 === parseInt(n[1], 10) && "boolean" == typeof n[3] && (e =
n[3], "function" == typeof n[2] && n[2]("set", !0)); else if ("ping" === n[0]) { var i
= { gdprApplies: e, cmpLoaded: !1, cmpStatus: "stub" }; "function" == typeof n[2] &&
n[2](i) } else a.push(n) }, n.addEventListener("message", (function (e) { var t =
"string" == typeof e.data, a = {}; try { a = t ? JSON.parse(e.data) : e.data } catch
(e) { } var n = a.__tcfapiCall; n && window.__tcfapi(n.command, n.version, (function
(a, r) { var i = { __tcfapiReturn: { returnValue: a, success: r, callId: n.callId } };
t && (i = JSON.stringify(i)), e.source.postMessage(i, "*") }), n.parameter) }), !1)) };
"undefined" != typeof module ? module.exports = e : e() }();
</script>
<script>
window._sp_ = {
config: {
accountId: 1343,
wrapperAPIOrigin: "https://wrapper-api.sp-prod.net/tcfv2",
mmsDomain: "https://cmp.t3n.de"
}
}
</script>
<script src="https://gdpr-tcfv2.sp-prod.net/wrapperMessagingWithoutDetection.js"></script>
<script>
window.gtmPageConfig = {
tags: 'ikea,nasa'.split(',').filter(function(value){
return !!value;
}),
pageType: 'news-post',
loginStatus: 'nologin',
ressort: 'entwicklung-design',
articletype: 'listicle',
identifier: 'news-article-794708',
articlelength: '19'
}
</script>
<script>
window.t3nCLConfig = window.t3nCLConfig || {};
window.t3nCLConfig.news = {"articleID":"news-article-794708","articleType":"Listicle","headline":"7 Beispiele f\u00fcr einen perfekten Styleguide","ressort":"Entwicklung & Design","slug":"styleguide-beispiele","poc":false,"evergreen":false,"tags":"ikea,nasa","loggedIn":false,"publishDate":"18.12.2018","initialPublishDate":"17.02.2017","republished":null,"author":"Daniel H\u00fcfner","authorId":"15476766-5507-462b-862e-c1ecd9908557","readingTime":2,"page":1,"numPages":1}
window.t3nCLConfig.user = {"id":null}
window.t3nCLConfig.membership = {"withProPaywall":false,"isProMember":false}
</script> <script>
var dataLayer = dataLayer || [];
dataLayer.push({
't3nLayoutType': 'desktop',
't3nLoggedIn': '0',
't3nOnlyProMember': '',
't3nIsProMember': '',
't3nArticleID': 'news-article-794708',
't3nRessort': 'Entwicklung & Design',
't3nArticleType': 'Listicle',
't3nAuthor': 'Daniel Hüfner',
't3nPublished': '18122018',
't3nInitialPublished': '17.02.2017',
});
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-MJGTHP');
</script>
<script>
(function() {
fetch("https://api.t3n.de/", {
method: 'post',
headers: {
'Content-Type': 'application/json',
'apollographql-client-name': 't3n-frontend'
},
body: JSON.stringify({
variables: { payload: "{\"identifier\":\"794708\",\"slug\":\"styleguide-beispiele\",\"ressort\":\"Entwicklung & Design\",\"portal\":\"news\",\"type\":\"Listicle\",\"poc\":\"false\",\"evergreen\":\"false\",\"tags\":[\"ikea\",\"nasa\"],\"author\":\"Daniel H\u00fcfner\",\"loggedIn\":\"false\",\"publishDate\":\"18.12.2018\",\"initialPublishDate\":\"17.02.2017\"}" },
operationName: "NewsPi",
query: "mutation NewsPi ($payload: String!) {trackEvent(name: \"newsPi\", payload: $payload )}"
})
});
})();
</script>
<script>
function onSponsoredClick(event, type) {
fetch("https://api.t3n.de/", {
method: "post",
headers: {
"Content-Type": "application/json",
"apollographql-client-name": "t3n-frontend",
},
body: JSON.stringify({
variables: {
payload: JSON.stringify({
newsIdentifier: "794708",
type: type,
target: event.target.getAttribute("href"),
}),
},
operationName: "SponsoredContent",
query:
'mutation SponsoredContent ($payload: String!) {trackEvent(name: "sponsoredContent", payload: $payload )}',
}),
});
}
document.addEventListener("DOMContentLoaded", function () {
var sponsoredLinks = document.querySelectorAll(".tg-sp-link");
sponsoredLinks.forEach(function (elem) {
elem.addEventListener("click", function (event) {
onSponsoredClick(event, "splink");
});
});
var sponsoredButtons = document.querySelectorAll(".tg-sp-button");
sponsoredButtons.forEach(function (elem) {
elem.addEventListener("click", function (event) {
onSponsoredClick(event, "spbutton");
});
});
var affiliateLinks = document.querySelectorAll(".tg-affiliatelink:not(.c-button)");
affiliateLinks.forEach(function (elem) {
elem.addEventListener("click", function (event) {
onSponsoredClick(event, "afflink");
});
});
var affiliateButtons = document.querySelectorAll(".c-button.tg-affiliatelink");
affiliateButtons.forEach(function (elem) {
elem.addEventListener("click", function (event) {
onSponsoredClick(event, "affbutton");
});
});
});
</script>
<script src="https://script.ioam.de/iam.js?m=1"></script>
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['setRequestMethod', 'POST']);
_paq.push(['requireCookieConsent']);
_paq.push(['trackPageView', document.title, {
dimension1: "Entwicklung & Design",
dimension2: "Listicle",
dimension3: "Daniel Hüfner",
dimension4: "2018-12-18T14:25:37+01:00"
}]);
_paq.push(['enableLinkTracking']);
(function() {
var u="//t3n.de/";
_paq.push(['setTrackerUrl', u+'mp']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'mj'; s.parentNode.insertBefore(g,s);
})();
</script>
<script>
var Ads_BA_ADIDsite = 't3n.de';
var Ads_BA_ADIDsection = 'entwicklungdesign';
var Ads_BA_keyword = 'nasa,amazon,photoshop,entwicklungdesign,ba_artikel';
var Ads_BA_Mobile = false;
</script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
<script type="text/javascript">
var adHandler = window.adHandler || { cmd: [] };
window.adHandler = adHandler;
</script>
<script async="" type="text/javascript" src="//storage.googleapis.com/t3n-de/assets/t3n/2018/scripts/ad-scripts--vendor-1624363010.js"></script>
<meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="t3n digital pioneers &raquo; 7 Beispiele für einen perfekten Styleguide Kommentar-Feed" href="https://t3n.de/news/styleguide-beispiele-794708/feed/" />
<style type='text/css'>
.tablepress.last-right td:last-child{text-align:right}.tablepress-id-6 tbody td,.tablepress-id-6 thead th{text-align:left}.tablepress-id-79{width:100%}.tablepress thead th,.tablepress tfoot th{background-color:#ff4500;color:#fff}
</style>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://t3n.de/news/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://t3n.de/news/wp-includes/wlwmanifest.xml" />
<link rel='shortlink' href='https://t3n.de/news/?p=794708' />
<!-- Markup (JSON-LD) structured in schema.org ver.4.8.1 START -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "t3n digital pioneers",
"image": "https://t3n.de/news/wp-content/uploads/2020/11/t3n-logo-google-news-rot-400px.png",
"url": "https://t3n.de/",
"telephone": "+49 (0)511 165944-0",
"address": {
"@type": "PostalAddress",
"streetAddress": "Kriegerstraße 40",
"addressLocality": "Hannover",
"postalCode": "30161",
"addressCountry": "DE"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "52.388702",
"longitude": "9.739234"
},
"openingHours": [
"Mo-Fr 09:00-17:00"
],
"priceRange": "$$"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "t3n digital pioneers",
"url": "https://t3n.de/",
"logo": "https://t3n.de/news/wp-content/uploads/2020/11/t3n-logo-google-news-weiss-auf-rot-1000x1000px-1.png",
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+49 511 1659440",
"contactType": "customer service",
"email": "support@t3n.de",
"areaServed": [
"DE"
],
"availableLanguage": [
"German"
]
}
],
"sameAs": [
"https://www.facebook.com/t3nMagazin/",
"https://twitter.com/t3n",
"https://www.instagram.com/t3n_magazin/",
"https://www.youtube.com/user/t3nMagazin",
"https://de.linkedin.com/company/t3n-magazin-yeebase-media-gmbh",
"https://www.pinterest.de/t3nmagazin/",
"https://soundcloud.com/t3n-podcast"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "t3n digital pioneers",
"alternateName": "t3n.de",
"url": "https://t3n.de/",
"potentialAction": [
{
"@type": "SearchAction",
"target": "https://t3n.de/suche/?q=search_term_string{search_term_string}",
"query-input": "required name=search_term_string"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://t3n.de/news/styleguide-beispiele-794708/"
},
"headline": "7 Beispiele für einen perfekten Styleguide",
"datePublished": "2018-12-18T14:25:37+0100",
"dateModified": "2020-11-10T14:46:54+0100",
"author": {
"@type": "Person",
"name": "Daniel Hüfner"
},
"description": "Ein Styleguide legt fest, wie Unternehmenslogos, Slogans und andere Gestaltungselemente in der Öffentlichkeit ",
"image": {
"@type": "ImageObject",
"url": "https://assets.t3n.sc/news/wp-content/uploads/2017/02/styleguide-macaroni-1.jpeg?auto=format&h=&ixlib=php-3.3.1&w=",
"width": 1200,
"height": 750
},
"publisher": {
"@type": "Organization",
"name": "t3n Magazin",
"logo": {
"@type": "ImageObject",
"url": "https://t3n.de/news/wp-content/uploads/2020/11/t3n-logo-google-news-rot-400px.png",
"width": 401,
"height": 130
}
},
"articleBody": "Ein Styleguide legt fest, wie Unternehmenslogos, Slogans und andere Gestaltungselemente in der Öffentlichkeit genutzt werden dürfen. Diese Beispiele zeigen, wie es richtig geht.\r\nWas in einem Styleguide steht\r\nWer auf Nummer sicher gehen will, dass die eigenen Gestaltungsrichtlinien nicht missachtet werden, erstellt üblicherweise einen Styleguide. Das Dokument dient Mitarbeitern, Kunden oder Partnern eines Unternehmens als Blaupause zur Gestaltung von Broschüren, Werbeanzeigen oder Visitenkarten. Styleguides dokumentieren die Säulen der Corporate Identity und sorgen für ein einheitliches Erscheinungsbild. Zu den wichtigsten Elementen gehören unter anderem:\r\n\r\n \tUnternehmenswerte\r\n \tLogonutzung\r\n \tFarbpaletten\r\n \tTypografie und Schriftarten\r\n \tVerwendete Slogans\r\n \tPowerpoint-Templates\r\n \tBriefköpfe\r\n \tE-Mail-Templates\r\n\r\nViele Unternehmen weisen jedoch nur versteckt auf einer Unterseite auf ihre Gestaltungsrichtlinien hin. Auch inhaltlich gehen die Styleguides oft nicht über ein paar Dos and Donts hinaus. Wie es besser geht, zeigen die Beispiele kleiner und großer Marken, die wir in der folgenden Übersicht zusammengestellt haben. Vielleicht liefern sie dir die nötige Inspiration für dein nächstes Designprojekt?\r\nDiese Styleguide-Beispiele sind jeden Blick wert\r\nIkea\r\nEinfach, aber funktional: Der schwedische Möbelriese versucht sein Erfolgsrezept auf die Gestaltung seines Styleguides zu übertragen.\r\n\r\n\r\nBarnes &amp; Noble\r\nDeutlich umfangreicher ist dagegen dieser Styleguide für die US-Buchhandelskette Barnes &amp; Noble gestaltet. So thematisiert der Hundertseiter beispielsweise die zunehmende Konkurrenzsituation zu Amazon. Wichtige Details zu Logo und Wortmarke fehlen natürlich nicht.\r\n\r\n\r\nJamie Oliver\r\nEin Styleguide für eine Personenmarke? Auch das kann gekonnt umgesetzt werden, wie Starkoch Jamie Oliver zeigt.\r\n\r\n\r\nNasa\r\nKaum eine Marke steht für so viel Tradition und Emotion wie die 1958 gegründete US-Weltraumbehörde Nasa. Mit ihr verbinden die Menschen noch heute die erste Mondlandung oder das legendäre Space-Shuttle-Programm. Nicht weniger umfassend ist der Styleguide der Nasa. Er umfasst bis zu 220 Seiten.\r\n\r\n\r\n\r\nWalmart\r\nKnallige Farben, lächelnde Gesichter, starke Werte: Eigentlich nichts, was man auf Anhieb mit einer Supermarkt-Kette in Verbindung bringt. Walmart schafft es trotzdem, jede Menge Coolness in seinen über 100 Seiten fassenden Styleguide zu packen.\r\n\r\n\r\nLove to Ride\r\nFahrradfahrer haben im Vergleich zu Autofahrern kaum eine Lobby. Die Online-Initiative Love to Ride will das ändern. Der erst vor wenigen Jahren überarbeitete Styleguide ist in jedem Fall sehenswert.\r\n\r\n\r\nVirgin Galactic\r\nSpätestens seit dem ersten bemannten Weltraumflug eines Privatunternehmens ist Virgin Galactic vielen bekannt. Ebenso cool könnte auch ein Styleguide der Raumfahrtfirma von Milliardär Richard Branson aussehen das jedenfalls zeigt ein Entwurf der Designerin Chiara Martini.\r\n\r\n\r\nStyleguide in Buchform kaufen\r\nÜbrigens muss es nicht immer eine Webansicht oder ein PDF sein, um die Gestaltungsrichtlinien zugänglich zu machen. Auch in Buchform machen Styleguides einiges her. Beim US-Anbieter Standards Manual lassen sich entsprechende Exemplare bekannter Unternehmen käuflich erwerben.\r\n\r\nLetztes Update des Artikels: 18. Dezember 2018\r\n\r\nMehr zum Thema:\r\n\r\n \tVon den Großen lernen: 32 Styleguides führender Netzkonzerne auf einen Blick\r\n \tStyleguides als PDF waren gestern: Frontify stellt praktisches Online-Tool vor\r\n \tStyleguides in Windeseile erstellen: Markly unterstützt Designer\r\n"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "t3n digital pioneers",
"image": "https://t3n.de/news/wp-content/uploads/2020/11/t3n-logo-google-news-rot-400px.png",
"url": "https://t3n.de/",
"telephone": "+49 (0)511 165944-0",
"address": {
"@type": "PostalAddress",
"streetAddress": "Kriegerstraße 40",
"addressLocality": "Hannover",
"postalCode": "30161",
"addressCountry": "DE"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "52.388702",
"longitude": "9.739234"
},
"openingHours": [
"Mo-Fr 09:00-17:00"
],
"priceRange": "$$"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "t3n digital pioneers",
"url": "https://t3n.de/",
"logo": "https://t3n.de/news/wp-content/uploads/2020/11/t3n-logo-google-news-weiss-auf-rot-1000x1000px-1.png",
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+49 511 1659440",
"contactType": "customer service",
"email": "support@t3n.de",
"areaServed": [
"DE"
],
"availableLanguage": [
"German"
]
}
],
"sameAs": [
"https://www.facebook.com/t3nMagazin/",
"https://twitter.com/t3n",
"https://www.instagram.com/t3n_magazin/",
"https://www.youtube.com/user/t3nMagazin",
"https://de.linkedin.com/company/t3n-magazin-yeebase-media-gmbh",
"https://www.pinterest.de/t3nmagazin/",
"https://soundcloud.com/t3n-podcast"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "t3n digital pioneers",
"alternateName": "t3n.de",
"url": "https://t3n.de/",
"potentialAction": [
{
"@type": "SearchAction",
"target": "https://t3n.de/suche/?q=search_term_string{search_term_string}",
"query-input": "required name=search_term_string"
}
]
}
</script>
<!-- Markup (JSON-LD) structured in schema.org END -->
<!-- There is no amphtml version available for this URL. -->
</head><body>
<script async="" type="text/javascript" src="//storage.googleapis.com/t3n-de/assets/t3n/2018/scripts/ad-scripts--news-article-universal-1624363010.js"></script>
<script>
var iam_data = {
"st": "t3n",
"cp": "t3nNews",
"sv": "i2",
"fb": "0",
"sc": "yes"
};
iom.c(iam_data, 1);
</script>
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MJGTHP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div class="o-wrapper">
<div id="Ads_BA_TakeOver">
<div id='p0' class='c-ad -p0 '></div>
<div class="o-wrapper__container">
<div class="c-header__wrapper ">
<div class="c-header tg-header ">
<div class="c-header__main">
<div class="c-header__logo">
<span class="u-hidetext">t3n digital pioneers</span>
<a href="/" title="t3n digital pioneers">
<svg
width="250"
height="150"
viewBox="0 0 200 62"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#F9423A"
d="M132.371369,25.8838026 L129.71371,25.8838026 L129.71371,24.8351674 C129.394666,25.2326913 128.98244,25.545372 128.51358,25.7454856 C127.952435,25.9926121 127.344144,26.1144583 126.731083,26.1025363 C125.416655,26.144243 124.149636,25.6096004 123.262612,24.6389503 C122.363856,23.6653708 121.914478,22.3787019 121.914478,20.7789435 C121.914478,19.1791851 122.363856,17.8925161 123.262612,16.9189366 C124.152443,15.9468679 125.423486,15.4131913 126.740735,15.4585673 C128.004142,15.4585673 128.946871,15.8209791 129.568922,16.5458026 L129.568922,10.5241919 L132.381021,10.5241919 L132.371369,25.8838026 Z M127.194403,17.9386217 C126.527714,17.9165147 125.885518,18.1909967 125.440863,18.6881064 C124.964908,19.2797972 124.726333,20.0274424 124.771622,20.7853768 C124.725824,21.5394374 124.964638,22.2832396 125.440863,22.8697805 C126.386588,23.8377184 127.937036,23.8592867 128.909333,22.9180306 C129.368974,22.3841122 129.600113,21.6908749 129.552834,20.9880272 L129.552834,20.5344764 C129.59345,19.8393356 129.36277,19.1555453 128.909333,18.6269896 C128.465164,18.158915 127.839019,17.9075823 127.194403,17.9386217 Z M136.322465,10.5853086 C136.779098,10.5761608 137.218809,10.758063 137.535464,11.0871095 C137.860015,11.4152638 138.037634,11.8609377 138.027742,12.3223117 C138.036086,12.7777155 137.858305,13.2168264 137.535464,13.5382139 C137.219823,13.8691097 136.779734,14.0523356 136.322465,14.0432315 C135.869109,14.0515006 135.433314,13.8681168 135.122335,13.5382139 C134.467702,12.8529285 134.476252,11.7716126 135.14164,11.0967595 C135.446931,10.7694585 135.874824,10.5841251 136.322465,10.5853086 Z M137.738167,25.8838026 L134.90998,25.8838026 L134.90998,15.6708677 L137.741384,15.6708677 L137.738167,25.8838026 Z M144.527102,15.4682173 C145.895614,15.4682173 146.889823,15.8896014 147.509729,16.7323696 L147.509729,15.6708677 L150.164171,15.6708677 L150.164171,26.2665866 C150.164171,27.741967 149.706213,28.9214135 148.790296,29.8049262 C147.87438,30.6884389 146.646365,31.1237619 145.106253,31.1108952 C143.604751,31.1108952 142.416419,30.7592057 141.541258,30.0558267 C140.666602,29.3328222 140.098623,28.305208 139.95181,27.1801215 L142.760692,27.0804047 C142.810128,27.5525425 143.065671,27.9787297 143.458891,28.2448401 C143.921115,28.5387114 144.46247,28.6835594 145.009728,28.6597908 C145.631921,28.69506 146.244468,28.4939943 146.724658,28.0968732 C147.171159,27.6760337 147.407022,27.0782751 147.368159,26.4660203 L147.368159,25.005651 C146.707498,25.7304745 145.764769,26.0928863 144.539972,26.0928863 C143.221106,26.1383964 141.948612,25.6034287 141.058632,24.6293003 C140.162021,23.6557208 139.713715,22.3690518 139.713715,20.7692934 C139.713715,19.169535 140.162021,17.8828661 141.058632,16.9092866 C141.94976,15.9469524 143.216216,15.4207691 144.527102,15.4682173 Z M144.990423,17.9386217 C144.323733,17.9165147 143.681538,18.1909967 143.236883,18.6881064 C142.348821,19.9406228 142.348821,21.6172642 143.236883,22.8697805 C143.688103,23.3402267 144.309139,23.6101886 144.961022,23.619257 C145.612905,23.6283254 146.241214,23.3757432 146.705353,22.9180306 C147.15879,22.3894749 147.38947,21.7056847 147.348854,21.0105439 L147.348854,20.537693 C147.38947,19.8425522 147.15879,19.158762 146.705353,18.6302063 C146.261763,18.1609479 145.63554,17.9084092 144.990423,17.9386217 Z M154.038047,10.5853086 C154.493718,10.5762749 154.932391,10.7582305 155.247828,11.0871095 C155.573243,11.4149367 155.751993,11.8605379 155.743324,12.3223117 C155.750446,12.7781169 155.571532,13.2171545 155.247828,13.5382139 C154.93458,13.8706393 154.494738,14.0542491 154.038047,14.0432315 C153.583578,14.052414 153.146436,13.868955 152.8347,13.5382139 C152.183431,12.8515991 152.19196,11.7729951 152.854005,11.0967595 C153.160057,10.7686358 153.589288,10.5832279 154.038047,10.5853086 Z M155.437661,25.8838026 L152.609474,25.8838026 L152.609474,15.6708677 L155.437661,15.6708677 L155.437661,25.8838026 Z M161.891976,18.1637888 L161.872671,21.9594622 C161.836456,22.3920674 161.991676,22.8188118 162.297382,23.1271143 C162.599152,23.3831534 162.986212,23.5163502 163.381681,23.500248
/>
</svg>
</a>
</div>
<div class="c-header__campaign">
<a id="header-campaign" class="c-header__campaign-image"></a>
</div>
<nav class="c-menu tg-menu">
<ul class="c-menu__list">
<li class="c-menu__item">
<a class="c-menu__link u-text__highlight" href="/pro/" title="t3n digital pioneers | Pro">Pro</a>
</li>
<li class="c-menu__item">
<a class="c-menu__link" href="/news/" title="t3n digital pioneers | News">News</a>
</li>
<li class="c-menu__item">
<span class="c-menu__link">
<span class="c-dropdown__link">Wissen</span>
<svg width="13" height="15" viewBox="0 -5 24 24" class="c-menu__icon">
<use xlink:href="#s-angle-down"></use>
</svg>
</span>
<ul class="c-dropdown">
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Magazin" href="/magazin/">Magazin</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Guides" href="/guides/">Guides</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Ratgeber" href="/ratgeber/">Ratgeber</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Tests & Tools" href="/tests-tools/">Tests & Tools</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Podcast" href="/podcast/">Podcast</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Newsletter" href="/info/t3n-newsletter/">Newsletter</a></li>
</ul>
</li>
<li class="c-menu__item">
<span class="c-menu__link">
<a class="c-dropdown__link" href="/tag/" title="t3n digital pioneers | Themen">Themen</a>
<svg width="13" height="15" viewBox="0 -5 24 24" class="c-menu__icon">
<use xlink:href="#s-angle-down"></use>
</svg>
</span>
<ul class="c-dropdown tg-navigation-ressorts">
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Software & Infrastruktur" href="/tag/software-infrastruktur/">Software & Infrastruktur</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Entwicklung & Design" href="/tag/entwicklung-design/">Entwicklung & Design</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Marketing" href="/tag/marketing/">Marketing</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Gadgets & Lifestyle" href="/tag/gadgets-lifestyle/">Gadgets & Lifestyle</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Startups & Wirtschaft" href="/tag/digitale-wirtschaft/">Startups & Wirtschaft</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Karriere" href="/tag/karriere/">Karriere</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - E-Commerce" href="/tag/e-commerce/">E-Commerce</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - New Finance" href="/tag/finance/">New Finance</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Gaming" href="/tag/gaming/">Gaming</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Mobilität" href="/tag/mobilitaet/">Mobilität</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Future & Science" href="/tag/future-science/">Future & Science</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Buzz & Memes" href="/tag/digitale-gesellschaft/">Buzz & Memes</a></li>
</ul>
</li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Pioneers" href="/pioneers/">Pioneers</a></li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Jobs" href="/jobs/">Jobs</a></li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Firmen" href="/firmen/">Firmen</a></li>
<li class="c-menu__item">
<span class="c-menu__link">
<a class="c-dropdown__link" href="/events/" title="t3n digital pioneers | Events">Events</a>
<svg width="13" height="15" viewBox="0 -5 24 24" class="c-menu__icon">
<use xlink:href="#s-angle-down"></use>
</svg>
</span>
<ul class="c-dropdown">
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Eventkalender" href="/events/">Eventkalender</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Medienkooperationen" href="/events/pakete/">Medienkooperationen</a></li>
</ul>
</li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Shop" href="/store/">Shop</a></li>
</ul>
</nav>
<nav class="c-submenu tg-submenu">
<ul class="c-submenu__list">
<li class="c-submenu__item"><a class="c-submenu__link" title="t3n digital pioneers | Web3 💎" href="https://t3n.de/web3/">Web3 💎</a></li>
<li class="c-submenu__item"><a class="c-submenu__link" title="t3n digital pioneers | Amazon Prime Day" href="https://t3n.de/news/prime-day-2021-angebote-vorab-1385851/">Amazon Prime Day</a></li>
<li class="c-submenu__item"><a class="c-submenu__link" title="t3n digital pioneers | Homeoffice 🖥" href="https://t3n.de/homeoffice/">Homeoffice 🖥</a></li>
<li class="c-submenu__item"><a class="c-submenu__link" title="t3n digital pioneers | t3n Newsletter" href="https://t3n.de/info/t3n-newsletter/">t3n Newsletter</a></li>
<li class="c-submenu__item"><a class="c-submenu__link" title="t3n digital pioneers | Finance" href="https://t3n.de/tag/finance/">Finance</a></li>
<li class="c-submenu__item"><a class="c-submenu__link" title="t3n digital pioneers | Adobe" href="https://t3n.de/brandhub/adobe/">Adobe</a></li>
</ul>
</nav>
<div class="c-search">
<form action="/suche" method="get" class="c-search__form">
<input aria-label="t3n.de durchsuchen" type="text" placeholder="t3n.de durchsuchen" class="c-search__input" name="q" id="js-search-box">
<button aria-label="Suchen" type="submit" class="c-search__submit">
<svg width="20" height="20" class="c-search__icon">
<use xlink:href="#s-loupe"></use>
</svg>
</button>
</form>
</div>
</div>
<nav class="c-metamenu tg-metamenu">
<ul class="c-metamenu__list">
<li class="c-metamenu__item"><a class="c-metamenu__link" href="/ueber-t3n/" title="Über t3n">Über t3n</a></li>
<li class="c-metamenu__item"><a class="c-metamenu__link" href="/jobs-bei-t3n/" title="Jobs bei t3n">Jobs bei t3n</a></li>
<li class="c-metamenu__item"><a class="c-metamenu__link" href="/mediadaten/de/" title="Mediadaten">Mediadaten</a></li>
<li class="c-metamenu__item">
<a class="c-metamenu__link" href="/account/login?redirect=https://t3n.de/news/styleguide-beispiele-794708/" title="Anmelden">
Anmelden
</a>
</li>
</ul>
<div class="c-metamenu__social c-social">
<a class="c-social__link tg-sociallink" href="https://www.facebook.com/t3nMagazin" title="t3n bei Facebook">
<svg width="18" height="18" class="c-social__icon -facebook">
<use xlink:href="#s-facebook"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="https://www.instagram.com/t3n_magazin" title="t3n bei Instagram">
<svg width="18" height="18" class="c-social__icon -instagram">
<use xlink:href="#s-instagram"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="https://twitter.com/t3n" title="t3n bei Twitter">
<svg width="18" height="18" viewBox="0 -3 24 24" class="c-social__icon -twitter">
<use xlink:href="#s-twitter"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="https://www.xing.com/news/pages/67" title="t3n bei Xing">
<svg width="18" height="18" class="c-social__icon -xing">
<use xlink:href="#s-xing"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="https://www.linkedin.com/company/t3n-magazin-yeebase-media-gmbh" title="t3n bei LinkedIn">
<svg width="18" height="18" viewBox="0 -2 24 24" class="c-social__icon -linkedin">
<use xlink:href="#s-linkedin"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="https://t3n.de/info/t3n-newsletter/" title="t3n Newsletter">
<svg width="18" height="18" viewBox="0 -2 24 24" class="c-social__icon -social-media">
<use xlink:href="#s-brief"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="https://t3n.de/info/push-notifications/" title="Notifications" rel="follow">
<svg width="22" height="22" viewBox="0 -3 24 24" class="c-social__icon -social-media">
<use xlink:href="#s-notification"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="/social-media/#RSS-Feeds:_Immer_up_to_date" title="t3n als RSS abonnieren">
<svg width="16" height="16" class="c-social__icon -rss">
<use xlink:href="#s-rss"></use>
</svg>
</a>
<a class="c-social__link tg-sociallink" href="/social-media/" title="Folge t3n auf deinen Lieblingskanälen" rel="follow">
<svg width="18" height="18" class="c-social__icon -social-media">
<use xlink:href="#s-plus"></use>
</svg>
</a>
</div>
</nav>
</div>
<div class="c-header__sticky js-sticky">
<div class="c-header__sticky-main">
<div class="c-header__logo-small">
<a href="/">
<svg width="60px" height="35px" fill="#F9423A">
<use xlink:href="#s-logo-small"></use>
</svg>
</a>
</div>
<nav class="c-menu-sticky tg-menu">
<ul class="c-menu__list">
<li class="c-menu__item">
<a class="c-menu__link u-text__highlight" href="/pro/" title="t3n digital pioneers | Pro">Pro</a>
</li>
<li class="c-menu__item">
<a class="c-menu__link" href="/news/" title="t3n digital pioneers | News">News</a>
</li>
<li class="c-menu__item">
<span class="c-menu__link">
<span class="c-dropdown__link">Wissen</span>
<svg width="13" height="15" viewBox="0 -5 24 24" class="c-menu__icon">
<use xlink:href="#s-angle-down"></use>
</svg>
</span>
<ul class="c-dropdown">
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Magazin" href="/magazin/">Magazin</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Guides" href="/guides/">Guides</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Ratgeber" href="/ratgeber/">Ratgeber</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Tests & Tools" href="/tests-tools/">Tests & Tools</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Podcast" href="/podcast/">Podcast</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Newsletter" href="/info/t3n-newsletter/">Newsletter</a></li>
</ul>
</li>
<li class="c-menu__item">
<span class="c-menu__link">
<a class="c-dropdown__link" href="/tag/" title="t3n digital pioneers | Themen">Themen</a>
<svg width="13" height="15" viewBox="0 -5 24 24" class="c-menu__icon">
<use xlink:href="#s-angle-down"></use>
</svg>
</span>
<ul class="c-dropdown tg-navigation-ressorts">
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Software & Infrastruktur" href="/tag/software-infrastruktur/">Software & Infrastruktur</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Entwicklung & Design" href="/tag/entwicklung-design/">Entwicklung & Design</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Marketing" href="/tag/marketing/">Marketing</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Gadgets & Lifestyle" href="/tag/gadgets-lifestyle/">Gadgets & Lifestyle</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Startups & Wirtschaft" href="/tag/digitale-wirtschaft/">Startups & Wirtschaft</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Karriere" href="/tag/karriere/">Karriere</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - E-Commerce" href="/tag/e-commerce/">E-Commerce</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Finance" href="/tag/finance/">Finance</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Gaming" href="/tag/gaming/">Gaming</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Mobilität" href="/tag/mobilitaet/">Mobilität</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Thema - Buzz & Memes" href="/tag/digitale-gesellschaft/">Buzz & Memes</a></li>
</ul>
</li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Pioneers" href="/pioneers/">Pioneers</a></li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Jobs" href="/jobs/">Jobs</a></li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Firmen" href="/firmen/">Firmen</a></li>
<li class="c-menu__item">
<span class="c-menu__link">
<a class="c-dropdown__link" href="/events/" title="t3n digital pioneers | Events">Events</a>
<svg width="13" height="15" viewBox="0 -5 24 24" class="c-menu__icon">
<use xlink:href="#s-angle-down"></use>
</svg>
</span>
<ul class="c-dropdown">
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Eventkalender" href="/events/">Eventkalender</a></li>
<li class="c-dropdown__item"><a class="c-dropdown__link" title="t3n digital pioneers | Medienkooperationen" href="/events/pakete/">Medienkooperationen</a></li>
</ul>
</li>
<li class="c-menu__item"><a class="c-menu__link" title="t3n digital pioneers | Shop" href="/store/">Shop</a></li>
</ul>
</nav>
</div>
<div class="c-search-sticky">
<form action="/suche" method="get" class="c-search__form">
<input
type="text"
placeholder="t3n.de durchsuchen"
class="c-search__input"
name="q"
id="js-search-box"
/>
<button type="submit" class="c-search__submit">
<svg width="20" height="20" class="c-search__icon">
<use xlink:href="#s-loupe"></use>
</svg>
</button>
</form>
</div>
<nav class="c-metamenu-sticky tg-metamenu">
<ul class="c-metamenu__list">
<li class="c-metamenu__item">
<a class="c-metamenu__link" href="/account/login?redirect=https://t3n.de/news/styleguide-beispiele-794708/" title="Anmelden">
Anmelden
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="o-wrapper__content">
<div id='p1' class='c-ad -p1 '></div>
<div class="u-background u-gap-inner">
<article class="tg-articletype-listicle" data-article-identifier="news-article-794708">
<div class="c-ressort-single -entwicklung-design"></div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://t3n.de/news/",
"name": "News"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "/tag/entwicklung-design/",
"name": "Entwicklung & Design"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"@id": "https://t3n.de/news/styleguide-beispiele-794708/",
"name": "7 Beispiele für einen perfekten Styleguide"
}
}
]
}
</script>
<nav>
<ul class="o-list c-breadcrumb">
<li class="o-list__item -inline c-breadcrumb__item">
<a class="u-text-extrasmall u-color-mute u-link-simple" href="https://t3n.de/news/" title="t3n digital pioneers | News">News</a>
<svg width="8px" height="18" viewBox="0 0 12 14" class="c-breadcrumb__divider">
<use xlink:href="#s-angle-down" transform="translate(3, 6) rotate(-90) translate(-6, -6)"></use>
</svg>
</li>
<li class="o-list__item -inline c-breadcrumb__item">
<a class="u-text-extrasmall u-color-mute u-link-simple" href="/tag/entwicklung-design/" title="t3n digital pioneers | Entwicklung & Design">Entwicklung & Design</a>
<svg width="8px" height="18" viewBox="0 0 12 14" class="c-breadcrumb__divider">
<use xlink:href="#s-angle-down" transform="translate(3, 6) rotate(-90) translate(-6, -6)"></use>
</svg>
</li>
<li class="o-list__item -inline c-breadcrumb__item">
<h1 class="u-text-extrasmall u-color-mute u-nopadded">7 Beispiele für einen perfekten Styleguide</h1>
</li>
</ul>
</nav>
<div class="u-align-center" id="article">
<div class="u-text-category -padded">
Listicle
</div>
<h2 class="u-gap-medium u-text-extralarge">
7 Beispiele für einen perfekten Styleguide
</h2>
</div>
<div class="c-social -buttons -top tg-social-top js-trigger-sticky-socials" >
<a href="https://t3n.de" title="Zur Startseite" class="c-social__button -desktop -mail">
<svg width="18" height="18" class="c-social__button-icon -mail u-nopadded">
<use xlink:href="#s-homepage"></use>
</svg>
</a>
<a href="https://getpocket.com/edit.php?url=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dpocket%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons" title="Artikel in Pocket speichern" class="c-social__button -desktop tg-sociallink -pocket js-popup-link js-external-title">
<svg width="18" height="18" class="c-social__button-icon -pocket">
<use xlink:href="#s-pocket"></use>
</svg>
<span>Pocket</span>
</a>
<a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dfacebook.com%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons&t=7%20Beispiele%20f%C3%BCr%20einen%20perfekten%20Styleguide" title="Artikel auf Facebook teilen" class="c-social__button -desktop tg-sociallink -facebook js-popup-link js-external-title">
<svg width="18" height="18" class="c-social__button-icon -facebook">
<use xlink:href="#s-facebook"></use>
</svg>
<span>Facebook</span>
</a>
<a href="http://twitter.com/intent/tweet?text=7%20Beispiele%20f%C3%BCr%20einen%20perfekten%20Styleguide&url=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dtwitter.com%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons&via=t3n&lang=de" title="Artikel auf Twitter teilen" class="c-social__button -desktop tg-sociallink -twitter js-popup-link js-external-title">
<svg width="18" height="18" viewBox="0 -3 24 24" class="c-social__button-icon -twitter">
<use xlink:href="#s-twitter"></use>
</svg>
<span>Twitter</span>
</a>
<a href="https://api.whatsapp.com/send?text=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dwhatsapp%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons" title="Artikel mit WhatsApp versenden" class="c-social__button -desktop tg-sociallink -whatsapp js-popup-link js-external-title">
<svg width="18" height="18" viewBox="0 -1 24 24" class="c-social__button-icon -whatsapp">
<use xlink:href="#s-whatsapp"></use>
</svg>
<span>WhatsApp</span>
</a>
<a href="mailto:?subject=7%20Beispiele%20f%C3%BCr%20einen%20perfekten%20Styleguide&body=Sehr%20empfehlenswerter%20Artikel%3A%20https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Demail%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons" class="c-social__button -desktop tg-sociallink -mail js-external-title" title="Artikel per E-Mail versenden">
<svg width="18" height="18" class="c-social__button-icon -mail">
<use xlink:href="#s-mail"></use>
</svg>
<span>E-Mail</span>
</a>
</div>
<div class="o-grid -distribute">
<div class="o-grid__main" id="main-content">
<div class="c-entry">
<figure>
<div class="c-gallery__preview-image">
<img class=" lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAjCAIAAABD6y5WAAAACXBIWXMAAA7EAAAOxAGVKw4bAAALsElEQVRYhZWZW5Mjx3GFT16qb8BcdpcitaTECMlhmw9+8P//C36R7QfrQlGieFsuNTs3DNDdVZnph+puzFpaO9xRgQACGOCr7FOnTuUQEeHvXz3wOXAN7IAeuxafNNgrWkFiCIEBBMIRDjdYQSmwDMsoGV4QBVFABnEwoIAQhCEMZjABhCB4oDhmwzHjZsLNAfgeKB+gOl/64bdeAj3QAg20wScNLtOLXttGRNmFMuFAMUbADc5whtUhcIEXhCEMZOCAAAwIL/RMIAbREBg81CIay1oeOBUX3BLw9f+JTh+o+q+BV8AlsLv6x/5nL7r9rum6JrUqyqQMJicyRImYwke3o9ut24MVuMFt4YaDAhxgAgPMnwhdMPdMLVFDpAGOIA8Us9nKOE/H+enudPPnx58O74A//b/QPwM+Bq52+4vPf7W7fjHsL7p+aJuuadokSUWFmMEUBAcswsKLew7L5rNbDivuJcwjQE6AMpSRmBJzYmqYlUmZBCQARcAjzLxYmXMe5+k4nh5Ph5vDze/vfnf4AfjL/46egNfAS+Dq1x9ffPSL/dXL3f5y2O26bujarm3aJjVJVFiFmcEcQACOsHBzL+7F3dyKu4V7RMABEIEJUlmlQrMyCRETcUWPcDMvZjnnaZ7HaXw6HR+Ph7vHux/v3v7m7X/hN3+LrsC/AAK0rzF89Mvh+pP95Yvd/mrY7YdhP/R91/Vd0zVN02hKokvViSiIAvAIDzcP8zoB83CP8IiIAAURMUGYhUmYK70wMxMDTECtuptV9Hmex2k8nU6Xx6fL4eKiv7xqr//Y/vnb//wBx/fQ//X1a07c7lJ/0e0u+93FsLsYdvth2A390HdD13Vd07apSSklUWURFgYxCBFwhHtYhLtXeveK7uttBTPxM3ThOogJi1jd3c1KqejTNE2n06nv+q7pWm1bbhpqeu//8G9fPUf/9B9ekHBqtOvbftcNu2HYD/2uH4ahH/qu79qua9smNY2mpBWdV3QgIszPhfcVPSLijM5S6YWV6xdU9CrWCPdws1LKht40bdKkVVpBYYjZyxf2p99u1qNXL/fElJK2Xdv1Xb/rh13fD8Mw9P3Qd33fdm3Tts3/RCdQVWl4LNDrY8SKTgAxET2rt7CI1JmsVY/wqFUvJed5Siq63JOAm9tc8pin3fT6+uMf8XjEu4re9y0za9Kma7q+7brzaOv6bCt6eo5OXDckeC3ZM+6t6As6ETPzAs3CUufAteoERFS5WZGSWZe16+HmJZeunad26tq+b/tdv/v056++fLOgp5Rq1StaUtX3H1U1qWwv6+8TUdXDik7s5E5i7kzuvsoFTES86ltknQAz8/voZItRmpuaapJqCutQUZXUpHYTDFW/ABNR9aulHOvFRMTETMz1Sd3CiYBAMGptEbSwIgKEQAAgEAGMYAQTmEIIAjBBCFQFQwgQQEEkREbEAGOxzm1QgGpk2NDdAgHnWNx487bN4WJ76eEeRIEgclT28PoW3COsfgYRiKiKogqPAAUggTqrQAR43Q2XFGThBnO4h1uYhfkyikW2mIrfH7Zwo2U2YkIQs1u2ks2yWXEzt/ev9QYjIogAomVei8rNzxbjWBSDIAomMJMLiVEIRd2PN8Fg1XrxnK1ky9lzqcNytjnbVMqYy9OUf7wfN/TplJk5DEQsIqolNyXnknIpuRS1ImVVJgBwxDYHoFa8spu7m1ms9ghEVVYQBXOIhHGIhHCwMBMTn9HNi5WSc5nmMq9jmm3KNs5lnMvTlG+OM3A4oz/NzOTFATCLqqakOeW8LNKcN0cAEJAIf4ZefW2tutU5xGoyhFgXEIfwMgHmEKnLdy2Au7uVUnIp81SmZ2OcyjiX41QOY/nqKQP3Z/THiYXcnAgqkpPkRkvOJadSSslFtVgR48LVyxHLrSa8rxfb6MOsLhRCECgIwRxW0TlYYjOYperh5lZKzrnM88o92zSXabZxttPsD7PjYEDe0PPjyMoIV6HSiGW1XCwXK8WLVcm7mZu4OJsHVe+gWHytLt/tiYdZDWCICAQhgiicwARmuECszp6JAHpWdbOcLWfLs+XsuYo++1xiynHIwJGBAUuUUXuaomHR8I69qFsJL2e7Oe+Msc6Wlq2majliU0+1O1qTSdQzFBanCadABMLBFOxUnZNW1bmbuRW3EmZhJazAquEYWXAJATfAyw0dZSJmMpArhVE4wQnBFDXZ1fIsts7ExFJ3AloMxH0p3mZ1i//V+VY7qjNbphHVoyKqANcZvTeq2IIJQiRC2kqDocf9C+AIvANUNbPWba4Im4gLQwTCJLLGVFmyh4qK1p1xyx+xVIzInYnYiZzYncMN4ZWV68mA11ywbXh1slzTMba9j9e4JkKqnBpp9qnDfgAuAQd2gKaucIrUqKZQhQpUoUKqpMrr2IKAiKqInM1hEaowm7kxF2N2rnK3CEc4LS5Z1V7v4QJeXSvCAUSIhLswK4uKKEsSTaqtpi61F2378X54CwMAtICm3lkpNZGaSClSgurKLWfuGiF0izE1PJ4XqhkLezFmYnMu7hwuERYRFAGqhd/QsaBHdVgGWf02VhdT0aJJNYk2mhpNfWp2TfvzPr/9zPAdgARoap2VtHHVUIUInYfSphYVFhVVERUWrfd8ka0HEYOMbDnnExE5u3s4R9RD7Fr1Ffr53gByJkSAI9jX36t3OIk0qq3qkJrLpvnFvnwLBxhQVmMhllgGB9c2CS9ZrG4ddA5lz5VKQeFVDwiqaytkdSMC1aPnajqbOfH6EkAEVQ+SgDPJs6HMypxYkkjD0oleJ/0WaXEYGECAARbhgAO+HCHqyROrS+I8Fr+reqmOsP7l8hWAAxEUNYOtPhMgBgAKVP4AAKLl84TtyTZACAYEUFAT9AJ0CwLUyhThXJKVYlbMrNj2xGx9zVa4CIgDFBHEAvL6y+tRw8zXxLYeU8M9EHVTorPWwUHPSu9bEjKrnQUryxeauVmYe7EoHtkwbnXR6fDEmhxM2ko76zTpNKd21nmWaRZNJALhev63CHFjEaJnJ+vlYGpL2HSrSczjfXQipnWj4AW9rnTUM5EVyzUM5DnnKecp57nkKc9T7RPMT/PpzXSLCciAPn75Le/3zaswT8ENpCVtSRtwAksQO2CBYp6LaSq1KUDMqOGk9n9qO8C2HFOD2KI0ILZ1Kcu+hsVn3kM3r9jzPI+neRzH8XQ6nU6n4+l0OD49HB/ePn3/dAROwAzoT2Zyf9/dPwwPlItYaG1vWpAFikc2m3Jp5pyaWVMSFVqqTou+fa26e7FVNr4mm0WxVNVS0Ws7YOvDUE0CVjznknOepzyeptNpfDqMh8fj48Px/vbp3Q+Hr795vMcBOABHQP8DAPAK8dFfv7z+K66+oDHTXDCVmLKPc+mmue2m1I0pNXJGP7eQbK16MStu5Rwgz+Gn1njtxpAQC5NU9S99BQszL7nMc5mneTzNx+P4dDg93h9vbw4/ffP4+z8+3OMWeIO1I1Bt7Aa4AYAv/+m39urer35pF2PZjXkYp+40tn2X2jY1SZKyar3lQeQRhnoEs+xezLJbMS9u5mGLWqqjkzAr8+Z4SrV3BwbIHbXqpdg8l2mcx9P0dBgPD8e7m8Pbvzz++zfvgG+BW5yvv9vp/fSf8frlF9eXH1/srnb9vm/7tulaXdCFhEHkVEvuJTy7z2az2ew2m2X37F4ze+VWYmVuRBrmJNKs9FobwBFwi2Jess1THsf5dJwOD8e7d09vvrr7w80b4M3fUH6oSf0i4bNffXJ9/el+f913+67tG20XdDAFkyMMkcNnt8ns5Ha08ljs1sutObbjaQ23LHuRV6IXKjuRnqUVaYiUSFH71I56Np2nfDpOT4fT3bvH73/37rvxQ532D6EDuAZe/2x/9dHnw
<noscript>
<img class="" src="https://assets.t3n.sc/news/wp-content/uploads/2017/02/styleguide-macaroni-1.jpeg?auto=format%2Ccompress&fit=crop&h=350&ixlib=php-3.3.1&q=75&w=620" width="620" height="350" alt="7 Beispiele für einen perfekten Styleguide" title="7 Beispiele für einen perfekten Styleguide">
</noscript>
</div>
<div class="o-grid">
<figcaption class="u-nopadded tg-noadgoal">
<p>Beispiele für beeindruckende Styleguides. (Foto: superbigcreative.com)</p>
</figcaption>
</div>
</figure>
<div class="">
<div class="c-pin__meta u-gap-top-small">
<div>
<span class="u-text-small u-color-mute">
<time datetime="2018-12-18 14:25:37">18.12.2018, 14:25 Uhr</time> </span>
<span class="u-text-small u-color-mute u-gap-right-extrasmall u-gap-left-extrasmall">
</span>
<span class="u-text-small u-color-mute u-gap-right-extrasmall">
Lesezeit: 2 Min.
</span>
</div>
<div class="c-tooltipp__container">
<span class="c-bookmark" id="bookmark"><svg class="c-bookmark__icon" width="16" height="16"><use id="bookmark-icon" xlink:href="#s-bookmark_outline"></use></svg></span>
<span class="c-tooltipp -smalltipp" id="bookmark-tooltip">Artikel merken</span>
</div>
</div>
<p class="u-text-small">
<span class="js-adgoal" style="display:none">
<strong>Hinweis:</strong> Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.</a>
</span>
</p>
<p class="u-text-teaser">
Ein Styleguide legt fest, wie Unternehmenslogos, Slogans und andere Gestaltungselemente in der &Ouml;ffentlichkeit genutzt werden d&uuml;rfen. Diese Beispiele zeigen, wie es richtig geht.
</p>
<div class="c-article__headline" id="Was_in_einem_Styleguide_steht">
<h2><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Was_in_einem_Styleguide_steht">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Was in einem Styleguide steht</span></h2>
</div>
<div id="p13" class="c-ad -p13 "></div>
<p>Wer auf Nummer sicher gehen will, dass die eigenen Gestaltungsrichtlinien nicht missachtet werden, erstellt üblicherweise einen Styleguide. Das Dokument dient Mitarbeitern, Kunden oder Partnern eines Unternehmens als Blaupause zur Gestaltung von Broschüren, Werbeanzeigen oder Visitenkarten. Styleguides dokumentieren die Säulen der <a href="https://t3n.de/news/geht-corporate-design-leitfaden-656540/">Corporate Identity</a> und sorgen für ein einheitliches Erscheinungsbild. Zu den wichtigsten Elementen gehören unter anderem:</p>
<ul>
<li>Unternehmenswerte</li>
<li>Logonutzung</li>
<li>Farbpaletten</li>
<li>Typografie und Schriftarten</li>
<li>Verwendete Slogans</li>
<li>Powerpoint-Templates</li>
<li>Briefköpfe</li>
<li>E-Mail-Templates</li>
</ul>
<p>Viele Unternehmen weisen jedoch nur versteckt auf einer Unterseite auf ihre Gestaltungsrichtlinien hin. Auch inhaltlich gehen die Styleguides oft nicht über ein paar Dos and Donts hinaus. Wie es besser geht, zeigen die Beispiele kleiner und großer Marken, die wir in der folgenden Übersicht zusammengestellt haben. Vielleicht liefern sie dir die nötige Inspiration für dein nächstes Designprojekt?</p>
<div class="c-article__headline" id="Diese_StyleguideBeispiele_sind_jeden_Blick_wert">
<h2><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Diese_StyleguideBeispiele_sind_jeden_Blick_wert">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Diese Styleguide-Beispiele sind jeden Blick wert</span></h2>
</div>
<div class="c-article__headline" id="Ikea">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Ikea">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Ikea</span></h3>
</div>
<p>Einfach, aber funktional: Der schwedische Möbelriese versucht sein Erfolgsrezept auf die Gestaltung seines <a href="https://issuu.com/jemjemjemjem/docs/ikea">Styleguides</a> zu übertragen.</p>
<div id="p4" class="c-ad -p4 "></div>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=jemjemjemjem&amp;d=ikea" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> <div class="c-native-newsletterbox u-background-lighter u-gap-inner">
<div class="c-native-newsletterbox__signup">
<div class="c-native-newsletterbox__image"></div>
<div class="c-native-newsletterbox__formwrappper">
<h3 class="c-headline u-gap-top-reset u-gap-bottom">
Nix verpassen: Abonniere den t3n Newsletter! <span class="c-native-newsletterbox__emoji">💌</span>
</h3>
<form class="tg-native-nl-section u-gap-bottom-small" novalidate>
<div class="c-native-newsletterbox__form">
<input type="email" placeholder="E-Mail-Adresse" name="email"><p class="c-native-newsletterbox__error -mobile -email -hidden">
Bitte gib eine gültige E-Mail-Adresse ein.
</p>
<button type="submit" class="c-button -wide">Jetzt anmelden</button>
</div>
<p class="c-native-newsletterbox__error -submit -hidden">
Es gab leider ein Problem beim Absenden des Formulars. Bitte versuche es erneut.
</p>
<p class="c-native-newsletterbox__error -desktop -email -hidden">
Bitte gib eine gültige E-Mail-Adresse ein.
</p>
</form>
<p class="c-native-newsletterbox__privacy u-text-small u-gap-top">
<a href="https://t3n.de/datenschutz/" title="Hinweis zum Newsletter &amp; Datenschutz" class="u-link -underline" target="_blank">Hinweis zum Newsletter &amp; Datenschutz</a>
</p>
</div>
</div>
<div class="c-native-newsletterbox__success -hidden">
<h3 class="u-gap-top-reset u-gap-bottom">Fast fertig!</h3>
<p class="u-gap-vertical-reset">
Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.
</p>
<p class="c-native-newsletterbox__more">
Du willst noch weitere Infos zum Newsletter?
<a href="https://t3n.de/info/t3n-newsletter/" title="Jetzt mehr erfahren" class="u-link -underline" target="_blank">Jetzt mehr erfahren</a>
</p>
</div>
</div>
<div class="c-article__headline" id="Barnes_Noble">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Barnes_Noble">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Barnes &amp; Noble</span></h3>
</div>
<p>Deutlich umfangreicher ist dagegen dieser Styleguide für die US-Buchhandelskette Barnes &amp; Noble gestaltet. So thematisiert der Hundertseiter beispielsweise die zunehmende Konkurrenzsituation zu Amazon. Wichtige Details zu Logo und Wortmarke fehlen natürlich nicht.</p>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=carol_pistone&amp;d=barnes___noble_issuu" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<div id="p6" class="c-ad -p6 "></div>
<div class="c-article__headline" id="Jamie_Oliver">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Jamie_Oliver">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Jamie Oliver</span></h3>
</div>
<p>Ein Styleguide für eine Personenmarke? Auch das kann gekonnt umgesetzt werden, wie Starkoch <a href="https://issuu.com/joaodiogo/docs/frv-brand-guidelines-_final_">Jamie Oliver</a> zeigt.</p>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=joaodiogo&amp;d=frv-brand-guidelines-_final_" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<div class="c-article__headline" id="Nasa">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Nasa">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Nasa</span></h3>
</div>
<p>Kaum eine Marke steht für so viel Tradition und Emotion wie die 1958 gegründete US-Weltraumbehörde <a title="Weitere News zu Nasa" href="https://t3n.de/tag/nasa/">Nasa</a>. Mit ihr verbinden die Menschen noch heute die erste Mondlandung oder das legendäre Space-Shuttle-Programm. Nicht weniger umfassend ist der Styleguide der Nasa. <a href="https://issuu.com/lukaszkulakowski/docs/nasa_graphics_manual_nhb_1430-2_jan">Er umfasst bis zu 220 Seiten</a>.</p>
<div id="p8" class="c-ad -p8 "></div>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=lukaszkulakowski&amp;d=nasa_graphics_manual_nhb_1430-2_jan" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<div class="c-article__headline" id="Walmart">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Walmart">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Walmart</span></h3>
</div>
<p>Knallige Farben, lächelnde Gesichter, starke Werte: Eigentlich nichts, was man auf Anhieb mit einer Supermarkt-Kette in Verbindung bringt. <a href="https://www.walmartbrandcenter.com">Walmart</a> schafft es trotzdem, jede Menge Coolness in seinen über 100 Seiten fassenden Styleguide zu packen.</p>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=lukaszkulakowski&amp;d=walmart_brand_guide" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<div id="p16" class="c-ad -p16 "></div>
<div class="c-article__headline" id="Love_to_Ride">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Love_to_Ride">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Love to Ride</span></h3>
</div>
<p>Fahrradfahrer haben im Vergleich zu Autofahrern kaum eine Lobby. Die Online-Initiative <a href="https://partners.lovetoride.net">Love to Ride</a> will das ändern. Der erst vor wenigen Jahren überarbeitete Styleguide ist in jedem Fall sehenswert.</p>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=challengeforchange&amp;d=love_to_ride_brand_guidelines" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<div class="c-article__headline" id="Virgin_Galactic">
<h3><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Virgin_Galactic">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Virgin Galactic</span></h3>
</div>
<p>Spätestens seit dem <a href="https://t3n.de/news/richard-branson-schreibt-bisschen-1132820/">ersten bemannten Weltraumflug eines Privatunternehmens</a> ist Virgin Galactic vielen bekannt. Ebenso cool könnte auch ein Styleguide der Raumfahrtfirma von Milliardär Richard Branson aussehen das jedenfalls zeigt ein <a href="https://issuu.com/rogermuller4/docs/virgin_galactic_brand_guidelines2">Entwurf</a> der Designerin Chiara Martini.</p>
<div id="p17" class="c-ad -p17 "></div>
<p><iframe loading="lazy" src="https://e.issuu.com/anonymous-embed.html?u=rogermuller4&amp;d=virgin_galactic_brand_guidelines2" width="620" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<div class="c-article__headline" id="Styleguide_in_Buchform_kaufen">
<h2><span class="c-article__wrapper">
<a class="c-article__anchor tg-headline-ankerlink" href="#Styleguide_in_Buchform_kaufen">
<svg width="14px" height="18px" viewbox="0 -1 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="link" fill="#000000" fill-rule="nonzero"><path d="M14.7225919,7.40526466 L12.4639861,9.66387039 C12.5380387,8.81226499 12.4269598,7.97917266 12.1307492,7.18310673 L13.3155915,5.97975122 C14.2227365,5.0726063 14.2227365,3.59155336 13.3155915,2.68440844 C12.4084466,1.77726352 10.9273937,1.77726352 10.0202488,2.68440844 L7.52097193,5.16517211 C6.61382699,6.09083019 6.61382699,7.55336999 7.52097193,8.47902806 C7.92826146,8.86780446 7.92826146,9.49725192 7.52097193,9.88602832 C7.13219553,10.2748047 6.50274806,10.2748047 6.11397166,9.88602832 C4.42927394,8.18281746 4.42927394,5.44286953 6.11397166,3.75817182 L8.59473532,1.27740816 C10.2979462,-0.425802719 13.0378941,-0.425802719 14.7225919,1.27740816 C16.4258027,2.96210587 16.4258027,5.7020538 14.7225919,7.40526466 Z M9.89065666,12.2371999 L7.39137979,14.7364767 C5.70668209,16.4211744 2.96673416,16.4211744 1.26352329,14.7364767 C-0.421174428,13.0332659 -0.421174428,10.2933179 1.26352329,8.60862019 L3.54064217,6.33150133 C3.46658952,7.18310673 3.5776685,8.03471219 3.87387908,8.83077812 L2.68903674,10.0156205 C1.78189181,10.9227654 1.78189181,12.4038183 2.68903674,13.3109633 C3.59618166,14.2181082 5.07723459,14.2181082 5.98437951,13.3109633 L8.46514319,10.8301996 C9.39080126,9.92305466 9.39080126,8.44200172 8.46514319,7.53485679 C8.07636679,7.14608039 8.07636679,6.49811973 8.46514319,6.10934333 C8.85391959,5.72056696 9.50188026,5.72056696 9.89065666,6.10934333 C11.5753543,7.81255426 11.5753543,10.5525022 9.89065666,12.2371999 Z" id="Icon_URL"></path></g></g></svg></a>Styleguide in Buchform kaufen</span></h2>
</div>
<p>Übrigens muss es nicht immer eine Webansicht oder ein PDF sein, um die Gestaltungsrichtlinien zugänglich zu machen. Auch in Buchform machen Styleguides einiges her. Beim US-Anbieter <a href="https://standardsmanual.com">Standards Manual</a> lassen sich entsprechende Exemplare bekannter Unternehmen käuflich erwerben.</p>
<p><em>Letztes Update des Artikels: 18. Dezember 2018</em></p>
<div id="p18" class="c-ad -p18 "></div>
<p><strong>Mehr zum Thema:</strong></p>
<ul>
<li><strong><a href="https://t3n.de/news/styleguides-netzkonzerne-550463/">Von den Großen lernen: 32 Styleguides führender Netzkonzerne auf einen Blick</a></strong></li>
<li><strong><a href="https://t3n.de/news/styleguides-frontify-635661/">Styleguides als PDF waren gestern: Frontify stellt praktisches Online-Tool vor</a></strong></li>
<li><strong><a href="https://t3n.de/news/sketch-photoshop-markly-design-specs-588596/">Styleguides in Windeseile erstellen: Markly unterstützt Designer</a></strong></li>
</ul>
<div id="vgWortPixel" style="height:1px;overflow:hidden"><img loading="eager" class="vgWortPixel" src="https://ssl-vg03.met.vgwort.de/na/5457497cafbf4583b381f853ca064703" width="1" height="1" alt=""></div>
<h3>Das könnte dich auch interessieren</h3>
<div id="desktop-news-suggestion" class="c-suggestNews-wrapper tg-leseempfehlung"></div>
<div class="c-social -buttons tg-social-bottom" style="display: block
;">
<a href="https://t3n.de" title="Zur Startseite" class="c-social__button -desktop -mail">
<svg width="18" height="18" class="c-social__button-icon -mail u-nopadded">
<use xlink:href="#s-homepage"></use>
</svg>
</a>
<a href="https://getpocket.com/edit.php?url=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dpocket%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons" title="Artikel in Pocket speichern" class="c-social__button -desktop tg-sociallink -pocket js-popup-link js-external-title">
<svg width="18" height="18" class="c-social__button-icon -pocket">
<use xlink:href="#s-pocket"></use>
</svg>
<span>Pocket</span>
</a>
<a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dfacebook.com%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons&t=7%20Beispiele%20f%C3%BCr%20einen%20perfekten%20Styleguide" title="Artikel auf Facebook teilen" class="c-social__button -desktop tg-sociallink -facebook js-popup-link js-external-title">
<svg width="18" height="18" class="c-social__button-icon -facebook">
<use xlink:href="#s-facebook"></use>
</svg>
<span>Facebook</span>
</a>
<a href="http://twitter.com/intent/tweet?text=7%20Beispiele%20f%C3%BCr%20einen%20perfekten%20Styleguide&url=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dtwitter.com%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons&via=t3n&lang=de" title="Artikel auf Twitter teilen" class="c-social__button -desktop tg-sociallink -twitter js-popup-link js-external-title">
<svg width="18" height="18" viewBox="0 -3 24 24" class="c-social__button-icon -twitter">
<use xlink:href="#s-twitter"></use>
</svg>
<span>Twitter</span>
</a>
<a href="https://api.whatsapp.com/send?text=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Dwhatsapp%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons" title="Artikel mit WhatsApp versenden" class="c-social__button -desktop tg-sociallink -whatsapp js-popup-link js-external-title">
<svg width="18" height="18" viewBox="0 -1 24 24" class="c-social__button-icon -whatsapp">
<use xlink:href="#s-whatsapp"></use>
</svg>
<span>WhatsApp</span>
</a>
<a href="mailto:?subject=7%20Beispiele%20f%C3%BCr%20einen%20perfekten%20Styleguide&body=Sehr%20empfehlenswerter%20Artikel%3A%20https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%3Futm_source%3Demail%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons" class="c-social__button -desktop tg-sociallink -mail js-external-title" title="Artikel per E-Mail versenden">
<svg width="18" height="18" class="c-social__button-icon -mail">
<use xlink:href="#s-mail"></use>
</svg>
<span>E-Mail</span>
</a>
</div>
</div>
</div>
</div>
<aside class="o-grid__sidebar tg-sidebar">
<div class="c-pin u-gap-bottom tg-profile-author">
<div class="o-grid">
<a href="/pioneers/profile/hexitus/" class="c-pin__image" title="Daniel Hüfner im t3n Pioneers Network">
<img class="c-image -rounded -border" src="https://storage.googleapis.com/t3n-de/pioneers/a275e6ca0d98d08ed987ea61b31581f20060484f/daniel-huefner-t3n.jpg" width="50" height="50" alt="hexitus">
</a>
<div class="o-grid__item c-pin__body">
<a href="/pioneers/profile/hexitus/" class="u-color-highlight u-text-small u-link-simple" title="Daniel Hüfner im t3n Pioneers Network">
<strong>Daniel Hüfner</strong>
</a>
<p class="c-pin__author">
Journalist und ehemaliger Startup-Reporter bei t3n.
</p>
</div>
</div>
</div>
<div class="c-tag u-gap-bottom tg-tags">
<div class="c-tag__container">
<div class="c-tag__headline">Verwandte Themen</div>
<a href="/tag/nasa/" class="c-tag__item">NASA</a>
<a href="/tag/amazon/" class="c-tag__item">Amazon</a>
<a href="/tag/photoshop/" class="c-tag__item">Photoshop</a>
</div>
</div>
<div id='p3' class='c-ad -p3 '></div>
<div class="c-card c-newsletterbox">
<div class="c-card__header c-newsletterbox__header">
<div class="c-newsletterbox__headline">
<div>
<h3 class="c-headline -underlined -highlight">
Nix mehr verpassen:<br>Unsere Newsletter
</h3>
</div>
</div>
</div>
<div class="c-newsletterbox__form">
<form class="tg-newsletter-signup" novalidate>
<input type="email" placeholder="E-Mail-Adresse" name="email" />
<p class="c-newsletterbox__error -email -hidden">
Bitte gib eine gültige E-Mail-Adresse ein.
</p>
<strong>Wähle deine t3n Newsletter</strong>
<div class="c-newsletterbox__list-container">
<ul class="c-newsletterbox__list o-list"></ul>
<a
href="#"
title="Weitere auswählen"
class="c-newsletterbox__list-expand u-link -underline"
>+ Weitere auswählen</a
>
</div>
<p class="c-newsletterbox__error -list -hidden">
Bitte wähle mindestens einen Newsletter aus.
</p>
<button type="submit" class="c-button -wide">Jetzt abonnieren</button>
<p class="c-newsletterbox__error -submit -hidden">
Es gab leider ein Problem beim Absenden des Formulars. Bitte versuche es
erneut.
</p>
</form>
<p class="c-newsletterbox__privacy u-text-small u-gap-top-extrasmall">
<a
href="https://t3n.de/info/t3n-newsletter/#Hinweise_zum_Newsletter"
title="Hinweis zum Newsletter & Datenschutz"
class="u-link -underline"
target="_blank"
>Hinweis zum Newsletter & Datenschutz</a
>
</p>
</div>
<div class="c-newsletterbox__success -hidden">
<h3 class="u-gap-top-reset">Fast fertig!</h3>
<p>
Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung
abzuschließen.
</p>
</div>
</div>
<div id='p7' class='c-ad -p7 '></div>
<div id='p5' class='c-ad -p5 '></div>
</aside>
</div>
</article>
</div>
<div id='p14' class='c-ad -p14 '></div>
<div id="content-split">
<div class="c-stage tg-article-jobs">
<div class="c-stage__headline">
<a href="/jobs/" title="t3n digital pioneers | Jobs">Finde einen Job, den du liebst.</a>
</div>
<div class="o-grid -one-third u-gap-small">
<a href="https://t3n.de/jobs/job/parsa-haar-und-modeartikel-gmbh/social-media-manager-m-w-d/" class="o-grid__item c-card -elevate">
<div class="c-card__content u-gap-bottom">
<div class="c-card__headline -small">Social Media Manager (m/w/d)</div>
</div>
<div class="c-card__footer">
<div class="o-grid">
<div class="c-card__jobsimage u-gap-right-small">
<img src="https://storage.googleapis.com/t3n-de/jobslogos/a5b3159ea33932cb75c05825a7c52c640cca6196/joblogo.gif" alt="Social Media Manager (m/w/d)" width="80" height="80">
</div>
<div class="c-card__jobsdetails">
<strong>PARSA Haar- und Modeartikel GmbH</strong><br/>
74889 Sinsheim </div>
</div>
</div>
</a>
<a href="https://t3n.de/jobs/job/bundesnachrichtendienst/it-experten-innen-m-w-d/" class="o-grid__item c-card -elevate">
<div class="c-card__content u-gap-bottom">
<div class="c-card__headline -small">IT-Experten/-innen (m/w/d)</div>
</div>
<div class="c-card__footer">
<div class="o-grid">
<div class="c-card__jobsimage u-gap-right-small">
<img src="https://images.t3n.sc/jobslogos/4ee3d54933224aa5149743256d9e3416eeb93e8b/bundesnachrichtendienst.jpg?auto=format&fit=crop&h=80&ixlib=php-3.3.1&w=80" alt="IT-Experten/-innen (m/w/d)" width="80" height="80">
</div>
<div class="c-card__jobsdetails">
<strong>Bundesnachrichtendienst</strong><br/>
10115 Berlin </div>
</div>
</div>
</a>
<a href="https://t3n.de/jobs/job/artus-interactive-gmbh/junior-projekt-manager-digital-m-w-d/" class="o-grid__item c-card -elevate">
<div class="c-card__content u-gap-bottom">
<div class="c-card__headline -small">Junior Projekt Manager Digital (M/W/D)</div>
</div>
<div class="c-card__footer">
<div class="o-grid">
<div class="c-card__jobsimage u-gap-right-small">
<img src="https://images.t3n.sc/jobslogos/3a44df9571390dcfde8fec405296cd06c4f14462/Logo-t3n.png?auto=format&fit=crop&h=80&ixlib=php-3.3.1&w=80" alt="Junior Projekt Manager Digital (M/W/D)" width="80" height="80">
</div>
<div class="c-card__jobsdetails">
<strong>ARTUS interactive GmbH</strong><br/>
60311 Frankfurt </div>
</div>
</div>
</a>
</div>
<div class="o-grid">
<div class="o-grid__item u-align-center">
<a href="/jobs/kategorie/design" class="c-button" title="Design- & UX-Jobs">Weitere Design- & UX-Jobs</a>
<a href="/jobs/pakete/" class="c-button -outline" title="Deinen Job jetzt schalten!">Deinen Job jetzt schalten!</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function() {
fetch(
`https://api.${
window.location.host === "t3n.de" ? "" : "stage."
}t3n.de/`,
{
method: 'post',
headers: {
'Content-Type': 'application/json',
'apollographql-client-name': 't3n-frontend'
},
body: JSON.stringify({
operationName: "SuggestNews",
variables: { identifier: "news-article-794708"},
query: "query SuggestNews ($identifier: String!) {article {suggestNews(limit:4, identifier: $identifier) {title url imageUrl(width:304, height: 190) identifier }}}"
})
}).then((res) => res.json()).then((res) => {
res.data.article.suggestNews.map(el => {
const articleNode = document.createElement('a');
const textNode = document.createElement('p');
const imageNode = document.createElement('img');
imageNode.src = `${el.imageUrl}&fit=crop`;
imageNode.alt = `${el.title}`;
textNode.classList.add('c-suggestNews-title')
textNode.append(el.title);
articleNode.classList.add('c-suggestNews','c-card','-elevate');
articleNode.href = `${el.url}`;
articleNode.append(imageNode);
articleNode.appendChild(textNode);
document.getElementById('desktop-news-suggestion').append(articleNode);
})
}).catch((error) => console.log(error));
})();
</script>
<div class="OUTBRAIN" data-src="https://t3n.de/news/styleguide-beispiele-794708/" data-widget-id="AR_1" data-ob-template="t3nde"></div>
<script type="text/javascript">
function cmpLoadOutbrain() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://widgets.outbrain.com/outbrain.js';
document.head.appendChild(script);
}
</script>
<div class="u-background-lighter">
<div class="c-stage tg-article-comments u-overflow-hidden">
<details class="u-align-center u-gap-bottom">
<summary>Bitte beachte unsere <span class="u-color-highlight">Community-Richtlinien</span></summary>
<div class="c-box">
<p>
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht.
Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung
von
Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird.
Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
</p>
<p>
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer.
Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
</p>
<p>
Dein t3n-Team
</p>
</div>
</details>
<div class="c-stage__headline">
4 Kommentare
</div>
<div class="c-comment">
<input type="checkbox" value="" id="collapse-comments" class="c-comment__collapse-input js-collapse">
<label for="collapse-comments" class="u-align-center c-comment__collapse-label">
<span class="c-comment__collapse-button c-button">Kommentare einblenden</span>
</label>
<div class="c-comment__overlay"></div>
<div class="c-comment__collapse-content">
<div id="c-217498" class="c-comment__target"></div>
<div class="c-comment__item c-pin" id="comment-217498">
<div class="c-pin__image -extrasmall">
<img class="c-image -border -rounded" src="https://storage.googleapis.com/t3n-de/assets/t3n/2018/images/avatar/default.jpg" alt="Ein Designer" width="44" height="44">
</div>
<div class="c-pin__body -comment o-grid__item">
<strong>Ein Designer</strong>
<div class="u-text-extrasmall u-color-mute">
<a class="u-link-simple" href="#c-217498">17.02.2017, 10:35 Uhr</a>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Sorry, aber der Style Guide von Uber ist alles andere als Perfekt. Ich w&uuml;rde Ihn sogar als einer der schlechtesten Styleguides &uuml;berhaupt bezeichnen. Ich mag die Idee des Online Styleguides. Allerdings hat sich hier der Designer verwirklicht und es wurde nicht das Design verwirklicht. Die Website hat gerade mal 0 Aussagekraft &uuml;ber das Uber Brand System.</p>
<p>Ein Styleguide soll ein mindestma&szlig; an Informationen besitzen und meist wird bereits vergessen die Logos bzw. Template-Daten mit dem PDF/Word/&hellip; mitzuliefern. Hier wird erkl&auml;rt wie das Uber Icon gezeichnet wird und wie die Farben anhand der geografischen Lage zu setzen sind (katastrophaler Fehler, Farben an Regionen/L&auml;nder zu binden. Das wird allgemein als rassistisch gehandhabt, nach dem Motto : schwarze Afrikaner, gelbh&auml;utige Asiaten, &hellip; Einfach ein No Go).</p>
<p>Und des weiteren, soll denn jeder Designer das Logo neu zeichnen, wenn er ein Projekt von Uber ausf&uuml;hrt. Nein, sicherlich nicht. Das wird einmal gemacht und dann in verschiedenen Dateiformaten hinterlegt und nach Bedarf von Uber an den Designer geliefert bzw. &uuml;ber die Styleguide Website als Download angeboten.</p>
<p>Und wenn ich jetzt eine grafische Dienstleistung f&uuml;r Uber ausf&uuml;hren m&uuml;sste und der Marketer w&uuml;rde mir den Link zu dieser CI schicken (Wom&ouml;glich noch mit: Da ist alles erkl&auml;rt) m&uuml;sste ich mir erstmal an den Kopf fassen und mich fragen ob der Marketer noch alle Tassen im Schrank hat. Der n&auml;chste Schritt w&auml;re es den doppelten Preis zu verlangen da hier sicherlich ein ungeahntes Ma&szlig; an Mehrarbeit auf einen zukommen wird.</p>
</body></html>
<a rel='' class='comment-reply-link c-button' href='https://t3n.de/news/styleguide-beispiele-794708/?replytocom=217498#respond' data-commentid="217498" data-postid="794708" data-belowelement="comment-217498" data-respondelement="respond" data-replyto="Antworte auf Ein Designer" aria-label='Antworte auf Ein Designer'>Antworten</a>
</div>
</div>
<div id="c-217539" class="c-comment__target"></div>
<div class="c-comment__item c-pin -threaded" id="comment-217539">
<div class="c-pin__image -extrasmall">
<img class="c-image -border -rounded" src="https://storage.googleapis.com/t3n-de/assets/t3n/2018/images/avatar/default.jpg" alt="dennis" width="44" height="44">
</div>
<div class="c-pin__body -comment o-grid__item">
<strong>dennis</strong>
<div class="u-text-extrasmall u-color-mute">
<a class="u-link-simple" href="#c-217539">17.02.2017, 19:01 Uhr</a>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Ja, das gebe ich Dir Recht, mit allem.</p>
<p>Ein Styleguide sollte helfen und schnell der ausf&uuml;hrenden Kraft zur Seite stehen. Leider gibt es viele Firmen, die das nicht verstanden haben. Oft &auml;hnelt der Stylguide einem Werbeblatt, was die Firma ausmachte und was sie so toll macht. Total uninteressant f&uuml;r den Designer oder Mediengestalter, der irgendetwas erstellen soll.</p>
</body></html>
<a rel='' class='comment-reply-link c-button' href='https://t3n.de/news/styleguide-beispiele-794708/?replytocom=217539#respond' data-commentid="217539" data-postid="794708" data-belowelement="comment-217539" data-respondelement="respond" data-replyto="Antworte auf dennis" aria-label='Antworte auf dennis'>Antworten</a>
</div>
</div>
<div id="c-217649" class="c-comment__target"></div>
<div class="c-comment__item c-pin" id="comment-217649">
<div class="c-pin__image -extrasmall">
<a href="/pioneers/profile/Noxor/" class="u-color u-link-simple u-text-small" rel="nofollow">
<img class="c-image -border -rounded" src="https://storage.googleapis.com/t3n-de/pioneers/d1e0bd8c7c87a229bb0cc50eacc7a863da72d92a/37100a484.3182651%2C25.1024x1024.jpg" alt="Noxor" width="44" height="44">
</a>
</div>
<div class="c-pin__body -comment o-grid__item">
<a href="/pioneers/profile/Noxor/" class="u-color u-link-simple u-text-small">
<strong>Noxor</strong>
</a>
<div class="u-text-extrasmall u-color-mute">
<a class="u-link-simple" href="#c-217649">20.02.2017, 13:45 Uhr</a>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Ein Styleguide kann alles M&ouml;gliche umfassen und kann daher sehr umfangreich sein, aber:</p>
<p>Seit wann beinhaltet ein &bdquo;Standard-Kunden-Styleguide&ldquo; PowerPoint-Templates oder E-Mail-Templates.<br>
Das w&auml;re mir neu :)</p>
</body></html>
<a rel='' class='comment-reply-link c-button' href='https://t3n.de/news/styleguide-beispiele-794708/?replytocom=217649#respond' data-commentid="217649" data-postid="794708" data-belowelement="comment-217649" data-respondelement="respond" data-replyto="Antworte auf Noxor" aria-label='Antworte auf Noxor'>Antworten</a>
</div>
</div>
<div id="c-267735" class="c-comment__target"></div>
<div class="c-comment__item c-pin" id="comment-267735">
<div class="c-pin__image -extrasmall">
<img class="c-image -border -rounded" src="https://storage.googleapis.com/t3n-de/assets/t3n/2018/images/avatar/default.jpg" alt="Martin" width="44" height="44">
</div>
<div class="c-pin__body -comment o-grid__item">
<strong>Martin</strong>
<div class="u-text-extrasmall u-color-mute">
<a class="u-link-simple" href="#c-267735">18.12.2018, 21:30 Uhr</a>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>&bdquo;Einfach, aber funktional: Der schwedische M&ouml;belriese versucht sein Erfolgsrezept auf die Gestaltung seines Styleguides zu &uuml;bertragen.&ldquo;</p>
<p>Was wir hier sehen ist nicht der Styleguide von IKEA, sondern irgendein Dokument von jemanden der weder ein Auge f&uuml;r gutes Kerning, noch Ahnung von der Entwicklung eines visuellen Erscheinungsbildes hat. Ist mir ein R&auml;tsel warum das hier aufgef&uuml;hrt ist. Zumal suggeriert wird, dass das DER IKEA-Styleguide ist.</p>
</body></html>
<a rel='' class='comment-reply-link c-button' href='https://t3n.de/news/styleguide-beispiele-794708/?replytocom=267735#respond' data-commentid="267735" data-postid="794708" data-belowelement="comment-267735" data-respondelement="respond" data-replyto="Antworte auf Martin" aria-label='Antworte auf Martin'>Antworten</a>
</div>
</div>
<label for="comment" class="c-button c-comment__respond">Kommentieren</label>
<div class="c-comment__respond-anchor"></div>
<div id="respond" class="comment-respond">
<small><a id="cancel-comment-reply-link" href="/news/styleguide-beispiele-794708/#respond" style="display:none;">Abbrechen</a></small><form action="https://t3n.de/news/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="u-align-center">Melde dich mit deinem <a href="https://t3n.de/account/login?redirect=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-beispiele-794708%2F%23respond" class="u-link">t3n Account</a> an oder fülle die unteren Felder aus.</p><p class="comment-form-comment"><label for="comment">Dein Kommentar</label><textarea autocomplete="new-password" id="ed28fced54" name="ed28fced54" placeholder="Dein Kommentar" cols="45" rows="8" maxlength="65525" required="required"></textarea><textarea id="comment" aria-hidden="true" name="comment" autocomplete="new-password" style="padding:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;white-space:nowrap !important;height:1px !important;width:1px !important;overflow:hidden !important;" tabindex="-1"></textarea><script data-noptimize type="text/javascript">document.getElementById("comment").setAttribute( "id", "a87597900f5af468aec04cdc4cf9c315" );document.getElementById("ed28fced54").setAttribute( "id", "comment" );</script></p><label for="author">Name</label><input id="author" name="author" class="form" placeholder="Name" type="text" value="" size="30" aria-required='true' />
<label for="email">E-Mail-Adresse (wird nicht veröffentlicht)</label><input id="email" name="email" class="form" placeholder="E-Mail-Adresse" type="text" value="" size="30" aria-required='true' />
<label for='subscribe-reloaded'><select name='subscribe-reloaded' id='subscribe-reloaded'>
<option value='none' >Don't subscribe</option>
<option value='yes' >All</option>
<option value='replies' selected='selected'>Replies to my comments</option>
</select> Benachrichtige mich über Folgekommentare per E-Mail. Du kannst auch ohne Kommentar <a href="https://t3n.de/news/kommentar-benachrichtigungen/?srp=794708&amp;srk=d03ffa20323b6723f8ce60494ea2de47&amp;sra=s&amp;srsrc=f">abonnieren</a>.</label></p><p class='comment-form-subscriptions'><p class="u-align-center u-gap-bottom-extrasmall"><button name="submit" type="submit" id="submit" class="c-button">Kommentar absenden</button> <input type='hidden' name='comment_post_ID' value='794708' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</div>
</div>
</div>
</div>
<script>
dataLayer.push(
{"event":"gaTriggerEvent","gaEventCategory":"RessortPageviews","gaEventAction":"Entwicklung & Design","gaEventLabel":"","gaEventValue":100}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"nasa","gaEventLabel":"","gaEventValue":33}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"021ebb6c-cdcb-4b37-811f-32d756dc3152","gaEventLabel":"","gaEventValue":33}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"amazon","gaEventLabel":"","gaEventValue":33}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"c3d2b9c3-b71d-445f-82fa-ac83112defb5","gaEventLabel":"","gaEventValue":33}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"photoshop","gaEventLabel":"","gaEventValue":33}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"0558b4d7-a183-486a-be19-4a4d5e138470","gaEventLabel":"","gaEventValue":33} );
</script>
<div class="c-adblock -hidden" id="js-adbnotice">
<div class="c-adblock__container">
<div class="c-adblock__body">
<div class="c-adblock__image">
<img src="https://images.t3n.sc/assets/t3n/2018/images/adblock/t3n_adblocker_notice_holger.png?auto=format&h=765&ixlib=php-3.3.1&w=480"
width="320" height="510"
alt="Bitte schalte deinen Adblocker für t3n.de aus!"
title="Bitte schalte deinen Adblocker für t3n.de aus!">
</div>
<div class="c-adblock__message">
<h2 class="c-adblock__title u-gap-bottom-small">
Hallo und herzlich willkommen bei t3n!
</h2>
<p class="u-text-teaser u-text-bold u-gap-top-reset u-gap-bottom-small">
Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.
</p>
<p>
Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber
ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung
sehr wichtig.
</p>
<p>Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌</p>
<p class="u-gap-top-reset">
Digitales High Five<br/>Holger Schellkopf (Chefredakteur t3n)
</p>
<a href="/info/adblocker-deaktivieren/" class="c-button tg-adblock-anleitung"
title="Anleitung zur Deaktivierung">Anleitung zur Deaktivierung</a>
</div>
</div>
<a href="#" class="c-adblock__button-close" title="Schliessen">
<svg width="0.875rem" height="0.875rem" viewBox="0 0 24 24">
<use xlink:href="#s-x"></use>
</svg>
</a>
</div>
</div>
<div class="c-modal-wrapper -hidden" id="js-bookmarkmodal">
<div class="c-modal__container">
<div class="c-modal__body">
<div class="c-modal__message">
<h3 class="c-modal__title u-gap-bottom-small">
<svg class="c-bookmark__icon u-gap-right-extrasmall" width="18" height="18"><use xlink:href="#s-bookmark_outline"></use></svg>
Artikel merken
</h3>
<p>
Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.
</p>
<a href="/account/register" id="bookmark-register-button" class="c-button -wide">Jetzt registrieren und merken</a>
<p class="u-text-small u-gap-bottom">Du hast schon einen t3n-Account? <a class="u-color u-link -underline" id="bookmark-login-link" href="/account/login?redirect=https://t3n.de/news/styleguide-beispiele-794708/">Hier anmelden</a></p>
<div class="c-divider__wrapper">
<span class="c-divider__line"></span>
<span class="c-divider__text">oder</span>
<span class="c-divider__line"></span>
</div>
<a id="bookmark-pocket-button" class="c-social__button -wide -desktop tg-sociallink -pocket u-gap-bottom -bookmark" href=""><svg width="20" height="20" class="c-social__icon -pocket u-gap-right-extrasmall"><use xlink:href="#s-pocket"></use></svg>Artikel in Pocket speichern</a>
</div>
</div>
<span class="c-modal__button-close" title="Schliessen">
<svg width="0.875rem" height="0.875rem" viewBox="0 0 24 24">
<use xlink:href="#s-x"></use>
</svg>
</span>
</div>
</div>
<div id='p15' class='c-ad -p15 '></div>
<footer class="c-footer o-grid tg-footer">
<div class="o-grid__item c-footer__body">
<div class="o-grid">
<div class="c-footer__column -mission">
<p class="u-text-large u-gap-top-reset">Wir helfen digitalen Pionieren, glücklich zu arbeiten und zu leben.</p>
</div>
<div class="c-footer__column">
<strong>yeebase media</strong>
<ul class="c-footer__menu">
<li class="c-footer__menu-item"><a class="c-footer__link" href="/ueber-t3n/" title="Über t3n">Über t3n</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/team/" title="Das Team von t3n">Team</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/jobs-bei-t3n/" title="Jobs bei t3n">Jobs bei t3n</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="https://medium.com/@t3nbackstageblog" title="t3n Backstage Blog">t3n Backstage Blog</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/unterstuetze-t3n" title="Unterstütze t3n">Unterstütze t3n</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/mediadaten/de/" title="Mediadaten">Mediadaten</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/agb/" title="AGB">AGB</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/datenschutz/" title="Datenschutz">Datenschutz</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="#" title="Datenschutzeinstellungen" onclick="window._sp_.loadPrivacyManagerModal(399880); return false;">Datenschutzeinstellungen</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/impressum/" title="Impressum">Impressum</a></li>
</ul>
</div>
<div class="c-footer__column">
<strong>t3n.de</strong>
<ul class="c-footer__menu">
<li class="c-footer__menu-item"><a class="c-footer__link u-text__highlight" href="/pro/" title="t3n digital pioneers | Pro">Pro</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/news/" title="t3n digital pioneers | News">News</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/magazin/" title="t3n digital pioneers | Magazin">Magazin</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/guides/" title="t3n digital pioneers | Guides">Guides</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/ratgeber/" title="t3n digital pioneers | Ratgeber">Ratgeber</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/tests-tools/" title="t3n digital pioneers | Tests & Tools">Tests & Tools</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/podcast/" title="t3n digital pioneers | Podcast">Podcast</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/tag/" title="t3n digital pioneers | Themen">Themen</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/pioneers/" title="t3n digital pioneers | Pioneers Network">Pioneers</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/jobs/" title="t3n digital pioneers | Jobs">Jobs</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/firmen/" title="t3n digital pioneers | Firmen">Firmen</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/deals/" title="t3n digital pioneers | Deals">Deals</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/events/" title="t3n digital pioneers | Events">Events</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/store/" title="t3n digital pioneers | Shop">Shop</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/info/t3n-newsletter/" title="t3n digital pioneers | Newsletter">Newsletter</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/archive/" title="t3n digital pioneers | Newsarchiv">Newsarchiv</a></li>
</ul>
</div>
<div class="c-footer__column">
<strong>RSS-Feeds</strong>
<ul class="c-footer__menu">
<li class="c-footer__menu-item"><a class="c-footer__link" href="https://t3n.de/rss.xml" title="t3n digital pioneers | News als RSS Feed">Aktuelle News</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="https://feeds2.feedburner.com/t3n-magazin/" title="t3n digital pioneers | Magazinartikel als RSS Feed">Die neuesten Artikel</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/jobs/rss/all/">Aktuelle Jobs</a></li>
</ul>
</div>
<div class="c-footer__column">
<strong>Kontakt</strong>
<ul class="c-footer__menu">
<li class="c-footer__menu-item"><a class="c-footer__link" href="mailto:support@t3n.de" title="E-Mail Support">E-Mail</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="/presse/presseinformationen/" title="Pressebereich">Pressebereich</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="mailto:redaktion@t3n.de" title="E-Mail Redaktion">Redaktion</a></li>
<li class="c-footer__menu-item"><a class="c-footer__link" href="https://faq.t3n.de" target="_blank" title="t3n digital pioneers | FAQ">FAQ</a></li>
</ul>
</div>
</div>
<div class="c-footer__end">
<div class="o-grid">
<div class="o-grid__item">
<p>agof- und IVW-geprüft</p>
<a class="c-footer__award" href="http://www.agof.de/" target="_blank" title="agof"><img src="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/logos/agof-logo.png" width="80" height="27" alt="agof"></a>
<a class="c-footer__award" href="http://www.ivw.de/" target="_blank" title="IVW"><img src="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/logos/ivw.png" width="50" height="50" alt="IVW"></a>
</div>
<div class="o-grid__item">
<p>Ausgezeichnet von kununu</p>
<a class="c-footer__award" href="https://www.kununu.com/de/t3n/" target="_blank" title="t3n bei Kununu">
<img src="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/logos/kununu-top-company.png" alt="kununu Top Company" width="87" height="52" >
</a>
<a class="c-footer__award" href="https://www.kununu.com/de/t3n/" target="_blank" title="t3n bei Kununu">
<img src="//storage.googleapis.com/t3n-de/assets/t3n/2018/images/logos/kununu-open-company.png" alt="kununu Open Company" width="87" height="52">
</a>
</div>
</div>
<div class="o-grid u-gap-inner-top" id="publisher-t3n">
<ul class="o-grid__item u-gap-top o-list">
<li class="o-list__item -inline">
<a href="/" class="c-footer__link js-switch-to-mobile" title="Zur mobilen Version von t3n wechseln">Mobile Seite</a> &nbsp;•&nbsp;
</li>
<li class="o-list__item -inline">
© <a class="c-footer__link" href="http://yeebase.com/" target="_blank" title="yeebase media GmbH">yeebase media GmbH</a> 2005 - 2021 &nbsp;
</li>
</ul>
<ul class="o-list o-grid__item u-gap-top-small">
<li class="o-list__item">
powered by
<a href="https://www.neos.io/" class="c-footer__link c-footer__support" rel="nofollow" target="_blank" title="Neos">
<svg width="80" height="20">
<use xlink:href="#s-neos"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div id='p2' class='c-ad -p2 '></div>
</div>
</div>
</div>
</div>
<script>
(function (w, d) {
var b = d.getElementsByTagName('body')[0];
var s = d.createElement("script");
var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.17.0";
s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
w.lazyLoadOptions = {
threshold: 650,
elements_selector: "img[data-src].lazy, iframe[data-src].lazy",
placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
};
b.appendChild(s);
}(window, document));
</script><script src="//storage.googleapis.com/t3n-de/assets/t3n/2018/scripts/main-1624363010.js"></script>
<script type='text/javascript' src='https://t3n.de/news/wp-includes/js/comment-reply.min.js?ver=5.7' id='comment-reply-js'></script>
<svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 140 143" id="s-adblocker" xmlns="http://www.w3.org/2000/svg"><path d="M107.105 65.253a6.697 6.697 0 0 0-10.838-3.995l-2.96-16.772c-.656-3.637-4.189-6.056-7.875-5.391a6.627 6.627 0 0 0-3.027 1.398l-.205-1.16a6.622 6.622 0 0 0-2.81-4.319 6.722 6.722 0 0 0-10.435 6.701l.208 1.184a6.627 6.627 0 0 0-7.916 2.95c-.044-.008-.084-.022-.13-.03a6.743 6.743 0 0 0-5.028 1.079 6.623 6.623 0 0 0-2.81 4.318l-.205 1.16a6.604 6.604 0 0 0-3.026-1.398c-3.686-.665-7.22 1.753-7.875 5.391l-2.96 16.772a6.697 6.697 0 0 0-10.84 3.994l-4.298 24.476c-2.548 14.451 7.138 28.282 21.59 30.83 7.005 1.236 14.058-.31 19.862-4.35a26.273 26.273 0 0 0 8.405-9.598 26.514 26.514 0 0 0 15.88 2.066c14.452-2.548 24.136-16.381 21.588-30.83l-4.295-24.476zm-40.7-19.24a3.218 3.218 0 0 1 2.43.53 3.155 3.155 0 0 1 1.338 2.064l1.138 6.439a6.555 6.555 0 0 0-1.624-.524 6.63 6.63 0 0 0-3.366.259l.208-1.184a6.72 6.72 0 0 0-2.21-6.236 3.187 3.187 0 0 1 2.087-1.349zm6.682 64.347c-2.21 12.534-14.241 20.922-26.82 18.705-12.58-2.217-21.028-14.27-18.81-26.86l4.298-24.468c.319-1.77 2.258-2.955 4.034-2.634 1.763.318 2.88 2.012 2.88 3.774l-3.921 20.265c-.165.93.399 1.822 1.331 1.986a1.685 1.685 0 0 0 1.957-1.39l3.531-20.227a.096.096 0 0 0-.023-.025v-.026l3.986-22.495c.314-1.74 2.106-2.943 3.902-2.621 1.749.315 2.924 2.038 2.621 3.805l-5.535 31.404a1.715 1.715 0 0 0 3.378.592l6.758-38.329a3.22 3.22 0 0 1 1.37-2.09 3.335 3.335 0 0 1 2.486-.531 3.281 3.281 0 0 1 2.643 3.79l-6.765 38.357a1.714 1.714 0 0 0 3.376.592l5.544-31.446a3.155 3.155 0 0 1 1.338-2.063 3.214 3.214 0 0 1 2.43-.531c1.776.32 2.911 1.98 2.593 3.782l-5.54 31.42a1.714 1.714 0 1 0 3.376.592l3.66-20.752a3.282 3.282 0 0 1 3.812-2.636c1.722.31 2.822 1.963 2.505 3.765.001 0-6.006 34.128-6.395 36.295zm16.132 6.826a23.09 23.09 0 0 1-13.916-1.868 26.892 26.892 0 0 0 1.156-4.352c.39-2.164 6.398-36.279 6.398-36.279.654-3.706-1.662-7.103-5.269-7.754a6.717 6.717 0 0 0-.718-.084L72.326 41.1a3.28 3.28 0 0 1 2.643-3.79 3.335 3.335 0 0 1 2.486.535 3.214 3.214 0 0 1 1.369 2.09l6.76 38.335a1.714 1.714 0 0 0 3.376-.592l-5.538-31.405c-.301-1.764.868-3.487 2.617-3.806 1.794-.324 3.577.879 3.89 2.622l3.967 22.494v.027l.005.024 3.289 18.65c-8.198 2.357-13.461 10.625-11.943 19.23l.01.07a1.714 1.714 0 0 0 3.376-.602c0-.019-.008-.041-.01-.062-1.292-7.323 3.564-14.337 10.85-15.653a1.715 1.715 0 0 0 1.383-1.985l-1.215-6.95h-.009l-2.19-13.335c0-1.765.803-3.458 2.566-3.777a3.236 3.236 0 0 1 3.763 2.633l4.276 24.469c2.22 12.59-6.237 24.64-18.828 26.863zM69.958 28.67a1.866 1.866 0 0 0 1.86-1.895v-15.88a1.86 1.86 0 1 0-3.72 0v15.88a1.866 1.866 0 0 0 1.86 1.894zM34.983 41.873a1.894 1.894 0 0 0 2.678-2.678L26.43 27.968a1.894 1.894 0 1 0-2.679 2.679l11.23 11.226zm67.773.557c.502 0 .984-.2 1.339-.556l11.23-11.23a1.893 1.893 0 1 0-2.679-2.676l-11.23 11.227a1.894 1.894 0 0 0 1.34 3.234zM87.515 32.409a1.892 1.892 0 0 0 2.49-.982l6.337-14.565a1.894 1.894 0 1 0-3.473-1.51l-6.336 14.561a1.893 1.893 0 0 0 .982 2.496zM50.56 30.738a1.894 1.894 0 1 0 3.524-1.388l-5.821-14.776a1.893 1.893 0 1 0-3.524 1.386l5.82 14.778zM26.458 56.915a1.894 1.894 0 0 0 .756-3.632L12.65 46.95a1.894 1.894 0 0 0-1.51 3.473l14.565 6.334c.238.104.495.158.754.158zm103.326-6.896a1.894 1.894 0 0 0-2.453-1.068l-14.78 5.825a1.894 1.894 0 0 0 1.388 3.524l14.776-5.82a1.894 1.894 0 0 0 1.069-2.461z"/></symbol><symbol viewBox="0 0 480.046 480.046" id="s-agile-arbeitsweise" xmlns="http://www.w3.org/2000/svg"><path d="M412.078 216.172l-20.25-11.914a149.692 149.692 0 0 0-1.977-7.258l14.406-21.805a8.001 8.001 0 0 0 .594-7.762 175.559 175.559 0 0 0-18.313-30.84 8.153 8.153 0 0 0-6.82-3.234l-26.844 1.32a156.194 156.194 0 0 0-5.172-5.063l1.344-26.008a7.997 7.997 0 0 0-3.383-6.953 182.25 182.25 0 0 0-31.523-17.848 7.983 7.983 0 0 0-7.492.551l-22.5 14.176a158.378 158.378 0 0 0-7.43-1.937L264.461 68.3a8.001 8.001 0 0 0-7.078-4.277h-34.719a8 8 0 0 0-7.078 4.277l-12.25 23.297c-2.5.586-4.979 1.232-7.437 1.937l-22.492-14.176a7.984 7.984 0 0 0-7.484-.555 181.884 181.884 0 0 0-31.539 17.855 7.998 7.998 0 0 0-3.375 6.945l1.344 26.012a149.491 14
</body>
</html>
<!-- Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com -->