-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththeming.html
14 lines (14 loc) · 12.7 KB
/
theming.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html lang="de"><head><title>Theming | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="ThemingDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.detheming.html"><meta property="og:title" content="Theming"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle.css"><link rel="stylesheet" href="assets/css/ide-editmode.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header></header><main><div class="c-section"><div class="g-container"><div class="g-row m-2"><div class="g-col-12"><div class="c-text c-markdown"><h1><strong>Theming</strong></h1><h2>Flexibiltät und Freiheit: Der Einsatz von Themes</h2><p>Ein modernes, zeitgemäßes Corporate Design baut heute nicht mehr auf starren Regeln auf. Viel mehr geht es darum Prinzipien zu definieren, die flexibel an die unterschiedlichsten Anforderungen angepasst werden können – immer medien- und zielgruppenadäquat.</p><p>Gerade in digitalen Kanälen müssen wir oft verschiedenste Produkte für sehr spitze Zielgruppen kommunizieren. Für unser Design System haben wir uns daher für den Einsatz von Themes entschieden. Ein Theme stellt dabei jeweils eine der Primärfarben als Akzentfarbe für klickbare Elemente in den Vordergrund. Das Cyan spielt bei jedem Theme, als markenbildende Farbe, eine übergeordnete Rolle. Dies ermöglicht ein Maximum an Freiheiten in der Gestaltung, garantiert aber gleichzeitig einen konsistenten und prägnanten Markenauftritt.</p><h3>Mit dem Einsatz der Themes möchten wir die Vielfalt der digitalen Landschaft der Stadtwerke Münster beibehalten und dabei gleichzeitig für eine besseres und barrierefreies Nutzererlebnis sorgen.</h3><p>→ Anwender des Design System haben zukünftig die Freiheit mit einem der vier Themes thematisch und zielgruppenadäquat zu kommunizieren.</p><p>→ Um trotzdem für Konsistenz zu sorgen muss eine Website, Microsite, Landingpage, App etc. sich dabei allerdings für eines der vier Themes entscheiden.</p><p>→ Für die Entwicklung bedeutet das keinerlei Mehraufwand. Welches Theme auf der Seite bzw. in der App sichtbar ist, wird über eine einzige Variable gesteuert und vererbt sich dann über die ganze Seite weiter.</p><h2>Main Theme</h2><p>Das <strong>Main Theme</strong> ist wie der Name schon sagt unser <strong>Haupt-Theme</strong> und wird z.B. auf der Corporate Website und in den meisten Apps Verwendung finden. Es verwendet das Cyan als primäre Akzentfarbe und wird um das Naturgrün für weitere interaktive Elemente ergänzt.</p><p><img src="assets/picts/Main-Theme-Banner.png" alt="Preview Main Theme"></p><h2>Sustainability Theme</h2><p>Unsere Unternehmensstrategie 2030 lautet: <em>"Die grüne Transformation der Stadtwerke Familie"</em></p><p>Das <strong>Sustainability Theme</strong> steht daher für alle Kampagnen- und Microsites rund um das Thema <strong>Nachhaltigkeit</strong>. Es verwendet das Cyan als primäre Akzentfarbe und wird um das Dunkelgrün für weitere interaktive Elemente ergänzt.</p><p><img src="assets/picts/Sustainable-Theme-Banner.png" alt="Preview Sustainability Theme"></p><h2>Dynamic ThemeDynamic-Theme-Banner</h2><p>Das <strong>Dynamic Theme</strong> ist v.a. für <strong>Kampagnen</strong> gedacht, z.B. für Landingpages, die bestimmte Produkte wie die PlusCard bewerben sollen. Aber auch für Kampagnen, die besonders eine <strong>junge Zielgruppe</strong> ansprechen sollen. Es verwendet das Korall als primäre Akzentfarbe und wird um das Cyan für weitere interaktive Elemente ergänzt.</p><p><img src="assets/picts/Dynamic-Theme-Banner.png" alt="Preview Dynamic Theme"></p><h2>Professional Theme</h2><p>Das Professional Theme dient Seiten, die ernste Themen, technische Themen oder Themen mit einer sachlichen Zielgruppenansprache behandeln. Es verwendet das Cyan als primäre Akzentfarbe und sorgt somit weiterhin für Markenkonformität.</p><p><img src="assets/picts/Professional-Theme-Banner.png" alt="Preview Professional Theme"></p></div></div></div></div></div><aside class="sidebar"><nav class="c-side-nav"> <button class="c-side-nav__nav-toggle" id="c-side-nav__toggle"><span class="c-side-nav__toggle-icon"></span></button><div class="c-side-nav__picture-wrapper"><a class="c-side-nav__picture-link" href="/"><div class="c-picture"> <img alt="Logo" src="assets/img/logo.svg"> <span class="c-badge" style="
position: absolute;
left: 101px;
bottom: -10px;
">v1.0.0</span></div></a><div class="c-cta-group"> <a class="c-cta" href="https://github.com/wirDesign-communication-AG/stadtwerke-muenster-design-system" target="_blank"><span class="c-cta__text">GitHub</span></a> <a class="c-cta" href="https://www.figma.com/file/wLXdixPS3eSOEmOtvxj6Jg/SWMS-?node-id=0%3A1" target="_blank"><span class="c-cta__text">Figma</span></a></div><div class="c-cta-group c-filter"><span class="c-input-wrapper " data-action="wrapper"><div class="c-input__container"> <input autofocus class="c-input c-filter__input" type="search" name="input" id="input" aria-label="Componentenfilter. Bitte Text eintragen." placeholder="Filter Components..."></div></span></div></div><div class="c-side-nav__nav-wrapper"><ul><li><p>Introduction</p><ul><li> <a class="" href="index.html" title="Overview">Overview</a></li><li> <a class="" href="getting-started.html" title="Getting Started">Getting Started</a></li><li> <a class="" href="accessibility.html" title="Accessibility">Accessibility</a></li><li> <a class="" href="principles.html" title="Principles">Principles</a></li><li> <a class="is-active" href="theming.html" title="Theming">Theming</a></li></ul></li><li><p>Basics</p><ul><li> <a class="" href="animation.html" title="Animation">Animation</a></li><li> <a class="" href="colors.html" title="Colors">Colors</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/colors.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-primary" data-anchor="color-primary" title="Primary">Primary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-secondary" data-anchor="color-secondary" title="Secondary">Secondary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-special" data-anchor="color-special" title="Special">Special</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-backgrounds" data-anchor="color-backgrounds" title="Backgrounds">Backgrounds</a></li></ul></li><li> <a class="" href="graphics.html" title="Graphics">Graphics</a></li><li> <a class="" href="layout.html" title="Layout">Layout</a></li><li> <a class="" href="icons.html" title="Icons">Icons</a></li><li> <a class="" href="logo.html" title="Logo">Logo</a></li><li> <a class="" href="spacing.html" title="Spacing">Spacing</a></li><li> <a class="" href="typography.html" title="Typography">Typography</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/typography.html#typo-intro" data-anchor="typo-intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-headlines" data-anchor="typo-headlines" title="Headline">Headline</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-text" data-anchor="typo-text" title="Text">Text</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-quote" data-anchor="typo-quote" title="Quote">Quote</a></li></ul></li></ul></li><li><p>Form-Elements</p><ul><li> <a class="" href="checkbox.html" title="Checkbox">Checkbox</a></li><li> <a class="" href="date-picker.html" title="Date-Picker">Date-Picker</a></li><li> <a class="" href="dropdown.html" title="Dropdown">Dropdown</a></li><li> <a class="" href="file-upload.html" title="File-Upload">File-Upload</a></li><li> <a class="" href="form.html" title="Form">Form</a></li><li> <a class="" href="input.html" title="Input">Input</a></li><li> <a class="" href="radio-button.html" title="Radio-Button">Radio-Button</a></li><li> <a class="" href="switch.html" title="Switch">Switch</a></li><li> <a class="" href="toggle-button.html" title="Toggle-Button">Toggle-Button</a></li><li> <a class="" href="tooltip.html" title="Tooltip">Tooltip</a></li></ul></li><li><p>Basic Components</p><ul><li> <a class="" href="badge.html" title="Badge">Badge</a></li><li> <a class="" href="button.html" title="Button">Button</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/button.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/button.html#standard" data-anchor="standard" title="Variationen">Variationen</a></li><li> <a class="c-side-nav__section-link" href="/button.html#cta-group" data-anchor="cta-group" title="Gruppe">Gruppe</a></li></ul></li><li> <a class="" href="chips.html" title="Chips">Chips</a></li><li> <a class="" href="eye-catcher.html" title="Eye-Catcher">Eye-Catcher</a></li><li> <a class="" href="image.html" title="Image">Image</a></li><li> <a class="" href="loader.html" title="Loader">Loader</a></li><li> <a class="" href="lottie-animation.html" title="Lottie-Animation">Lottie-Animation</a></li><li> <a class="" href="messages.html" title="Messages">Messages</a></li><li> <a class="" href="quote.html" title="Quote">Quote</a></li><li> <a class="" href="text.html" title="Text">Text</a></li><li> <a class="" href="table.html" title="Table">Table</a></li><li> <a class="" href="video.html" title="Video">Video</a></li></ul></li><li><p>Modules</p><ul><li> <a class="" href="accordion.html" title="Accordion">Accordion</a></li><li> <a class="" href="breadcrumb.html" title="Breadcrumb">Breadcrumb</a></li><li> <a class="" href="card.html" title="Card">Card</a></li><li> <a class="" href="carousel.html" title="Carousel">Carousel</a></li><li> <a class="" href="hero.html" title="Hero">Hero</a></li><li> <a class="" href="hero-carousel.html" title="Hero-Carousel">Hero-Carousel</a></li><li> <a class="" href="navigation.html" title="Navigation">Navigation</a></li><li> <a class="" href="tabs.html" title="Tabs">Tabs</a></li><li> <a class="" href="text-picture.html" title="Text-Picture">Text-Picture</a></li></ul></li></ul></div></nav></aside></main><footer><div class="c-footer p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-footer__nav-wrapper"><nav class="c-footer__nav"><ul class="c-footer__nav-list"><li class="c-footer__nav-list-item"> <a href="impressum.html" title="Impressum">Impressum</a></li><li class="c-footer__nav-list-item"> <a href="datenschutz.html" title="Datenschutz">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>