mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-30 21:51:56 +01:00
1584 lines
296 KiB
Plaintext
1584 lines
296 KiB
Plaintext
|
<!DOCTYPE html>
|
|||
|
|
<html lang="de">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
|
|||
|
|
<title>Styleguide erstellen: Diese Tools helfen</title>
|
|||
|
|
<meta name="description" content="Ein Styleguide dient als Blaupause zur Gestaltung von Elementen des Corporate Designs. Diese Tools helfen bei der Erstellung." />
|
|||
|
|
<meta name="robots" content="index, follow, noodp, noarchive" />
|
|||
|
|
<link rel="canonical" href="https://t3n.de/news/styleguide-erstellen-tools-800688/" />
|
|||
|
|
<meta property="og:type" content="article">
|
|||
|
|
<meta property="og:url" content="https://t3n.de/news/styleguide-erstellen-tools-800688/">
|
|||
|
|
<meta property="og:title" content="Styleguide erstellen: Diese Tools helfen">
|
|||
|
|
<meta property="og:description" content="Ein Styleguide dient als Blaupause zur Gestaltung von Elementen des Corporate Designs. Diese Tools helfen bei der Erstellung.">
|
|||
|
|
<meta property="og:image" content="https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tool-aufmacher.jpg?auto=format&h=&ixlib=php-3.3.1&w=">
|
|||
|
|
|
|||
|
|
<meta name="twitter:card" content="summary_large_image">
|
|||
|
|
<meta name="twitter:image" content="https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tool-aufmacher.jpg?auto=format&h=&ixlib=php-3.3.1&w=">
|
|||
|
|
<meta name="twitter:site" content="@t3n">
|
|||
|
|
<meta name="twitter:title" content="Styleguide erstellen: Diese Tools helfen">
|
|||
|
|
<meta name="twitter:description" content="Ein Styleguide dient als Blaupause zur Gestaltung von Elementen des Corporate Designs. Diese Tools helfen bei der Erstellung.">
|
|||
|
|
|
|||
|
|
<meta name="date" content="2017-03-03 08:52:58"/>
|
|||
|
|
<meta name="last-modified" content="2017-03-03 11:41:41"/>
|
|||
|
|
<meta property="og:image:width" content="976">
|
|||
|
|
<meta property="og:image:height" content="549">
|
|||
|
|
|
|||
|
|
<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: ''.split(',').filter(function(value){
|
|||
|
|
return !!value;
|
|||
|
|
}),
|
|||
|
|
pageType: 'news-post',
|
|||
|
|
loginStatus: 'nologin',
|
|||
|
|
ressort: 'entwicklung-design',
|
|||
|
|
articletype: 'listicle',
|
|||
|
|
identifier: 'news-article-800688',
|
|||
|
|
articlelength: '8'
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
window.t3nCLConfig = window.t3nCLConfig || {};
|
|||
|
|
window.t3nCLConfig.news = {"articleID":"news-article-800688","articleType":"Listicle","headline":"Styleguide erstellen: 7 Tools, die wirklich helfen","ressort":"Entwicklung & Design","slug":"styleguide-erstellen-tools","poc":false,"evergreen":false,"tags":"","loggedIn":false,"publishDate":"03.03.2017","initialPublishDate":"03.03.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-800688',
|
|||
|
|
't3nRessort': 'Entwicklung & Design',
|
|||
|
|
't3nArticleType': 'Listicle',
|
|||
|
|
't3nAuthor': 'Daniel Hüfner',
|
|||
|
|
't3nPublished': '03032017',
|
|||
|
|
't3nInitialPublished': '03.03.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\":\"800688\",\"slug\":\"styleguide-erstellen-tools\",\"ressort\":\"Entwicklung & Design\",\"portal\":\"news\",\"type\":\"Listicle\",\"poc\":\"false\",\"evergreen\":\"false\",\"tags\":[],\"author\":\"Daniel H\u00fcfner\",\"loggedIn\":\"false\",\"publishDate\":\"03.03.2017\",\"initialPublishDate\":\"03.03.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: "800688",
|
|||
|
|
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: "2017-03-03T08:52:58+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 = 'agenturen,collaboration,font,illustrator,linux,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 » Styleguide erstellen: 7 Tools, die wirklich helfen Kommentar-Feed" href="https://t3n.de/news/styleguide-erstellen-tools-800688/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=800688' />
|
|||
|
|
<!-- 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-erstellen-tools-800688/"
|
|||
|
|
},
|
|||
|
|
"headline": "Styleguide erstellen: 7 Tools, die wirklich helfen",
|
|||
|
|
"datePublished": "2017-03-03T08:52:58+0100",
|
|||
|
|
"dateModified": "2017-03-03T11:41:41+0100",
|
|||
|
|
"author": {
|
|||
|
|
"@type": "Person",
|
|||
|
|
"name": "Daniel Hüfner"
|
|||
|
|
},
|
|||
|
|
"description": "Ein Styleguide dient als Blaupause zur Gestaltung von Elementen des Corporate Designs. Diese Tools helfen bei ",
|
|||
|
|
"image": {
|
|||
|
|
"@type": "ImageObject",
|
|||
|
|
"url": "https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tool-aufmacher.jpg?auto=format&h=&ixlib=php-3.3.1&w=",
|
|||
|
|
"width": 976,
|
|||
|
|
"height": 549
|
|||
|
|
},
|
|||
|
|
"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 dient als Blaupause zur Gestaltung von Elementen des Corporate Designs. Diese Tools helfen bei der Erstellung.\r\nMarkly\r\nWer einen Styleguide erstellen will, muss viel Zeit investieren. Mit Markly lässt sich dieser Prozess deutlich beschleunigen. Zuvor erstellte Entwürfe können damit direkt von Photoshop oder Sketch importiert und anschließend mit nur wenigen Klicks um wichtige Informationen wie Abstände oder genutzte Schriftarten ergänzt werden. Auch das Aussehen der Linien und anderer Elemente, etwa die Farbe, lassen sich ohne weiteres ändern. Markly kostet einmalig 49,99 US-Dollar.\r\n\r\nBranding Manual\r\n[caption id=\"attachment_800700\" align=\"alignnone\" width=\"620\"] Ein Online-Styleguide lässt sich mit Branding Manual erstellen. (Bild: Branding Manual)[/caption]\r\n\r\nEine Alternative finden Designer mit Branding Manual. Der Online-Dienst verspricht die Gestaltung aufwendiger Styleguides ohne Programmierkenntnisse. Verglichen mit der Erstellung eines PDFs soll der Prozess nach Angaben der Seite bis zu zehn Mal schneller gehen. Branding Manual liefert bereits vorgefertigte Styleguide-Templates mit, die nach Belieben angepasst werden können. Ab sechs US-Dollar pro Monat ist man dabei. Eine Galerie zeigt, was mit dem Tool möglich ist.\r\nOpen Brand\r\nWenn auch eher was für Profis, so ist Open Brand trotzdem einen Blick wert. Die mächtige Kollaboration-Suite für Designer ermöglicht unter anderem die Erstellung von Styleguides. Zum Funktionsumfang gehören beispielsweise vorgefertigte Templates, deren Elemente wie Logos, Farbpaletten, Schriftarten oder Fotos sich nach Belieben verändern lassen. Inklusive Photoshop-, Illustrator- und Indesign-Plugins kostet der Dienst ab 9,95 US-Dollar pro Monat und Nutzer.\r\nFrontify\r\n[caption id=\"attachment_635675\" align=\"alignnone\" width=\"620\"] Frontify erstellt online ansprechende Styleguides. (Screenshot: t3n)[/caption]\r\n\r\nÜblicherweise werden Styleguides von Profis erstellt. Aber auch Normalnutzer müssen nicht zwingend bei einer Agentur anrufen – vorausgesetzt, sie nutzen Dienste wie Frontify. Das Online-Werkzeug generiert auf Basis einzelner Elemente ansprechende Gestaltungsrichtlinien in wenigen Minuten. Dazu muss etwa nur ein Firmenlogo hochgeladen oder die gewünschte Farbpalette definiert werden. Auch die in Schriftzügen und Briefköpfen verwendeten Fonts kann der Nutzer einpflegen. Praktisch ist auch die Möglichkeit, eigene Icon-Sets hochzuladen. Statt eines PDF lässt sich der fertige Styleguide später auch online abrufen. Die Nutzung von Frontify als White-Label-Version kostet monatlich rund acht US-Dollar.\r\n\r\nStylify.me\r\nMan muss ja nicht gleich aus allen Rohren schießen, nicht wahr? Wer an einem Styleguide zu einer Website arbeitet, kann sich mit Hilfe von Stylify einen ersten Überblick zu den wesentlichen Elementen verschafften. Einfach eine URL eingeben, Enter drücken und schon werden Farbpaletten und Fonts korrekt ausgegeben.\r\nZippypixels\r\n[caption id=\"attachment_800898\" align=\"alignnone\" width=\"620\"] Zippypixels bietet Templates für gedruckte Styleguides. (Bild: Zippypixels)[/caption]\r\n\r\nOft werden Styleguides nicht nur als PDF, sondern als gedrucktes Handbuch ausgegeben. Das Gratis-Template von Zippypixels liefert Designern einen Vorgeschmack auf die finale Optik. Noch aufwendiger ist das 17 US-Dollar teure Styleguide-Template, das es auch bei Zippypixels zum Download gibt.\r\nHUGE\r\nDer Styleguide von HUGE versteht sich als Toolkit, das auf dem lokalen Client installiert werden muss. Es basiert auf Node.js und Harp.js und kann somit auf Mac, Windows und Linux genutzt werden. Damit auch Terminal-Neulinge mit der Installation nicht überfordert sind, gibt es für den Mac ein Installations- und Export-Tool. Weitere Informationen haben wir in diesem Artikel zusammengefasst.\r\n\r\nPassend zum Thema:\r\n\r\n \t8 Beispiele für einen perfekten Styleguide\r\n \tVon den Großen lernen: 32 Styleguides führender Netzkonzerne auf einen Blick\r\n \t4
|
|||
|
|
}
|
|||
|
|
</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-erstellen-tools-800688/" 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-erstellen-tools-800688/" 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-800688">
|
|||
|
|
<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-erstellen-tools-800688/",
|
|||
|
|
"name": "Styleguide erstellen: Diese Tools helfen"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
</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">Styleguide erstellen: Diese Tools helfen</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">
|
|||
|
|
Styleguide erstellen: 7 Tools, die wirklich helfen
|
|||
|
|
</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-erstellen-tools-800688%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-erstellen-tools-800688%2F%3Futm_source%3Dfacebook.com%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons&t=Styleguide%20erstellen%3A%207%20Tools%2C%20die%20wirklich%20helfen" 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=Styleguide%20erstellen%3A%207%20Tools%2C%20die%20wirklich%20helfen&url=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-erstellen-tools-800688%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-erstellen-tools-800688%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=Styleguide%20erstellen%3A%207%20Tools%2C%20die%20wirklich%20helfen&body=Sehr%20empfehlenswerter%20Artikel%3A%20https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-erstellen-tools-800688%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,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAjCAIAAABD6y5WAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAKX0lEQVRYhX2ZW5MjuXWEMw9QF87MrrSSw5LD//9v+cERtiWtJa1W001WASfTD0Cxe3ZmXYFAkNUk46vEuTf5owHA1xIgIK89gX69GEtCCjZ0fQUEAyBIBEAg3q3y5VteOwHiE7GOLxECGnEHGr68jG9e9du33z/ML+76etQvbhvkN37k63uc2w/ETqxAwfyqgQRO4AH8BOhXyd6jPzm+jfvuvt9efflJAn7jeq7nHwkQH4nfAR+JjViJShQgONHHeXfgBP4IvAJ/B/7xTWoPdH8F7V9bupZhXx8euALijf4r4j8Q3xEfiD2wEUtgIQoRRFxHocs829De+D3wM/Bn4Od3xO9U//9xhxSDWwkLEmToqfrTeMfB8z33vxM/BL4jPgZugT2wBVZiCdSBDpDzyN6jH8aDuBufgE/AX4D/8i/pf4kewm6swiIUISZ9KrMrj9SLpDd0AgQvsefDxG+J3wO/AT4RH4kPgRuxB/bA+uvoMygYp3ESD+MVuAEbsBgF+M8v6esfDAJhVKMY1ahCMYpQBApUMruVVqYyU11u8mmc4Ik4SbPU8O7yAfhgfER8GNDE7bKTnb+KPnhk9MvWD+NO7MBqVKAAMJrxP+/R/9UAEEYY5bl0oWeP7MiO7O7pTKVSTrsbaYohBqhAVHilt/DuckO5ATfOtV/0K7HGV+iGgSTS09APYDNWoALFoGEjjQfw90v7+r1BgE/0CzqEkj2yMTuzoXf37kynJKUgI0EzzECUQCnQwrKpbqHduqHsiPEAO7ET27D1wELUuMILAEKwjA438AQe5gJUIHx5gpFGBw7jdUSYTwA90Z/Ch1DUQy2yRZ7ojb27N/RUptOyZQg0AlEQJVSrs6Ku1BZlV92t3eWG2MEd3IkNMyxeqitgzojrhHP6KCtZPLwgbMgQZnQA8N/Gj0D94BkPnughFGVRH9zsJ/uJ1tAa3oS3DY08GoWlhmpxrVhW1i3qFrmr7iq7Y3fsiN3ciBVYgQWucIGD5ohf9gjqFQgwACBg2hRCjjTTkEFjBf7FqDuAd6qHUexQD7WSjXlGP9hOtGPQT7ORbRgEy0AvtRYvFcuKZeWysW5R96i7yq7YHZu5mRuwTHQUON5SnXPAzmA1oRPsjm52Rzps0lyA74y6XqE48KTv4V6yh072M/rBfqA9cJ44T/Tmnk75ql5YKkuNZalaq9cFy8p147JF3aKuUdYoq2KNWMRKLkS1K1Do8DAY2yDMYTqmgESsZjd3x6DXhb6Cp1mXd4kvgLBCGcqnobMfbA+cdx4HzsPnOcwGMkCwsFTWWvpacq3aFq8L2oJ14VJZxyqMazFG/g+EhsHA8DhEv4U4VrOai2MxN0d3pKmhutnAWt6jG7TCGe6hHurMM/rJ9sA56O8+jmH0yOElZUgey1Zzrdqrt4K1YAuuwSW4kJUczKN6BIaFxzi5qyICRqYbYYtiEYtZHdVcp/CkWcBu1lFCcIRIOCBCdNKJbMyGPNEPtDuPVzxeeTxwHG4NmTTAYFm4rLFuzJ15Uju9wSOjr8BqzkQnFINyqIAGBcY0bQMa0hs2LdCEGYoYJ6BYTY2bYPdV9Hpqb0McoU8JpdWRDf1EO3Decbzi/uLHHeeJ3iEPdK+b1919d97k074JXdiFTKawpGuiJkp30EHRBQ5Q77OpBaQpQaYMiFDQHOdQHHXQA8WsIuDpqYJpw6IFi05nMjt7Yz/RHjhe8XjB/QWDXiLCZeG6Y7uhf0A2qncnkTFXD6/EQlS6QsUKFVYxgxFv6AbSs4xJU6JMWRZh0kErzGIaSLPmFdfhEZssOGxZIdHJTGZHb2gN54HjjvtnvL7geKB1gCwL11vuH0tvNbvHoVlX2Tkyiey0UipSUY0Uy0Tns+gdqnegm2MN15RoCA6Y9OzKasNUnQBt2vFup0wllchkb24Nx4HH3a+f8frZxwGBZeX2MW4tela5eoo3+0FDlixpkZQqqVIVpUQJRjCu6tEYMZFpdLANeoyIPp7BAuXhJqjnUN2DG/G2X/Q2ZaSQQu9uzcfp+93//IzXFzchNu6Nnxw5zDEWxMJYGZ0cxWAHut3tVaWr1Cy1RglGYQRJgiOvMsHEIGYDm6ND3dGHIV27gPrwZS0G7TDCjpFfxzMKFGBjGEK3m/Tofjn0txf/dJg7fgselbkUrxXrEssSy8qyoayIBm4DXe6qi7SkakYtMdGD5PBGaqAzutkQDT6B0z6BBrapwoV+FQJT7zLoR+7yDLszZooS1KGTekX+KYVToO8n7o1oEa2WcyltjbZG2+PcojRGQzRjM7q9Sl1ahs2UKEEWkjHRGUkm0BgdPuETbBi9Ac5xIMNg7gIACiGEPMtdvZU0E30YjmL4Wc/SH7Vj7chESUA/GYtiyWXJpeZW+176Lfoe/WS5IYbZpN2lVepZao1aGCUigyFEmCEiGZ3udINP4sRcB9nABnYwwfoqcKK7vFvx7JJMvtl8pKO7di1n207cDvBAPLCcCP3I+IRt923Th1Ufl/xY82PtLUqP6GSCMtJOO6VFkTUiYzjssFTRGUiy0W1wkwd5IA7HyTif6HcNQ3+DrnIRyrQcUIBm7ElHR2kup5eHt1fc/oH4K4jZ0AReiO+Bw7dT/3b6h0Xnkr1kltQwiatiGSaZilIiFCwFYQcUSDGDjXESJ3EQD/IgH+BQqpEdrPcE4ZBKqspV1tgTkmP6KCzITLA5TpQ76mcuf8F2zGw2epqCR6ARHfeG/2j6Y1dvGpmU0x1n0WKHHVKpI5QJKAOdGe52o8/AQTyCD/AB3hl3x4Nxmo2sZ4pAkTUmcjnGFYLkdIyMPAZ1RhdPx8PlleVvrAeWq4yY7djw5hnP03/qrl01VXvWErX0EmP2YiKIMuQPFRbAcFBF3dGNFjiAgzzAB3mPeEW8Ml4dD8ZhVEk0aHEkO43e37qSIK/kmEI3utHMu+MlClCuAds1WawzNV79g/4sf5f6kDoy18TSWcMlytUfFduznjRUKCitZje4AWfgNA7wYd7BF8RnxmfwFayRJkyJQ+9LeKcsOUcTOvKhdT3ANdHkLGKfI9D1OVCaVt2sZjUppZ7sJTOHI7rTHPiATBQKEtzhDjdi0oNn8DDv5Cv4M/i/iM9grRLtsIpU0iHFfAwjPS1n7rY0XGz0SF9dnvPP8j6szlOT0+YUJ5F0IfKqvUiBNJ3UQO905zjkOeE4zTv5T/AzCLCuKcCUygjaqZBDDo30I6SZsnyN7EQpZLwVWJwaz5HPu4xAcRRNEByWnoWphBRDGHmUKSDEUfG5293oQudI/uzmiJU/XwVXrRZn/e+QhtvHk08eekPitVOq0pfoAowPmjO0yW3Q39MVGv6L0X9as6UQJYAMBkPjNJMWfeXu6+xnMTcfYE6/qkaTdWV+OeTxlhZ09S2z9BwZ1cWi5nTkTfXl4n5T3Te6cghvjihr+rrk641mczknPLNo9rNufjeKHuysYRCGHZg1zBx/2DP+Xl0XnoWkFfZin2+D7ZnYLuJrLgUvcJmue/1bAe9+97owU9X4d4lnfHouXPszPBD/B9hX1+C7VqmRAAAAAElFTkSuQmCC" data-src="https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tool-aufmacher.jpg?auto=format%2Ccompress&fit=crop&h=350&ixlib=php-3.3.1&q=75&w=620" width="620" height="350" alt="Styleguide erstellen: 7 Tools, die wirklich helfen" title="Styleguide erstellen: 7 Tools, die wirklich helfen">
|
|||
|
|
<noscript>
|
|||
|
|
<img class="" src="https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tool-aufmacher.jpg?auto=format%2Ccompress&fit=crop&h=350&ixlib=php-3.3.1&q=75&w=620" width="620" height="350" alt="Styleguide erstellen: 7 Tools, die wirklich helfen" title="Styleguide erstellen: 7 Tools, die wirklich helfen">
|
|||
|
|
</noscript>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="o-grid">
|
|||
|
|
<figcaption class="u-nopadded tg-noadgoal">
|
|||
|
|
Diese Tools helfen bei der Erstellung eines Styleguides. (Bild: Branding Manual)
|
|||
|
|
</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="2017-03-03 08:52:58">03.03.2017, 08:52 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 dient als Blaupause zur Gestaltung von Elementen des Corporate Designs. Diese Tools helfen bei der Erstellung.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="c-article__headline" id="Markly">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#Markly">
|
|||
|
|
<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>Markly</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<div id="p13" class="c-ad -p13 "></div>
|
|||
|
|
<p>Wer einen Styleguide erstellen will, muss viel Zeit investieren. Mit <a href="http://marklyapp.com/">Markly</a> lässt sich dieser Prozess deutlich beschleunigen. Zuvor erstellte Entwürfe können damit direkt von Photoshop oder Sketch importiert und anschließend mit nur wenigen Klicks um wichtige Informationen wie Abstände oder genutzte Schriftarten ergänzt werden. Auch das Aussehen der Linien und anderer Elemente, etwa die Farbe, lassen sich ohne weiteres ändern. Markly kostet einmalig 49,99 US-Dollar.</p>
|
|||
|
|
<div class="c-article__headline" id="">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#">
|
|||
|
|
<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></span></h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="c-article__headline" id="Branding_Manual">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#Branding_Manual">
|
|||
|
|
<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>Branding Manual</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<div id="attachment_800700" class="wp-caption alignnone" style="max-width: 630px;">
|
|||
|
|
<img loading="lazy" class="size-large wp-image-800700" src="https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tools-branding-manual-620x244.png?auto=format%2Ccompress&fit=crop&h=244&ixlib=php-3.3.1&q=75&w=620" alt="" width="620" height="244"><p class="wp-caption-text">Ein Online-Styleguide lässt sich mit Branding Manual erstellen. (Bild: Branding Manual)</p>
|
|||
|
|
</div>
|
|||
|
|
<p>Eine Alternative finden Designer mit <a href="http://brandingmanual.com">Branding Manual</a>. Der Online-Dienst verspricht die Gestaltung aufwendiger Styleguides ohne Programmierkenntnisse. Verglichen mit der Erstellung eines PDFs soll der Prozess nach Angaben der Seite bis zu zehn Mal schneller gehen. Branding Manual liefert bereits vorgefertigte Styleguide-Templates mit, die nach Belieben angepasst werden können. Ab sechs US-Dollar pro Monat ist man dabei. Eine <a href="http://brandingmanual.com/showcase.html">Galerie</a> zeigt, was mit dem Tool möglich ist.</p>
|
|||
|
|
<div class="c-article__headline" id="Open_Brand">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#Open_Brand">
|
|||
|
|
<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>Open Brand</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<p>Wenn auch eher was für Profis, so ist <a href="https://openbrand.com">Open Brand</a> trotzdem einen Blick wert. Die mächtige Kollaboration-Suite für Designer ermöglicht unter anderem die Erstellung von Styleguides. Zum Funktionsumfang gehören beispielsweise vorgefertigte Templates, deren Elemente wie Logos, Farbpaletten, Schriftarten oder Fotos sich nach Belieben verändern lassen. Inklusive Photoshop-, Illustrator- und Indesign-Plugins kostet der Dienst ab 9,95 US-Dollar pro Monat und Nutzer.</p>
|
|||
|
|
<div id="p4" class="c-ad -p4 "></div>
|
|||
|
|
<div class="c-article__headline" id="Frontify">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#Frontify">
|
|||
|
|
<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>Frontify</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<div id="attachment_635675" class="wp-caption alignnone" style="max-width: 630px;">
|
|||
|
|
<img loading="lazy" class="size-large wp-image-635675" src="https://assets.t3n.sc/news/wp-content/uploads/2015/09/styleguides_frontify-620x349.jpg?auto=format%2Ccompress&fit=crop&h=349&ixlib=php-3.3.1&q=75&w=620" alt="" width="620" height="349"><p class="wp-caption-text">Frontify erstellt online ansprechende Styleguides. (Screenshot: t3n)</p>
|
|||
|
|
</div>
|
|||
|
|
<p>Üblicherweise werden Styleguides von Profis erstellt. Aber auch Normalnutzer müssen nicht zwingend bei einer Agentur anrufen – vorausgesetzt, sie nutzen Dienste wie <a href="https://frontify.com/">Frontify</a>. Das Online-Werkzeug generiert auf Basis einzelner Elemente ansprechende Gestaltungsrichtlinien in wenigen Minuten. Dazu muss etwa nur ein Firmenlogo hochgeladen oder die gewünschte Farbpalette definiert werden. Auch die in Schriftzügen und Briefköpfen verwendeten Fonts kann der Nutzer einpflegen. Praktisch ist auch die Möglichkeit, eigene Icon-Sets hochzuladen. Statt eines PDF lässt sich der fertige Styleguide später auch online abrufen. Die Nutzung von Frontify als White-Label-Version kostet monatlich rund acht US-Dollar.</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 & Datenschutz" class="u-link -underline" target="_blank">Hinweis zum Newsletter & 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="">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#">
|
|||
|
|
<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></span></h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="c-article__headline" id="Stylify_me">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#Stylify_me">
|
|||
|
|
<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>Stylify.me</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<p>Man muss ja nicht gleich aus allen Rohren schießen, nicht wahr? Wer an einem Styleguide zu einer Website arbeitet, kann sich mit Hilfe von <a href="http://stylifyme.com">Stylify</a> einen ersten Überblick zu den wesentlichen Elementen verschafften. Einfach eine URL eingeben, Enter drücken und schon werden Farbpaletten und Fonts korrekt ausgegeben.</p>
|
|||
|
|
<div class="c-article__headline" id="Zippypixels">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#Zippypixels">
|
|||
|
|
<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>Zippypixels</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<div id="attachment_800898" class="wp-caption alignnone" style="max-width: 630px;">
|
|||
|
|
<img loading="lazy" class="size-large wp-image-800898" src="https://assets.t3n.sc/news/wp-content/uploads/2017/03/styleguide-erstellen-tool-2-1-620x349.jpg?auto=format%2Ccompress&fit=crop&h=349&ixlib=php-3.3.1&q=75&w=620" alt="" width="620" height="349"><p class="wp-caption-text">Zippypixels bietet Templates für gedruckte Styleguides. (Bild: Zippypixels)</p>
|
|||
|
|
</div>
|
|||
|
|
<p>Oft werden Styleguides nicht nur als PDF, sondern als gedrucktes Handbuch ausgegeben. Das <a href="http://zippypixels.com/product/print/brand-books/cool-blue-free-brand-guidelines-template/">Gratis-Template von Zippypixels</a> liefert Designern einen Vorgeschmack auf die finale Optik. Noch aufwendiger ist das <a href="http://zippypixels.com/product/print/brand-books/classic-corporate-identity-guidelines-template/">17 US-Dollar</a> teure Styleguide-Template, das es auch bei Zippypixels zum Download gibt.</p>
|
|||
|
|
<div id="p6" class="c-ad -p6 "></div>
|
|||
|
|
<div class="c-article__headline" id="HUGE">
|
|||
|
|
<h3><span class="c-article__wrapper">
|
|||
|
|
<a class="c-article__anchor tg-headline-ankerlink" href="#HUGE">
|
|||
|
|
<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>HUGE</span></h3>
|
|||
|
|
</div>
|
|||
|
|
<p>Der Styleguide von <a href="http://hugeinc.github.io/styleguide/index.html">HUGE</a> versteht sich als Toolkit, das auf dem lokalen Client installiert werden muss. Es basiert auf Node.js und Harp.js und kann somit auf Mac, Windows und Linux genutzt werden. Damit auch Terminal-Neulinge mit der Installation nicht überfordert sind, gibt es für den Mac ein Installations- und Export-Tool. Weitere Informationen haben wir <a href="https://t3n.de/news/styleguides-637033/">in diesem Artikel</a> zusammengefasst.</p>
|
|||
|
|
<p><strong>Passend zum Thema:</strong></p>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong><a href="https://t3n.de/news/styleguide-beispiele-794708/">8 Beispiele für einen perfekten Styleguide</a></strong></li>
|
|||
|
|
<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/4-gruende-fuer-style-guide-643857/">4 Gründe für einen Style-Guide</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/023130f84b044e86a638cba4bfb9ef0e" 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-erstellen-tools-800688%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-erstellen-tools-800688%2F%3Futm_source%3Dfacebook.com%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-buttons&t=Styleguide%20erstellen%3A%207%20Tools%2C%20die%20wirklich%20helfen" 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=Styleguide%20erstellen%3A%207%20Tools%2C%20die%20wirklich%20helfen&url=https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-erstellen-tools-800688%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-erstellen-tools-800688%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=Styleguide%20erstellen%3A%207%20Tools%2C%20die%20wirklich%20helfen&body=Sehr%20empfehlenswerter%20Artikel%3A%20https%3A%2F%2Ft3n.de%2Fnews%2Fstyleguide-erstellen-tools-800688%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/agenturen/" class="c-tag__item">Agenturen</a>
|
|||
|
|
<a href="/tag/collaboration/" class="c-tag__item">Collaboration</a>
|
|||
|
|
<a href="/tag/font/" class="c-tag__item">Font </a>
|
|||
|
|
<a href="/tag/illustrator/" class="c-tag__item">Illustrator</a>
|
|||
|
|
<a href="/tag/linux/" class="c-tag__item">Linux</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-800688"},
|
|||
|
|
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-erstellen-tools-800688/" 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">
|
|||
|
|
Schreib den ersten Kommentar!
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="c-comment">
|
|||
|
|
<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-erstellen-tools-800688/#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-erstellen-tools-800688%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="c44047bb67" name="c44047bb67" 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", "a7411e75d71d4ff4a004009729d5c9d0" );document.getElementById("c44047bb67").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=800688&srk=d03ffa20323b6723f8ce60494ea2de47&sra=s&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='800688' id='comment_post_ID' />
|
|||
|
|
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
|
|||
|
|
</p></form> </div><!-- #respond -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="//js.smartredirect.de/js/?h=8pk0393K"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
dataLayer.push(
|
|||
|
|
{"event":"gaTriggerEvent","gaEventCategory":"RessortPageviews","gaEventAction":"Entwicklung & Design","gaEventLabel":"","gaEventValue":100}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"agenturen","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"034a9fc4-42e6-413a-9931-7dd473e92493","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"collaboration","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"9636b00d-5fb1-40ee-ae36-7794fea851d8","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"font","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"449ff9ac-a126-4788-83ec-672229ec7fd7","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"illustrator","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"b6d1b38a-92d8-4845-b9f5-9194f72b93c5","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"TagPageviews","gaEventAction":"linux","gaEventLabel":"","gaEventValue":20}, {"event":"gaTriggerEvent","gaEventCategory":"NodeIdentifierViews","gaEventAction":"5950d2e3-c68d-4108-8d93-b50ca6c77c29","gaEventLabel":"","gaEventValue":20} );
|
|||
|
|
</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-erstellen-tools-800688/">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> •
|
|||
|
|
</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
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<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 -->
|