From e72f7ce05ce8ab4561d94dfdb3de1ea88f1070b6 Mon Sep 17 00:00:00 2001
From: cnoss <cnoss@users.noreply.github.com>
Date: Thu, 11 Jul 2024 09:10:06 +0000
Subject: [PATCH] deploy: a919ead06343318f6e9d7fcf3a4410a2e2128a60

---
 presentations/misc/pen-and-paper/120-los-gehts/index.html     | 2 +-
 presentations/misc/pen-and-paper/index.html                   | 2 +-
 presentations/misc/pps-praesentieren/020-interlude/index.html | 2 +-
 presentations/misc/pps-praesentieren/040-interlude/index.html | 2 +-
 presentations/misc/pps-praesentieren/070-gehirn/index.html    | 2 +-
 presentations/misc/pps-praesentieren/index.html               | 2 +-
 presentations/misc/the-web-warmup/010-internet/index.html     | 2 +-
 presentations/misc/the-web-warmup/40-deeper/index.html        | 2 +-
 presentations/misc/the-web-warmup/index.html                  | 2 +-
 .../about-screendesign/010-dataforest-intro/index.html        | 2 +-
 .../about-screendesign/020-dataforest-form/index.html         | 2 +-
 .../about-screendesign/030-db-zuganzeiger/index.html          | 2 +-
 .../screendesign/about-screendesign/040-dive/index.html       | 2 +-
 .../screendesign/about-screendesign/120-reisen/index.html     | 2 +-
 .../screendesign/about-screendesign/140-goldhandel/index.html | 2 +-
 .../about-screendesign/150-edv-service/index.html             | 2 +-
 .../screendesign/about-screendesign/160-schrift/index.html    | 2 +-
 .../screendesign/about-screendesign/245-eva/index.html        | 2 +-
 .../screendesign/about-screendesign/250-leitfaden/index.html  | 2 +-
 presentations/screendesign/about-screendesign/index.html      | 2 +-
 .../005-was-ist-design-intro/index.html                       | 2 +-
 .../030-how-to-digital-products/index.html                    | 2 +-
 .../040-designs-bewerten/index.html                           | 2 +-
 .../design-in-der-medieninformatik/050-design-is/index.html   | 2 +-
 .../060-gutes-design-erkennen/index.html                      | 2 +-
 .../070-design-basics/index.html                              | 2 +-
 .../design-in-der-medieninformatik/100-lay-out/index.html     | 2 +-
 .../110-visuelle-eigenschaften/index.html                     | 2 +-
 .../115-lay-out-beschreiben/index.html                        | 2 +-
 .../screendesign/design-in-der-medieninformatik/index.html    | 2 +-
 .../screendesign/eindeutigkeit/030-beispiele/index.html       | 2 +-
 .../screendesign/eindeutigkeit/040-beispiele/index.html       | 2 +-
 presentations/screendesign/eindeutigkeit/index.html           | 2 +-
 presentations/screendesign/farben/020-grundlagen/index.html   | 2 +-
 .../farben/030-wechselwirkungen-farbkontraste/index.html      | 2 +-
 presentations/screendesign/farben/040-farbwirkung/index.html  | 2 +-
 presentations/screendesign/farben/050-lesbarkeit/index.html   | 2 +-
 presentations/screendesign/farben/060-farbenlesen/index.html  | 2 +-
 .../screendesign/farben/070-farbe-zum-orientieren/index.html  | 2 +-
 .../screendesign/farben/090-farbe-zum-akzentuieren/index.html | 2 +-
 .../farben/095-farbe-zum-emotionalisieren/index.html          | 2 +-
 presentations/screendesign/farben/index.html                  | 2 +-
 .../flow-and-transition/020-raeum-lichkeit/index.html         | 2 +-
 presentations/screendesign/flow-and-transition/index.html     | 2 +-
 .../screendesign/gestaltgesetze/020-gesetz-naehe/index.html   | 2 +-
 .../gestaltgesetze/040-gesetz-gute-gestalt/index.html         | 2 +-
 .../gestaltgesetze/050-gesetz-gute-fortsetzung/index.html     | 2 +-
 .../gestaltgesetze/060-gesetz-geschlossenheit/index.html      | 2 +-
 .../gestaltgesetze/070-gesetz-erfahrung/index.html            | 2 +-
 .../080-gesetz-gemeinsames-schicksal/index.html               | 2 +-
 .../screendesign/gestaltgesetze/100-beispiele/index.html      | 2 +-
 presentations/screendesign/gestaltgesetze/index.html          | 2 +-
 .../screendesign/interface-inventar/010-bespiele/index.html   | 2 +-
 .../interface-inventar/020-gestaltungsziel/index.html         | 2 +-
 .../screendesign/interface-inventar/030-form-space/index.html | 2 +-
 .../screendesign/interface-inventar/040-farbe/index.html      | 2 +-
 .../screendesign/interface-inventar/050-media/index.html      | 2 +-
 .../screendesign/interface-inventar/055-typo-satz/index.html  | 2 +-
 .../interface-inventar/060-interaktion/index.html             | 2 +-
 presentations/screendesign/interface-inventar/index.html      | 2 +-
 presentations/screendesign/layout/010-das-layout/index.html   | 2 +-
 .../screendesign/layout/020-gestaltungsraster/index.html      | 2 +-
 presentations/screendesign/layout/030-scribbles/index.html    | 2 +-
 presentations/screendesign/layout/040-raster-icons/index.html | 2 +-
 presentations/screendesign/layout/index.html                  | 2 +-
 .../040-bevorzugte-zahlen/index.html                          | 2 +-
 .../060-systematische-abstaende/index.html                    | 2 +-
 .../screendesign/proportionen-und-abstaende/index.html        | 2 +-
 presentations/screendesign/punkt/040-parameter/index.html     | 2 +-
 presentations/screendesign/punkt/index.html                   | 2 +-
 .../screendesign/raeumlichkeit/070-beispiele/index.html       | 2 +-
 presentations/screendesign/raeumlichkeit/index.html           | 2 +-
 .../020-semantisches-differenzial/index.html                  | 2 +-
 .../030-moodboards/index.html                                 | 2 +-
 .../semantisches-diff-axis-maps-moodboards/index.html         | 2 +-
 .../semiotik/010-kommunikationsmodelle/index.html             | 2 +-
 presentations/screendesign/semiotik/030-ampel/index.html      | 2 +-
 presentations/screendesign/semiotik/index.html                | 2 +-
 .../screendesign/typographie/030-typosgraphein/index.html     | 2 +-
 .../screendesign/typographie/040-historie/index.html          | 2 +-
 .../screendesign/typographie/055-schriftgruppen/index.html    | 2 +-
 .../typographie/060-schriftgruppen-din/index.html             | 2 +-
 .../typographie/070-schriftgruppen-beinert /index.html        | 2 +-
 .../screendesign/typographie/090-buchstabenabstand/index.html | 2 +-
 presentations/screendesign/typographie/100-geviert/index.html | 2 +-
 .../screendesign/typographie/110-ligaturen/index.html         | 2 +-
 .../screendesign/typographie/120-laufweite/index.html         | 2 +-
 .../typographie/130-schriftschandtaten/index.html             | 2 +-
 .../screendesign/typographie/140-schriftmischung/index.html   | 2 +-
 .../screendesign/typographie/160-spaltenbreite/index.html     | 2 +-
 .../screendesign/typographie/170-grauwert/index.html          | 2 +-
 presentations/screendesign/typographie/index.html             | 4 ++--
 .../visuelle-wahrnehmung/050-40-vereinfachung/index.html      | 2 +-
 presentations/screendesign/visuelle-wahrnehmung/index.html    | 2 +-
 94 files changed, 95 insertions(+), 95 deletions(-)

diff --git a/presentations/misc/pen-and-paper/120-los-gehts/index.html b/presentations/misc/pen-and-paper/120-los-gehts/index.html
index 87abe279..bdb96e78 100644
--- a/presentations/misc/pen-and-paper/120-los-gehts/index.html
+++ b/presentations/misc/pen-and-paper/120-los-gehts/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Los geht's // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">Lean back</h1><h2 class="js-delay subtitle">Lean forward</h2></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Los geht's // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Lean back</h1><h2 class="js-delay subtitle">Lean forward</h2></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/pen-and-paper/index.html b/presentations/misc/pen-and-paper/index.html
index 8e8b09d1..3343216a 100644
--- a/presentations/misc/pen-and-paper/index.html
+++ b/presentations/misc/pen-and-paper/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Pen & Paper // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="image" class="mi-slide image" data-background-image="./images/sketching-in-real-world.jpg" data-transition="zoom"></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Pen &amp; Paper</h1><h2>Hey, da ist ja auch ne rechte Hirnhälfte!</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Thanks to David Gray</h1><h2 class="js-delay subtitle"><a href="https://medium.com/the-xplane-collection/in-defense-of-the-visual-alphabet-a8dcca7cf151">In defense of the visual alphabet</a></h2></div></section></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Christian Noss</h1><div class="fragment"><p>Designer <span class="is-purple">//</span> Kommunikationsdesign in der Medieninformatik <span class="is-purple">//</span> Geschäftsführender Gesellschafter der Klickmeister GmbH</p></div></div></section><section data-slide-class="screenshot" class="mi-slide screenshot" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/brain.jpg" alt="./images/brain.jpg" width="100%"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="question" class="question"><div><h1 class="title">Was guckst Du?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p1.png" alt="./images/pferde/p1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p2.png" alt="./images/pferde/p2.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p3.png" alt="./images/pferde/p3.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p4.png" alt="./images/pferde/p4.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p5.png" alt="./images/pferde/p5.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p6.jpg" alt="./images/pferde/p6.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p7.jpg" alt="./images/pferde/p7.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/bildmachen.jpg" alt="./images/bildmachen.jpg"><figcaption class="bu"><p>Davon muss ich mir erst mal ein Bild machen.</p></figcaption></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Mission Statement // MI Bachelor</h1><p>Absolventen der Medieninformatik <strong>analysieren</strong>, <strong>realisieren</strong>, <strong>betreiben</strong> und <strong>evaluieren informationstechnische Prozesse</strong> und <strong>Systeme</strong> zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung <strong>medienbasierter Informationen</strong>.</p><div data-slide-shortcode-class="fragment" class="fragment"><p>Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. <strong>Absolvent*innen</strong> der Medieninformatik <strong>arbeiten</strong> dabei vorwiegend in <strong>Teams</strong> und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist <strong>Interdisziplinarität</strong> gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es <strong>vermittelt Sichtweisen</strong> und Techniken aus verschiedenen Fachgebieten, von <strong>Computergrafik</strong> über <strong>Mensch-Computer-Interaktion</strong> bis <strong>Videoproduktion</strong>, von <strong>Kommunikationsdesign</strong> über <strong>Programmentwicklung</strong> bis <strong>Marketing</strong>.</p></div></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was ist ein System?</h1><p class="fragment qa-answer">A group of things, pieces of equipment, etc. that are connected or work together.<br><small>Cambridge Dictionary</small></p></div></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was ist ein Prozess?</h1><p class="fragment qa-answer">Unter Prozess versteht man die Gesamtheit aufeinander einwirkender Vorgänge innerhalb eines Systems. So werden mittels Prozessen Materialien, Energien oder auch Informationen zu neuen Formen transformiert, gespeichert oder aber allererst transportiert.<br><small>Gabler Wirtschaftslexikon</small></p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was ist ein Prozess?</h1><p class="fragment qa-answer">A series of actions that you take in order to achieve a result.<br><small>Cambridge Dictionary</small></p></div></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Lean back</h1><h2 class="js-delay subtitle">Lean forward</h2></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>düdeldü</h1></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/mike-rode-matrix.jpg" data-background-position="1% 1%" data-background-size="15%" data-transition="convex"><div><h1>Mike Rode Matrix</h1><p>Legen Sie eine Mike Rode Matrix an. Variieren Sie auf der X-Achse die Form der Augenbrauen und auf der Y-Achse die Form des Mundes in jeweils 5 Schritten. Ziel ist es, verschiedene Ausdrucksmöglichkeiten für Emotionen zu gewinnen.</p><div class="is-add-on-info"><p>Die Mike Rode Matrix nutzt übrigens das Konzept des <a href="https:<span class=is-purple>//</span>refa.de/service/refa-lexikon/morphologischer-kasten">Morphologischen Kastens</a>.</p></div><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/charaktere.jpg" data-background-position="right center" data-background-size="20%" data-transition="convex"><div><h1>Gefühle/ Emoticons</h1><p>Zeichnen Sie jeweils zwei eher männliche und zwei eher weibliche Emoticons für folgende Emotionen:</p><div class="is-important"><p>Freude, Überraschung/ Erstaunen, Angst, Liebe, Frustration</p></div><dl class="simple-definition"><dt>weiblicher Charakter 1</dt><dd>Eva, 72 Jahre, Autorin<dt>weiblicher Charakter 2</dt></dd><dd>Annemarie, 24 Jahre, Kfz-Mechatronikerin</dd><dt>männlicher Charakter 1</dt><dd>Frank, 55 Jahre alt, Banker</dd><dt>männlicher Charakter 2</dt><dd>Sebastian, 37 Jahre alt, Gärtner</dd></dl><p>Beschriften Sie die Visualisierung (Headline und so).</p><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/me.jpg" data-background-position="right center" data-background-size="10%" data-transition="convex"><div><h1>Selbstportrait</h1><p>Nehmen Sie ein DIN A4 Blatt und falten Sie es mittig über die lange Seite. Zeichnen Sie dann im oberen Teil ein einfaches, aber möglichst charakteristisches Portrait von sich selbst. Danach zeichnen Sie auf der Rückseite eines von Ihrem Nebenmann/-frau.</p><p>Tauschen Sie sich aus, vergleichen Sie die Portraits, wählen Sie das, welches Sie am Besten wieder gibt.</p><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/dinge.jpg" data-background-position="center top" data-background-size="20%" data-transition="convex"><div><h1>Vokabeln</h1><p>Zeichnen Sie jeweils 3 Varianten von den aufgeführten Begriffen. Die erste Variante sollte stets die einfachste/ reduzierteste sein. Die zweite und dritte Variante dürfen jeweils mehr Details enthalten.</p><div class="is-important"><p>Smartphone, Server, Baum, Werkzeugkiste, Flugzeug, TV, Katze, Geschäft, Laptop, Geld, WLAN, Glühbirne, Plan, Netzwerk</p></div><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Verwandtschaftliche Beziehungen</h1><p>Visualisieren Sie folgende verwandschaftlichen Beziehungen:</p><blockquote><p>Tom ist 42 Jahre alt und hat zwei Schwestern: Lea und Martha. Lea ist 40 und hat drei Kinder: Simon (12) und die Zwillinge Josuha und Paul, beide sind (6) Jahre alt. Leas erster Mann starb bei einem Autounfall. Leas zweiter Mann heißt Michael und ist 44 Jahre alt. Michael hat aus seiner ersten Ehe mit Claire zwei Töchter: Rachel und July. Rachel ist 9 und July 13 Jahre alt. Martha ist 36 Jahre alt und lebt mit Ihrer Partnerin Liss zusammen. Tom ist mit Rebecca (39) verheiratet. Sie haben ein Kind: Toby (8).</p></blockquote><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/menschen.jpg" data-background-position="center 2%" data-background-size="15%" data-transition="convex"><div><h1>Menschen</h1><p>Zeichnen Sie einen Mensch nach der Gray-Methode bei folgenden Aktivitäten und beschriften Sie Ihre Visualisierung:</p><div class="is-important"><p>Stehen, Gehen, Ausflippen, Geld holen, Telefonieren, Sitzen, Kochen, Fliegen, Nachdenken</p></div><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Prozess/ Journey – Inventar</h1><p>Visualisieren Sie den Ablauf beim Ticketkauf für ein Konzert. Dabei soll folgender Prozess visualisiert werden:</p><div class="is-important"><p>Das Ticket wird online via Computer oder Tablet gekauft. Nach dem Kauf erhält die Käuferin ein Online Ticket mit QR Code. Selbiges muss ausgedruckt mit zum Konzert gebracht werden. Hier wird das Ticket eingescannt und der Zugang ermöglicht.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Welche Entitäten sind beteiligt und wie sind diese miteinander verknüpft?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Finden Sie Visualisierungen für die erforderlichen Entitäten.</p></div><div class="is-add-on-info"><p>Entitäten: Konzepte, Personen, Knoten, Gegenstände … Dinge mit einer Identität</p></div><p><strong>15 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Prozess/ Journey</h1><h2>Ablauf</h2><p>Visualisieren Sie nun den Ablauf des Ticketverkaufs in einem linearen, zirkulären oder einem anderen Schema.</p><div class="is-important"><p>Welche Perspektiven könnten hier eingenommen werden?</p></div><p><strong>15 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Pen & Paper // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="image" class="mi-slide image" data-background-image="./images/sketching-in-real-world.jpg" data-transition="zoom"></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Pen &amp; Paper</h1><h2>Hey, da ist ja auch ne rechte Hirnhälfte!</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Thanks to David Gray</h1><h2 class="js-delay subtitle"><a href="https://medium.com/the-xplane-collection/in-defense-of-the-visual-alphabet-a8dcca7cf151">In defense of the visual alphabet</a></h2></div></section></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Christian Noss</h1><div class="fragment"><p>Designer <span class="is-purple">//</span> Kommunikationsdesign in der Medieninformatik <span class="is-purple">//</span> Geschäftsführender Gesellschafter der Klickmeister GmbH</p></div></div></section><section data-slide-class="screenshot" class="mi-slide screenshot" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/brain.jpg" alt="./images/brain.jpg" width="100%"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="question" class="question"><div><h1 class="title">Was guckst Du?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p1.png" alt="./images/pferde/p1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p2.png" alt="./images/pferde/p2.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p3.png" alt="./images/pferde/p3.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p4.png" alt="./images/pferde/p4.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p5.png" alt="./images/pferde/p5.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p6.jpg" alt="./images/pferde/p6.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/pferde/p7.jpg" alt="./images/pferde/p7.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/bildmachen.jpg" alt="./images/bildmachen.jpg"><figcaption class="bu"><p>Davon muss ich mir erst mal ein Bild machen.</p></figcaption></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Mission Statement // MI Bachelor</h1><p>Absolventen der Medieninformatik <strong>analysieren</strong>, <strong>realisieren</strong>, <strong>betreiben</strong> und <strong>evaluieren informationstechnische Prozesse</strong> und <strong>Systeme</strong> zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung <strong>medienbasierter Informationen</strong>.</p><div data-slide-shortcode-class="fragment" class="fragment"><p>Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. <strong>Absolvent*innen</strong> der Medieninformatik <strong>arbeiten</strong> dabei vorwiegend in <strong>Teams</strong> und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist <strong>Interdisziplinarität</strong> gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es <strong>vermittelt Sichtweisen</strong> und Techniken aus verschiedenen Fachgebieten, von <strong>Computergrafik</strong> über <strong>Mensch-Computer-Interaktion</strong> bis <strong>Videoproduktion</strong>, von <strong>Kommunikationsdesign</strong> über <strong>Programmentwicklung</strong> bis <strong>Marketing</strong>.</p></div></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was ist ein System?</h1><p class="fragment qa-answer">A group of things, pieces of equipment, etc. that are connected or work together.<br><small>Cambridge Dictionary</small></p></div></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was ist ein Prozess?</h1><p class="fragment qa-answer">Unter Prozess versteht man die Gesamtheit aufeinander einwirkender Vorgänge innerhalb eines Systems. So werden mittels Prozessen Materialien, Energien oder auch Informationen zu neuen Formen transformiert, gespeichert oder aber allererst transportiert.<br><small>Gabler Wirtschaftslexikon</small></p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was ist ein Prozess?</h1><p class="fragment qa-answer">A series of actions that you take in order to achieve a result.<br><small>Cambridge Dictionary</small></p></div></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Lean back</h1><h2 class="js-delay subtitle">Lean forward</h2></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>düdeldü</h1></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/mike-rode-matrix.jpg" data-background-position="1% 1%" data-background-size="15%" data-transition="convex"><div><h1>Mike Rode Matrix</h1><p>Legen Sie eine Mike Rode Matrix an. Variieren Sie auf der X-Achse die Form der Augenbrauen und auf der Y-Achse die Form des Mundes in jeweils 5 Schritten. Ziel ist es, verschiedene Ausdrucksmöglichkeiten für Emotionen zu gewinnen.</p><div class="is-add-on-info"><p>Die Mike Rode Matrix nutzt übrigens das Konzept des <a href="https:<span class=is-purple>//</span>refa.de/service/refa-lexikon/morphologischer-kasten">Morphologischen Kastens</a>.</p></div><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/charaktere.jpg" data-background-position="right center" data-background-size="20%" data-transition="convex"><div><h1>Gefühle/ Emoticons</h1><p>Zeichnen Sie jeweils zwei eher männliche und zwei eher weibliche Emoticons für folgende Emotionen:</p><div class="is-important"><p>Freude, Überraschung/ Erstaunen, Angst, Liebe, Frustration</p></div><dl class="simple-definition"><dt>weiblicher Charakter 1</dt><dd>Eva, 72 Jahre, Autorin<dt>weiblicher Charakter 2</dt></dd><dd>Annemarie, 24 Jahre, Kfz-Mechatronikerin</dd><dt>männlicher Charakter 1</dt><dd>Frank, 55 Jahre alt, Banker</dd><dt>männlicher Charakter 2</dt><dd>Sebastian, 37 Jahre alt, Gärtner</dd></dl><p>Beschriften Sie die Visualisierung (Headline und so).</p><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/me.jpg" data-background-position="right center" data-background-size="10%" data-transition="convex"><div><h1>Selbstportrait</h1><p>Nehmen Sie ein DIN A4 Blatt und falten Sie es mittig über die lange Seite. Zeichnen Sie dann im oberen Teil ein einfaches, aber möglichst charakteristisches Portrait von sich selbst. Danach zeichnen Sie auf der Rückseite eines von Ihrem Nebenmann/-frau.</p><p>Tauschen Sie sich aus, vergleichen Sie die Portraits, wählen Sie das, welches Sie am Besten wieder gibt.</p><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/dinge.jpg" data-background-position="center top" data-background-size="20%" data-transition="convex"><div><h1>Vokabeln</h1><p>Zeichnen Sie jeweils 3 Varianten von den aufgeführten Begriffen. Die erste Variante sollte stets die einfachste/ reduzierteste sein. Die zweite und dritte Variante dürfen jeweils mehr Details enthalten.</p><div class="is-important"><p>Smartphone, Server, Baum, Werkzeugkiste, Flugzeug, TV, Katze, Geschäft, Laptop, Geld, WLAN, Glühbirne, Plan, Netzwerk</p></div><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Verwandtschaftliche Beziehungen</h1><p>Visualisieren Sie folgende verwandschaftlichen Beziehungen:</p><blockquote><p>Tom ist 42 Jahre alt und hat zwei Schwestern: Lea und Martha. Lea ist 40 und hat drei Kinder: Simon (12) und die Zwillinge Josuha und Paul, beide sind (6) Jahre alt. Leas erster Mann starb bei einem Autounfall. Leas zweiter Mann heißt Michael und ist 44 Jahre alt. Michael hat aus seiner ersten Ehe mit Claire zwei Töchter: Rachel und July. Rachel ist 9 und July 13 Jahre alt. Martha ist 36 Jahre alt und lebt mit Ihrer Partnerin Liss zusammen. Tom ist mit Rebecca (39) verheiratet. Sie haben ein Kind: Toby (8).</p></blockquote><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-background-image="./images/menschen.jpg" data-background-position="center 2%" data-background-size="15%" data-transition="convex"><div><h1>Menschen</h1><p>Zeichnen Sie einen Mensch nach der Gray-Methode bei folgenden Aktivitäten und beschriften Sie Ihre Visualisierung:</p><div class="is-important"><p>Stehen, Gehen, Ausflippen, Geld holen, Telefonieren, Sitzen, Kochen, Fliegen, Nachdenken</p></div><p><strong>10 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Prozess/ Journey – Inventar</h1><p>Visualisieren Sie den Ablauf beim Ticketkauf für ein Konzert. Dabei soll folgender Prozess visualisiert werden:</p><div class="is-important"><p>Das Ticket wird online via Computer oder Tablet gekauft. Nach dem Kauf erhält die Käuferin ein Online Ticket mit QR Code. Selbiges muss ausgedruckt mit zum Konzert gebracht werden. Hier wird das Ticket eingescannt und der Zugang ermöglicht.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Welche Entitäten sind beteiligt und wie sind diese miteinander verknüpft?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Finden Sie Visualisierungen für die erforderlichen Entitäten.</p></div><div class="is-add-on-info"><p>Entitäten: Konzepte, Personen, Knoten, Gegenstände … Dinge mit einer Identität</p></div><p><strong>15 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Prozess/ Journey</h1><h2>Ablauf</h2><p>Visualisieren Sie nun den Ablauf des Ticketverkaufs in einem linearen, zirkulären oder einem anderen Schema.</p><div class="is-important"><p>Welche Perspektiven könnten hier eingenommen werden?</p></div><p><strong>15 Minuten Bearbeitungszeit</strong></p></div></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/pps-praesentieren/020-interlude/index.html b/presentations/misc/pps-praesentieren/020-interlude/index.html
index cd17d202..b0dd184d 100644
--- a/presentations/misc/pps-praesentieren/020-interlude/index.html
+++ b/presentations/misc/pps-praesentieren/020-interlude/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Eine Präsentation empfinde ich als wertvoll, wenn … // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Weiter um 13:00</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Eine Präsentation empfinde ich als wertvoll, wenn … // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Weiter um 13:00</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/pps-praesentieren/040-interlude/index.html b/presentations/misc/pps-praesentieren/040-interlude/index.html
index b5c87257..7866cfbf 100644
--- a/presentations/misc/pps-praesentieren/040-interlude/index.html
+++ b/presentations/misc/pps-praesentieren/040-interlude/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Eine Präsentation empfinde ich als wertvoll, wenn … // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">…</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Eine Präsentation empfinde ich als wertvoll, wenn … // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">…</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/pps-praesentieren/070-gehirn/index.html b/presentations/misc/pps-praesentieren/070-gehirn/index.html
index 4d383a6e..a88330bf 100644
--- a/presentations/misc/pps-praesentieren/070-gehirn/index.html
+++ b/presentations/misc/pps-praesentieren/070-gehirn/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gehirn // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="screenshot" class="screenshot mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">…</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/brain.jpg" alt="./images/brain.jpg" width="100%"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gehirn // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="screenshot" class="screenshot mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">…</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/brain.jpg" alt="./images/brain.jpg" width="100%"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/pps-praesentieren/index.html b/presentations/misc/pps-praesentieren/index.html
index 4bb78d54..6ea80f95 100644
--- a/presentations/misc/pps-praesentieren/index.html
+++ b/presentations/misc/pps-praesentieren/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Präsentieren im Studium // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="image" class="mi-slide image" data-background-image="./images/supergirl.jpg" data-transition="zoom"><h1>  Präsentieren<br>  im Studium</h1></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Präsentieren …</h1><h2>… im Praxisprojekt aber auch darüber hinaus</h2></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Eine Präsentation empfinde ich als wertvoll, wenn …</h1><p>Entwickeln Sie mit ihrer Sitznachbar:in <strong>zwanzig</strong> Formulierungen, die ausdrücken, wann <strong>Sie persönlich</strong> eine Präsentation oder einen Vortrag als wertvoll empfinden. Schreiben Sie jeden Satz auf einen Zettel.</p><p><strong>10 Minuten Zeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Eine Präsentation empfinde ich als wertvoll, wenn …</h1><p>Bringen Sie die Aussagen in eine Reihenfolge entlang der Wichtigkeit für Sie. Kleben Sie die Zettel in der entsprechenden Reihenfolge an die Wand.</p><p><strong>5 Minuten Zeit</strong></p></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Weiter um 13:00</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Was würde Sie interessieren …</h1><p>… wenn Sie Vorträge zu folgenden Themen hören würden:</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Der fotorealistische Grad von 3D-Renderings - Einflussfaktoren und deren Bedeutung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Bewertung der technischen Realisierung eines Virtual Reality Handschuhs mit haptischem Feedback</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Personalisierte audiovisuelle Werbeanzeigen im Web - audiovisuelle Werbeanzeigen zielgruppenorientiert generieren und ausspielen mit dem YouTube Director Mix und Google Ads</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Ymir – Eine Definitionssprache zum Generieren von Boilerplate-Code in der Webentwicklung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Ausarbeitung der Grundlagen zur Entwicklung eines gamifizierten digitalen Lernmoduls zum Thema Aquaponik</p></div></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">…</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Konzeption und Umsetzung eines CSS-Frameworks auf Basis von Disneys Prinzipien der Animation</h1><p><strong>bitte zerlegen Sie diesen Titel</strong></p></div></section><section data-slide-class="screenshot" class="mi-slide screenshot" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Flughöhe</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/flughoehe.svg" alt="./images/flughoehe.svg" width="100%"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="fade"><div><h1>TOC</h1><p><strong>Einleitung</strong><br>Problemstellung <span class="is-purple">//</span> Forschungsfrage <span class="is-purple">//</span> Motivation</p><p><strong>Die zwölf Prinzipien der Animation</strong><br>Squash and Stretch <span class="is-purple">//</span> Anticipation, Staging, Straight Ahead Action and Pose to Pose <span class="is-purple">//</span> Follow Through and Overlapping Action <span class="is-purple">//</span> Slow In and Slow Out <span class="is-purple">//</span> Arcs <span class="is-purple">//</span> Secondary Action <span class="is-purple">//</span> Timing <span class="is-purple">//</span> Exaggeration <span class="is-purple">//</span> Solid Drawing <span class="is-purple">//</span> Appeal</p><p><strong>Konzeption und Umsetzung des CSS-Frameworks</strong><br>Auswahl an UI-Elementen <span class="is-purple">//</span> Einteilung nach Atomic Design <span class="is-purple">//</span> Betrachtung bestehender CSS-Frameworks <span class="is-purple">//</span> Vorgehen bei der Konzeption <span class="is-purple">//</span> Verwendete Technologien und Setup <span class="is-purple">//</span> Storyboards und Implementierung <span class="is-purple">//</span> Erkenntnisse und Zusammenfassung der Prinzipien</p><p><strong>Fazit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="fade"><div><h1>TOC</h1><p><strong>Einleitung</strong><br><em>Problemstellung</em> <span class="is-purple">//</span> <em>Forschungsfrage</em> <span class="is-purple">//</span> Motivation</p><p><strong>Die zwölf Prinzipien der Animation</strong><br><em>Squash and Stretch</em> <span class="is-purple">//</span> Anticipation, Staging, Straight Ahead Action and Pose to Pose <span class="is-purple">//</span> Follow Through and Overlapping Action <span class="is-purple">//</span> <em>Slow In and Slow Out</em> <span class="is-purple">//</span> Arcs <span class="is-purple">//</span> Secondary Action <span class="is-purple">//</span> Timing <span class="is-purple">//</span> Exaggeration <span class="is-purple">//</span> Solid Drawing <span class="is-purple">//</span> Appeal</p><p><strong>Konzeption und Umsetzung des CSS-Frameworks</strong><br>Auswahl an UI-Elementen <span class="is-purple">//</span> <em>Einteilung nach Atomic Design</em> <span class="is-purple">//</span> Betrachtung bestehender CSS-Frameworks <span class="is-purple">//</span> Vorgehen bei der Konzeption <span class="is-purple">//</span> Verwendete Technologien und Setup <span class="is-purple">//</span> Storyboards und Implementierung <span class="is-purple">//</span> <em>Erkenntnisse und Zusammenfassung der Prinzipien</em></p><p><strong>Fazit</strong></p></div></section><section data-slide-class="screenshot" class="mi-slide screenshot" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">…</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/brain.jpg" alt="./images/brain.jpg" width="100%"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Nutzen Sie die Situation</h1><h2 class="js-delay subtitle">Alles, was Ihr Thema erfahrbar macht ist gut!</h2></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Los geht's</h1><p>Entwickeln Sie 5 Minuten Ihres Vortrags, entweder zu Ihrem Praxisprojektthema oder zu Ihrem Entwicklungsprojekt.</p><p><strong>Schritt 1: Storyline und Material</strong><br>Welche Dinge, Begriffe, Anekdoten wollen Sie unterbringen und wie machen Sie diese erfahrbar?<br><em>20 Min Zeit, danach kurze Vorstellung</em></p><p><strong>Schritt 2: Material aufbauen</strong><br>Bauen Sie das Material auf und üben Sie Ihren Vortrag<br><em>30 Min Zeit</em></p><p><strong>Schritt 3: Vortrag halten</strong> :)</p></div></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Präsentieren im Studium // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="image" class="mi-slide image" data-background-image="./images/supergirl.jpg" data-transition="zoom"><h1>  Präsentieren<br>  im Studium</h1></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Präsentieren …</h1><h2>… im Praxisprojekt aber auch darüber hinaus</h2></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Eine Präsentation empfinde ich als wertvoll, wenn …</h1><p>Entwickeln Sie mit ihrer Sitznachbar:in <strong>zwanzig</strong> Formulierungen, die ausdrücken, wann <strong>Sie persönlich</strong> eine Präsentation oder einen Vortrag als wertvoll empfinden. Schreiben Sie jeden Satz auf einen Zettel.</p><p><strong>10 Minuten Zeit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Eine Präsentation empfinde ich als wertvoll, wenn …</h1><p>Bringen Sie die Aussagen in eine Reihenfolge entlang der Wichtigkeit für Sie. Kleben Sie die Zettel in der entsprechenden Reihenfolge an die Wand.</p><p><strong>5 Minuten Zeit</strong></p></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Weiter um 13:00</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Was würde Sie interessieren …</h1><p>… wenn Sie Vorträge zu folgenden Themen hören würden:</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Der fotorealistische Grad von 3D-Renderings - Einflussfaktoren und deren Bedeutung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Bewertung der technischen Realisierung eines Virtual Reality Handschuhs mit haptischem Feedback</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Personalisierte audiovisuelle Werbeanzeigen im Web - audiovisuelle Werbeanzeigen zielgruppenorientiert generieren und ausspielen mit dem YouTube Director Mix und Google Ads</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Ymir – Eine Definitionssprache zum Generieren von Boilerplate-Code in der Webentwicklung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="is-small">Ausarbeitung der Grundlagen zur Entwicklung eines gamifizierten digitalen Lernmoduls zum Thema Aquaponik</p></div></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">…</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Konzeption und Umsetzung eines CSS-Frameworks auf Basis von Disneys Prinzipien der Animation</h1><p><strong>bitte zerlegen Sie diesen Titel</strong></p></div></section><section data-slide-class="screenshot" class="mi-slide screenshot" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Flughöhe</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/flughoehe.svg" alt="./images/flughoehe.svg" width="100%"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="fade"><div><h1>TOC</h1><p><strong>Einleitung</strong><br>Problemstellung <span class="is-purple">//</span> Forschungsfrage <span class="is-purple">//</span> Motivation</p><p><strong>Die zwölf Prinzipien der Animation</strong><br>Squash and Stretch <span class="is-purple">//</span> Anticipation, Staging, Straight Ahead Action and Pose to Pose <span class="is-purple">//</span> Follow Through and Overlapping Action <span class="is-purple">//</span> Slow In and Slow Out <span class="is-purple">//</span> Arcs <span class="is-purple">//</span> Secondary Action <span class="is-purple">//</span> Timing <span class="is-purple">//</span> Exaggeration <span class="is-purple">//</span> Solid Drawing <span class="is-purple">//</span> Appeal</p><p><strong>Konzeption und Umsetzung des CSS-Frameworks</strong><br>Auswahl an UI-Elementen <span class="is-purple">//</span> Einteilung nach Atomic Design <span class="is-purple">//</span> Betrachtung bestehender CSS-Frameworks <span class="is-purple">//</span> Vorgehen bei der Konzeption <span class="is-purple">//</span> Verwendete Technologien und Setup <span class="is-purple">//</span> Storyboards und Implementierung <span class="is-purple">//</span> Erkenntnisse und Zusammenfassung der Prinzipien</p><p><strong>Fazit</strong></p></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="fade"><div><h1>TOC</h1><p><strong>Einleitung</strong><br><em>Problemstellung</em> <span class="is-purple">//</span> <em>Forschungsfrage</em> <span class="is-purple">//</span> Motivation</p><p><strong>Die zwölf Prinzipien der Animation</strong><br><em>Squash and Stretch</em> <span class="is-purple">//</span> Anticipation, Staging, Straight Ahead Action and Pose to Pose <span class="is-purple">//</span> Follow Through and Overlapping Action <span class="is-purple">//</span> <em>Slow In and Slow Out</em> <span class="is-purple">//</span> Arcs <span class="is-purple">//</span> Secondary Action <span class="is-purple">//</span> Timing <span class="is-purple">//</span> Exaggeration <span class="is-purple">//</span> Solid Drawing <span class="is-purple">//</span> Appeal</p><p><strong>Konzeption und Umsetzung des CSS-Frameworks</strong><br>Auswahl an UI-Elementen <span class="is-purple">//</span> <em>Einteilung nach Atomic Design</em> <span class="is-purple">//</span> Betrachtung bestehender CSS-Frameworks <span class="is-purple">//</span> Vorgehen bei der Konzeption <span class="is-purple">//</span> Verwendete Technologien und Setup <span class="is-purple">//</span> Storyboards und Implementierung <span class="is-purple">//</span> <em>Erkenntnisse und Zusammenfassung der Prinzipien</em></p><p><strong>Fazit</strong></p></div></section><section data-slide-class="screenshot" class="mi-slide screenshot" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">…</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/brain.jpg" alt="./images/brain.jpg" width="100%"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Nutzen Sie die Situation</h1><h2 class="js-delay subtitle">Alles, was Ihr Thema erfahrbar macht ist gut!</h2></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Los geht's</h1><p>Entwickeln Sie 5 Minuten Ihres Vortrags, entweder zu Ihrem Praxisprojektthema oder zu Ihrem Entwicklungsprojekt.</p><p><strong>Schritt 1: Storyline und Material</strong><br>Welche Dinge, Begriffe, Anekdoten wollen Sie unterbringen und wie machen Sie diese erfahrbar?<br><em>20 Min Zeit, danach kurze Vorstellung</em></p><p><strong>Schritt 2: Material aufbauen</strong><br>Bauen Sie das Material auf und üben Sie Ihren Vortrag<br><em>30 Min Zeit</em></p><p><strong>Schritt 3: Vortrag halten</strong> :)</p></div></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/the-web-warmup/010-internet/index.html b/presentations/misc/the-web-warmup/010-internet/index.html
index 697b44cf..34a6fb1c 100644
--- a/presentations/misc/the-web-warmup/010-internet/index.html
+++ b/presentations/misc/the-web-warmup/010-internet/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Basics // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was ist das Internet?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Welches Protokoll wird genutzt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Was ist ein Protokoll?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">Was ist das World Wide Web?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Wer hat es erfunden?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was sind die 3 Säulen des WWW?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Wofür steht die Abkürzung HTML?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Was ist ein Hypertext?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Warum mögen Menschen Hypertexte?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was bedeutet URI?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was ist der Unterschied zwischen einer URI und einer URL?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Basics // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Was ist das Internet?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Welches Protokoll wird genutzt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Was ist ein Protokoll?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was ist das World Wide Web?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Wer hat es erfunden?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">Was sind die 3 Säulen des WWW?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Wofür steht die Abkürzung HTML?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was ist ein Hypertext?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">Warum mögen Menschen Hypertexte?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Was bedeutet URI?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was ist der Unterschied zwischen einer URI und einer URL?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/the-web-warmup/40-deeper/index.html b/presentations/misc/the-web-warmup/40-deeper/index.html
index f0a9c15f..a2ba0ef3 100644
--- a/presentations/misc/the-web-warmup/40-deeper/index.html
+++ b/presentations/misc/the-web-warmup/40-deeper/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Advanced // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was ist das W3C?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was ist ein <a href="https://www.rfc-editor.org/info/rfc9429">RFC</a>?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was kann DNS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">HTTP vs. HTTPS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Was sind Cookies und warum sind sie so verpönt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">Wofür steht CSS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Was besagt das Client-Server-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Wie funktioniert das Request-Response-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Wie funktioniert ein Browser?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was fehlt?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Advanced // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Was ist das W3C?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Was ist ein <a href="https://www.rfc-editor.org/info/rfc9429">RFC</a>?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was kann DNS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">HTTP vs. HTTPS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Was sind Cookies und warum sind sie so verpönt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Wofür steht CSS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was besagt das Client-Server-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Wie funktioniert das Request-Response-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Wie funktioniert ein Browser?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Was fehlt?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/misc/the-web-warmup/index.html b/presentations/misc/the-web-warmup/index.html
index ebc71377..03ea3635 100644
--- a/presentations/misc/the-web-warmup/index.html
+++ b/presentations/misc/the-web-warmup/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Web // Warmup // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>The Web // Warmup</h1><h2>Kleiner Rundflug um das WWW</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was ist das Internet?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Welches Protokoll wird genutzt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Was ist ein Protokoll?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Was ist das World Wide Web?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Wer hat es erfunden?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was sind die 3 Säulen des WWW?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wofür steht die Abkürzung HTML?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Was ist ein Hypertext?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Warum mögen Menschen Hypertexte?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was bedeutet URI?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was ist der Unterschied zwischen einer URI und einer URL?</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Uniform Resource Identifier</h1><p>Ein Uniform Resource Identifier besteht aus einer Zeichenfolge, die zur Identifizierung einer abstrakten oder physischen Ressource dient.</p><ul><li>https:<span class="is-purple">//</span>de.wikipedia.org/wiki/Uniform_Resource_Identifier</li><li>ftp:<span class="is-purple">//</span>ftp.is.co.za/rfc/rfc1808.txt</li><li>file:<span class="is-purple">//</span>/C:/Users/Benutzer/Desktop/Uniform%20Resource%20Identifier.html</li><li>geo:48.33,14.122;u=22.5</li><li>ldap:<span class="is-purple">//</span>[2001:db8::7]/c=GB?objectClass?one</li></ul></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Uniform Resource Identifier</h1><p>Weitere Beispiele:</p><ul><li>mailto:John.Doe@example.com</li><li>news:comp.infosystems.www.servers.unix</li><li>data:text/plain;charset=iso-8859-7,%be%fa%be</li><li>tel:+1-816-555-1212</li><li>telnet:<span class="is-purple">//</span>192.0.2.16:80/</li><li>git:<span class="is-purple">//</span>github.com/rails/rails.git</li></ul></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Uniform Resource Locator</h1><p>Identifiziert Adresse und gibt den Speicherort an.</p><section class="image screenshot"><figure><img src="./images/url.png"></figure></section></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was ist das W3C?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was ist ein <a href="https://www.rfc-editor.org/info/rfc9429">RFC</a>?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was kann DNS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">HTTP vs. HTTPS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Was sind Cookies und warum sind sie so verpönt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wofür steht CSS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was besagt das Client-Server-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie funktioniert das Request-Response-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie funktioniert ein Browser?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was fehlt?</h1></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Web // Warmup // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>The Web // Warmup</h1><h2>Kleiner Rundflug um das WWW</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Was ist das Internet?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Welches Protokoll wird genutzt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Was ist ein Protokoll?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was ist das World Wide Web?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Wer hat es erfunden?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Was sind die 3 Säulen des WWW?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wofür steht die Abkürzung HTML?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was ist ein Hypertext?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Warum mögen Menschen Hypertexte?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Was bedeutet URI?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Was ist der Unterschied zwischen einer URI und einer URL?</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Uniform Resource Identifier</h1><p>Ein Uniform Resource Identifier besteht aus einer Zeichenfolge, die zur Identifizierung einer abstrakten oder physischen Ressource dient.</p><ul><li>https:<span class="is-purple">//</span>de.wikipedia.org/wiki/Uniform_Resource_Identifier</li><li>ftp:<span class="is-purple">//</span>ftp.is.co.za/rfc/rfc1808.txt</li><li>file:<span class="is-purple">//</span>/C:/Users/Benutzer/Desktop/Uniform%20Resource%20Identifier.html</li><li>geo:48.33,14.122;u=22.5</li><li>ldap:<span class="is-purple">//</span>[2001:db8::7]/c=GB?objectClass?one</li></ul></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Uniform Resource Identifier</h1><p>Weitere Beispiele:</p><ul><li>mailto:John.Doe@example.com</li><li>news:comp.infosystems.www.servers.unix</li><li>data:text/plain;charset=iso-8859-7,%be%fa%be</li><li>tel:+1-816-555-1212</li><li>telnet:<span class="is-purple">//</span>192.0.2.16:80/</li><li>git:<span class="is-purple">//</span>github.com/rails/rails.git</li></ul></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Uniform Resource Locator</h1><p>Identifiziert Adresse und gibt den Speicherort an.</p><section class="image screenshot"><figure><img src="./images/url.png"></figure></section></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Was ist das W3C?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Was ist ein <a href="https://www.rfc-editor.org/info/rfc9429">RFC</a>?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was kann DNS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">HTTP vs. HTTPS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Was sind Cookies und warum sind sie so verpönt?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wofür steht CSS?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was besagt das Client-Server-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wie funktioniert das Request-Response-Modell?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie funktioniert ein Browser?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was fehlt?</h1></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/010-dataforest-intro/index.html b/presentations/screendesign/about-screendesign/010-dataforest-intro/index.html
index bb134a7e..5ab1092d 100644
--- a/presentations/screendesign/about-screendesign/010-dataforest-intro/index.html
+++ b/presentations/screendesign/about-screendesign/010-dataforest-intro/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Dataforrest Intro // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Dataforest Designkonzept</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg" alt="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Dataforrest Intro // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Dataforest Designkonzept</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg" alt="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/020-dataforest-form/index.html b/presentations/screendesign/about-screendesign/020-dataforest-form/index.html
index 370ccd40..227bb1f4 100644
--- a/presentations/screendesign/about-screendesign/020-dataforest-form/index.html
+++ b/presentations/screendesign/about-screendesign/020-dataforest-form/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Dataforrest Formular // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Formular</h1><h2 class="js-delay subtitle">Dataforest Designkonzept</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-checkout-1.png" alt="./images/df-checkout-1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v10-11016.jpg" alt="./images/df-login-v10-11016.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v11-11020.jpg" alt="./images/df-login-v11-11020.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v4-11012.jpg" alt="./images/df-login-v4-11012.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-11008.jpg" alt="./images/df-login-11008.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Dataforrest Formular // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Formular</h1><h2 class="js-delay subtitle">Dataforest Designkonzept</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-checkout-1.png" alt="./images/df-checkout-1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v10-11016.jpg" alt="./images/df-login-v10-11016.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v11-11020.jpg" alt="./images/df-login-v11-11020.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v4-11012.jpg" alt="./images/df-login-v4-11012.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-11008.jpg" alt="./images/df-login-11008.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/030-db-zuganzeiger/index.html b/presentations/screendesign/about-screendesign/030-db-zuganzeiger/index.html
index f8568e88..ae2c7214 100644
--- a/presentations/screendesign/about-screendesign/030-db-zuganzeiger/index.html
+++ b/presentations/screendesign/about-screendesign/030-db-zuganzeiger/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>DB Zuganzeiger // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Zuganzeiger</h1><h2 class="js-delay subtitle">Deutsche Bahn</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.012.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.012.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.013.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.013.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.014.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.014.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>DB Zuganzeiger // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Zuganzeiger</h1><h2 class="js-delay subtitle">Deutsche Bahn</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.012.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.012.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.013.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.013.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.014.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.014.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/040-dive/index.html b/presentations/screendesign/about-screendesign/040-dive/index.html
index cb4a35ed..b76dead0 100644
--- a/presentations/screendesign/about-screendesign/040-dive/index.html
+++ b/presentations/screendesign/about-screendesign/040-dive/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Dive.is Verteilerseite // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Dive.is Verteilerseite</h1><h2 class="js-delay subtitle">für kleine Viewports</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.015.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.015.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.016.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.016.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.017.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.017.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Dive.is Verteilerseite // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Dive.is Verteilerseite</h1><h2 class="js-delay subtitle">für kleine Viewports</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.015.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.015.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.016.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.016.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.017.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.017.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/120-reisen/index.html b/presentations/screendesign/about-screendesign/120-reisen/index.html
index 5a1057d6..a62bdd18 100644
--- a/presentations/screendesign/about-screendesign/120-reisen/index.html
+++ b/presentations/screendesign/about-screendesign/120-reisen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Identität // Reisen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wenn man eine Reise tut</h1><h2 class="js-delay subtitle">dann hat wan viel zu wählen.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-1.jpg" alt="./images/identitaet-reise-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-2.jpg" alt="./images/identitaet-reise-2.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Identität // Reisen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wenn man eine Reise tut</h1><h2 class="js-delay subtitle">dann hat wan viel zu wählen.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-1.jpg" alt="./images/identitaet-reise-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-2.jpg" alt="./images/identitaet-reise-2.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/140-goldhandel/index.html b/presentations/screendesign/about-screendesign/140-goldhandel/index.html
index a3b88f33..79ae7fad 100644
--- a/presentations/screendesign/about-screendesign/140-goldhandel/index.html
+++ b/presentations/screendesign/about-screendesign/140-goldhandel/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Identität // Goldhandel // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Goldhandel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldankauf-barmen.jpg" alt="./images/goldankauf-barmen.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldsilber-shop.jpg" alt="./images/goldsilber-shop.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Identität // Goldhandel // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Goldhandel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldankauf-barmen.jpg" alt="./images/goldankauf-barmen.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldsilber-shop.jpg" alt="./images/goldsilber-shop.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/150-edv-service/index.html b/presentations/screendesign/about-screendesign/150-edv-service/index.html
index 6cc1b66a..fff31a47 100644
--- a/presentations/screendesign/about-screendesign/150-edv-service/index.html
+++ b/presentations/screendesign/about-screendesign/150-edv-service/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Identität // EDV Service // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">EDV Service</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-kuerten.jpg" alt="./images/edv-kuerten.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-repair.jpg" alt="./images/edv-repair.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Identität // EDV Service // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">EDV Service</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-kuerten.jpg" alt="./images/edv-kuerten.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-repair.jpg" alt="./images/edv-repair.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/160-schrift/index.html b/presentations/screendesign/about-screendesign/160-schrift/index.html
index a0fb1672..6a29b9fe 100644
--- a/presentations/screendesign/about-screendesign/160-schrift/index.html
+++ b/presentations/screendesign/about-screendesign/160-schrift/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Identität // Typographie // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Typo</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.028.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.028.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.029.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.029.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.030.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.030.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/000-about-screendesign/000-about-screendesign.031.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.031.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Identität // Typographie // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Typo</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.028.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.028.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.029.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.029.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.030.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.030.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/000-about-screendesign/000-about-screendesign.031.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.031.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/245-eva/index.html b/presentations/screendesign/about-screendesign/245-eva/index.html
index 82c67d90..f3f548aa 100644
--- a/presentations/screendesign/about-screendesign/245-eva/index.html
+++ b/presentations/screendesign/about-screendesign/245-eva/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Modulablauf // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Evaluation</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20212.jpg" alt="./images/eva-20212.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20213.jpg" alt="./images/eva-20213.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20214.jpg" alt="./images/eva-20214.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20215.jpg" alt="./images/eva-20215.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20216.jpg" alt="./images/eva-20216.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20217.jpg" alt="./images/eva-20217.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20218.jpg" alt="./images/eva-20218.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20219.jpg" alt="./images/eva-20219.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Modulablauf // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Evaluation</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20212.jpg" alt="./images/eva-20212.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20213.jpg" alt="./images/eva-20213.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20214.jpg" alt="./images/eva-20214.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20215.jpg" alt="./images/eva-20215.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20216.jpg" alt="./images/eva-20216.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20217.jpg" alt="./images/eva-20217.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20218.jpg" alt="./images/eva-20218.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20219.jpg" alt="./images/eva-20219.jpg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/250-leitfaden/index.html b/presentations/screendesign/about-screendesign/250-leitfaden/index.html
index 9e64b013..c4852cd6 100644
--- a/presentations/screendesign/about-screendesign/250-leitfaden/index.html
+++ b/presentations/screendesign/about-screendesign/250-leitfaden/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Leitfaden // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Leitfaden</h1><h2 class="js-delay subtitle">für ein schmerzfreies Modul</h2></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was wollen wir sehen?</h1><p class="fragment qa-answer">Bei Screendesign geht es darum Denkweise und Vokabular des Designs kennen zu lernen. Denn Medieninformatiker:innen arbeiten häufig in interdisziplinären Teams mit Gestalter:innen, sie sind häufig in der Aufgabe, Gestaltungskonzepte auf ein Medium zu transferieren, sie weiter zu entwickeln und zu implementieren. Dazu ist es unabdingbar und äußerst vorteilhaft zu wissen, wovon die Gestalter:in spricht und welche Ziele für ihn im Vordergrund stehen. Ein weiteres Ziel ist die Entwicklung einer eigenen gestalterischen Grundkompetenz, denn nicht selten werden sie in die Situation kommen eigene und eigenständige Gestaltungslösungen zu entwickeln.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Es kommt vor, dass Übungen unvollständig, vielleicht sogar unzureichend formuliert werden. Es gibt im Grunde zwei Wege damit umzugehen …</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 1</h1><p class="fragment qa-answer">Sie regen sich darüber auf, sprechen sich mit Kommilitonen ab, versuchen das Briefing irgendwie zu komplettieren und die Aufgabe zu lösen und merken im schlechtesten Fall bei der Präsentation, dass Sie das falsche und davon viel zu viel gemacht haben.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 2</h1><p class="fragment qa-answer">Sie stellen schlaue Fragen und versuchen so die Übung zu komplettieren, bevor Sie richtig anfangen.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Unvollständige Übung sind keine Finte, sondern Alltag. Sie werden im Job ständig damit konfrontiert, nicht weil ihr Kunde Sie ärgern möchte, sondern weil er anders denkt, die Aufgabe schon durchdacht oder angedacht hat und er schlichtweg vergisst, Ihnen alle Informationen zu geben, die Sie brauchen, zumal er auch gar nicht weiß, welche Information Sie brauchen. Also stellen Sie die richtigen Fragen. Fragen sind die Antwort.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ja, ich ändere bezogen auf Gestaltungsvorschläge oft meine Meinung, und das hat mehrere Gründe. Der erste Grund ist der, dass dies eine Grundvorraussetzung ist, um neue Lösungen zu finden. Neue Lösungen, sind häufig interessanter und spannender als althergebrachte und bekannte Lösungen und werden daher von Gestaltern gesucht. Also ist es für sie notwendig, Aufgaben und Lösungsansätze aus mehreren Perspektiven zu sehen, was zwangsläufig dazu führt, dass die Meinung zu einem Entwurf häufig um weitere Meinungen, die nicht selten gegensätzlich sind, ergänzt wird.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass es in dieser Domäne selten die eine beste Lösung gibt. Es gibt schlechte Lösungen und gute Lösungen, es gibt sehr gute Lösungen und es gibt perfekte Lösungen, was nicht heißt, dass es zu einem Problem nicht auch viele perfekte Lösungen geben kann. Gestaltungslösungen sind nie binär. Darum ist eine zentrale Frage stets: Was sind alternative Lösungen und Lösungsansätze und warum ist der gewählte Ansatz besser, als die Alternativen? Wer auf diese Frage keine Antwort hat, weil er entweder keine Alternativen entwickelt hat, oder nicht weiß, warum er welche Ansatz bevorzugt, hat keine Argumente und somit einen schlechten Stand.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass häufig ein Gestaltungsziel darin liegt, ausbalancierte Lösungen zu entwickeln. Das führt nicht selten dazu, dass eine guter und gut ausbalancierter Entwurf aus dem Gleichgewicht gerät, sobald ein Element hinzukommt oder wegfällt und der Entwurf daher komplett überdacht oder zumindest stark angepasst wird, ich meine Meinung also mal wieder ändere.</p></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Leitfaden // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Leitfaden</h1><h2 class="js-delay subtitle">für ein schmerzfreies Modul</h2></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was wollen wir sehen?</h1><p class="fragment qa-answer">Bei Screendesign geht es darum Denkweise und Vokabular des Designs kennen zu lernen. Denn Medieninformatiker:innen arbeiten häufig in interdisziplinären Teams mit Gestalter:innen, sie sind häufig in der Aufgabe, Gestaltungskonzepte auf ein Medium zu transferieren, sie weiter zu entwickeln und zu implementieren. Dazu ist es unabdingbar und äußerst vorteilhaft zu wissen, wovon die Gestalter:in spricht und welche Ziele für ihn im Vordergrund stehen. Ein weiteres Ziel ist die Entwicklung einer eigenen gestalterischen Grundkompetenz, denn nicht selten werden sie in die Situation kommen eigene und eigenständige Gestaltungslösungen zu entwickeln.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Es kommt vor, dass Übungen unvollständig, vielleicht sogar unzureichend formuliert werden. Es gibt im Grunde zwei Wege damit umzugehen …</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 1</h1><p class="fragment qa-answer">Sie regen sich darüber auf, sprechen sich mit Kommilitonen ab, versuchen das Briefing irgendwie zu komplettieren und die Aufgabe zu lösen und merken im schlechtesten Fall bei der Präsentation, dass Sie das falsche und davon viel zu viel gemacht haben.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 2</h1><p class="fragment qa-answer">Sie stellen schlaue Fragen und versuchen so die Übung zu komplettieren, bevor Sie richtig anfangen.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Unvollständige Übung sind keine Finte, sondern Alltag. Sie werden im Job ständig damit konfrontiert, nicht weil ihr Kunde Sie ärgern möchte, sondern weil er anders denkt, die Aufgabe schon durchdacht oder angedacht hat und er schlichtweg vergisst, Ihnen alle Informationen zu geben, die Sie brauchen, zumal er auch gar nicht weiß, welche Information Sie brauchen. Also stellen Sie die richtigen Fragen. Fragen sind die Antwort.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ja, ich ändere bezogen auf Gestaltungsvorschläge oft meine Meinung, und das hat mehrere Gründe. Der erste Grund ist der, dass dies eine Grundvorraussetzung ist, um neue Lösungen zu finden. Neue Lösungen, sind häufig interessanter und spannender als althergebrachte und bekannte Lösungen und werden daher von Gestaltern gesucht. Also ist es für sie notwendig, Aufgaben und Lösungsansätze aus mehreren Perspektiven zu sehen, was zwangsläufig dazu führt, dass die Meinung zu einem Entwurf häufig um weitere Meinungen, die nicht selten gegensätzlich sind, ergänzt wird.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass es in dieser Domäne selten die eine beste Lösung gibt. Es gibt schlechte Lösungen und gute Lösungen, es gibt sehr gute Lösungen und es gibt perfekte Lösungen, was nicht heißt, dass es zu einem Problem nicht auch viele perfekte Lösungen geben kann. Gestaltungslösungen sind nie binär. Darum ist eine zentrale Frage stets: Was sind alternative Lösungen und Lösungsansätze und warum ist der gewählte Ansatz besser, als die Alternativen? Wer auf diese Frage keine Antwort hat, weil er entweder keine Alternativen entwickelt hat, oder nicht weiß, warum er welche Ansatz bevorzugt, hat keine Argumente und somit einen schlechten Stand.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass häufig ein Gestaltungsziel darin liegt, ausbalancierte Lösungen zu entwickeln. Das führt nicht selten dazu, dass eine guter und gut ausbalancierter Entwurf aus dem Gleichgewicht gerät, sobald ein Element hinzukommt oder wegfällt und der Entwurf daher komplett überdacht oder zumindest stark angepasst wird, ich meine Meinung also mal wieder ändere.</p></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/about-screendesign/index.html b/presentations/screendesign/about-screendesign/index.html
index 4f8cb174..b0011a63 100644
--- a/presentations/screendesign/about-screendesign/index.html
+++ b/presentations/screendesign/about-screendesign/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>About Screendesign // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>About Screendesign</h1><h2>Worum geht es in diesem Modul?</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">De·kom·po·si·ti·on</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/die-museen.jpg" alt="./images/die-museen.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zuhoeren.svg" alt="./images/zuhoeren.svg"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Take Aways</h1><p>Nehmen Sie ein DIN A4 Blatt, falten Sie es mittig über die lange Seite, so dass ein Seitenverhältnis im gefalteten Zustand von 105x297mm entsteht. Nutzen Sie das Resultat hochkant. Platzieren Sie oben eine kleine, einfache Portraitskizze von sich, notieren Sie darunter (in Ihrer allerschönsten Handschrift!) folgende Angaben:</p><ul><li>Ihren Namen</li><li>Ihr Alter</li><li>mindestens 5 Dinge, die Sie in diesem Modul lernen wollen/ mit denen Sie sich befassen wollen</li><li>3 Dinge, mit denen Sie sich nicht befassen wollen.</li></ul><p><strong>Sie haben 15 Minuten Zeit</strong></p></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Dataforest Designkonzept</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg" alt="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Call to Action</h1><h2 class="js-delay subtitle">Dataforest Designkonzept</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.002.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.002.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.003.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.003.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.004.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.004.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.005.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.005.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.006.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.006.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Formular</h1><h2 class="js-delay subtitle">Dataforest Designkonzept</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-checkout-1.png" alt="./images/df-checkout-1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v10-11016.jpg" alt="./images/df-login-v10-11016.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v11-11020.jpg" alt="./images/df-login-v11-11020.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v4-11012.jpg" alt="./images/df-login-v4-11012.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-11008.jpg" alt="./images/df-login-11008.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Zuganzeiger</h1><h2 class="js-delay subtitle">Deutsche Bahn</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.012.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.012.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.013.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.013.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.014.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.014.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Dive.is Verteilerseite</h1><h2 class="js-delay subtitle">für kleine Viewports</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.015.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.015.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.016.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.016.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.017.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.017.jpeg"></figure></section></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Identität</h1><div class="fragment"><p>Was hat <em>Identität</em> mit diesem Modul zu tun?</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.018.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.018.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.019.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.019.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.020.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.020.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.021.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.021.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wenn man eine Reise tut</h1><h2 class="js-delay subtitle">dann hat wan viel zu wählen.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-1.jpg" alt="./images/identitaet-reise-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-2.jpg" alt="./images/identitaet-reise-2.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Goldhandel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldankauf-barmen.jpg" alt="./images/goldankauf-barmen.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldsilber-shop.jpg" alt="./images/goldsilber-shop.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">EDV Service</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-kuerten.jpg" alt="./images/edv-kuerten.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-repair.jpg" alt="./images/edv-repair.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Typo</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.028.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.028.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.029.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.029.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.030.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.030.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/000-about-screendesign/000-about-screendesign.031.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.031.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Screendesign</h1><div class="fragment"><p>5CP <span class="is-purple">//</span> 150 Stunden Workload <span class="is-purple">//</span> keine Klausur, sondern ein Projekt mit abschließender Projektpräsentationsprüfung <span class="is-purple">//</span> 2er Teams <span class="is-purple">//</span> viel Praxis <span class="is-purple">//</span> viel Ausprobieren <span class="is-purple">//</span> mitmachen erforderlich <span class="is-purple">//</span> macht Spaß, aber auch Arbeit <span class="is-purple">//</span> macht trotzdem Spaß <span class="is-purple">//</span> wir nutzen Figma als Tool <span class="is-purple">//</span> keine Klausur, hab ich gesagt, oder?</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Über das Modul</h1><div data-slide-shortcode-class="fragment" class="fragment"><h2>Team</h2><p>Calvin Hinzer, Volker Schaefer, Christian Noss</p></div><div data-slide-shortcode-class="fragment" class="fragment"><h2>Material</h2><p><a href="https:<span class=is-purple>//</span>th-koeln.github.io/mi-bachelor-screendesign/">Website zum Modul</a>, <a href="https:<span class=is-purple>//</span>ilias.th-koeln.de/goto.php?target=crs_1161102&client_id=ILIAS_FH_Koeln">Kurs im Ilias</a></p></div><div data-slide-shortcode-class="fragment" class="fragment"><h2>Prüfungselemente</h2><p>Gestaltungsportfolio & Projekt mit Projektpräsentationsprüfung</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Modulziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>Die Studierenden kennen wesentliche Begriffe der visuellen Kommunikation und können diese anwenden um Briefings, Angebote oder Korrekturwünsche im Design-Kontext zu verstehen oder zu verfassen.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Die Studierenden können Gestaltungslösungen und -kontexte analysieren, argumentieren, diskutieren, dokumentieren und bewerten, um eigene Lösungen innerhalb eines Gestaltungskontextes generieren zu können.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Die Studierenden können in einem gegebenen Gestaltungskontext unter Berücksichtigung von Gestaltungsregeln (Raster, Layout, Typographie, etc.) eigene Gestaltungslösungen entwickeln, systematisch variieren und argumentieren um gegebene funktionale und/oder kommunikative Ziele zu erreichen.</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/ablauf-ohne-workshop.png" alt="./images/ablauf-ohne-workshop.png"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Evaluation</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20212.jpg" alt="./images/eva-20212.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20213.jpg" alt="./images/eva-20213.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20214.jpg" alt="./images/eva-20214.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20215.jpg" alt="./images/eva-20215.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20216.jpg" alt="./images/eva-20216.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20217.jpg" alt="./images/eva-20217.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20218.jpg" alt="./images/eva-20218.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20219.jpg" alt="./images/eva-20219.jpg"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Leitfaden</h1><h2 class="js-delay subtitle">für ein schmerzfreies Modul</h2></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was wollen wir sehen?</h1><p class="fragment qa-answer">Bei Screendesign geht es darum Denkweise und Vokabular des Designs kennen zu lernen. Denn Medieninformatiker:innen arbeiten häufig in interdisziplinären Teams mit Gestalter:innen, sie sind häufig in der Aufgabe, Gestaltungskonzepte auf ein Medium zu transferieren, sie weiter zu entwickeln und zu implementieren. Dazu ist es unabdingbar und äußerst vorteilhaft zu wissen, wovon die Gestalter:in spricht und welche Ziele für ihn im Vordergrund stehen. Ein weiteres Ziel ist die Entwicklung einer eigenen gestalterischen Grundkompetenz, denn nicht selten werden sie in die Situation kommen eigene und eigenständige Gestaltungslösungen zu entwickeln.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Es kommt vor, dass Übungen unvollständig, vielleicht sogar unzureichend formuliert werden. Es gibt im Grunde zwei Wege damit umzugehen …</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 1</h1><p class="fragment qa-answer">Sie regen sich darüber auf, sprechen sich mit Kommilitonen ab, versuchen das Briefing irgendwie zu komplettieren und die Aufgabe zu lösen und merken im schlechtesten Fall bei der Präsentation, dass Sie das falsche und davon viel zu viel gemacht haben.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 2</h1><p class="fragment qa-answer">Sie stellen schlaue Fragen und versuchen so die Übung zu komplettieren, bevor Sie richtig anfangen.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Unvollständige Übung sind keine Finte, sondern Alltag. Sie werden im Job ständig damit konfrontiert, nicht weil ihr Kunde Sie ärgern möchte, sondern weil er anders denkt, die Aufgabe schon durchdacht oder angedacht hat und er schlichtweg vergisst, Ihnen alle Informationen zu geben, die Sie brauchen, zumal er auch gar nicht weiß, welche Information Sie brauchen. Also stellen Sie die richtigen Fragen. Fragen sind die Antwort.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ja, ich ändere bezogen auf Gestaltungsvorschläge oft meine Meinung, und das hat mehrere Gründe. Der erste Grund ist der, dass dies eine Grundvorraussetzung ist, um neue Lösungen zu finden. Neue Lösungen, sind häufig interessanter und spannender als althergebrachte und bekannte Lösungen und werden daher von Gestaltern gesucht. Also ist es für sie notwendig, Aufgaben und Lösungsansätze aus mehreren Perspektiven zu sehen, was zwangsläufig dazu führt, dass die Meinung zu einem Entwurf häufig um weitere Meinungen, die nicht selten gegensätzlich sind, ergänzt wird.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass es in dieser Domäne selten die eine beste Lösung gibt. Es gibt schlechte Lösungen und gute Lösungen, es gibt sehr gute Lösungen und es gibt perfekte Lösungen, was nicht heißt, dass es zu einem Problem nicht auch viele perfekte Lösungen geben kann. Gestaltungslösungen sind nie binär. Darum ist eine zentrale Frage stets: Was sind alternative Lösungen und Lösungsansätze und warum ist der gewählte Ansatz besser, als die Alternativen? Wer auf diese Frage keine Antwort hat, weil er entweder keine Alternativen entwickelt hat, oder nicht weiß, warum er welche Ansatz bevorzugt, hat keine Argumente und somit einen schlechten Stand.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass häufig ein Gestaltungsziel darin liegt, ausbalancierte Lösungen zu entwickeln. Das führt nicht selten dazu, dass eine guter und gut ausbalancierter Entwurf aus dem Gleichgewicht gerät, sobald ein Element hinzukommt oder wegfällt und der Entwurf daher komplett überdacht oder zumindest stark angepasst wird, ich meine Meinung also mal wieder ändere.</p></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Kurzfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie unvollständige Briefungs durch <strong>gute Fragen</strong> zu komplettieren</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Gestaltungslösungen sind nicht binär</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie stets <strong>Alternativen</strong> und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren <strong>Varianten</strong>) ist</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie <strong>Sachargumente</strong> und <strong>Begründungszusammenhänge</strong> für Ihre Gestaltungen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entscheiden und bewerten Sie <strong>nicht</strong> nach persönlichem Geschmack!</p></div></div></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Bitte schreiben Sie mir keine E-Mails.</h1><div class="fragment"><p>Ich hab schon genug davon!</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Themen Phase 1</h1><p>In der ersten Phase befassen wir uns mit den <strong>Gestaltungsgrundlagen</strong> und deren handwerklicher Umsetzung. Die Übungen in dieser Phase werden einzeln bearbeitet. Die Ergebnisse sind Teil des Gestaltungsportfolios.</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Punkt, Linie, Fläche & Farbe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wahrnehmungsarbeit, Reduktion, Strukturierung & Hierachisierung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gestaltgesetze, Räumlichkeit & Wahrnehmungsphänomene</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Typographie & Textsatz</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Layout</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Flow & Transition</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="has-gap">Den Abschluss bildet das Gestaltungsportfolio als Individualleistung.</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Themen Phase 2</h1><p>In der zweiten Phase befassen wir uns mit <strong>komplexeren gestalterischen Fragen</strong>. Hier wenden wir die Gestaltungsgrundlagen aus Phase 1 an. Die Phase dient zur konkreten Vorbereitung des Projekts. Die Übungen in dieser Phase können einzeln oder in 2er Teams bearbeitet werden.</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gestaltungsziele, Identität & komplexe Layouts</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Barrierearmes Design</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Advanced Prototyping</p></div></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Veranstaltungsarten</h1><h2 class="js-delay subtitle">und deren Ziele</h2></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Vorträge</h1><p class="fragment qa-answer">geben Überblick über ein Themengebiet <span class="is-green">//</span> zeigen theoretische Grundlagen <span class="is-green">//</span> sind interaktiv und initiieren Diskurs</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Trainings</h1><p class="fragment qa-answer">trainieren den Umgang mit Domänen-spezifischer Software (Figma) <span class="is-green">//</span> zeigen und trainieren Best-Practices <span class="is-green">//</span> bauen handwerkliche Fertigkeiten auf</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Workshops</h1><p class="fragment qa-answer">bringen Theorie und Praxis zusammen <span class="is-green">//</span> schulen und trainieren in einem bestimmten Themenfeld <span class="is-green">//</span> bieten Platz zum Experimentieren und für komplexe Fragestellungen</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Feedbacks</h1><p class="fragment qa-answer">geben Ihnen die Chance, Rückmeldung zu Ihrer Arbeit, dem aktuellen Stand und Ihrem Fortschritt zu bekommen <span class="is-green">//</span> müssen von Ihnen gut vorbereitet sein <span class="is-green">//</span> sollten von Ihnen dokumentiert werden</p></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>About Screendesign // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>About Screendesign</h1><h2>Worum geht es in diesem Modul?</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">De·kom·po·si·ti·on</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/die-museen.jpg" alt="./images/die-museen.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zuhoeren.svg" alt="./images/zuhoeren.svg"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Take Aways</h1><p>Nehmen Sie ein DIN A4 Blatt, falten Sie es mittig über die lange Seite, so dass ein Seitenverhältnis im gefalteten Zustand von 105x297mm entsteht. Nutzen Sie das Resultat hochkant. Platzieren Sie oben eine kleine, einfache Portraitskizze von sich, notieren Sie darunter (in Ihrer allerschönsten Handschrift!) folgende Angaben:</p><ul><li>Ihren Namen</li><li>Ihr Alter</li><li>mindestens 5 Dinge, die Sie in diesem Modul lernen wollen/ mit denen Sie sich befassen wollen</li><li>3 Dinge, mit denen Sie sich nicht befassen wollen.</li></ul><p><strong>Sie haben 15 Minuten Zeit</strong></p></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Dataforest Designkonzept</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg" alt="./images/df-startseite-kunst-baeume-it-timeline-10150.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Call to Action</h1><h2 class="js-delay subtitle">Dataforest Designkonzept</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.002.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.002.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.003.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.003.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.004.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.004.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.005.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.005.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.006.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.006.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Formular</h1><h2 class="js-delay subtitle">Dataforest Designkonzept</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-checkout-1.png" alt="./images/df-checkout-1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v10-11016.jpg" alt="./images/df-login-v10-11016.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v11-11020.jpg" alt="./images/df-login-v11-11020.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-v4-11012.jpg" alt="./images/df-login-v4-11012.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/df-login-11008.jpg" alt="./images/df-login-11008.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Zuganzeiger</h1><h2 class="js-delay subtitle">Deutsche Bahn</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.012.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.012.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.013.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.013.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.014.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.014.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Dive.is Verteilerseite</h1><h2 class="js-delay subtitle">für kleine Viewports</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.015.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.015.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.016.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.016.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.017.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.017.jpeg"></figure></section></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Identität</h1><div class="fragment"><p>Was hat <em>Identität</em> mit diesem Modul zu tun?</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.018.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.018.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.019.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.019.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.020.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.020.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.021.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.021.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wenn man eine Reise tut</h1><h2 class="js-delay subtitle">dann hat wan viel zu wählen.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-1.jpg" alt="./images/identitaet-reise-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/identitaet-reise-2.jpg" alt="./images/identitaet-reise-2.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Goldhandel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldankauf-barmen.jpg" alt="./images/goldankauf-barmen.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/goldsilber-shop.jpg" alt="./images/goldsilber-shop.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">EDV Service</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-kuerten.jpg" alt="./images/edv-kuerten.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/edv-repair.jpg" alt="./images/edv-repair.jpg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Typo</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.028.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.028.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.029.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.029.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/000-about-screendesign/000-about-screendesign.030.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.030.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/000-about-screendesign/000-about-screendesign.031.jpeg" alt="./images/000-about-screendesign/000-about-screendesign.031.jpeg"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Screendesign</h1><div class="fragment"><p>5CP <span class="is-purple">//</span> 150 Stunden Workload <span class="is-purple">//</span> keine Klausur, sondern ein Projekt mit abschließender Projektpräsentationsprüfung <span class="is-purple">//</span> 2er Teams <span class="is-purple">//</span> viel Praxis <span class="is-purple">//</span> viel Ausprobieren <span class="is-purple">//</span> mitmachen erforderlich <span class="is-purple">//</span> macht Spaß, aber auch Arbeit <span class="is-purple">//</span> macht trotzdem Spaß <span class="is-purple">//</span> wir nutzen Figma als Tool <span class="is-purple">//</span> keine Klausur, hab ich gesagt, oder?</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Über das Modul</h1><div data-slide-shortcode-class="fragment" class="fragment"><h2>Team</h2><p>Calvin Hinzer, Volker Schaefer, Christian Noss</p></div><div data-slide-shortcode-class="fragment" class="fragment"><h2>Material</h2><p><a href="https:<span class=is-purple>//</span>th-koeln.github.io/mi-bachelor-screendesign/">Website zum Modul</a>, <a href="https:<span class=is-purple>//</span>ilias.th-koeln.de/goto.php?target=crs_1161102&client_id=ILIAS_FH_Koeln">Kurs im Ilias</a></p></div><div data-slide-shortcode-class="fragment" class="fragment"><h2>Prüfungselemente</h2><p>Gestaltungsportfolio & Projekt mit Projektpräsentationsprüfung</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Modulziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>Die Studierenden kennen wesentliche Begriffe der visuellen Kommunikation und können diese anwenden um Briefings, Angebote oder Korrekturwünsche im Design-Kontext zu verstehen oder zu verfassen.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Die Studierenden können Gestaltungslösungen und -kontexte analysieren, argumentieren, diskutieren, dokumentieren und bewerten, um eigene Lösungen innerhalb eines Gestaltungskontextes generieren zu können.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Die Studierenden können in einem gegebenen Gestaltungskontext unter Berücksichtigung von Gestaltungsregeln (Raster, Layout, Typographie, etc.) eigene Gestaltungslösungen entwickeln, systematisch variieren und argumentieren um gegebene funktionale und/oder kommunikative Ziele zu erreichen.</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/ablauf-ohne-workshop.png" alt="./images/ablauf-ohne-workshop.png"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Evaluation</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20212.jpg" alt="./images/eva-20212.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20213.jpg" alt="./images/eva-20213.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20214.jpg" alt="./images/eva-20214.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20215.jpg" alt="./images/eva-20215.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20216.jpg" alt="./images/eva-20216.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20217.jpg" alt="./images/eva-20217.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20218.jpg" alt="./images/eva-20218.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/eva-20219.jpg" alt="./images/eva-20219.jpg"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Leitfaden</h1><h2 class="js-delay subtitle">für ein schmerzfreies Modul</h2></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Was wollen wir sehen?</h1><p class="fragment qa-answer">Bei Screendesign geht es darum Denkweise und Vokabular des Designs kennen zu lernen. Denn Medieninformatiker:innen arbeiten häufig in interdisziplinären Teams mit Gestalter:innen, sie sind häufig in der Aufgabe, Gestaltungskonzepte auf ein Medium zu transferieren, sie weiter zu entwickeln und zu implementieren. Dazu ist es unabdingbar und äußerst vorteilhaft zu wissen, wovon die Gestalter:in spricht und welche Ziele für ihn im Vordergrund stehen. Ein weiteres Ziel ist die Entwicklung einer eigenen gestalterischen Grundkompetenz, denn nicht selten werden sie in die Situation kommen eigene und eigenständige Gestaltungslösungen zu entwickeln.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Es kommt vor, dass Übungen unvollständig, vielleicht sogar unzureichend formuliert werden. Es gibt im Grunde zwei Wege damit umzugehen …</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 1</h1><p class="fragment qa-answer">Sie regen sich darüber auf, sprechen sich mit Kommilitonen ab, versuchen das Briefing irgendwie zu komplettieren und die Aufgabe zu lösen und merken im schlechtesten Fall bei der Präsentation, dass Sie das falsche und davon viel zu viel gemacht haben.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Möglichkeit 2</h1><p class="fragment qa-answer">Sie stellen schlaue Fragen und versuchen so die Übung zu komplettieren, bevor Sie richtig anfangen.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum sind die Übungen oft so schwammig formuliert?</h1><p class="fragment qa-answer">Unvollständige Übung sind keine Finte, sondern Alltag. Sie werden im Job ständig damit konfrontiert, nicht weil ihr Kunde Sie ärgern möchte, sondern weil er anders denkt, die Aufgabe schon durchdacht oder angedacht hat und er schlichtweg vergisst, Ihnen alle Informationen zu geben, die Sie brauchen, zumal er auch gar nicht weiß, welche Information Sie brauchen. Also stellen Sie die richtigen Fragen. Fragen sind die Antwort.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ja, ich ändere bezogen auf Gestaltungsvorschläge oft meine Meinung, und das hat mehrere Gründe. Der erste Grund ist der, dass dies eine Grundvorraussetzung ist, um neue Lösungen zu finden. Neue Lösungen, sind häufig interessanter und spannender als althergebrachte und bekannte Lösungen und werden daher von Gestaltern gesucht. Also ist es für sie notwendig, Aufgaben und Lösungsansätze aus mehreren Perspektiven zu sehen, was zwangsläufig dazu führt, dass die Meinung zu einem Entwurf häufig um weitere Meinungen, die nicht selten gegensätzlich sind, ergänzt wird.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass es in dieser Domäne selten die eine beste Lösung gibt. Es gibt schlechte Lösungen und gute Lösungen, es gibt sehr gute Lösungen und es gibt perfekte Lösungen, was nicht heißt, dass es zu einem Problem nicht auch viele perfekte Lösungen geben kann. Gestaltungslösungen sind nie binär. Darum ist eine zentrale Frage stets: Was sind alternative Lösungen und Lösungsansätze und warum ist der gewählte Ansatz besser, als die Alternativen? Wer auf diese Frage keine Antwort hat, weil er entweder keine Alternativen entwickelt hat, oder nicht weiß, warum er welche Ansatz bevorzugt, hat keine Argumente und somit einen schlechten Stand.</p></div></section><section data-slide-shortcode-class="qa" class="qa" data-transition="zoom"><div class="qa-wrap"><h1 class="qa-question">Warum ändere ich so oft meine Meinung?</h1><p class="fragment qa-answer">Ein weiterer Grund ist, dass häufig ein Gestaltungsziel darin liegt, ausbalancierte Lösungen zu entwickeln. Das führt nicht selten dazu, dass eine guter und gut ausbalancierter Entwurf aus dem Gleichgewicht gerät, sobald ein Element hinzukommt oder wegfällt und der Entwurf daher komplett überdacht oder zumindest stark angepasst wird, ich meine Meinung also mal wieder ändere.</p></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Kurzfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie unvollständige Briefungs durch <strong>gute Fragen</strong> zu komplettieren</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Gestaltungslösungen sind nicht binär</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie stets <strong>Alternativen</strong> und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren <strong>Varianten</strong>) ist</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie <strong>Sachargumente</strong> und <strong>Begründungszusammenhänge</strong> für Ihre Gestaltungen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entscheiden und bewerten Sie <strong>nicht</strong> nach persönlichem Geschmack!</p></div></div></section><section data-slide-class="statement" class="mi-slide statement" data-transition="convex"><div><h1>Bitte schreiben Sie mir keine E-Mails.</h1><div class="fragment"><p>Ich hab schon genug davon!</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Themen Phase 1</h1><p>In der ersten Phase befassen wir uns mit den <strong>Gestaltungsgrundlagen</strong> und deren handwerklicher Umsetzung. Die Übungen in dieser Phase werden einzeln bearbeitet. Die Ergebnisse sind Teil des Gestaltungsportfolios.</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Punkt, Linie, Fläche & Farbe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wahrnehmungsarbeit, Reduktion, Strukturierung & Hierachisierung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gestaltgesetze, Räumlichkeit & Wahrnehmungsphänomene</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Typographie & Textsatz</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Layout</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Flow & Transition</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="has-gap">Den Abschluss bildet das Gestaltungsportfolio als Individualleistung.</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Themen Phase 2</h1><p>In der zweiten Phase befassen wir uns mit <strong>komplexeren gestalterischen Fragen</strong>. Hier wenden wir die Gestaltungsgrundlagen aus Phase 1 an. Die Phase dient zur konkreten Vorbereitung des Projekts. Die Übungen in dieser Phase können einzeln oder in 2er Teams bearbeitet werden.</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gestaltungsziele, Identität & komplexe Layouts</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Barrierearmes Design</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Advanced Prototyping</p></div></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Veranstaltungsarten</h1><h2 class="js-delay subtitle">und deren Ziele</h2></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Vorträge</h1><p class="fragment qa-answer">geben Überblick über ein Themengebiet <span class="is-green">//</span> zeigen theoretische Grundlagen <span class="is-green">//</span> sind interaktiv und initiieren Diskurs</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Trainings</h1><p class="fragment qa-answer">trainieren den Umgang mit Domänen-spezifischer Software (Figma) <span class="is-green">//</span> zeigen und trainieren Best-Practices <span class="is-green">//</span> bauen handwerkliche Fertigkeiten auf</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Workshops</h1><p class="fragment qa-answer">bringen Theorie und Praxis zusammen <span class="is-green">//</span> schulen und trainieren in einem bestimmten Themenfeld <span class="is-green">//</span> bieten Platz zum Experimentieren und für komplexe Fragestellungen</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Feedbacks</h1><p class="fragment qa-answer">geben Ihnen die Chance, Rückmeldung zu Ihrer Arbeit, dem aktuellen Stand und Ihrem Fortschritt zu bekommen <span class="is-green">//</span> müssen von Ihnen gut vorbereitet sein <span class="is-green">//</span> sollten von Ihnen dokumentiert werden</p></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html b/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html
index 29a9445d..aa186c99 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Dataforrest Intro // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was ist Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/a-good-design.png" alt="./images/a-good-design.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-01.png" alt="./images/was-ist-design-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-02.png" alt="./images/was-ist-design-02.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-03.png" alt="./images/was-ist-design-03.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-04.png" alt="./images/was-ist-design-04.png"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Dataforrest Intro // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Was ist Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/a-good-design.png" alt="./images/a-good-design.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-01.png" alt="./images/was-ist-design-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-02.png" alt="./images/was-ist-design-02.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-03.png" alt="./images/was-ist-design-03.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-04.png" alt="./images/was-ist-design-04.png"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html b/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html
index e79481ef..585c501d 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>How to create Digital Products? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">How to create Digital Products?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/digital-products-01.png" alt="./images/digital-products-01.png" width="auto"><figcaption class="bu"><p>Typical Product Team</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-02.png" alt="./images/digital-products-02.png" width="80%"><figcaption class="bu"><p>Different Types of Design(ers)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-03.png" alt="./images/digital-products-03.png" width="auto"><figcaption class="bu"><p>https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-04.png" alt="./images/digital-products-04.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>How to create Digital Products? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">How to create Digital Products?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/digital-products-01.png" alt="./images/digital-products-01.png" width="auto"><figcaption class="bu"><p>Typical Product Team</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-02.png" alt="./images/digital-products-02.png" width="80%"><figcaption class="bu"><p>Different Types of Design(ers)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-03.png" alt="./images/digital-products-03.png" width="auto"><figcaption class="bu"><p>https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-04.png" alt="./images/digital-products-04.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html b/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html
index a43db87a..096e02fc 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Wie würden Sie die folgenden Designs bewerten? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wie würden Sie die folgenden Designs <strong>bewerten</strong>?</h1><h2 class="js-delay subtitle">Oder anders gefragt: nach welchen <strong>Kriterien</strong> würde Sie bewerten?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-1.jpg" alt="./images/design-bewerten-2023-1.jpg" width="auto"><figcaption class="bu"><p>https://virena.eu/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-2.jpg" alt="./images/design-bewerten-2023-2.jpg" width="auto"><figcaption class="bu"><p>https://lucasdeoliveira.webflow.io/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-3.jpg" alt="./images/design-bewerten-2023-3.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-4.jpg" alt="./images/design-bewerten-2023-4.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-5.jpg" alt="./images/design-bewerten-2023-5.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-6.jpg" alt="./images/design-bewerten-2023-6.jpg" width="auto"><figcaption class="bu"><p>https://www.canyon.com/de-de/</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Wie würden Sie die folgenden Designs bewerten? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie würden Sie die folgenden Designs <strong>bewerten</strong>?</h1><h2 class="js-delay subtitle">Oder anders gefragt: nach welchen <strong>Kriterien</strong> würde Sie bewerten?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-1.jpg" alt="./images/design-bewerten-2023-1.jpg" width="auto"><figcaption class="bu"><p>https://virena.eu/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-2.jpg" alt="./images/design-bewerten-2023-2.jpg" width="auto"><figcaption class="bu"><p>https://lucasdeoliveira.webflow.io/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-3.jpg" alt="./images/design-bewerten-2023-3.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-4.jpg" alt="./images/design-bewerten-2023-4.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-5.jpg" alt="./images/design-bewerten-2023-5.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-6.jpg" alt="./images/design-bewerten-2023-6.jpg" width="auto"><figcaption class="bu"><p>https://www.canyon.com/de-de/</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html b/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
index 1854e2c5..5119bfa6 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Design is ... // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Design is ...</h1></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">making things pretty?</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">moving pixels around?</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-01.png" alt="./images/wir-duerfen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-02.png" alt="./images/wir-duerfen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">asking the right questions.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">identifying and solving problems.</p></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Was wären die <strong>richtigen Fragen</strong> am Anfang eines Designprozesses?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Wie können wir <strong>Probleme identifizieren</strong>?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Design is ... // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Design is ...</h1></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">making things pretty?</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">moving pixels around?</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-01.png" alt="./images/wir-duerfen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-02.png" alt="./images/wir-duerfen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">asking the right questions.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">identifying and solving problems.</p></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Was wären die <strong>richtigen Fragen</strong> am Anfang eines Designprozesses?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie können wir <strong>Probleme identifizieren</strong>?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html b/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html
index b4a87dd1..5384f153 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Woran erkennen wir gutes Design? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Woran erkennen wir gutes Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-01.png" alt="./images/gutes-design-01.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Good Design is innovative</h1><div class="fragment">The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.</div></div></section><section class="statement"><div><h1 class="title">Good design is aesthetic</h1><div class="fragment">The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product useful</h1><div class="fragment">A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product understandable</h1><div class="fragment">It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.</div></div></section><section class="statement"><div><h1 class="title">Good design is unobtrusive</h1><div class="fragment">Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.</div></div></section><section class="statement"><div><h1 class="title">Good design is honest</h1><div class="fragment">It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.</div></div></section><section class="statement"><div><h1 class="title">Good design is long-lasting</h1><div class="fragment">It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.</div></div></section><section class="statement"><div><h1 class="title">Good design is thorough down to the last detail</h1><div class="fragment">Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.</div></div></section><section class="statement"><div><h1 class="title">Good design is environmentally-friendly</h1><div class="fragment">Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.</div></div></section><section class="statement"><div><h1 class="title">Good design is as little design as possible</h1><div class="fragment">Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-02.png" alt="./images/gutes-design-02.png" width="auto"><figcaption class="bu"><p>Dieter Rams<br>Industrial Designer</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-03.png" alt="./images/gutes-design-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-04.png" alt="./images/gutes-design-04.png" width="auto"></figure></section><section class="simple"><div><h1>Rams Kriterien</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">innovative</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">aesthetic</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product useful</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product understandable</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">unobtrusive</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">honest</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">long-lasting</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">thorough down to the last detail</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">environmentally-friendly</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">as little design as possible</p></div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Woran erkennen wir gutes Design? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Woran erkennen wir gutes Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-01.png" alt="./images/gutes-design-01.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Good Design is innovative</h1><div class="fragment">The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.</div></div></section><section class="statement"><div><h1 class="title">Good design is aesthetic</h1><div class="fragment">The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product useful</h1><div class="fragment">A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product understandable</h1><div class="fragment">It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.</div></div></section><section class="statement"><div><h1 class="title">Good design is unobtrusive</h1><div class="fragment">Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.</div></div></section><section class="statement"><div><h1 class="title">Good design is honest</h1><div class="fragment">It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.</div></div></section><section class="statement"><div><h1 class="title">Good design is long-lasting</h1><div class="fragment">It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.</div></div></section><section class="statement"><div><h1 class="title">Good design is thorough down to the last detail</h1><div class="fragment">Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.</div></div></section><section class="statement"><div><h1 class="title">Good design is environmentally-friendly</h1><div class="fragment">Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.</div></div></section><section class="statement"><div><h1 class="title">Good design is as little design as possible</h1><div class="fragment">Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-02.png" alt="./images/gutes-design-02.png" width="auto"><figcaption class="bu"><p>Dieter Rams<br>Industrial Designer</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-03.png" alt="./images/gutes-design-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-04.png" alt="./images/gutes-design-04.png" width="auto"></figure></section><section class="simple"><div><h1>Rams Kriterien</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">innovative</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">aesthetic</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product useful</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product understandable</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">unobtrusive</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">honest</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">long-lasting</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">thorough down to the last detail</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">environmentally-friendly</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">as little design as possible</p></div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html b/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html
index e6d1d335..c9b70dcb 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Design Basics // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Design Basics</h1></div></section><section class="simple"><div><h1>Zum Start</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie <strong>offen</strong> zu sein</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Gestaltungslösungen sind nicht binär</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie unvollständige Übung durch <strong>gute Fragen</strong> zu komplettieren</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie stets <strong>Alternativen</strong> und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren <strong>Varianten</strong>) ist</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie <strong>Argumente</strong> und <strong>Begründungszusammenhänge</strong> für Ihre Gestaltungen</p></div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Design Basics // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Design Basics</h1></div></section><section class="simple"><div><h1>Zum Start</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie <strong>offen</strong> zu sein</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Gestaltungslösungen sind nicht binär</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie unvollständige Übung durch <strong>gute Fragen</strong> zu komplettieren</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie stets <strong>Alternativen</strong> und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren <strong>Varianten</strong>) ist</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie <strong>Argumente</strong> und <strong>Begründungszusammenhänge</strong> für Ihre Gestaltungen</p></div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/100-lay-out/index.html b/presentations/screendesign/design-in-der-medieninformatik/100-lay-out/index.html
index 90af8820..3f942d2e 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/100-lay-out/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/100-lay-out/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Wie beschreiben wir ein Layout? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Gutes Auge, präzise Sprache</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Nach welcher Systematik können wir vorgehen?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Elementtypen gibt es eigentlich?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutes-design-08.png" alt="./images/gutes-design-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="" alt="" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-13.png" alt="./images/layout-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Wie beschreiben wir ein Layout? // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Gutes Auge, präzise Sprache</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Nach welcher Systematik können wir vorgehen?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Elementtypen gibt es eigentlich?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutes-design-08.png" alt="./images/gutes-design-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="" alt="" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-13.png" alt="./images/layout-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html b/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
index fb273a47..224dff5a 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Notieren Sie visuelle Eigenschaften für die folgenden Beispiele. // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/eigenschaften-01.png" alt="./images/eigenschaften-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-02.png" alt="./images/eigenschaften-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-03.png" alt="./images/eigenschaften-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-04.png" alt="./images/eigenschaften-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-05.png" alt="./images/eigenschaften-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-06.png" alt="./images/eigenschaften-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-07.png" alt="./images/eigenschaften-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-08.png" alt="./images/eigenschaften-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-09.png" alt="./images/eigenschaften-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-10.png" alt="./images/eigenschaften-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-11.png" alt="./images/eigenschaften-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-12.png" alt="./images/eigenschaften-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-13.png" alt="./images/eigenschaften-13.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Notieren Sie visuelle Eigenschaften für die folgenden Beispiele. // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/eigenschaften-01.png" alt="./images/eigenschaften-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-02.png" alt="./images/eigenschaften-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-03.png" alt="./images/eigenschaften-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-04.png" alt="./images/eigenschaften-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-05.png" alt="./images/eigenschaften-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-06.png" alt="./images/eigenschaften-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-07.png" alt="./images/eigenschaften-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-08.png" alt="./images/eigenschaften-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-09.png" alt="./images/eigenschaften-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-10.png" alt="./images/eigenschaften-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-11.png" alt="./images/eigenschaften-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-12.png" alt="./images/eigenschaften-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-13.png" alt="./images/eigenschaften-13.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/115-lay-out-beschreiben/index.html b/presentations/screendesign/design-in-der-medieninformatik/115-lay-out-beschreiben/index.html
index 5a2576aa..dddeb920 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/115-lay-out-beschreiben/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/115-lay-out-beschreiben/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gutes Auge, präzise Sprache // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Gutes Auge, präzise Sprache</h1><h2 class="js-delay subtitle">Wie beschreiben wir ein Layout?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-01.png" alt="./images/beschreiben-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/beschreiben-02.png" alt="./images/beschreiben-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-03.png" alt="./images/beschreiben-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gutes Auge, präzise Sprache // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gutes Auge, präzise Sprache</h1><h2 class="js-delay subtitle">Wie beschreiben wir ein Layout?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-01.png" alt="./images/beschreiben-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/beschreiben-02.png" alt="./images/beschreiben-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-03.png" alt="./images/beschreiben-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/design-in-der-medieninformatik/index.html b/presentations/screendesign/design-in-der-medieninformatik/index.html
index 263b86bb..dfb5f288 100644
--- a/presentations/screendesign/design-in-der-medieninformatik/index.html
+++ b/presentations/screendesign/design-in-der-medieninformatik/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Design in der Medieninformatik // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Design in der Medieninformatik</h1><h2>---</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Was ist Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/a-good-design.png" alt="./images/a-good-design.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-01.png" alt="./images/was-ist-design-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-02.png" alt="./images/was-ist-design-02.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-03.png" alt="./images/was-ist-design-03.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-04.png" alt="./images/was-ist-design-04.png"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Design in der MI?</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>Absolventen der Medieninformatik <strong>analysieren, realisieren, betreiben</strong> und <strong>evaluieren informationstechnische Prozesse</strong> und <strong>Systeme</strong> zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung <strong>medienbasierter Informationen.</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. <strong>Absolvent*innen</strong> der Medieninformatik <strong>arbeiten</strong> dabei vorwiegend in Teams und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist <strong>Interdisziplinarität</strong> gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es <strong>vermittelt Sichtweisen</strong> und Techniken aus verschiedenen Fachgebieten, von Computergrafik über Mensch-Computer-Interaktion bis <strong>Videoproduktion,</strong> von <strong>Kommunikationsdesign</strong> über Programmentwicklung bis Marketing.</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="zoom"><div><h1>Wir entwickeln Software!</h1></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Ziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Rolle von Design in der Medieninformatik</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundbegriffe klären</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundsätzliche Herangehensweisen und Sichtweisen klären</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">How to create Digital Products?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/digital-products-01.png" alt="./images/digital-products-01.png" width="auto"><figcaption class="bu"><p>Typical Product Team</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-02.png" alt="./images/digital-products-02.png" width="80%"><figcaption class="bu"><p>Different Types of Design(ers)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-03.png" alt="./images/digital-products-03.png" width="auto"><figcaption class="bu"><p>https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-04.png" alt="./images/digital-products-04.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wie würden Sie die folgenden Designs <strong>bewerten</strong>?</h1><h2 class="js-delay subtitle">Oder anders gefragt: nach welchen <strong>Kriterien</strong> würde Sie bewerten?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-1.jpg" alt="./images/design-bewerten-2023-1.jpg" width="auto"><figcaption class="bu"><p>https://virena.eu/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-2.jpg" alt="./images/design-bewerten-2023-2.jpg" width="auto"><figcaption class="bu"><p>https://lucasdeoliveira.webflow.io/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-3.jpg" alt="./images/design-bewerten-2023-3.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-4.jpg" alt="./images/design-bewerten-2023-4.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-5.jpg" alt="./images/design-bewerten-2023-5.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-6.jpg" alt="./images/design-bewerten-2023-6.jpg" width="auto"><figcaption class="bu"><p>https://www.canyon.com/de-de/</p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Design is ...</h1></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">making things pretty?</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">moving pixels around?</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-01.png" alt="./images/wir-duerfen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-02.png" alt="./images/wir-duerfen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">asking the right questions.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">identifying and solving problems.</p></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Was wären die <strong>richtigen Fragen</strong> am Anfang eines Designprozesses?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Wie können wir <strong>Probleme identifizieren</strong>?</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="zoom"><div><h1>Pause</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Woran erkennen wir gutes Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-01.png" alt="./images/gutes-design-01.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Good Design is innovative</h1><div class="fragment">The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.</div></div></section><section class="statement"><div><h1 class="title">Good design is aesthetic</h1><div class="fragment">The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product useful</h1><div class="fragment">A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product understandable</h1><div class="fragment">It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.</div></div></section><section class="statement"><div><h1 class="title">Good design is unobtrusive</h1><div class="fragment">Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.</div></div></section><section class="statement"><div><h1 class="title">Good design is honest</h1><div class="fragment">It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.</div></div></section><section class="statement"><div><h1 class="title">Good design is long-lasting</h1><div class="fragment">It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.</div></div></section><section class="statement"><div><h1 class="title">Good design is thorough down to the last detail</h1><div class="fragment">Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.</div></div></section><section class="statement"><div><h1 class="title">Good design is environmentally-friendly</h1><div class="fragment">Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.</div></div></section><section class="statement"><div><h1 class="title">Good design is as little design as possible</h1><div class="fragment">Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-02.png" alt="./images/gutes-design-02.png" width="auto"><figcaption class="bu"><p>Dieter Rams<br>Industrial Designer</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-03.png" alt="./images/gutes-design-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-04.png" alt="./images/gutes-design-04.png" width="auto"></figure></section><section class="simple"><div><h1>Rams Kriterien</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">innovative</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">aesthetic</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product useful</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product understandable</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">unobtrusive</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">honest</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">long-lasting</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">thorough down to the last detail</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">environmentally-friendly</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">as little design as possible</p></div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Design Basics</h1></div></section><section class="simple"><div><h1>Zum Start</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie <strong>offen</strong> zu sein</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Gestaltungslösungen sind nicht binär</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie unvollständige Übung durch <strong>gute Fragen</strong> zu komplettieren</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie stets <strong>Alternativen</strong> und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren <strong>Varianten</strong>) ist</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie <strong>Argumente</strong> und <strong>Begründungszusammenhänge</strong> für Ihre Gestaltungen</p></div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Beschreiben Sie Funktion und Zielgruppe?</h1><h2 class="js-delay subtitle">Zielsetzung & Zielgruppe</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-01.png" alt="./images/design-basics-01.png" width="auto"><figcaption class="bu"><p>Henne & Ei Problem</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-02.png" alt="./images/design-basics-02.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-03.png" alt="./images/design-basics-03.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-04.png" alt="./images/design-basics-04.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-05.png" alt="./images/design-basics-05.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-05a.png" alt="./images/design-basics-05a.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-06.png" alt="./images/design-basics-06.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-07.png" alt="./images/design-basics-07.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-08.png" alt="./images/design-basics-08.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-09.png" alt="./images/design-basics-09.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-10.png" alt="./images/design-basics-10.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-11.png" alt="./images/design-basics-11.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-12.png" alt="./images/design-basics-12.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-a.png" alt="./images/design-basics-a.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-b.png" alt="./images/design-basics-b.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-c.png" alt="./images/design-basics-c.png" width="auto"><figcaption class="bu"><p>Was ist der Unterschied?</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Gutes Auge, präzise Sprache</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Nach welcher Systematik können wir vorgehen?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Elementtypen gibt es eigentlich?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutes-design-08.png" alt="./images/gutes-design-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="" alt="" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-13.png" alt="./images/layout-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/eigenschaften-01.png" alt="./images/eigenschaften-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-02.png" alt="./images/eigenschaften-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-03.png" alt="./images/eigenschaften-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-04.png" alt="./images/eigenschaften-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-05.png" alt="./images/eigenschaften-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-06.png" alt="./images/eigenschaften-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-07.png" alt="./images/eigenschaften-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-08.png" alt="./images/eigenschaften-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-09.png" alt="./images/eigenschaften-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-10.png" alt="./images/eigenschaften-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-11.png" alt="./images/eigenschaften-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-12.png" alt="./images/eigenschaften-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-13.png" alt="./images/eigenschaften-13.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Gutes Auge, präzise Sprache</h1><h2 class="js-delay subtitle">Wie beschreiben wir ein Layout?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-01.png" alt="./images/beschreiben-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/beschreiben-02.png" alt="./images/beschreiben-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-03.png" alt="./images/beschreiben-03.png" width="auto"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Zusammenfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>Design macht den Unterschied.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Design ist ein »wicked problem«.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Design stellt Fragen.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Medieninformatiker können entscheidende Rollen in Teams übernehmen.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Wir gestalten in der Regel nicht für uns selbst.</p></div></div></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-fullscreen is-centered"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Design in der Medieninformatik // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Design in der Medieninformatik</h1><h2>---</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Was ist Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/a-good-design.png" alt="./images/a-good-design.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-01.png" alt="./images/was-ist-design-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-02.png" alt="./images/was-ist-design-02.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-03.png" alt="./images/was-ist-design-03.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/was-ist-design-04.png" alt="./images/was-ist-design-04.png"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Design in der MI?</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>Absolventen der Medieninformatik <strong>analysieren, realisieren, betreiben</strong> und <strong>evaluieren informationstechnische Prozesse</strong> und <strong>Systeme</strong> zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung <strong>medienbasierter Informationen.</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. <strong>Absolvent*innen</strong> der Medieninformatik <strong>arbeiten</strong> dabei vorwiegend in Teams und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist <strong>Interdisziplinarität</strong> gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es <strong>vermittelt Sichtweisen</strong> und Techniken aus verschiedenen Fachgebieten, von Computergrafik über Mensch-Computer-Interaktion bis <strong>Videoproduktion,</strong> von <strong>Kommunikationsdesign</strong> über Programmentwicklung bis Marketing.</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="zoom"><div><h1>Wir entwickeln Software!</h1></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Ziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Rolle von Design in der Medieninformatik</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundbegriffe klären</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundsätzliche Herangehensweisen und Sichtweisen klären</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">How to create Digital Products?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/digital-products-01.png" alt="./images/digital-products-01.png" width="auto"><figcaption class="bu"><p>Typical Product Team</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-02.png" alt="./images/digital-products-02.png" width="80%"><figcaption class="bu"><p>Different Types of Design(ers)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-03.png" alt="./images/digital-products-03.png" width="auto"><figcaption class="bu"><p>https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/digital-products-04.png" alt="./images/digital-products-04.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie würden Sie die folgenden Designs <strong>bewerten</strong>?</h1><h2 class="js-delay subtitle">Oder anders gefragt: nach welchen <strong>Kriterien</strong> würde Sie bewerten?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-1.jpg" alt="./images/design-bewerten-2023-1.jpg" width="auto"><figcaption class="bu"><p>https://virena.eu/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-2.jpg" alt="./images/design-bewerten-2023-2.jpg" width="auto"><figcaption class="bu"><p>https://lucasdeoliveira.webflow.io/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-3.jpg" alt="./images/design-bewerten-2023-3.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-4.jpg" alt="./images/design-bewerten-2023-4.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-5.jpg" alt="./images/design-bewerten-2023-5.jpg" width="auto"><figcaption class="bu"><p>https://lusion.co/</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-bewerten-2023-6.jpg" alt="./images/design-bewerten-2023-6.jpg" width="auto"><figcaption class="bu"><p>https://www.canyon.com/de-de/</p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Design is ...</h1></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">making things pretty?</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">moving pixels around?</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-01.png" alt="./images/wir-duerfen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/wir-duerfen-02.png" alt="./images/wir-duerfen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">asking the right questions.</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Desing is...</h1><p class="fragment qa-answer">identifying and solving problems.</p></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Was wären die <strong>richtigen Fragen</strong> am Anfang eines Designprozesses?</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie können wir <strong>Probleme identifizieren</strong>?</h1></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="zoom"><div><h1>Pause</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Woran erkennen wir gutes Design?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-01.png" alt="./images/gutes-design-01.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Good Design is innovative</h1><div class="fragment">The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.</div></div></section><section class="statement"><div><h1 class="title">Good design is aesthetic</h1><div class="fragment">The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product useful</h1><div class="fragment">A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.</div></div></section><section class="statement"><div><h1 class="title">Good design makes a product understandable</h1><div class="fragment">It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.</div></div></section><section class="statement"><div><h1 class="title">Good design is unobtrusive</h1><div class="fragment">Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.</div></div></section><section class="statement"><div><h1 class="title">Good design is honest</h1><div class="fragment">It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.</div></div></section><section class="statement"><div><h1 class="title">Good design is long-lasting</h1><div class="fragment">It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.</div></div></section><section class="statement"><div><h1 class="title">Good design is thorough down to the last detail</h1><div class="fragment">Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.</div></div></section><section class="statement"><div><h1 class="title">Good design is environmentally-friendly</h1><div class="fragment">Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.</div></div></section><section class="statement"><div><h1 class="title">Good design is as little design as possible</h1><div class="fragment">Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-02.png" alt="./images/gutes-design-02.png" width="auto"><figcaption class="bu"><p>Dieter Rams<br>Industrial Designer</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-03.png" alt="./images/gutes-design-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gutes-design-04.png" alt="./images/gutes-design-04.png" width="auto"></figure></section><section class="simple"><div><h1>Rams Kriterien</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">innovative</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">aesthetic</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product useful</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">makes a product understandable</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">unobtrusive</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">honest</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">long-lasting</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">thorough down to the last detail</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">environmentally-friendly</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">as little design as possible</p></div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Design Basics</h1></div></section><section class="simple"><div><h1>Zum Start</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie <strong>offen</strong> zu sein</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Gestaltungslösungen sind nicht binär</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>versuchen Sie unvollständige Übung durch <strong>gute Fragen</strong> zu komplettieren</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie stets <strong>Alternativen</strong> und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren <strong>Varianten</strong>) ist</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>entwickeln Sie <strong>Argumente</strong> und <strong>Begründungszusammenhänge</strong> für Ihre Gestaltungen</p></div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Beschreiben Sie Funktion und Zielgruppe?</h1><h2 class="js-delay subtitle">Zielsetzung & Zielgruppe</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-01.png" alt="./images/design-basics-01.png" width="auto"><figcaption class="bu"><p>Henne & Ei Problem</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-02.png" alt="./images/design-basics-02.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-03.png" alt="./images/design-basics-03.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-04.png" alt="./images/design-basics-04.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-05.png" alt="./images/design-basics-05.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-05a.png" alt="./images/design-basics-05a.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-06.png" alt="./images/design-basics-06.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-07.png" alt="./images/design-basics-07.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-08.png" alt="./images/design-basics-08.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-09.png" alt="./images/design-basics-09.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-10.png" alt="./images/design-basics-10.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-11.png" alt="./images/design-basics-11.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/design-basics-12.png" alt="./images/design-basics-12.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-a.png" alt="./images/design-basics-a.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-b.png" alt="./images/design-basics-b.png" width="auto"><figcaption class="bu"><p>Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-c.png" alt="./images/design-basics-c.png" width="auto"><figcaption class="bu"><p>Was ist der Unterschied?</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Gutes Auge, präzise Sprache</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Nach welcher Systematik können wir vorgehen?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Elementtypen gibt es eigentlich?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutes-design-08.png" alt="./images/gutes-design-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="" alt="" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-13.png" alt="./images/layout-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Wie beschreiben wir ein Layout?</h1><h2 class="js-delay subtitle">Welche visuellen Eigenschaften kann ein Element haben?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>Punkt // Linie // Fläche // Form</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/eigenschaften-01.png" alt="./images/eigenschaften-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-02.png" alt="./images/eigenschaften-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-03.png" alt="./images/eigenschaften-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-04.png" alt="./images/eigenschaften-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-05.png" alt="./images/eigenschaften-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-06.png" alt="./images/eigenschaften-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-07.png" alt="./images/eigenschaften-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-08.png" alt="./images/eigenschaften-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-09.png" alt="./images/eigenschaften-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-10.png" alt="./images/eigenschaften-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-11.png" alt="./images/eigenschaften-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-12.png" alt="./images/eigenschaften-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/eigenschaften-13.png" alt="./images/eigenschaften-13.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gutes Auge, präzise Sprache</h1><h2 class="js-delay subtitle">Wie beschreiben wir ein Layout?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-01.png" alt="./images/beschreiben-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/beschreiben-02.png" alt="./images/beschreiben-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beschreiben-03.png" alt="./images/beschreiben-03.png" width="auto"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Zusammenfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p>Design macht den Unterschied.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Design ist ein »wicked problem«.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Design stellt Fragen.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Medieninformatiker können entscheidende Rollen in Teams übernehmen.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p>Wir gestalten in der Regel nicht für uns selbst.</p></div></div></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-fullscreen is-centered"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/eindeutigkeit/030-beispiele/index.html b/presentations/screendesign/eindeutigkeit/030-beispiele/index.html
index 1ef620b0..6564a3e0 100644
--- a/presentations/screendesign/eindeutigkeit/030-beispiele/index.html
+++ b/presentations/screendesign/eindeutigkeit/030-beispiele/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Beispiele aus der Literatur // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Literatur</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.002.jpeg" alt="./images/030-eindeutigkeit.002.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.003.jpeg" alt="./images/030-eindeutigkeit.003.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Beispiele aus der Literatur // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Literatur</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.002.jpeg" alt="./images/030-eindeutigkeit.002.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.003.jpeg" alt="./images/030-eindeutigkeit.003.jpeg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/eindeutigkeit/040-beispiele/index.html b/presentations/screendesign/eindeutigkeit/040-beispiele/index.html
index 527c3e03..3498063c 100644
--- a/presentations/screendesign/eindeutigkeit/040-beispiele/index.html
+++ b/presentations/screendesign/eindeutigkeit/040-beispiele/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Beispiele aus der Veranstaltung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Veranstaltung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.004.jpeg" alt="./images/030-eindeutigkeit.004.jpeg"><figcaption class="bu"><p>Wie könnte eindeutiger angeordnet werden?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.005.jpeg" alt="./images/030-eindeutigkeit.005.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/030-eindeutigkeit.006.jpeg" alt="./images/030-eindeutigkeit.006.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.007.jpeg" alt="./images/030-eindeutigkeit.007.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.008.jpeg" alt="./images/030-eindeutigkeit.008.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Beispiele aus der Veranstaltung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Veranstaltung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.004.jpeg" alt="./images/030-eindeutigkeit.004.jpeg"><figcaption class="bu"><p>Wie könnte eindeutiger angeordnet werden?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.005.jpeg" alt="./images/030-eindeutigkeit.005.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/030-eindeutigkeit.006.jpeg" alt="./images/030-eindeutigkeit.006.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.007.jpeg" alt="./images/030-eindeutigkeit.007.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.008.jpeg" alt="./images/030-eindeutigkeit.008.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/eindeutigkeit/index.html b/presentations/screendesign/eindeutigkeit/index.html
index 43f86b4e..9b107b8b 100644
--- a/presentations/screendesign/eindeutigkeit/index.html
+++ b/presentations/screendesign/eindeutigkeit/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Eindeutigkeit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Eindeutigkeit</h1><h2>Ordnen Sie Elemente so eindeutig wie möglich an.</h2></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Eindeutigkeit</h1><p>Betrachter:innen sucht Bezüge zwischen Elementen und verknüpft gedanklich ähnliche Elemente. Helfen Sie dabei durch Eindeutigkeit in der Anordnung und Einfachheit in der Ausprägung.</p></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Literatur</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.002.jpeg" alt="./images/030-eindeutigkeit.002.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.003.jpeg" alt="./images/030-eindeutigkeit.003.jpeg"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Veranstaltung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.004.jpeg" alt="./images/030-eindeutigkeit.004.jpeg"><figcaption class="bu"><p>Wie könnte eindeutiger angeordnet werden?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.005.jpeg" alt="./images/030-eindeutigkeit.005.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/030-eindeutigkeit.006.jpeg" alt="./images/030-eindeutigkeit.006.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.007.jpeg" alt="./images/030-eindeutigkeit.007.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.008.jpeg" alt="./images/030-eindeutigkeit.008.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Eindeutigkeit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Eindeutigkeit</h1><h2>Ordnen Sie Elemente so eindeutig wie möglich an.</h2></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Eindeutigkeit</h1><p>Betrachter:innen sucht Bezüge zwischen Elementen und verknüpft gedanklich ähnliche Elemente. Helfen Sie dabei durch Eindeutigkeit in der Anordnung und Einfachheit in der Ausprägung.</p></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Literatur</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.002.jpeg" alt="./images/030-eindeutigkeit.002.jpeg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/030-eindeutigkeit.003.jpeg" alt="./images/030-eindeutigkeit.003.jpeg"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Beispiele aus der Veranstaltung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.004.jpeg" alt="./images/030-eindeutigkeit.004.jpeg"><figcaption class="bu"><p>Wie könnte eindeutiger angeordnet werden?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.005.jpeg" alt="./images/030-eindeutigkeit.005.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/030-eindeutigkeit.006.jpeg" alt="./images/030-eindeutigkeit.006.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.007.jpeg" alt="./images/030-eindeutigkeit.007.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/030-eindeutigkeit.008.jpeg" alt="./images/030-eindeutigkeit.008.jpeg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/020-grundlagen/index.html b/presentations/screendesign/farben/020-grundlagen/index.html
index 867592b1..c5a1925c 100644
--- a/presentations/screendesign/farben/020-grundlagen/index.html
+++ b/presentations/screendesign/farben/020-grundlagen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Grundlagen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Grundlagen</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbspektrum-01.png" alt="./images/grundlagen/farbspektrum-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbmodelle-01.png" alt="./images/grundlagen/farbmodelle-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-02.png" alt="./images/grundlagen/farbmodelle-02.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-03.png" alt="./images/grundlagen/farbmodelle-03.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-01.png" alt="./images/grundlagen/farbmischung-01.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-02.png" alt="./images/grundlagen/farbmischung-02.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreis-01.png" alt="./images/grundlagen/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-01.png" alt="./images/grundlagen/saettigung-01.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-02.png" alt="./images/grundlagen/saettigung-02.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-helligkeit-01.png" alt="./images/grundlagen/saettigung-helligkeit-01.png" width="auto"><figcaption class="bu"><p>Sättigung und Helligekeit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/hue-saturation-brightness-01.png" alt="./images/grundlagen/hue-saturation-brightness-01.png" width="auto"><figcaption class="bu"><p>Hue, Saturation and Brightness</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbklima-01.png" alt="./images/grundlagen/farbklima-01.png" width="auto"><figcaption class="bu"><p>Farbklima</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreise-01.png" alt="./images/grundlagen/farbkreise-01.png" width="auto"><figcaption class="bu"><p>Farbkreise</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Grundlagen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Grundlagen</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbspektrum-01.png" alt="./images/grundlagen/farbspektrum-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbmodelle-01.png" alt="./images/grundlagen/farbmodelle-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-02.png" alt="./images/grundlagen/farbmodelle-02.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-03.png" alt="./images/grundlagen/farbmodelle-03.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-01.png" alt="./images/grundlagen/farbmischung-01.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-02.png" alt="./images/grundlagen/farbmischung-02.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreis-01.png" alt="./images/grundlagen/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-01.png" alt="./images/grundlagen/saettigung-01.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-02.png" alt="./images/grundlagen/saettigung-02.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-helligkeit-01.png" alt="./images/grundlagen/saettigung-helligkeit-01.png" width="auto"><figcaption class="bu"><p>Sättigung und Helligekeit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/hue-saturation-brightness-01.png" alt="./images/grundlagen/hue-saturation-brightness-01.png" width="auto"><figcaption class="bu"><p>Hue, Saturation and Brightness</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbklima-01.png" alt="./images/grundlagen/farbklima-01.png" width="auto"><figcaption class="bu"><p>Farbklima</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreise-01.png" alt="./images/grundlagen/farbkreise-01.png" width="auto"><figcaption class="bu"><p>Farbkreise</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html b/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html
index dc6ecd15..537a90f0 100644
--- a/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html
+++ b/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Wechselwirkungen und Farbkontraste // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Wechselwirkungen und Farbkontraste</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Komplementärkontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/komplementaer-kontrast-01.png" alt="./images/kontraste/komplementaer-kontrast-01.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-02.png" alt="./images/kontraste/komplementaer-kontrast-02.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-03.png" alt="./images/kontraste/komplementaer-kontrast-03.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-04.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://thefwa.com/cases/relevare" target="_blank">Relevare</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-05.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://wodniack.dev/" target="_blank">Wodniack</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-06.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://bambini.cmsmasters.net/" target="_blank">Bambini</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-07.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://www.bewitched.com/marketmap.html" target="_blank">Map of the Market</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Farbe-an-sich Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-01.png" alt="./images/kontraste/farbe-an-sich-kontrast-01.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.thalia.de/" target="_blank">Mayersche</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.nintendo.de/" target="_blank">Nintendo</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.kika.de/" target="_blank">Kika</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-05.png" alt="./images/kontraste/farbe-an-sich-kontrast-05.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-06.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://web.archive.org/web/20060106074604/http://www.vitra.de//" target="_blank">web.archive.org</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Quantitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/quantitaets-kontrast-01.png" alt="./images/kontraste/quantitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Quantitätskontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-02.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-03.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://www.cat.com/de_DE.html" target="_blank">Caterpillar</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Bunt-Unbunt Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-01.png" alt="./images/kontraste/bunt-unbunt-kontrast-01.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.th-koeln.de/" target="_blank">Th Köln</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.bauhaus.info/" target="_blank">Bauhaus</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://v2.vuejs.org/" target="_blank">Vue.Js</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-05.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://sushi-bikes.com/" target="_blank">Sushi Bikes</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-06.png" alt="./images/kontraste/bunt-unbunt-kontrast-06.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-07.png" alt="./images/kontraste/bunt-unbunt-kontrast-07.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Hell-Dunkel Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/hell-dunkel-kontrast-01.png" alt="./images/kontraste/hell-dunkel-kontrast-01.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-02.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://kurzgesagt.org/" target="_blank">Kurzgesagt</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-03.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://lucascranach.org/de/search/" target="_blank">cda</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-04.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.jetbrains.com/de-de/" target="_blank">Jetbrains</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-05.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.bega.com/de-de/" target="_blank">Bega</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/hell-dunkel-kontrast-06.png" alt="./images/kontraste/hell-dunkel-kontrast-06.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Kalt-Warm Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-01.png" alt="./images/kontraste/kalt-warm-kontrast-01.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-02.png" alt="./images/kontraste/kalt-warm-kontrast-02.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-03.png" alt="./images/kontraste/kalt-warm-kontrast-03.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-04.png" alt="./images/kontraste/kalt-warm-kontrast-04.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-05.png" alt="./images/kontraste/kalt-warm-kontrast-05.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-06.png" alt="./images/kontraste/kalt-warm-kontrast-06.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-07.png" alt="./images/kontraste/kalt-warm-kontrast-07.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Qualitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/qualitaets-kontrast-01.png" alt="./images/kontraste/qualitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/qualitaets-kontrast-02.png" alt="./images/kontraste/qualitaets-kontrast-02.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Simultankontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-01.png" alt="./images/kontraste/simultan-kontrast-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-02.png" alt="./images/kontraste/simultan-kontrast-02.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-03.png" alt="./images/kontraste/simultan-kontrast-03.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/uebersicht-01.png" alt="./images/kontraste/uebersicht-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Flimmern</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/flimmern-01.png" alt="./images/kontraste/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section class="simple"><figure><p class="list">Dieselbe Farbe wirkt auf dunklem Hintergrund leuchtender.</p><p class="list">Liegen benachbarte Farben nahe bei einander, so schwächen sie sich ab.</p><p class="list">Treffen Komplementärfarben eng bei einander, so verstärken sie sich gegenseitig.</p><p class="list">Bei zu kleinem Helligkeitsunterschied entsteht ein Flimmern.</p></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-02.png" alt="./images/kontraste/flimmern-02.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-03.png" alt="./images/kontraste/flimmern-03.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Wechselwirkungen und Farbkontraste // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Wechselwirkungen und Farbkontraste</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Komplementärkontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/komplementaer-kontrast-01.png" alt="./images/kontraste/komplementaer-kontrast-01.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-02.png" alt="./images/kontraste/komplementaer-kontrast-02.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-03.png" alt="./images/kontraste/komplementaer-kontrast-03.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-04.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://thefwa.com/cases/relevare" target="_blank">Relevare</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-05.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://wodniack.dev/" target="_blank">Wodniack</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-06.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://bambini.cmsmasters.net/" target="_blank">Bambini</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-07.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://www.bewitched.com/marketmap.html" target="_blank">Map of the Market</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Farbe-an-sich Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-01.png" alt="./images/kontraste/farbe-an-sich-kontrast-01.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.thalia.de/" target="_blank">Mayersche</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.nintendo.de/" target="_blank">Nintendo</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.kika.de/" target="_blank">Kika</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-05.png" alt="./images/kontraste/farbe-an-sich-kontrast-05.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-06.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://web.archive.org/web/20060106074604/http://www.vitra.de//" target="_blank">web.archive.org</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Quantitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/quantitaets-kontrast-01.png" alt="./images/kontraste/quantitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Quantitätskontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-02.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-03.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://www.cat.com/de_DE.html" target="_blank">Caterpillar</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Bunt-Unbunt Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-01.png" alt="./images/kontraste/bunt-unbunt-kontrast-01.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.th-koeln.de/" target="_blank">Th Köln</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.bauhaus.info/" target="_blank">Bauhaus</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://v2.vuejs.org/" target="_blank">Vue.Js</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-05.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://sushi-bikes.com/" target="_blank">Sushi Bikes</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-06.png" alt="./images/kontraste/bunt-unbunt-kontrast-06.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-07.png" alt="./images/kontraste/bunt-unbunt-kontrast-07.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Hell-Dunkel Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/hell-dunkel-kontrast-01.png" alt="./images/kontraste/hell-dunkel-kontrast-01.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-02.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://kurzgesagt.org/" target="_blank">Kurzgesagt</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-03.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://lucascranach.org/de/search/" target="_blank">cda</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-04.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.jetbrains.com/de-de/" target="_blank">Jetbrains</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-05.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.bega.com/de-de/" target="_blank">Bega</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/hell-dunkel-kontrast-06.png" alt="./images/kontraste/hell-dunkel-kontrast-06.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Kalt-Warm Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-01.png" alt="./images/kontraste/kalt-warm-kontrast-01.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-02.png" alt="./images/kontraste/kalt-warm-kontrast-02.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-03.png" alt="./images/kontraste/kalt-warm-kontrast-03.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-04.png" alt="./images/kontraste/kalt-warm-kontrast-04.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-05.png" alt="./images/kontraste/kalt-warm-kontrast-05.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-06.png" alt="./images/kontraste/kalt-warm-kontrast-06.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-07.png" alt="./images/kontraste/kalt-warm-kontrast-07.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Qualitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/qualitaets-kontrast-01.png" alt="./images/kontraste/qualitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/qualitaets-kontrast-02.png" alt="./images/kontraste/qualitaets-kontrast-02.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Simultankontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-01.png" alt="./images/kontraste/simultan-kontrast-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-02.png" alt="./images/kontraste/simultan-kontrast-02.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-03.png" alt="./images/kontraste/simultan-kontrast-03.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/uebersicht-01.png" alt="./images/kontraste/uebersicht-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Flimmern</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/flimmern-01.png" alt="./images/kontraste/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section class="simple"><figure><p class="list">Dieselbe Farbe wirkt auf dunklem Hintergrund leuchtender.</p><p class="list">Liegen benachbarte Farben nahe bei einander, so schwächen sie sich ab.</p><p class="list">Treffen Komplementärfarben eng bei einander, so verstärken sie sich gegenseitig.</p><p class="list">Bei zu kleinem Helligkeitsunterschied entsteht ein Flimmern.</p></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-02.png" alt="./images/kontraste/flimmern-02.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-03.png" alt="./images/kontraste/flimmern-03.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/040-farbwirkung/index.html b/presentations/screendesign/farben/040-farbwirkung/index.html
index 3a0062c1..85200c44 100644
--- a/presentations/screendesign/farben/040-farbwirkung/index.html
+++ b/presentations/screendesign/farben/040-farbwirkung/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farbwirkung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Farbwirkung</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-01.png" alt="./images/farbwirkung/farbklimata-01.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-02.png" alt="./images/farbwirkung/farbklimata-02.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-a.png" alt="./images/farbwirkung/pixel-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-b.png" alt="./images/farbwirkung/pixel-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-a.png" alt="./images/farbwirkung/pixel-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-b.png" alt="./images/farbwirkung/pixel-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-a.png" alt="./images/farbwirkung/pixel-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-b.png" alt="./images/farbwirkung/pixel-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-a.png" alt="./images/farbwirkung/pixel-04-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-b.png" alt="./images/farbwirkung/pixel-04-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-a.png" alt="./images/farbwirkung/pixel-05-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-b.png" alt="./images/farbwirkung/pixel-05-b.png" width="auto"></figure></section><section class="screenshot" data-background="./images/farbwirkung/blau-zitat.png"><figure class="cite"><figcaption class="bu"><div><p>Ich mache immer alles blau.<br>Blau finden alle gut.</p></div></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-01.png" alt="./images/farbwirkung/farbharmonie-01.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-02.png" alt="./images/farbwirkung/farbharmonie-02.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/farbkreis-01.png" alt="./images/farbwirkung/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-rot.png" alt="./images/farbwirkung/farb-bedeutung-rot.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-orange.png" alt="./images/farbwirkung/farb-bedeutung-orange.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gelb.png" alt="./images/farbwirkung/farb-bedeutung-gelb.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gruen.png" alt="./images/farbwirkung/farb-bedeutung-gruen.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-cyan.png" alt="./images/farbwirkung/farb-bedeutung-cyan.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-blau.png" alt="./images/farbwirkung/farb-bedeutung-blau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-violett.png" alt="./images/farbwirkung/farb-bedeutung-violett.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-weiss.png" alt="./images/farbwirkung/farb-bedeutung-weiss.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-grau.png" alt="./images/farbwirkung/farb-bedeutung-grau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-schwarz.png" alt="./images/farbwirkung/farb-bedeutung-schwarz.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-a.png" alt="./images/farbwirkung/licht-raum-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-b.png" alt="./images/farbwirkung/licht-raum-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-c.png" alt="./images/farbwirkung/licht-raum-01-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-d.png" alt="./images/farbwirkung/licht-raum-01-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-a.png" alt="./images/farbwirkung/licht-raum-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-b.png" alt="./images/farbwirkung/licht-raum-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-c.png" alt="./images/farbwirkung/licht-raum-02-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-d.png" alt="./images/farbwirkung/licht-raum-02-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-a.png" alt="./images/farbwirkung/licht-raum-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-b.png" alt="./images/farbwirkung/licht-raum-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-c.png" alt="./images/farbwirkung/licht-raum-03-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-01.png" alt="./images/farbwirkung/windows-farbe-01.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-02.png" alt="./images/farbwirkung/windows-farbe-02.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-03.png" alt="./images/farbwirkung/windows-farbe-03.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-04.png" alt="./images/farbwirkung/windows-farbe-04.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-05.png" alt="./images/farbwirkung/windows-farbe-05.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-06.png" alt="./images/farbwirkung/windows-farbe-06.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farbwirkung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Farbwirkung</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-01.png" alt="./images/farbwirkung/farbklimata-01.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-02.png" alt="./images/farbwirkung/farbklimata-02.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-a.png" alt="./images/farbwirkung/pixel-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-b.png" alt="./images/farbwirkung/pixel-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-a.png" alt="./images/farbwirkung/pixel-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-b.png" alt="./images/farbwirkung/pixel-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-a.png" alt="./images/farbwirkung/pixel-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-b.png" alt="./images/farbwirkung/pixel-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-a.png" alt="./images/farbwirkung/pixel-04-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-b.png" alt="./images/farbwirkung/pixel-04-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-a.png" alt="./images/farbwirkung/pixel-05-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-b.png" alt="./images/farbwirkung/pixel-05-b.png" width="auto"></figure></section><section class="screenshot" data-background="./images/farbwirkung/blau-zitat.png"><figure class="cite"><figcaption class="bu"><div><p>Ich mache immer alles blau.<br>Blau finden alle gut.</p></div></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-01.png" alt="./images/farbwirkung/farbharmonie-01.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-02.png" alt="./images/farbwirkung/farbharmonie-02.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/farbkreis-01.png" alt="./images/farbwirkung/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-rot.png" alt="./images/farbwirkung/farb-bedeutung-rot.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-orange.png" alt="./images/farbwirkung/farb-bedeutung-orange.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gelb.png" alt="./images/farbwirkung/farb-bedeutung-gelb.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gruen.png" alt="./images/farbwirkung/farb-bedeutung-gruen.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-cyan.png" alt="./images/farbwirkung/farb-bedeutung-cyan.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-blau.png" alt="./images/farbwirkung/farb-bedeutung-blau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-violett.png" alt="./images/farbwirkung/farb-bedeutung-violett.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-weiss.png" alt="./images/farbwirkung/farb-bedeutung-weiss.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-grau.png" alt="./images/farbwirkung/farb-bedeutung-grau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-schwarz.png" alt="./images/farbwirkung/farb-bedeutung-schwarz.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-a.png" alt="./images/farbwirkung/licht-raum-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-b.png" alt="./images/farbwirkung/licht-raum-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-c.png" alt="./images/farbwirkung/licht-raum-01-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-d.png" alt="./images/farbwirkung/licht-raum-01-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-a.png" alt="./images/farbwirkung/licht-raum-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-b.png" alt="./images/farbwirkung/licht-raum-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-c.png" alt="./images/farbwirkung/licht-raum-02-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-d.png" alt="./images/farbwirkung/licht-raum-02-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-a.png" alt="./images/farbwirkung/licht-raum-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-b.png" alt="./images/farbwirkung/licht-raum-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-c.png" alt="./images/farbwirkung/licht-raum-03-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-01.png" alt="./images/farbwirkung/windows-farbe-01.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-02.png" alt="./images/farbwirkung/windows-farbe-02.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-03.png" alt="./images/farbwirkung/windows-farbe-03.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-04.png" alt="./images/farbwirkung/windows-farbe-04.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-05.png" alt="./images/farbwirkung/windows-farbe-05.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-06.png" alt="./images/farbwirkung/windows-farbe-06.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/050-lesbarkeit/index.html b/presentations/screendesign/farben/050-lesbarkeit/index.html
index ab94fa09..02ebe919 100644
--- a/presentations/screendesign/farben/050-lesbarkeit/index.html
+++ b/presentations/screendesign/farben/050-lesbarkeit/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Lesbarkeit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Lesbarkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/flimmern-01.png" alt="./images/lesbarkeit/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/fernwirkung-01.png" alt="./images/lesbarkeit/fernwirkung-01.png" width="auto"><figcaption class="bu"><p>Fernwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/nahwirkung-01.png" alt="./images/lesbarkeit/nahwirkung-01.png" width="auto"><figcaption class="bu"><p>Nahnwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-01.png" alt="./images/lesbarkeit/buch-lesbarkeit-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-02.png" alt="./images/lesbarkeit/buch-lesbarkeit-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-03.png" alt="./images/lesbarkeit/buch-lesbarkeit-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-04.png" alt="./images/lesbarkeit/buch-lesbarkeit-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-05.png" alt="./images/lesbarkeit/buch-lesbarkeit-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-06.png" alt="./images/lesbarkeit/buch-lesbarkeit-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-07.png" alt="./images/lesbarkeit/buch-lesbarkeit-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-08.png" alt="./images/lesbarkeit/buch-lesbarkeit-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-09.png" alt="./images/lesbarkeit/buch-lesbarkeit-09.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Lesbarkeit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Lesbarkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/flimmern-01.png" alt="./images/lesbarkeit/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/fernwirkung-01.png" alt="./images/lesbarkeit/fernwirkung-01.png" width="auto"><figcaption class="bu"><p>Fernwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/nahwirkung-01.png" alt="./images/lesbarkeit/nahwirkung-01.png" width="auto"><figcaption class="bu"><p>Nahnwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-01.png" alt="./images/lesbarkeit/buch-lesbarkeit-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-02.png" alt="./images/lesbarkeit/buch-lesbarkeit-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-03.png" alt="./images/lesbarkeit/buch-lesbarkeit-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-04.png" alt="./images/lesbarkeit/buch-lesbarkeit-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-05.png" alt="./images/lesbarkeit/buch-lesbarkeit-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-06.png" alt="./images/lesbarkeit/buch-lesbarkeit-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-07.png" alt="./images/lesbarkeit/buch-lesbarkeit-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-08.png" alt="./images/lesbarkeit/buch-lesbarkeit-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-09.png" alt="./images/lesbarkeit/buch-lesbarkeit-09.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/060-farbenlesen/index.html b/presentations/screendesign/farben/060-farbenlesen/index.html
index 91d9ef21..372a493a 100644
--- a/presentations/screendesign/farben/060-farbenlesen/index.html
+++ b/presentations/screendesign/farben/060-farbenlesen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farblesen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Farbenlesen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-01.png" alt="./images/farbenlesen/farben-lesen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-02.png" alt="./images/farbenlesen/farben-lesen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-03.png" alt="./images/farbenlesen/farben-lesen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-04.png" alt="./images/farbenlesen/farben-lesen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-05.png" alt="./images/farbenlesen/farben-lesen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-06.png" alt="./images/farbenlesen/farben-lesen-06.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farblesen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Farbenlesen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-01.png" alt="./images/farbenlesen/farben-lesen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-02.png" alt="./images/farbenlesen/farben-lesen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-03.png" alt="./images/farbenlesen/farben-lesen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-04.png" alt="./images/farbenlesen/farben-lesen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-05.png" alt="./images/farbenlesen/farben-lesen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-06.png" alt="./images/farbenlesen/farben-lesen-06.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html b/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html
index cd40b4cf..fa77dd4d 100644
--- a/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html
+++ b/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farbe zum Orientieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Farbe zum Orientieren</h1></div></section><section class="image screenshot shadow"><figure><img src="./images/orientierung/koeln-fahrplan-01.png"><figcaption class="bu"><p>Das Netz der Stadt</p><p class="credit"><a href="https://www.b-schmitz.com/das-netz-der-stadt" target="_blank">Benedikt Schmitz</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/orientierung/kabel-01.png" alt="./images/orientierung/kabel-01.png" width="auto"></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/green-peace-energy-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/green-peace-energy-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/green-peace-energy-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-04.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Probleme?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-01.png" alt="./images/orientierung/farbstrahl-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-02.png" alt="./images/orientierung/farbstrahl-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-03.png" alt="./images/orientierung/farbstrahl-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-04.png" alt="./images/orientierung/farbstrahl-04.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/regeln-01.png" alt="./images/orientierung/regeln-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farbe zum Orientieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Farbe zum Orientieren</h1></div></section><section class="image screenshot shadow"><figure><img src="./images/orientierung/koeln-fahrplan-01.png"><figcaption class="bu"><p>Das Netz der Stadt</p><p class="credit"><a href="https://www.b-schmitz.com/das-netz-der-stadt" target="_blank">Benedikt Schmitz</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/orientierung/kabel-01.png" alt="./images/orientierung/kabel-01.png" width="auto"></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/green-peace-energy-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/green-peace-energy-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/green-peace-energy-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/orientierung/ebr-04.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Probleme?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-01.png" alt="./images/orientierung/farbstrahl-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-02.png" alt="./images/orientierung/farbstrahl-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-03.png" alt="./images/orientierung/farbstrahl-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-04.png" alt="./images/orientierung/farbstrahl-04.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/orientierung/regeln-01.png" alt="./images/orientierung/regeln-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html b/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html
index a64f042d..f9a204e5 100644
--- a/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html
+++ b/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farbe zum Akzentuieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Farbe zum Akzentuieren</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-01.png" alt="./images/akzentuierung/akzentuieren-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-02.png" alt="./images/akzentuierung/akzentuieren-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-03.png" alt="./images/akzentuierung/akzentuieren-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://www.mini.de/" target="_blank">Mini</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farbe zum Akzentuieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Farbe zum Akzentuieren</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-01.png" alt="./images/akzentuierung/akzentuieren-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-02.png" alt="./images/akzentuierung/akzentuieren-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-03.png" alt="./images/akzentuierung/akzentuieren-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://www.mini.de/" target="_blank">Mini</a></p></figcaption></figure></section><section class="image screenshot no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/095-farbe-zum-emotionalisieren/index.html b/presentations/screendesign/farben/095-farbe-zum-emotionalisieren/index.html
index d757e600..1a4af559 100644
--- a/presentations/screendesign/farben/095-farbe-zum-emotionalisieren/index.html
+++ b/presentations/screendesign/farben/095-farbe-zum-emotionalisieren/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farbe zum Emotionalisieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Farbe zum Emotionalisieren</h1><h2 class="js-delay subtitle">Das passiert automatisch</h2></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farbe zum Emotionalisieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image interlude screenshot"><div><h1 class="title">Farbe zum Emotionalisieren</h1><h2 class="js-delay subtitle">Das passiert automatisch</h2></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/farben/index.html b/presentations/screendesign/farben/index.html
index 949529d4..74b2af48 100644
--- a/presentations/screendesign/farben/index.html
+++ b/presentations/screendesign/farben/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farbe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Farbe</h1><h2>Ich nehm immer blau … das finden alle gut.</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-01.png" alt="./images/farbe/corporate-color-01.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-02.png" alt="./images/farbe/corporate-color-02.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-03.png" alt="./images/farbe/corporate-color-03.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-04.png" alt="./images/farbe/corporate-color-04.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/der-gleiche-farbwert.png" alt="./images/farbe/der-gleiche-farbwert.png" width="auto"><figcaption class="bu"><p>Der gleiche Farbwert</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-01.png" alt="./images/farbe/verlaeufe-01.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-02.png" alt="./images/farbe/verlaeufe-02.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-03.png" alt="./images/farbe/verlaeufe-03.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-04.png" alt="./images/farbe/verlaeufe-04.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Grundlagen</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbspektrum-01.png" alt="./images/grundlagen/farbspektrum-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbmodelle-01.png" alt="./images/grundlagen/farbmodelle-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-02.png" alt="./images/grundlagen/farbmodelle-02.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-03.png" alt="./images/grundlagen/farbmodelle-03.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-01.png" alt="./images/grundlagen/farbmischung-01.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-02.png" alt="./images/grundlagen/farbmischung-02.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreis-01.png" alt="./images/grundlagen/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-01.png" alt="./images/grundlagen/saettigung-01.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-02.png" alt="./images/grundlagen/saettigung-02.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-helligkeit-01.png" alt="./images/grundlagen/saettigung-helligkeit-01.png" width="auto"><figcaption class="bu"><p>Sättigung und Helligekeit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/hue-saturation-brightness-01.png" alt="./images/grundlagen/hue-saturation-brightness-01.png" width="auto"><figcaption class="bu"><p>Hue, Saturation and Brightness</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbklima-01.png" alt="./images/grundlagen/farbklima-01.png" width="auto"><figcaption class="bu"><p>Farbklima</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreise-01.png" alt="./images/grundlagen/farbkreise-01.png" width="auto"><figcaption class="bu"><p>Farbkreise</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Wechselwirkungen und Farbkontraste</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Komplementärkontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/komplementaer-kontrast-01.png" alt="./images/kontraste/komplementaer-kontrast-01.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-02.png" alt="./images/kontraste/komplementaer-kontrast-02.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-03.png" alt="./images/kontraste/komplementaer-kontrast-03.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-04.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://thefwa.com/cases/relevare" target="_blank">Relevare</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-05.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://wodniack.dev/" target="_blank">Wodniack</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-06.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://bambini.cmsmasters.net/" target="_blank">Bambini</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-07.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://www.bewitched.com/marketmap.html" target="_blank">Map of the Market</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Farbe-an-sich Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-01.png" alt="./images/kontraste/farbe-an-sich-kontrast-01.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.thalia.de/" target="_blank">Mayersche</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.nintendo.de/" target="_blank">Nintendo</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.kika.de/" target="_blank">Kika</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-05.png" alt="./images/kontraste/farbe-an-sich-kontrast-05.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-06.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://web.archive.org/web/20060106074604/http://www.vitra.de//" target="_blank">web.archive.org</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Quantitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/quantitaets-kontrast-01.png" alt="./images/kontraste/quantitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Quantitätskontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-02.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-03.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://www.cat.com/de_DE.html" target="_blank">Caterpillar</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Bunt-Unbunt Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-01.png" alt="./images/kontraste/bunt-unbunt-kontrast-01.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.th-koeln.de/" target="_blank">Th Köln</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.bauhaus.info/" target="_blank">Bauhaus</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://v2.vuejs.org/" target="_blank">Vue.Js</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-05.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://sushi-bikes.com/" target="_blank">Sushi Bikes</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-06.png" alt="./images/kontraste/bunt-unbunt-kontrast-06.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-07.png" alt="./images/kontraste/bunt-unbunt-kontrast-07.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Hell-Dunkel Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/hell-dunkel-kontrast-01.png" alt="./images/kontraste/hell-dunkel-kontrast-01.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-02.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://kurzgesagt.org/" target="_blank">Kurzgesagt</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-03.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://lucascranach.org/de/search/" target="_blank">cda</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-04.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.jetbrains.com/de-de/" target="_blank">Jetbrains</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-05.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.bega.com/de-de/" target="_blank">Bega</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/hell-dunkel-kontrast-06.png" alt="./images/kontraste/hell-dunkel-kontrast-06.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Kalt-Warm Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-01.png" alt="./images/kontraste/kalt-warm-kontrast-01.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-02.png" alt="./images/kontraste/kalt-warm-kontrast-02.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-03.png" alt="./images/kontraste/kalt-warm-kontrast-03.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-04.png" alt="./images/kontraste/kalt-warm-kontrast-04.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-05.png" alt="./images/kontraste/kalt-warm-kontrast-05.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-06.png" alt="./images/kontraste/kalt-warm-kontrast-06.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-07.png" alt="./images/kontraste/kalt-warm-kontrast-07.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Qualitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/qualitaets-kontrast-01.png" alt="./images/kontraste/qualitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/qualitaets-kontrast-02.png" alt="./images/kontraste/qualitaets-kontrast-02.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Simultankontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-01.png" alt="./images/kontraste/simultan-kontrast-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-02.png" alt="./images/kontraste/simultan-kontrast-02.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-03.png" alt="./images/kontraste/simultan-kontrast-03.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/uebersicht-01.png" alt="./images/kontraste/uebersicht-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Flimmern</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/flimmern-01.png" alt="./images/kontraste/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section class="simple"><figure><p class="list">Dieselbe Farbe wirkt auf dunklem Hintergrund leuchtender.</p><p class="list">Liegen benachbarte Farben nahe bei einander, so schwächen sie sich ab.</p><p class="list">Treffen Komplementärfarben eng bei einander, so verstärken sie sich gegenseitig.</p><p class="list">Bei zu kleinem Helligkeitsunterschied entsteht ein Flimmern.</p></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-02.png" alt="./images/kontraste/flimmern-02.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-03.png" alt="./images/kontraste/flimmern-03.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Farbwirkung</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-01.png" alt="./images/farbwirkung/farbklimata-01.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-02.png" alt="./images/farbwirkung/farbklimata-02.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-a.png" alt="./images/farbwirkung/pixel-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-b.png" alt="./images/farbwirkung/pixel-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-a.png" alt="./images/farbwirkung/pixel-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-b.png" alt="./images/farbwirkung/pixel-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-a.png" alt="./images/farbwirkung/pixel-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-b.png" alt="./images/farbwirkung/pixel-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-a.png" alt="./images/farbwirkung/pixel-04-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-b.png" alt="./images/farbwirkung/pixel-04-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-a.png" alt="./images/farbwirkung/pixel-05-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-b.png" alt="./images/farbwirkung/pixel-05-b.png" width="auto"></figure></section><section class="screenshot" data-background="./images/farbwirkung/blau-zitat.png"><figure class="cite"><figcaption class="bu"><div><p>Ich mache immer alles blau.<br>Blau finden alle gut.</p></div></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-01.png" alt="./images/farbwirkung/farbharmonie-01.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-02.png" alt="./images/farbwirkung/farbharmonie-02.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/farbkreis-01.png" alt="./images/farbwirkung/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-rot.png" alt="./images/farbwirkung/farb-bedeutung-rot.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-orange.png" alt="./images/farbwirkung/farb-bedeutung-orange.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gelb.png" alt="./images/farbwirkung/farb-bedeutung-gelb.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gruen.png" alt="./images/farbwirkung/farb-bedeutung-gruen.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-cyan.png" alt="./images/farbwirkung/farb-bedeutung-cyan.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-blau.png" alt="./images/farbwirkung/farb-bedeutung-blau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-violett.png" alt="./images/farbwirkung/farb-bedeutung-violett.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-weiss.png" alt="./images/farbwirkung/farb-bedeutung-weiss.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-grau.png" alt="./images/farbwirkung/farb-bedeutung-grau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-schwarz.png" alt="./images/farbwirkung/farb-bedeutung-schwarz.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-a.png" alt="./images/farbwirkung/licht-raum-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-b.png" alt="./images/farbwirkung/licht-raum-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-c.png" alt="./images/farbwirkung/licht-raum-01-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-d.png" alt="./images/farbwirkung/licht-raum-01-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-a.png" alt="./images/farbwirkung/licht-raum-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-b.png" alt="./images/farbwirkung/licht-raum-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-c.png" alt="./images/farbwirkung/licht-raum-02-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-d.png" alt="./images/farbwirkung/licht-raum-02-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-a.png" alt="./images/farbwirkung/licht-raum-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-b.png" alt="./images/farbwirkung/licht-raum-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-c.png" alt="./images/farbwirkung/licht-raum-03-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-01.png" alt="./images/farbwirkung/windows-farbe-01.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-02.png" alt="./images/farbwirkung/windows-farbe-02.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-03.png" alt="./images/farbwirkung/windows-farbe-03.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-04.png" alt="./images/farbwirkung/windows-farbe-04.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-05.png" alt="./images/farbwirkung/windows-farbe-05.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-06.png" alt="./images/farbwirkung/windows-farbe-06.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Lesbarkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/flimmern-01.png" alt="./images/lesbarkeit/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/fernwirkung-01.png" alt="./images/lesbarkeit/fernwirkung-01.png" width="auto"><figcaption class="bu"><p>Fernwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/nahwirkung-01.png" alt="./images/lesbarkeit/nahwirkung-01.png" width="auto"><figcaption class="bu"><p>Nahnwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-01.png" alt="./images/lesbarkeit/buch-lesbarkeit-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-02.png" alt="./images/lesbarkeit/buch-lesbarkeit-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-03.png" alt="./images/lesbarkeit/buch-lesbarkeit-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-04.png" alt="./images/lesbarkeit/buch-lesbarkeit-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-05.png" alt="./images/lesbarkeit/buch-lesbarkeit-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-06.png" alt="./images/lesbarkeit/buch-lesbarkeit-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-07.png" alt="./images/lesbarkeit/buch-lesbarkeit-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-08.png" alt="./images/lesbarkeit/buch-lesbarkeit-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-09.png" alt="./images/lesbarkeit/buch-lesbarkeit-09.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Farbenlesen</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-01.png" alt="./images/farbenlesen/farben-lesen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-02.png" alt="./images/farbenlesen/farben-lesen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-03.png" alt="./images/farbenlesen/farben-lesen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-04.png" alt="./images/farbenlesen/farben-lesen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-05.png" alt="./images/farbenlesen/farben-lesen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-06.png" alt="./images/farbenlesen/farben-lesen-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Farbe zum Orientieren</h1></div></section><section class="screenshot image shadow"><figure><img src="./images/orientierung/koeln-fahrplan-01.png"><figcaption class="bu"><p>Das Netz der Stadt</p><p class="credit"><a href="https://www.b-schmitz.com/das-netz-der-stadt" target="_blank">Benedikt Schmitz</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/orientierung/kabel-01.png" alt="./images/orientierung/kabel-01.png" width="auto"></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/green-peace-energy-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/green-peace-energy-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/green-peace-energy-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-04.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Probleme?</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-01.png" alt="./images/orientierung/farbstrahl-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-02.png" alt="./images/orientierung/farbstrahl-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-03.png" alt="./images/orientierung/farbstrahl-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-04.png" alt="./images/orientierung/farbstrahl-04.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/regeln-01.png" alt="./images/orientierung/regeln-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Farbe zum Strukturieren</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/strukturierung/strukturieren-01.png" alt="./images/strukturierung/strukturieren-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Strukturieren</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-02.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Museums für Schöne Künste</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-03.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Museums für Schöne Künste</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-04.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Museums für Schöne Künste</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-05.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Audi</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-06.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.audi.de/de/brand/de.html" target="_blank">Merten</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/strukturierung/strukturieren-07.png" alt="./images/strukturierung/strukturieren-07.png" width="auto"><figcaption class="bu"><p>Farbe zum Strukturieren</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Farbe zum Akzentuieren</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-01.png" alt="./images/akzentuierung/akzentuieren-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-02.png" alt="./images/akzentuierung/akzentuieren-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-03.png" alt="./images/akzentuierung/akzentuieren-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://www.mini.de/" target="_blank">Mini</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Farbe zum Emotionalisieren</h1><h2 class="js-delay subtitle">Das passiert automatisch</h2></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="none"><div><h1>Zusammenfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farben sollten besonnen und wenn möglich sparsam eingesetzt werden.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Ein Farbklima aus zwei Grundfarben reicht meist aus.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="none"><div><h1>Zusammenfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Je farbiger ein Text, umso unleserlicher wird er.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Text sollte nicht mit Blau dargestellt werden. Da Blau ein relativ kurzwelliges Licht ist und Licht unschärfer gesehen wird, je kurzwelliger es ist, wirkt Blau unschärfer als andere Farben.</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/outro/adobe-color.png" alt="./images/outro/adobe-color.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farbe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Farbe</h1><h2>Ich nehm immer blau … das finden alle gut.</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-01.png" alt="./images/farbe/corporate-color-01.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-02.png" alt="./images/farbe/corporate-color-02.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-03.png" alt="./images/farbe/corporate-color-03.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/corporate-color-04.png" alt="./images/farbe/corporate-color-04.png" width="auto"><figcaption class="bu"><p>Corporate Color</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/der-gleiche-farbwert.png" alt="./images/farbe/der-gleiche-farbwert.png" width="auto"><figcaption class="bu"><p>Der gleiche Farbwert</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-01.png" alt="./images/farbe/verlaeufe-01.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-02.png" alt="./images/farbe/verlaeufe-02.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-03.png" alt="./images/farbe/verlaeufe-03.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbe/verlaeufe-04.png" alt="./images/farbe/verlaeufe-04.png" width="auto"><figcaption class="bu"><p>Verläufe</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Grundlagen</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbspektrum-01.png" alt="./images/grundlagen/farbspektrum-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/grundlagen/farbmodelle-01.png" alt="./images/grundlagen/farbmodelle-01.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-02.png" alt="./images/grundlagen/farbmodelle-02.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmodelle-03.png" alt="./images/grundlagen/farbmodelle-03.png" width="auto"><figcaption class="bu"><p>Farbspektrum</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-01.png" alt="./images/grundlagen/farbmischung-01.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbmischung-02.png" alt="./images/grundlagen/farbmischung-02.png" width="auto"><figcaption class="bu"><p>Farbmischung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreis-01.png" alt="./images/grundlagen/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-01.png" alt="./images/grundlagen/saettigung-01.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-02.png" alt="./images/grundlagen/saettigung-02.png" width="auto"><figcaption class="bu"><p>Sättigung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/saettigung-helligkeit-01.png" alt="./images/grundlagen/saettigung-helligkeit-01.png" width="auto"><figcaption class="bu"><p>Sättigung und Helligekeit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/hue-saturation-brightness-01.png" alt="./images/grundlagen/hue-saturation-brightness-01.png" width="auto"><figcaption class="bu"><p>Hue, Saturation and Brightness</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbklima-01.png" alt="./images/grundlagen/farbklima-01.png" width="auto"><figcaption class="bu"><p>Farbklima</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="none"><figure><img src="./images/grundlagen/farbkreise-01.png" alt="./images/grundlagen/farbkreise-01.png" width="auto"><figcaption class="bu"><p>Farbkreise</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Wechselwirkungen und Farbkontraste</h1></div></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Komplementärkontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/komplementaer-kontrast-01.png" alt="./images/kontraste/komplementaer-kontrast-01.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-02.png" alt="./images/kontraste/komplementaer-kontrast-02.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/komplementaer-kontrast-03.png" alt="./images/kontraste/komplementaer-kontrast-03.png" width="auto"><figcaption class="bu"><p>Komplementärkontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-04.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://thefwa.com/cases/relevare" target="_blank">Relevare</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-05.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://wodniack.dev/" target="_blank">Wodniack</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/komplementaer-kontrast-06.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://bambini.cmsmasters.net/" target="_blank">Bambini</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/komplementaer-kontrast-07.png"><figcaption class="bu"><p>Komplementärkontrast</p><p class="credit"><a href="https://www.bewitched.com/marketmap.html" target="_blank">Map of the Market</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Farbe-an-sich Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-01.png" alt="./images/kontraste/farbe-an-sich-kontrast-01.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.thalia.de/" target="_blank">Mayersche</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.nintendo.de/" target="_blank">Nintendo</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.kika.de/" target="_blank">Kika</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="slide"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-05.png" alt="./images/kontraste/farbe-an-sich-kontrast-05.png" width="auto"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/farbe-an-sich-kontrast-06.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://web.archive.org/web/20060106074604/http://www.vitra.de//" target="_blank">web.archive.org</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Quantitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/quantitaets-kontrast-01.png" alt="./images/kontraste/quantitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Quantitätskontrast</p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-02.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section><section class="screenshot image"><figure><img src="./images/kontraste/quantitaets-kontrast-03.png"><figcaption class="bu"><p>Quantitätskontrast</p><p class="credit"><a href="https://www.cat.com/de_DE.html" target="_blank">Caterpillar</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Bunt-Unbunt Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-01.png" alt="./images/kontraste/bunt-unbunt-kontrast-01.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-02.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.th-koeln.de/" target="_blank">Th Köln</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-03.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://www.bauhaus.info/" target="_blank">Bauhaus</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-04.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://v2.vuejs.org/" target="_blank">Vue.Js</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-05.png"><figcaption class="bu"><p>Farbe-an-sich Kontrast</p><p class="credit"><a href="https://sushi-bikes.com/" target="_blank">Sushi Bikes</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-06.png" alt="./images/kontraste/bunt-unbunt-kontrast-06.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/bunt-unbunt-kontrast-07.png" alt="./images/kontraste/bunt-unbunt-kontrast-07.png" width="auto"><figcaption class="bu"><p>Bunt-Unbunt Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Hell-Dunkel Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/hell-dunkel-kontrast-01.png" alt="./images/kontraste/hell-dunkel-kontrast-01.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-02.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://kurzgesagt.org/" target="_blank">Kurzgesagt</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-03.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://lucascranach.org/de/search/" target="_blank">cda</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-04.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.jetbrains.com/de-de/" target="_blank">Jetbrains</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/kontraste/hell-dunkel-kontrast-05.png"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p><p class="credit"><a href="https://www.bega.com/de-de/" target="_blank">Bega</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/hell-dunkel-kontrast-06.png" alt="./images/kontraste/hell-dunkel-kontrast-06.png" width="auto"><figcaption class="bu"><p>Hell-Dunkel Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Kalt-Warm Kontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-01.png" alt="./images/kontraste/kalt-warm-kontrast-01.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-02.png" alt="./images/kontraste/kalt-warm-kontrast-02.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-03.png" alt="./images/kontraste/kalt-warm-kontrast-03.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-04.png" alt="./images/kontraste/kalt-warm-kontrast-04.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/kalt-warm-kontrast-05.png" alt="./images/kontraste/kalt-warm-kontrast-05.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-06.png" alt="./images/kontraste/kalt-warm-kontrast-06.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/kalt-warm-kontrast-07.png" alt="./images/kontraste/kalt-warm-kontrast-07.png" width="auto"><figcaption class="bu"><p>Kalt-Warm Kontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="screenshot image interlude"><div><h1 class="title">Qualitätskontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/qualitaets-kontrast-01.png" alt="./images/kontraste/qualitaets-kontrast-01.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="slide"><figure><img src="./images/kontraste/qualitaets-kontrast-02.png" alt="./images/kontraste/qualitaets-kontrast-02.png" width="auto"><figcaption class="bu"><p>Qualitätskontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Simultankontrast</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-01.png" alt="./images/kontraste/simultan-kontrast-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-02.png" alt="./images/kontraste/simultan-kontrast-02.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/simultan-kontrast-03.png" alt="./images/kontraste/simultan-kontrast-03.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/uebersicht-01.png" alt="./images/kontraste/uebersicht-01.png" width="auto"><figcaption class="bu"><p>Simultankontrast</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="screenshot image interlude"><div><h1 class="title">Flimmern</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/kontraste/flimmern-01.png" alt="./images/kontraste/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section class="simple"><figure><p class="list">Dieselbe Farbe wirkt auf dunklem Hintergrund leuchtender.</p><p class="list">Liegen benachbarte Farben nahe bei einander, so schwächen sie sich ab.</p><p class="list">Treffen Komplementärfarben eng bei einander, so verstärken sie sich gegenseitig.</p><p class="list">Bei zu kleinem Helligkeitsunterschied entsteht ein Flimmern.</p></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-02.png" alt="./images/kontraste/flimmern-02.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/kontraste/flimmern-03.png" alt="./images/kontraste/flimmern-03.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Farbwirkung</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-01.png" alt="./images/farbwirkung/farbklimata-01.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbklimata-02.png" alt="./images/farbwirkung/farbklimata-02.png" width="auto"><figcaption class="bu"><p>Farbklimata</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-a.png" alt="./images/farbwirkung/pixel-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-01-b.png" alt="./images/farbwirkung/pixel-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-a.png" alt="./images/farbwirkung/pixel-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-02-b.png" alt="./images/farbwirkung/pixel-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-a.png" alt="./images/farbwirkung/pixel-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-03-b.png" alt="./images/farbwirkung/pixel-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-a.png" alt="./images/farbwirkung/pixel-04-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-04-b.png" alt="./images/farbwirkung/pixel-04-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-a.png" alt="./images/farbwirkung/pixel-05-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/pixel-05-b.png" alt="./images/farbwirkung/pixel-05-b.png" width="auto"></figure></section><section class="screenshot" data-background="./images/farbwirkung/blau-zitat.png"><figure class="cite"><figcaption class="bu"><div><p>Ich mache immer alles blau.<br>Blau finden alle gut.</p></div></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-01.png" alt="./images/farbwirkung/farbharmonie-01.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farbharmonie-02.png" alt="./images/farbwirkung/farbharmonie-02.png" width="auto"><figcaption class="bu"><p>Farbharmonie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot screenshot image" data-transition="fade"><figure><img src="./images/farbwirkung/farbkreis-01.png" alt="./images/farbwirkung/farbkreis-01.png" width="auto"><figcaption class="bu"><p>Farbkreis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-rot.png" alt="./images/farbwirkung/farb-bedeutung-rot.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-orange.png" alt="./images/farbwirkung/farb-bedeutung-orange.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gelb.png" alt="./images/farbwirkung/farb-bedeutung-gelb.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-gruen.png" alt="./images/farbwirkung/farb-bedeutung-gruen.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-cyan.png" alt="./images/farbwirkung/farb-bedeutung-cyan.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-blau.png" alt="./images/farbwirkung/farb-bedeutung-blau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-violett.png" alt="./images/farbwirkung/farb-bedeutung-violett.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-weiss.png" alt="./images/farbwirkung/farb-bedeutung-weiss.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-grau.png" alt="./images/farbwirkung/farb-bedeutung-grau.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/farb-bedeutung-schwarz.png" alt="./images/farbwirkung/farb-bedeutung-schwarz.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-a.png" alt="./images/farbwirkung/licht-raum-01-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-b.png" alt="./images/farbwirkung/licht-raum-01-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-c.png" alt="./images/farbwirkung/licht-raum-01-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-01-d.png" alt="./images/farbwirkung/licht-raum-01-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-a.png" alt="./images/farbwirkung/licht-raum-02-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-b.png" alt="./images/farbwirkung/licht-raum-02-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-c.png" alt="./images/farbwirkung/licht-raum-02-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-02-d.png" alt="./images/farbwirkung/licht-raum-02-d.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-a.png" alt="./images/farbwirkung/licht-raum-03-a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-b.png" alt="./images/farbwirkung/licht-raum-03-b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/licht-raum-03-c.png" alt="./images/farbwirkung/licht-raum-03-c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-01.png" alt="./images/farbwirkung/windows-farbe-01.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-02.png" alt="./images/farbwirkung/windows-farbe-02.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-03.png" alt="./images/farbwirkung/windows-farbe-03.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-04.png" alt="./images/farbwirkung/windows-farbe-04.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-05.png" alt="./images/farbwirkung/windows-farbe-05.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/farbwirkung/windows-farbe-06.png" alt="./images/farbwirkung/windows-farbe-06.png" width="auto"><figcaption class="bu"><p>Windows Farbschema</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Lesbarkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/flimmern-01.png" alt="./images/lesbarkeit/flimmern-01.png" width="auto"><figcaption class="bu"><p>Flimmern</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/fernwirkung-01.png" alt="./images/lesbarkeit/fernwirkung-01.png" width="auto"><figcaption class="bu"><p>Fernwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/nahwirkung-01.png" alt="./images/lesbarkeit/nahwirkung-01.png" width="auto"><figcaption class="bu"><p>Nahnwirkung nach Heller</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-01.png" alt="./images/lesbarkeit/buch-lesbarkeit-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-02.png" alt="./images/lesbarkeit/buch-lesbarkeit-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-03.png" alt="./images/lesbarkeit/buch-lesbarkeit-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-04.png" alt="./images/lesbarkeit/buch-lesbarkeit-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-05.png" alt="./images/lesbarkeit/buch-lesbarkeit-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-06.png" alt="./images/lesbarkeit/buch-lesbarkeit-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-07.png" alt="./images/lesbarkeit/buch-lesbarkeit-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-08.png" alt="./images/lesbarkeit/buch-lesbarkeit-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/lesbarkeit/buch-lesbarkeit-09.png" alt="./images/lesbarkeit/buch-lesbarkeit-09.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Farbenlesen</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-01.png" alt="./images/farbenlesen/farben-lesen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-02.png" alt="./images/farbenlesen/farben-lesen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-03.png" alt="./images/farbenlesen/farben-lesen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-04.png" alt="./images/farbenlesen/farben-lesen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-05.png" alt="./images/farbenlesen/farben-lesen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/farbenlesen/farben-lesen-06.png" alt="./images/farbenlesen/farben-lesen-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="screenshot image interlude"><div><h1 class="title">Farbe zum Orientieren</h1></div></section><section class="screenshot image shadow"><figure><img src="./images/orientierung/koeln-fahrplan-01.png"><figcaption class="bu"><p>Das Netz der Stadt</p><p class="credit"><a href="https://www.b-schmitz.com/das-netz-der-stadt" target="_blank">Benedikt Schmitz</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/orientierung/kabel-01.png" alt="./images/orientierung/kabel-01.png" width="auto"></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/green-peace-energy-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/green-peace-energy-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/green-peace-energy-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://green-planet-energy.de/" target="_blank">Green Planet Energy</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-01.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-02.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-03.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/orientierung/ebr-04.png"><figcaption class="bu"><p>Farbe zum Orientieren</p><p class="credit"><a href="https://electronicbookreview.com/" target="_blank">Electronic Book Review</a></p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Probleme?</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-01.png" alt="./images/orientierung/farbstrahl-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-02.png" alt="./images/orientierung/farbstrahl-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-03.png" alt="./images/orientierung/farbstrahl-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/farbstrahl-04.png" alt="./images/orientierung/farbstrahl-04.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/orientierung/regeln-01.png" alt="./images/orientierung/regeln-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Orientieren</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Farbe zum Strukturieren</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/strukturierung/strukturieren-01.png" alt="./images/strukturierung/strukturieren-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Strukturieren</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-02.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Museums für Schöne Künste</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-03.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Museums für Schöne Künste</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-04.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Museums für Schöne Künste</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-05.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.mskgent.be/" target="_blank">Audi</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/strukturierung/strukturieren-06.png"><figcaption class="bu"><p>Farbe zum Strukturieren</p><p class="credit"><a href="https://www.audi.de/de/brand/de.html" target="_blank">Merten</a></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image shadow" data-transition="fade"><figure><img src="./images/strukturierung/strukturieren-07.png" alt="./images/strukturierung/strukturieren-07.png" width="auto"><figcaption class="bu"><p>Farbe zum Strukturieren</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="screenshot image interlude"><div><h1 class="title">Farbe zum Akzentuieren</h1></div></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-01.png" alt="./images/akzentuierung/akzentuieren-01.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-02.png" alt="./images/akzentuierung/akzentuieren-02.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/akzentuierung/akzentuieren-03.png" alt="./images/akzentuierung/akzentuieren-03.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://www.mini.de/" target="_blank">Mini</a></p></figcaption></figure></section><section class="screenshot image no-shadow"><figure><img src="./images/akzentuierung/akzentuieren-04.png"><figcaption class="bu"><p>Farbe zum Akzentuieren</p><p class="credit"><a href="https://nachdemfilm.de/" target="_blank">Nach dem Film</a></p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="none"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="screenshot image interlude"><div><h1 class="title">Farbe zum Emotionalisieren</h1><h2 class="js-delay subtitle">Das passiert automatisch</h2></div></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="none"><div><h1>Zusammenfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farben sollten besonnen und wenn möglich sparsam eingesetzt werden.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Ein Farbklima aus zwei Grundfarben reicht meist aus.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.</p></div></div></section><section data-slide-class="simple" class="mi-slide simple" data-transition="none"><div><h1>Zusammenfassung</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Je farbiger ein Text, umso unleserlicher wird er.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Text sollte nicht mit Blau dargestellt werden. Da Blau ein relativ kurzwelliges Licht ist und Licht unschärfer gesehen wird, je kurzwelliger es ist, wirkt Blau unschärfer als andere Farben.</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="none"><section data-slide-shortcode-class="screenshot" class="screenshot image no-shadow" data-transition="fade"><figure><img src="./images/outro/adobe-color.png" alt="./images/outro/adobe-color.png" width="auto"><figcaption class="bu"><p>Farbe zum Akzentuieren</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/flow-and-transition/020-raeum-lichkeit/index.html b/presentations/screendesign/flow-and-transition/020-raeum-lichkeit/index.html
index 7ccfd8f0..8b849326 100644
--- a/presentations/screendesign/flow-and-transition/020-raeum-lichkeit/index.html
+++ b/presentations/screendesign/flow-and-transition/020-raeum-lichkeit/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gestaltgesetze und Räumlichkeit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Gestaltgesetze & Räumlichkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"><figcaption class="bu"><p>Ausblick: Easing</p></figcaption></figure></section><section class="simple"><div><h1>Für den Hinterkopf</h1><figure><p class="list">Übergänge und Abläufe sind bewusste Gestaltungselemente und keine Dekoration.</p><p class="list">Es gibt mehr als einzelne Screens = Verbindung/Übergang von Screens/inhaltlichen Funktionen (Frontend-Architektur).</p><p class="list">Smarte Animationen die dem Nutzern vermitteln wie eine Interaktion funktioniert.</p></figure></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gestaltgesetze und Räumlichkeit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Gestaltgesetze & Räumlichkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"><figcaption class="bu"><p>Ausblick: Easing</p></figcaption></figure></section><section class="simple"><div><h1>Für den Hinterkopf</h1><figure><p class="list">Übergänge und Abläufe sind bewusste Gestaltungselemente und keine Dekoration.</p><p class="list">Es gibt mehr als einzelne Screens = Verbindung/Übergang von Screens/inhaltlichen Funktionen (Frontend-Architektur).</p><p class="list">Smarte Animationen die dem Nutzern vermitteln wie eine Interaktion funktioniert.</p></figure></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/flow-and-transition/index.html b/presentations/screendesign/flow-and-transition/index.html
index 986f6890..e6cdaf70 100644
--- a/presentations/screendesign/flow-and-transition/index.html
+++ b/presentations/screendesign/flow-and-transition/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Flow & Transistion // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Flow and Transition</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h1>Worum geht es?</h1><figure><p class="list">Die Gestaltung von Übergängen und Abläufen mittels Animationen.</p><p class="list">Die Hervorhebung von wichtigen Elementen oder Informationen mittels Animationen.</p><p class="list">Die Sichtbarmachung der Informationsstruktur mittels Animationen.</p></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-01.png" alt="./images/worum-geht-es-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-02.png" alt="./images/worum-geht-es-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-03.png" alt="./images/worum-geht-es-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-04.png" alt="./images/worum-geht-es-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-05.png" alt="./images/worum-geht-es-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-06.png" alt="./images/worum-geht-es-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Gestaltgesetze & Räumlichkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"><figcaption class="bu"><p>Ausblick: Easing</p></figcaption></figure></section><section class="simple"><div><h1>Für den Hinterkopf</h1><figure><p class="list">Übergänge und Abläufe sind bewusste Gestaltungselemente und keine Dekoration.</p><p class="list">Es gibt mehr als einzelne Screens = Verbindung/Übergang von Screens/inhaltlichen Funktionen (Frontend-Architektur).</p><p class="list">Smarte Animationen die dem Nutzern vermitteln wie eine Interaktion funktioniert.</p></figure></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Flow & Transistion // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Flow and Transition</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h1>Worum geht es?</h1><figure><p class="list">Die Gestaltung von Übergängen und Abläufen mittels Animationen.</p><p class="list">Die Hervorhebung von wichtigen Elementen oder Informationen mittels Animationen.</p><p class="list">Die Sichtbarmachung der Informationsstruktur mittels Animationen.</p></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-01.png" alt="./images/worum-geht-es-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-02.png" alt="./images/worum-geht-es-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-03.png" alt="./images/worum-geht-es-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-04.png" alt="./images/worum-geht-es-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-05.png" alt="./images/worum-geht-es-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/worum-geht-es-06.png" alt="./images/worum-geht-es-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Gestaltgesetze & Räumlichkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"><figcaption class="bu"><p>Ausblick: Easing</p></figcaption></figure></section><section class="simple"><div><h1>Für den Hinterkopf</h1><figure><p class="list">Übergänge und Abläufe sind bewusste Gestaltungselemente und keine Dekoration.</p><p class="list">Es gibt mehr als einzelne Screens = Verbindung/Übergang von Screens/inhaltlichen Funktionen (Frontend-Architektur).</p><p class="list">Smarte Animationen die dem Nutzern vermitteln wie eine Interaktion funktioniert.</p></figure></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/020-gesetz-naehe/index.html b/presentations/screendesign/gestaltgesetze/020-gesetz-naehe/index.html
index 50537e20..2f13f0f7 100644
--- a/presentations/screendesign/gestaltgesetze/020-gesetz-naehe/index.html
+++ b/presentations/screendesign/gestaltgesetze/020-gesetz-naehe/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gesetz der Nähe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gesetz der Nähe</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-01.png" alt="./images/gesetz-naehe-01.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-02.png" alt="./images/gesetz-naehe-02.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-03.png" alt="./images/gesetz-naehe-03.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Gesetz der Nähe</h1><div class="fragment">Elemente, die nahe beieinander liegen, werden als zusammengehörig aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gesetz der Nähe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Gesetz der Nähe</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-01.png" alt="./images/gesetz-naehe-01.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-02.png" alt="./images/gesetz-naehe-02.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-03.png" alt="./images/gesetz-naehe-03.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Gesetz der Nähe</h1><div class="fragment">Elemente, die nahe beieinander liegen, werden als zusammengehörig aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/040-gesetz-gute-gestalt/index.html b/presentations/screendesign/gestaltgesetze/040-gesetz-gute-gestalt/index.html
index ef7b9d09..c709f7da 100644
--- a/presentations/screendesign/gestaltgesetze/040-gesetz-gute-gestalt/index.html
+++ b/presentations/screendesign/gestaltgesetze/040-gesetz-gute-gestalt/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Gesetz der guten Gestalt // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Gestalt</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-01.png" alt="./images/gesetz-gute-gestalt-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-02.png" alt="./images/gesetz-gute-gestalt-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-03.png" alt="./images/gesetz-gute-gestalt-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-04.png" alt="./images/gesetz-gute-gestalt-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-05.png" alt="./images/gesetz-gute-gestalt-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-06.png" alt="./images/gesetz-gute-gestalt-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Gestalt</h1><div class="fragment">Mehrere Elemente versucht das Gehirn, zu Gestalten zu verbinden. Es bevorzugt dabei im Ergebnis eine möglichst einfache und einprägsame Gestalt.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Gesetz der guten Gestalt // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Gestalt</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-01.png" alt="./images/gesetz-gute-gestalt-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-02.png" alt="./images/gesetz-gute-gestalt-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-03.png" alt="./images/gesetz-gute-gestalt-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-04.png" alt="./images/gesetz-gute-gestalt-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-05.png" alt="./images/gesetz-gute-gestalt-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-06.png" alt="./images/gesetz-gute-gestalt-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Gestalt</h1><div class="fragment">Mehrere Elemente versucht das Gehirn, zu Gestalten zu verbinden. Es bevorzugt dabei im Ergebnis eine möglichst einfache und einprägsame Gestalt.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/050-gesetz-gute-fortsetzung/index.html b/presentations/screendesign/gestaltgesetze/050-gesetz-gute-fortsetzung/index.html
index 412b926a..5e66def0 100644
--- a/presentations/screendesign/gestaltgesetze/050-gesetz-gute-fortsetzung/index.html
+++ b/presentations/screendesign/gestaltgesetze/050-gesetz-gute-fortsetzung/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Gesetz der guten Fortsetzung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-01.png" alt="./images/gesetz-guten-fortsetzung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-02.png" alt="./images/gesetz-guten-fortsetzung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-03.png" alt="./images/gesetz-guten-fortsetzung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-04.png" alt="./images/gesetz-guten-fortsetzung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-05.png" alt="./images/gesetz-guten-fortsetzung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1><div class="fragment">Elemente, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden als zusammengehörig aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Gesetz der guten Fortsetzung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-01.png" alt="./images/gesetz-guten-fortsetzung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-02.png" alt="./images/gesetz-guten-fortsetzung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-03.png" alt="./images/gesetz-guten-fortsetzung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-04.png" alt="./images/gesetz-guten-fortsetzung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-05.png" alt="./images/gesetz-guten-fortsetzung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1><div class="fragment">Elemente, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden als zusammengehörig aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/060-gesetz-geschlossenheit/index.html b/presentations/screendesign/gestaltgesetze/060-gesetz-geschlossenheit/index.html
index 7f4c2ff8..18703808 100644
--- a/presentations/screendesign/gestaltgesetze/060-gesetz-geschlossenheit/index.html
+++ b/presentations/screendesign/gestaltgesetze/060-gesetz-geschlossenheit/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Gesetz der Geschlossenheit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-01.png" alt="./images/gesetz-geschlossenheit-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-02.png" alt="./images/gesetz-geschlossenheit-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1><div class="fragment">Elemente, die geschlossen oder von einer Linie umrahmt sind, werden als zusammengehörig aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Gesetz der Geschlossenheit // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-01.png" alt="./images/gesetz-geschlossenheit-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-02.png" alt="./images/gesetz-geschlossenheit-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1><div class="fragment">Elemente, die geschlossen oder von einer Linie umrahmt sind, werden als zusammengehörig aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/070-gesetz-erfahrung/index.html b/presentations/screendesign/gestaltgesetze/070-gesetz-erfahrung/index.html
index 2cd2552c..757aaf8f 100644
--- a/presentations/screendesign/gestaltgesetze/070-gesetz-erfahrung/index.html
+++ b/presentations/screendesign/gestaltgesetze/070-gesetz-erfahrung/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Gesetz der guten Fortsetzung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Erfahrung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-01.png" alt="./images/gesetz-erfahrung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-02.png" alt="./images/gesetz-erfahrung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-03.png" alt="./images/gesetz-erfahrung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-04.png" alt="./images/gesetz-erfahrung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-05.png" alt="./images/gesetz-erfahrung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-06.png" alt="./images/gesetz-erfahrung-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-07.png" alt="./images/gesetz-erfahrung-07.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-08.png" alt="./images/gesetz-erfahrung-08.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-09.png" alt="./images/gesetz-erfahrung-09.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-10.png" alt="./images/gesetz-erfahrung-10.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Erfahrung</h1><div class="fragment">Elemente, die sich zu bekannten Gestalten zusammenfügen lassen, werden als solche erkannt, selbst wenn sie unvollständig sind.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Gesetz der guten Fortsetzung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Erfahrung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-01.png" alt="./images/gesetz-erfahrung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-02.png" alt="./images/gesetz-erfahrung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-03.png" alt="./images/gesetz-erfahrung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-04.png" alt="./images/gesetz-erfahrung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-05.png" alt="./images/gesetz-erfahrung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-06.png" alt="./images/gesetz-erfahrung-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-07.png" alt="./images/gesetz-erfahrung-07.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-08.png" alt="./images/gesetz-erfahrung-08.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-09.png" alt="./images/gesetz-erfahrung-09.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-10.png" alt="./images/gesetz-erfahrung-10.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Erfahrung</h1><div class="fragment">Elemente, die sich zu bekannten Gestalten zusammenfügen lassen, werden als solche erkannt, selbst wenn sie unvollständig sind.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/080-gesetz-gemeinsames-schicksal/index.html b/presentations/screendesign/gestaltgesetze/080-gesetz-gemeinsames-schicksal/index.html
index bef61ad5..d9601778 100644
--- a/presentations/screendesign/gestaltgesetze/080-gesetz-gemeinsames-schicksal/index.html
+++ b/presentations/screendesign/gestaltgesetze/080-gesetz-gemeinsames-schicksal/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Gesetz des gemeinsamen Schicksals // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal.svg" alt="./images/gemeinsames-schicksal.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal-animation.svg" alt="./images/gemeinsames-schicksal-animation.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1><div class="fragment">Mehrere, sich gleichzeitig und gleichförmig bewegende Elemente, werden als Einheit aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Gesetz des gemeinsamen Schicksals // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal.svg" alt="./images/gemeinsames-schicksal.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal-animation.svg" alt="./images/gemeinsames-schicksal-animation.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1><div class="fragment">Mehrere, sich gleichzeitig und gleichförmig bewegende Elemente, werden als Einheit aufgefasst.</div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/100-beispiele/index.html b/presentations/screendesign/gestaltgesetze/100-beispiele/index.html
index 58f9e693..c3f7ceee 100644
--- a/presentations/screendesign/gestaltgesetze/100-beispiele/index.html
+++ b/presentations/screendesign/gestaltgesetze/100-beispiele/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Beispiele // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Beispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-01.png" alt="./images/example-text-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-02.png" alt="./images/example-text-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-04.png" alt="./images/example-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-05.png" alt="./images/example-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-06.png" alt="./images/example-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-07.png" alt="./images/example-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-08.png" alt="./images/example-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-09.png" alt="./images/example-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ibm-logo.png" alt="./images/ibm-logo.png" width="auto"><figcaption class="bu"><p>IBM Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-10.png" alt="./images/example-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-11.png" alt="./images/example-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-12.png" alt="./images/example-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-13.png" alt="./images/example-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-14.png" alt="./images/example-14.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-15.png" alt="./images/example-15.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-16.png" alt="./images/example-16.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-17.png" alt="./images/example-17.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/java-logo.png" alt="./images/java-logo.png" width="auto"><figcaption class="bu"><p>Java Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-18.png" alt="./images/example-18.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-19.png" alt="./images/example-19.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/woolmark-logo.png" alt="./images/woolmark-logo.png" width="auto"><figcaption class="bu"><p>Woolmark Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-20.png" alt="./images/example-20.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-21.png" alt="./images/example-21.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-22.png" alt="./images/example-22.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-23.png" alt="./images/example-23.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Beispiele // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Beispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-01.png" alt="./images/example-text-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-02.png" alt="./images/example-text-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-04.png" alt="./images/example-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-05.png" alt="./images/example-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-06.png" alt="./images/example-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-07.png" alt="./images/example-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-08.png" alt="./images/example-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-09.png" alt="./images/example-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ibm-logo.png" alt="./images/ibm-logo.png" width="auto"><figcaption class="bu"><p>IBM Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-10.png" alt="./images/example-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-11.png" alt="./images/example-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-12.png" alt="./images/example-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-13.png" alt="./images/example-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-14.png" alt="./images/example-14.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-15.png" alt="./images/example-15.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-16.png" alt="./images/example-16.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-17.png" alt="./images/example-17.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/java-logo.png" alt="./images/java-logo.png" width="auto"><figcaption class="bu"><p>Java Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-18.png" alt="./images/example-18.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-19.png" alt="./images/example-19.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/woolmark-logo.png" alt="./images/woolmark-logo.png" width="auto"><figcaption class="bu"><p>Woolmark Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-20.png" alt="./images/example-20.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-21.png" alt="./images/example-21.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-22.png" alt="./images/example-22.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-23.png" alt="./images/example-23.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/gestaltgesetze/index.html b/presentations/screendesign/gestaltgesetze/index.html
index b05912f9..55b78281 100644
--- a/presentations/screendesign/gestaltgesetze/index.html
+++ b/presentations/screendesign/gestaltgesetze/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gestaltgesetze // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Gestaltgesetze</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01a.png" alt="./images/cube-01a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01b.png" alt="./images/cube-01b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01c.png" alt="./images/cube-01c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01d.png" alt="./images/cube-01d.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Gestaltpsychologie<h5>Max Wertheimer</h5><br></h1><div class="fragment">Wahrnehmungslehre, die zu erklären versucht, wie wir elementare optische Reize in unserem Gehirn zu einem kompletten Bild oder Objekt zusammensetzen.</div></div></section><section class="simple"><div><h1>Fragen der Gestaltpsychologie</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie entsteht der Eindruck einer Form?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was ist eine „gute“ Form?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie sehen wir Zusammenhänge zwischen Elementen?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Warum sehen wir Zusammenhänge zwischen Elementen?</p></div></figure></div></section><section class="simple"><div><h1>Gestaltgesetze</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Nähe</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Ähnlichkeit</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>guten Gestalt</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>guten Fortsetzung</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Geschlossenheit</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Erfahrung</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz des <strong>gemeinsamen Schicksals</strong></p></div></figure></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gesetz der Nähe</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-01.png" alt="./images/gesetz-naehe-01.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-02.png" alt="./images/gesetz-naehe-02.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-03.png" alt="./images/gesetz-naehe-03.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Gesetz der Nähe</h1><div class="fragment">Elemente, die nahe beieinander liegen, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Ähnlichkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-01.png" alt="./images/gesetz-aehnlichkeit-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-02.png" alt="./images/gesetz-aehnlichkeit-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-03.png" alt="./images/gesetz-aehnlichkeit-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-04.png" alt="./images/gesetz-aehnlichkeit-04.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Ähnlichkeit</h1><div class="fragment">Elemente, die sich ähnlich sind, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Gestalt</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-01.png" alt="./images/gesetz-gute-gestalt-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-02.png" alt="./images/gesetz-gute-gestalt-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-03.png" alt="./images/gesetz-gute-gestalt-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-04.png" alt="./images/gesetz-gute-gestalt-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-05.png" alt="./images/gesetz-gute-gestalt-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-06.png" alt="./images/gesetz-gute-gestalt-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Gestalt</h1><div class="fragment">Mehrere Elemente versucht das Gehirn, zu Gestalten zu verbinden. Es bevorzugt dabei im Ergebnis eine möglichst einfache und einprägsame Gestalt.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-01.png" alt="./images/gesetz-guten-fortsetzung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-02.png" alt="./images/gesetz-guten-fortsetzung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-03.png" alt="./images/gesetz-guten-fortsetzung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-04.png" alt="./images/gesetz-guten-fortsetzung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-05.png" alt="./images/gesetz-guten-fortsetzung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1><div class="fragment">Elemente, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-01.png" alt="./images/gesetz-geschlossenheit-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-02.png" alt="./images/gesetz-geschlossenheit-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1><div class="fragment">Elemente, die geschlossen oder von einer Linie umrahmt sind, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Erfahrung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-01.png" alt="./images/gesetz-erfahrung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-02.png" alt="./images/gesetz-erfahrung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-03.png" alt="./images/gesetz-erfahrung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-04.png" alt="./images/gesetz-erfahrung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-05.png" alt="./images/gesetz-erfahrung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-06.png" alt="./images/gesetz-erfahrung-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-07.png" alt="./images/gesetz-erfahrung-07.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-08.png" alt="./images/gesetz-erfahrung-08.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-09.png" alt="./images/gesetz-erfahrung-09.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-10.png" alt="./images/gesetz-erfahrung-10.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Erfahrung</h1><div class="fragment">Elemente, die sich zu bekannten Gestalten zusammenfügen lassen, werden als solche erkannt, selbst wenn sie unvollständig sind.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal.svg" alt="./images/gemeinsames-schicksal.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal-animation.svg" alt="./images/gemeinsames-schicksal-animation.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1><div class="fragment">Mehrere, sich gleichzeitig und gleichförmig bewegende Elemente, werden als Einheit aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h1>Gestaltgesetze</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Nähe</strong> Elemente, die nahe beieinander liegen, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Ähnlichkeit</strong> Elemente, die sich ähnlich sind, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der guten Gestalt</strong> Mehrere Elemente versucht das Gehirn, zu Gestalten zu verbinden. Es bevorzugt dabei im Ergebnis eine möglichst einfache und einprägsame Gestalt.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der guten Fortsetzung</strong> Elemente, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Geschlossenheit</strong> Elemente, die geschlossen oder von einer Linie umrahmt sind, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Erfahrung</strong> Elemente, die sich zu bekannten Gestalten zusammenfügen lassen, werden als solche erkannt, selbst wenn sie unvollständig sind.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz des gemeinsamen Schicksals</strong> Mehrere, sich gleichzeitig und gleichförmig bewegende Elemente, werden als Einheit aufgefasst.</p></div></figure></div></section><section class="simple"><div><h1>Zentrales Gestaltgesetz</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Jedes Reizmuster wird so gesehen, dass die resultierende Struktur so einfach wie möglich ist.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Die Prägnanz bestimmt nicht nur die Wahrnehmung selbst, sondern auch die Erinnerung und den Verlauf gedanklicher Prozesse. So können wir uns beispielsweise an prägnante Gestalten besser erinnern, als an weniger prägnante.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Unter dem Begriff Prägnanz versteht man Regelhaftigkeit, Einfachheit, Geschlossenheit und Symmetrie - die gute Gestalt.</p></div></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-01.png" alt="./images/sumup-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-02.png" alt="./images/sumup-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-03.png" alt="./images/sumup-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-04.png" alt="./images/sumup-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-05.png" alt="./images/sumup-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/sumup-06.png" alt="./images/sumup-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Beispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-01.png" alt="./images/example-text-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-02.png" alt="./images/example-text-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-04.png" alt="./images/example-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-05.png" alt="./images/example-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-06.png" alt="./images/example-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-07.png" alt="./images/example-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-08.png" alt="./images/example-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-09.png" alt="./images/example-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ibm-logo.png" alt="./images/ibm-logo.png" width="auto"><figcaption class="bu"><p>IBM Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-10.png" alt="./images/example-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-11.png" alt="./images/example-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-12.png" alt="./images/example-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-13.png" alt="./images/example-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-14.png" alt="./images/example-14.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-15.png" alt="./images/example-15.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-16.png" alt="./images/example-16.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-17.png" alt="./images/example-17.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/java-logo.png" alt="./images/java-logo.png" width="auto"><figcaption class="bu"><p>Java Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-18.png" alt="./images/example-18.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-19.png" alt="./images/example-19.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/woolmark-logo.png" alt="./images/woolmark-logo.png" width="auto"><figcaption class="bu"><p>Woolmark Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-20.png" alt="./images/example-20.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-21.png" alt="./images/example-21.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-22.png" alt="./images/example-22.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-23.png" alt="./images/example-23.png" width="auto"></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gestaltgesetze // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Gestaltgesetze</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01a.png" alt="./images/cube-01a.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01b.png" alt="./images/cube-01b.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01c.png" alt="./images/cube-01c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/cube-01d.png" alt="./images/cube-01d.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Gestaltpsychologie<h5>Max Wertheimer</h5><br></h1><div class="fragment">Wahrnehmungslehre, die zu erklären versucht, wie wir elementare optische Reize in unserem Gehirn zu einem kompletten Bild oder Objekt zusammensetzen.</div></div></section><section class="simple"><div><h1>Fragen der Gestaltpsychologie</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie entsteht der Eindruck einer Form?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was ist eine „gute“ Form?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie sehen wir Zusammenhänge zwischen Elementen?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Warum sehen wir Zusammenhänge zwischen Elementen?</p></div></figure></div></section><section class="simple"><div><h1>Gestaltgesetze</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Nähe</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Ähnlichkeit</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>guten Gestalt</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>guten Fortsetzung</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Geschlossenheit</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz der <strong>Erfahrung</strong></p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Gesetz des <strong>gemeinsamen Schicksals</strong></p></div></figure></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Gesetz der Nähe</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-01.png" alt="./images/gesetz-naehe-01.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-02.png" alt="./images/gesetz-naehe-02.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-naehe-03.png" alt="./images/gesetz-naehe-03.png" width="auto"><figcaption class="bu"><p>Gesetz der Nähe</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Gesetz der Nähe</h1><div class="fragment">Elemente, die nahe beieinander liegen, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Ähnlichkeit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-01.png" alt="./images/gesetz-aehnlichkeit-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-02.png" alt="./images/gesetz-aehnlichkeit-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-03.png" alt="./images/gesetz-aehnlichkeit-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-aehnlichkeit-04.png" alt="./images/gesetz-aehnlichkeit-04.png" width="auto"></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Ähnlichkeit</h1><div class="fragment">Elemente, die sich ähnlich sind, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Gestalt</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-01.png" alt="./images/gesetz-gute-gestalt-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-02.png" alt="./images/gesetz-gute-gestalt-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-03.png" alt="./images/gesetz-gute-gestalt-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-04.png" alt="./images/gesetz-gute-gestalt-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-05.png" alt="./images/gesetz-gute-gestalt-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-gute-gestalt-06.png" alt="./images/gesetz-gute-gestalt-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Gestalt</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Gestalt</h1><div class="fragment">Mehrere Elemente versucht das Gehirn, zu Gestalten zu verbinden. Es bevorzugt dabei im Ergebnis eine möglichst einfache und einprägsame Gestalt.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-01.png" alt="./images/gesetz-guten-fortsetzung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-02.png" alt="./images/gesetz-guten-fortsetzung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-03.png" alt="./images/gesetz-guten-fortsetzung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-04.png" alt="./images/gesetz-guten-fortsetzung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-guten-fortsetzung-05.png" alt="./images/gesetz-guten-fortsetzung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der guten Fortsetzung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der guten Fortsetzung</h1><div class="fragment">Elemente, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-01.png" alt="./images/gesetz-geschlossenheit-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-geschlossenheit-02.png" alt="./images/gesetz-geschlossenheit-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Geschlossenheit</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Geschlossenheit</h1><div class="fragment">Elemente, die geschlossen oder von einer Linie umrahmt sind, werden als zusammengehörig aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gesetz der Erfahrung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-01.png" alt="./images/gesetz-erfahrung-01.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-02.png" alt="./images/gesetz-erfahrung-02.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-03.png" alt="./images/gesetz-erfahrung-03.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-04.png" alt="./images/gesetz-erfahrung-04.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-05.png" alt="./images/gesetz-erfahrung-05.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-06.png" alt="./images/gesetz-erfahrung-06.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-07.png" alt="./images/gesetz-erfahrung-07.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-08.png" alt="./images/gesetz-erfahrung-08.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-09.png" alt="./images/gesetz-erfahrung-09.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gesetz-erfahrung-10.png" alt="./images/gesetz-erfahrung-10.png" width="auto"><figcaption class="bu"><p>Das Gesetz der Erfahrung</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz der Erfahrung</h1><div class="fragment">Elemente, die sich zu bekannten Gestalten zusammenfügen lassen, werden als solche erkannt, selbst wenn sie unvollständig sind.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal.svg" alt="./images/gemeinsames-schicksal.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/gemeinsames-schicksal-animation.svg" alt="./images/gemeinsames-schicksal-animation.svg" width="auto"><figcaption class="bu"><p>Das Gesetz des gemeinsamen Schicksals</p></figcaption></figure></section><section class="statement"><div><h1 class="title">Das Gesetz des gemeinsamen Schicksals</h1><div class="fragment">Mehrere, sich gleichzeitig und gleichförmig bewegende Elemente, werden als Einheit aufgefasst.</div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h1>Gestaltgesetze</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Nähe</strong> Elemente, die nahe beieinander liegen, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Ähnlichkeit</strong> Elemente, die sich ähnlich sind, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der guten Gestalt</strong> Mehrere Elemente versucht das Gehirn, zu Gestalten zu verbinden. Es bevorzugt dabei im Ergebnis eine möglichst einfache und einprägsame Gestalt.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der guten Fortsetzung</strong> Elemente, die auf einer durchgehenden Linie oder Kurve angeordnet sind, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Geschlossenheit</strong> Elemente, die geschlossen oder von einer Linie umrahmt sind, werden als zusammengehörig aufgefasst.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz der Erfahrung</strong> Elemente, die sich zu bekannten Gestalten zusammenfügen lassen, werden als solche erkannt, selbst wenn sie unvollständig sind.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Gesetz des gemeinsamen Schicksals</strong> Mehrere, sich gleichzeitig und gleichförmig bewegende Elemente, werden als Einheit aufgefasst.</p></div></figure></div></section><section class="simple"><div><h1>Zentrales Gestaltgesetz</h1><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Jedes Reizmuster wird so gesehen, dass die resultierende Struktur so einfach wie möglich ist.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Die Prägnanz bestimmt nicht nur die Wahrnehmung selbst, sondern auch die Erinnerung und den Verlauf gedanklicher Prozesse. So können wir uns beispielsweise an prägnante Gestalten besser erinnern, als an weniger prägnante.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Unter dem Begriff Prägnanz versteht man Regelhaftigkeit, Einfachheit, Geschlossenheit und Symmetrie - die gute Gestalt.</p></div></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-01.png" alt="./images/sumup-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-02.png" alt="./images/sumup-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-03.png" alt="./images/sumup-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-04.png" alt="./images/sumup-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/sumup-05.png" alt="./images/sumup-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/sumup-06.png" alt="./images/sumup-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Beispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-01.png" alt="./images/example-text-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-text-02.png" alt="./images/example-text-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-04.png" alt="./images/example-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-05.png" alt="./images/example-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-06.png" alt="./images/example-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-07.png" alt="./images/example-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-08.png" alt="./images/example-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-09.png" alt="./images/example-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ibm-logo.png" alt="./images/ibm-logo.png" width="auto"><figcaption class="bu"><p>IBM Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-10.png" alt="./images/example-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-11.png" alt="./images/example-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-12.png" alt="./images/example-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-13.png" alt="./images/example-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-14.png" alt="./images/example-14.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-15.png" alt="./images/example-15.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-16.png" alt="./images/example-16.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-17.png" alt="./images/example-17.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/java-logo.png" alt="./images/java-logo.png" width="auto"><figcaption class="bu"><p>Java Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-18.png" alt="./images/example-18.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-19.png" alt="./images/example-19.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/woolmark-logo.png" alt="./images/woolmark-logo.png" width="auto"><figcaption class="bu"><p>Woolmark Logo</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-20.png" alt="./images/example-20.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/example-21.png" alt="./images/example-21.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-22.png" alt="./images/example-22.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="none"><figure><img src="./images/example-23.png" alt="./images/example-23.png" width="auto"></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/010-bespiele/index.html b/presentations/screendesign/interface-inventar/010-bespiele/index.html
index ca83c4c2..f25dd7eb 100644
--- a/presentations/screendesign/interface-inventar/010-bespiele/index.html
+++ b/presentations/screendesign/interface-inventar/010-bespiele/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Interface Inventar aufbauen und visualisieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Interface Inventar aufbauen und visualisieren</h1></div></section><section class="simple"><figure><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Design Manual</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Styleguide</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Pattern Lab</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">UI Patterns</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Living Styleguide</p></div></div><figcaption class="bu"><a href="http://styleguides.io/" target="_blank">styleguides.io</a></figcaption></figure></section><section class="statement"><div><h1 class="title">Konsistenz</h1><div class="fragment">Konsistenz ist eine fundamentale Anforderung in der Gestaltung. Gleiche Linienstärken, Farben, Füllungen, Texturen, Anschnitte, Motive, Formate usw. sorgen für eine stilistische Zusammengehörigkeit der Bildelemente und eine schnelle Vergleichbarkeit von Abbildungen. Damit wird die Aufmerksamkeit des Betrachters schnell auf Veränderungen von Bildinhalten gelenkt. Vor allem in der Rezeption von Bildfolgen ist der Nutzer auf das Spiel von Konsistenz und Veränderung angewiesen.</div></div></section><section class="simple"><figure><div><h1>Ziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Konsistente GUI sicherstellen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Werkzeug für Designer und Entwickler</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären</p></div></div></figure></section><section class="simple"><figure><div><h1>Anforderungen</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Welchen Anforderungen muss eine Design Dokumentation gerecht werden?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was sollte dokumentiert werden?</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-01.png" alt="./images/website-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-02.png" alt="./images/website-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-03.png" alt="./images/website-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-04.png" alt="./images/website-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-05.png" alt="./images/website-05.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Interface Inventar aufbauen und visualisieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Interface Inventar aufbauen und visualisieren</h1></div></section><section class="simple"><figure><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Design Manual</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Styleguide</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Pattern Lab</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">UI Patterns</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Living Styleguide</p></div></div><figcaption class="bu"><a href="http://styleguides.io/" target="_blank">styleguides.io</a></figcaption></figure></section><section class="statement"><div><h1 class="title">Konsistenz</h1><div class="fragment">Konsistenz ist eine fundamentale Anforderung in der Gestaltung. Gleiche Linienstärken, Farben, Füllungen, Texturen, Anschnitte, Motive, Formate usw. sorgen für eine stilistische Zusammengehörigkeit der Bildelemente und eine schnelle Vergleichbarkeit von Abbildungen. Damit wird die Aufmerksamkeit des Betrachters schnell auf Veränderungen von Bildinhalten gelenkt. Vor allem in der Rezeption von Bildfolgen ist der Nutzer auf das Spiel von Konsistenz und Veränderung angewiesen.</div></div></section><section class="simple"><figure><div><h1>Ziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Konsistente GUI sicherstellen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Werkzeug für Designer und Entwickler</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären</p></div></div></figure></section><section class="simple"><figure><div><h1>Anforderungen</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Welchen Anforderungen muss eine Design Dokumentation gerecht werden?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was sollte dokumentiert werden?</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-01.png" alt="./images/website-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-02.png" alt="./images/website-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-03.png" alt="./images/website-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-04.png" alt="./images/website-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-05.png" alt="./images/website-05.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html b/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html
index 31a76120..e4e41eec 100644
--- a/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html
+++ b/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gestaltungsziel // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gestaltungsziel</h1><h2 class="js-delay subtitle">Wie soll das Design wirken und warum?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gestaltungsziel/firefox-design-values.png" alt="./images/gestaltungsziel/firefox-design-values.png" width="auto"><figcaption class="bu"><p>https://values.design.firefox.com</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gestaltungsziel // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Gestaltungsziel</h1><h2 class="js-delay subtitle">Wie soll das Design wirken und warum?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gestaltungsziel/firefox-design-values.png" alt="./images/gestaltungsziel/firefox-design-values.png" width="auto"><figcaption class="bu"><p>https://values.design.firefox.com</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/030-form-space/index.html b/presentations/screendesign/interface-inventar/030-form-space/index.html
index 3abfe6e0..10e2e460 100644
--- a/presentations/screendesign/interface-inventar/030-form-space/index.html
+++ b/presentations/screendesign/interface-inventar/030-form-space/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Form & Space // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Form & Space</h1></div></section><section class="simple"><figure><div><h1>Form & Space</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spalten</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundaufteilung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstände</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hierarchisierung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Negativraum</p></div></div><figcaption class="bu"><p>Layout/ Gestalterische Macrostruktur & Raster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-01.png" alt="./images/form-space/space-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-02.png" alt="./images/form-space/space-02.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Form & Space // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Form & Space</h1></div></section><section class="simple"><figure><div><h1>Form & Space</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spalten</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundaufteilung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstände</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hierarchisierung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Negativraum</p></div></div><figcaption class="bu"><p>Layout/ Gestalterische Macrostruktur & Raster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-01.png" alt="./images/form-space/space-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-02.png" alt="./images/form-space/space-02.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/040-farbe/index.html b/presentations/screendesign/interface-inventar/040-farbe/index.html
index d7f9321b..a10160ac 100644
--- a/presentations/screendesign/interface-inventar/040-farbe/index.html
+++ b/presentations/screendesign/interface-inventar/040-farbe/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Farbe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Farbe</h1></div></section><section class="simple"><figure><div><h1>Farbe</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbskalen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Sättigung, Helligkeit</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbeinsatz/ Funktion der Farben</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbkombinatorik</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägung: Transparenzen, Rasterungen, Verläufe</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-01.png" alt="./images/farbe/farbe-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-02.png" alt="./images/farbe/farbe-02.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Farbe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Farbe</h1></div></section><section class="simple"><figure><div><h1>Farbe</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbskalen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Sättigung, Helligkeit</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbeinsatz/ Funktion der Farben</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbkombinatorik</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägung: Transparenzen, Rasterungen, Verläufe</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-01.png" alt="./images/farbe/farbe-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-02.png" alt="./images/farbe/farbe-02.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/050-media/index.html b/presentations/screendesign/interface-inventar/050-media/index.html
index df9d361a..0bf7165e 100644
--- a/presentations/screendesign/interface-inventar/050-media/index.html
+++ b/presentations/screendesign/interface-inventar/050-media/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Media // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Media</h1></div></section><section class="simple"><figure><div><h1>Media</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Bilder und deren Größen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Videos und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grafiken und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zuschnitt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbgebung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Kombination mit anderen Elementen</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-01.png" alt="./images/media/media-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-02.png" alt="./images/media/media-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-03.png" alt="./images/media/media-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Media // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Media</h1></div></section><section class="simple"><figure><div><h1>Media</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Bilder und deren Größen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Videos und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grafiken und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zuschnitt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbgebung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Kombination mit anderen Elementen</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-01.png" alt="./images/media/media-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-02.png" alt="./images/media/media-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-03.png" alt="./images/media/media-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/055-typo-satz/index.html b/presentations/screendesign/interface-inventar/055-typo-satz/index.html
index 1f89da93..3c9876c6 100644
--- a/presentations/screendesign/interface-inventar/055-typo-satz/index.html
+++ b/presentations/screendesign/interface-inventar/055-typo-satz/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Typographie & Satz // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Typographie & Satz</h1></div></section><section class="simple"><figure><div><h1>Typographie & Satz</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftart</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftgrößen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftschnitte</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zeilenabstand</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftstile</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Textausrichtung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Satzart</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-01.png" alt="./images/typo/typo-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-02.png" alt="./images/typo/typo-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-03.png" alt="./images/typo/typo-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Typographie & Satz // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Typographie & Satz</h1></div></section><section class="simple"><figure><div><h1>Typographie & Satz</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftart</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftgrößen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftschnitte</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zeilenabstand</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftstile</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Textausrichtung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Satzart</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-01.png" alt="./images/typo/typo-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-02.png" alt="./images/typo/typo-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-03.png" alt="./images/typo/typo-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/060-interaktion/index.html b/presentations/screendesign/interface-inventar/060-interaktion/index.html
index 66d6b83b..a3c1bb7d 100644
--- a/presentations/screendesign/interface-inventar/060-interaktion/index.html
+++ b/presentations/screendesign/interface-inventar/060-interaktion/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Interaktion & Gestaltungselemente // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Interaktion & Gestaltungselemente</h1></div></section><section class="simple"><figure><div><h1>Interaktion & Gestaltungselemente</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">(Trenn)-linien</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Rahmen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hintergründe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionselemente</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Übergänge</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-01.png" alt="./images/interaktion/interaktion-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-02.png" alt="./images/interaktion/interaktion-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-03.png" alt="./images/interaktion/interaktion-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Interaktion & Gestaltungselemente // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Interaktion & Gestaltungselemente</h1></div></section><section class="simple"><figure><div><h1>Interaktion & Gestaltungselemente</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">(Trenn)-linien</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Rahmen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hintergründe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionselemente</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Übergänge</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-01.png" alt="./images/interaktion/interaktion-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-02.png" alt="./images/interaktion/interaktion-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-03.png" alt="./images/interaktion/interaktion-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/interface-inventar/index.html b/presentations/screendesign/interface-inventar/index.html
index 6f73a179..936a0ff2 100644
--- a/presentations/screendesign/interface-inventar/index.html
+++ b/presentations/screendesign/interface-inventar/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Interface Inventar aufbauen und dokumentieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Interface Inventar aufbauen und dokumentieren</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Interface Inventar aufbauen und visualisieren</h1></div></section><section class="simple"><figure><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Design Manual</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Styleguide</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Pattern Lab</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">UI Patterns</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Living Styleguide</p></div></div><figcaption class="bu"><a href="http://styleguides.io/" target="_blank">styleguides.io</a></figcaption></figure></section><section class="statement"><div><h1 class="title">Konsistenz</h1><div class="fragment">Konsistenz ist eine fundamentale Anforderung in der Gestaltung. Gleiche Linienstärken, Farben, Füllungen, Texturen, Anschnitte, Motive, Formate usw. sorgen für eine stilistische Zusammengehörigkeit der Bildelemente und eine schnelle Vergleichbarkeit von Abbildungen. Damit wird die Aufmerksamkeit des Betrachters schnell auf Veränderungen von Bildinhalten gelenkt. Vor allem in der Rezeption von Bildfolgen ist der Nutzer auf das Spiel von Konsistenz und Veränderung angewiesen.</div></div></section><section class="simple"><figure><div><h1>Ziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Konsistente GUI sicherstellen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Werkzeug für Designer und Entwickler</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären</p></div></div></figure></section><section class="simple"><figure><div><h1>Anforderungen</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Welchen Anforderungen muss eine Design Dokumentation gerecht werden?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was sollte dokumentiert werden?</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-01.png" alt="./images/website-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-02.png" alt="./images/website-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-03.png" alt="./images/website-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-04.png" alt="./images/website-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-05.png" alt="./images/website-05.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gestaltungsziel</h1><h2 class="js-delay subtitle">Wie soll das Design wirken und warum?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gestaltungsziel/firefox-design-values.png" alt="./images/gestaltungsziel/firefox-design-values.png" width="auto"><figcaption class="bu"><p>https://values.design.firefox.com</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Form & Space</h1></div></section><section class="simple"><figure><div><h1>Form & Space</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spalten</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundaufteilung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstände</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hierarchisierung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Negativraum</p></div></div><figcaption class="bu"><p>Layout/ Gestalterische Macrostruktur & Raster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-01.png" alt="./images/form-space/space-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-02.png" alt="./images/form-space/space-02.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Farbe</h1></div></section><section class="simple"><figure><div><h1>Farbe</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbskalen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Sättigung, Helligkeit</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbeinsatz/ Funktion der Farben</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbkombinatorik</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägung: Transparenzen, Rasterungen, Verläufe</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-01.png" alt="./images/farbe/farbe-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-02.png" alt="./images/farbe/farbe-02.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Media</h1></div></section><section class="simple"><figure><div><h1>Media</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Bilder und deren Größen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Videos und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grafiken und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zuschnitt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbgebung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Kombination mit anderen Elementen</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-01.png" alt="./images/media/media-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-02.png" alt="./images/media/media-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-03.png" alt="./images/media/media-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Typographie & Satz</h1></div></section><section class="simple"><figure><div><h1>Typographie & Satz</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftart</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftgrößen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftschnitte</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zeilenabstand</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftstile</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Textausrichtung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Satzart</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-01.png" alt="./images/typo/typo-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-02.png" alt="./images/typo/typo-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-03.png" alt="./images/typo/typo-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Interaktion & Gestaltungselemente</h1></div></section><section class="simple"><figure><div><h1>Interaktion & Gestaltungselemente</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">(Trenn)-linien</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Rahmen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hintergründe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionselemente</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Übergänge</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-01.png" alt="./images/interaktion/interaktion-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-02.png" alt="./images/interaktion/interaktion-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-03.png" alt="./images/interaktion/interaktion-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Komponenten</h1></div></section><section class="simple"><figure><div><h1>Komponenten</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Navigation, Cards, Forms, Buttons, Button Groups, Tables, Lists, Grid Lists, Menues, Pickers, Progress & Activity, Slider, Tabs, Toolsbars, Tooltips</p></div></div></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie <strong>strukturieren</strong> wir die Dokumentation?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-01.png" alt="./images/struktur/struktur-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-02.png" alt="./images/struktur/struktur-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-03.png" alt="./images/struktur/struktur-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-04.png" alt="./images/struktur/struktur-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-05.png" alt="./images/struktur/struktur-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-06.jpg" alt="./images/struktur/struktur-06.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-07.jpg" alt="./images/struktur/struktur-07.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-08.jpg" alt="./images/struktur/struktur-08.jpg" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Praxisbeispiel</h1></div></section><section class="image is-fullscreen" data-transition="fade" data-background-transition="fade" data-background="./images/map-cologne.jpg"><div class="is-centered"><div><h1>Pattern Library</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Base</strong> Unwichtiges weglassen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Atoms</strong> Muster bilden</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Molecules</strong> Bezüge herstellen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Organisms</strong> Kombinationen aus Molekülen und Atomen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Composition</strong> Raster, Layout</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Behavior</strong> Flow, Transition, Microinteraction, Reaktion auf Viewports</p></div></div></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Interface Inventar aufbauen und dokumentieren // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Interface Inventar aufbauen und dokumentieren</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Interface Inventar aufbauen und visualisieren</h1></div></section><section class="simple"><figure><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Design Manual</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Styleguide</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Pattern Lab</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">UI Patterns</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Living Styleguide</p></div></div><figcaption class="bu"><a href="http://styleguides.io/" target="_blank">styleguides.io</a></figcaption></figure></section><section class="statement"><div><h1 class="title">Konsistenz</h1><div class="fragment">Konsistenz ist eine fundamentale Anforderung in der Gestaltung. Gleiche Linienstärken, Farben, Füllungen, Texturen, Anschnitte, Motive, Formate usw. sorgen für eine stilistische Zusammengehörigkeit der Bildelemente und eine schnelle Vergleichbarkeit von Abbildungen. Damit wird die Aufmerksamkeit des Betrachters schnell auf Veränderungen von Bildinhalten gelenkt. Vor allem in der Rezeption von Bildfolgen ist der Nutzer auf das Spiel von Konsistenz und Veränderung angewiesen.</div></div></section><section class="simple"><figure><div><h1>Ziele</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Konsistente GUI sicherstellen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Werkzeug für Designer und Entwickler</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären</p></div></div></figure></section><section class="simple"><figure><div><h1>Anforderungen</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Welchen Anforderungen muss eine Design Dokumentation gerecht werden?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was sollte dokumentiert werden?</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-01.png" alt="./images/website-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-02.png" alt="./images/website-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-03.png" alt="./images/website-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-04.png" alt="./images/website-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/website-05.png" alt="./images/website-05.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Gestaltungsziel</h1><h2 class="js-delay subtitle">Wie soll das Design wirken und warum?</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gestaltungsziel/firefox-design-values.png" alt="./images/gestaltungsziel/firefox-design-values.png" width="auto"><figcaption class="bu"><p>https://values.design.firefox.com</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Form & Space</h1></div></section><section class="simple"><figure><div><h1>Form & Space</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spalten</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grundaufteilung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstände</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hierarchisierung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Negativraum</p></div></div><figcaption class="bu"><p>Layout/ Gestalterische Macrostruktur & Raster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-01.png" alt="./images/form-space/space-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/form-space/space-02.png" alt="./images/form-space/space-02.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Farbe</h1></div></section><section class="simple"><figure><div><h1>Farbe</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbskalen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Sättigung, Helligkeit</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbeinsatz/ Funktion der Farben</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbkombinatorik</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägung: Transparenzen, Rasterungen, Verläufe</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-01.png" alt="./images/farbe/farbe-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/farbe/farbe-02.png" alt="./images/farbe/farbe-02.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Media</h1></div></section><section class="simple"><figure><div><h1>Media</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Bilder und deren Größen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Videos und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Grafiken und deren Größe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zuschnitt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Farbgebung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Kombination mit anderen Elementen</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-01.png" alt="./images/media/media-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-02.png" alt="./images/media/media-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/media/media-03.png" alt="./images/media/media-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Typographie & Satz</h1></div></section><section class="simple"><figure><div><h1>Typographie & Satz</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftart</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftgrößen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftschnitte</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Zeilenabstand</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Schriftstile</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Besondere Ausprägungen: Schatten, Transparenzen, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Textausrichtung</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Satzart</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-01.png" alt="./images/typo/typo-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-02.png" alt="./images/typo/typo-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/typo/typo-03.png" alt="./images/typo/typo-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Interaktion & Gestaltungselemente</h1></div></section><section class="simple"><figure><div><h1>Interaktion & Gestaltungselemente</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">(Trenn)-linien</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Rahmen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Hintergründe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionselemente</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Interaktionen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Übergänge</p></div></div></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-01.png" alt="./images/interaktion/interaktion-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-02.png" alt="./images/interaktion/interaktion-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/interaktion/interaktion-03.png" alt="./images/interaktion/interaktion-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Komponenten</h1></div></section><section class="simple"><figure><div><h1>Komponenten</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Navigation, Cards, Forms, Buttons, Button Groups, Tables, Lists, Grid Lists, Menues, Pickers, Progress & Activity, Slider, Tabs, Toolsbars, Tooltips</p></div></div></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Wie <strong>strukturieren</strong> wir die Dokumentation?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-01.png" alt="./images/struktur/struktur-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-02.png" alt="./images/struktur/struktur-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-03.png" alt="./images/struktur/struktur-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-04.png" alt="./images/struktur/struktur-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-05.png" alt="./images/struktur/struktur-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-06.jpg" alt="./images/struktur/struktur-06.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-07.jpg" alt="./images/struktur/struktur-07.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/struktur/struktur-08.jpg" alt="./images/struktur/struktur-08.jpg" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Praxisbeispiel</h1></div></section><section class="image is-fullscreen" data-transition="fade" data-background-transition="fade" data-background="./images/map-cologne.jpg"><div class="is-centered"><div><h1>Pattern Library</h1><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Base</strong> Unwichtiges weglassen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Atoms</strong> Muster bilden</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Molecules</strong> Bezüge herstellen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Organisms</strong> Kombinationen aus Molekülen und Atomen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Composition</strong> Raster, Layout</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Behavior</strong> Flow, Transition, Microinteraction, Reaktion auf Viewports</p></div></div></div></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/layout/010-das-layout/index.html b/presentations/screendesign/layout/010-das-layout/index.html
index 679940b6..c9987f64 100644
--- a/presentations/screendesign/layout/010-das-layout/index.html
+++ b/presentations/screendesign/layout/010-das-layout/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Layout // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Das Layout.</h1><h2 class="js-delay subtitle">Gestalterische Macrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section class="simple"><div><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Was?</strong> Inhalt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Warum?</strong> Ziel</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Für wen?</strong> Zielgruppe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wo?</strong> Präsentationsmedium</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wie?</strong> stilistische Festlegungen</p></div></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"><figcaption class="bu"><p>Elemente einer Seite</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09b.png" alt="./images/layout-09b.png" width="auto"><figcaption class="bu"><p>Layout</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09c.png" alt="./images/layout-09c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"><figcaption class="bu"><p>Satzspiegelkonstruktion durch Diagonalzug (Villardsche Figur)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"><figcaption class="bu"><p>Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>2-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-16.png" alt="./images/layout-16.png" width="auto"><figcaption class="bu"><p>3-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-17.png" alt="./images/layout-17.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-18.png" alt="./images/layout-18.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Layout // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Layout.</h1><h2 class="js-delay subtitle">Gestalterische Macrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section class="simple"><div><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Was?</strong> Inhalt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Warum?</strong> Ziel</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Für wen?</strong> Zielgruppe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wo?</strong> Präsentationsmedium</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wie?</strong> stilistische Festlegungen</p></div></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"><figcaption class="bu"><p>Elemente einer Seite</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09b.png" alt="./images/layout-09b.png" width="auto"><figcaption class="bu"><p>Layout</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09c.png" alt="./images/layout-09c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"><figcaption class="bu"><p>Satzspiegelkonstruktion durch Diagonalzug (Villardsche Figur)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"><figcaption class="bu"><p>Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>2-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-16.png" alt="./images/layout-16.png" width="auto"><figcaption class="bu"><p>3-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-17.png" alt="./images/layout-17.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-18.png" alt="./images/layout-18.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/layout/020-gestaltungsraster/index.html b/presentations/screendesign/layout/020-gestaltungsraster/index.html
index 7b692ef6..eeffa82a 100644
--- a/presentations/screendesign/layout/020-gestaltungsraster/index.html
+++ b/presentations/screendesign/layout/020-gestaltungsraster/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Das Gestaltungsraster // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Gestaltungsraster.</h1><h2 class="js-delay subtitle">Gestalterische Mikrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-01.png" alt="./images/gestaltungsraster-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-02.png" alt="./images/gestaltungsraster-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-03.png" alt="./images/gestaltungsraster-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-04.png" alt="./images/gestaltungsraster-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-05.png" alt="./images/gestaltungsraster-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-06.png" alt="./images/gestaltungsraster-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-07.png" alt="./images/gestaltungsraster-07.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Das Gestaltungsraster // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gestaltungsraster.</h1><h2 class="js-delay subtitle">Gestalterische Mikrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-01.png" alt="./images/gestaltungsraster-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-02.png" alt="./images/gestaltungsraster-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-03.png" alt="./images/gestaltungsraster-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-04.png" alt="./images/gestaltungsraster-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-05.png" alt="./images/gestaltungsraster-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-06.png" alt="./images/gestaltungsraster-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-07.png" alt="./images/gestaltungsraster-07.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/layout/030-scribbles/index.html b/presentations/screendesign/layout/030-scribbles/index.html
index ff33f461..7f6acd60 100644
--- a/presentations/screendesign/layout/030-scribbles/index.html
+++ b/presentations/screendesign/layout/030-scribbles/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Ein Gestaltungsraster hilft immer! // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Ein Gestaltungsraster hilft immer!</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-01.png" alt="./images/sketch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-02.png" alt="./images/sketch-02.png" width="auto"></figure></section><section class="simple"><div><h1>Rastersysteme zum Starten</h1><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster sollten gleichmäßig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstand zwischen zwei Spalten muss stimmig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spaltenbreite muss auf Brotschrift abgestimmt sein.</p></div></div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Ein Gestaltungsraster hilft immer! // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Ein Gestaltungsraster hilft immer!</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-01.png" alt="./images/sketch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-02.png" alt="./images/sketch-02.png" width="auto"></figure></section><section class="simple"><div><h1>Rastersysteme zum Starten</h1><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster sollten gleichmäßig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstand zwischen zwei Spalten muss stimmig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spaltenbreite muss auf Brotschrift abgestimmt sein.</p></div></div></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/layout/040-raster-icons/index.html b/presentations/screendesign/layout/040-raster-icons/index.html
index cece060a..32cec58b 100644
--- a/presentations/screendesign/layout/040-raster-icons/index.html
+++ b/presentations/screendesign/layout/040-raster-icons/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Raster, Icons & Größe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Raster, Icons & Größe.</h1><h2 class="js-delay subtitle">Lessons Learned</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-01.png" alt="./images/raster-01.png" width="auto"><figcaption class="bu"><p>Raster: Grund- und Gestaltungsraster verwenden</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-02.png" alt="./images/raster-02.png" width="auto"><figcaption class="bu"><p>Icons: benutze fertige Sets</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-03.png" alt="./images/raster-03.png" width="auto"><figcaption class="bu"><p>Größe: Layout auf Device testen</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Raster, Icons & Größe // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Raster, Icons & Größe.</h1><h2 class="js-delay subtitle">Lessons Learned</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-01.png" alt="./images/raster-01.png" width="auto"><figcaption class="bu"><p>Raster: Grund- und Gestaltungsraster verwenden</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-02.png" alt="./images/raster-02.png" width="auto"><figcaption class="bu"><p>Icons: benutze fertige Sets</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-03.png" alt="./images/raster-03.png" width="auto"><figcaption class="bu"><p>Größe: Layout auf Device testen</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/layout/index.html b/presentations/screendesign/layout/index.html
index c7b25d90..f55e549b 100644
--- a/presentations/screendesign/layout/index.html
+++ b/presentations/screendesign/layout/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Layout // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Layout</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Das Layout.</h1><h2 class="js-delay subtitle">Gestalterische Macrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section class="simple"><div><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Was?</strong> Inhalt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Warum?</strong> Ziel</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Für wen?</strong> Zielgruppe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wo?</strong> Präsentationsmedium</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wie?</strong> stilistische Festlegungen</p></div></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"><figcaption class="bu"><p>Elemente einer Seite</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09b.png" alt="./images/layout-09b.png" width="auto"><figcaption class="bu"><p>Layout</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09c.png" alt="./images/layout-09c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"><figcaption class="bu"><p>Satzspiegelkonstruktion durch Diagonalzug (Villardsche Figur)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"><figcaption class="bu"><p>Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>2-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-16.png" alt="./images/layout-16.png" width="auto"><figcaption class="bu"><p>3-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-17.png" alt="./images/layout-17.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-18.png" alt="./images/layout-18.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Gestaltungsraster.</h1><h2 class="js-delay subtitle">Gestalterische Mikrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-01.png" alt="./images/gestaltungsraster-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-02.png" alt="./images/gestaltungsraster-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-03.png" alt="./images/gestaltungsraster-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-04.png" alt="./images/gestaltungsraster-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-05.png" alt="./images/gestaltungsraster-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-06.png" alt="./images/gestaltungsraster-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-07.png" alt="./images/gestaltungsraster-07.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Ein Gestaltungsraster hilft immer!</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-01.png" alt="./images/sketch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-02.png" alt="./images/sketch-02.png" width="auto"></figure></section><section class="simple"><div><h1>Rastersysteme zum Starten</h1><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster sollten gleichmäßig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstand zwischen zwei Spalten muss stimmig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spaltenbreite muss auf Brotschrift abgestimmt sein.</p></div></div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Raster, Icons & Größe.</h1><h2 class="js-delay subtitle">Lessons Learned</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-01.png" alt="./images/raster-01.png" width="auto"><figcaption class="bu"><p>Raster: Grund- und Gestaltungsraster verwenden</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-02.png" alt="./images/raster-02.png" width="auto"><figcaption class="bu"><p>Icons: benutze fertige Sets</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-03.png" alt="./images/raster-03.png" width="auto"><figcaption class="bu"><p>Größe: Layout auf Device testen</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Layout // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Layout</h1></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Das Layout.</h1><h2 class="js-delay subtitle">Gestalterische Macrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-01.png" alt="./images/layout-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-02.png" alt="./images/layout-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-03.png" alt="./images/layout-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-04.png" alt="./images/layout-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-05.png" alt="./images/layout-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-06.png" alt="./images/layout-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-07.png" alt="./images/layout-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-08.png" alt="./images/layout-08.png" width="auto"></figure></section><section class="simple"><div><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Was?</strong> Inhalt</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Warum?</strong> Ziel</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Für wen?</strong> Zielgruppe</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wo?</strong> Präsentationsmedium</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Wie?</strong> stilistische Festlegungen</p></div></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09.png" alt="./images/layout-09.png" width="auto"><figcaption class="bu"><p>Elemente einer Seite</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-09b.png" alt="./images/layout-09b.png" width="auto"><figcaption class="bu"><p>Layout</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/layout-09c.png" alt="./images/layout-09c.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-10.png" alt="./images/layout-10.png" width="auto"><figcaption class="bu"><p>Satzspiegelkonstruktion durch Diagonalzug (Villardsche Figur)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-11.png" alt="./images/layout-11.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-12.png" alt="./images/layout-12.png" width="auto"><figcaption class="bu"><p>Satzspiegel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-14.png" alt="./images/layout-14.png" width="auto"><figcaption class="bu"><p>Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-15.png" alt="./images/layout-15.png" width="auto"><figcaption class="bu"><p>2-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-16.png" alt="./images/layout-16.png" width="auto"><figcaption class="bu"><p>3-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-17.png" alt="./images/layout-17.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/layout-18.png" alt="./images/layout-18.png" width="auto"><figcaption class="bu"><p>4-spaltiges Gestaltungsraster</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Das Gestaltungsraster.</h1><h2 class="js-delay subtitle">Gestalterische Mikrostruktur</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-01.png" alt="./images/gestaltungsraster-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-02.png" alt="./images/gestaltungsraster-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-03.png" alt="./images/gestaltungsraster-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-04.png" alt="./images/gestaltungsraster-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-05.png" alt="./images/gestaltungsraster-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-06.png" alt="./images/gestaltungsraster-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/gestaltungsraster-07.png" alt="./images/gestaltungsraster-07.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Ein Gestaltungsraster hilft immer!</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-01.png" alt="./images/sketch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/sketch-02.png" alt="./images/sketch-02.png" width="auto"></figure></section><section class="simple"><div><h1>Rastersysteme zum Starten</h1><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Raster sollten gleichmäßig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Abstand zwischen zwei Spalten muss stimmig sein.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Spaltenbreite muss auf Brotschrift abgestimmt sein.</p></div></div></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Raster, Icons & Größe.</h1><h2 class="js-delay subtitle">Lessons Learned</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-01.png" alt="./images/raster-01.png" width="auto"><figcaption class="bu"><p>Raster: Grund- und Gestaltungsraster verwenden</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-02.png" alt="./images/raster-02.png" width="auto"><figcaption class="bu"><p>Icons: benutze fertige Sets</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/raster-03.png" alt="./images/raster-03.png" width="auto"><figcaption class="bu"><p>Größe: Layout auf Device testen</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/proportionen-und-abstaende/040-bevorzugte-zahlen/index.html b/presentations/screendesign/proportionen-und-abstaende/040-bevorzugte-zahlen/index.html
index 46f731df..71551cda 100644
--- a/presentations/screendesign/proportionen-und-abstaende/040-bevorzugte-zahlen/index.html
+++ b/presentations/screendesign/proportionen-und-abstaende/040-bevorzugte-zahlen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Bevorzugte Zahlen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Bevorzugte Zahlen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-01.png" alt="./images/fibonacci-folge-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-02.png" alt="./images/fibonacci-folge-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-03.png" alt="./images/fibonacci-folge-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-04.png" alt="./images/fibonacci-folge-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-01.png" alt="./images/renard-serien-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-02.png" alt="./images/renard-serien-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-03.png" alt="./images/renard-serien-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-04.png" alt="./images/renard-serien-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-05.png" alt="./images/renard-serien-05.png" width="auto"><figcaption class="bu"><p>DIN Reihe / Renard-Serie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/renard-serien-06.png" alt="./images/renard-serien-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-01.png" alt="./images/drittel-regel-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-02.png" alt="./images/drittel-regel-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-03.png" alt="./images/drittel-regel-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-04.png" alt="./images/drittel-regel-04.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Bevorzugte Zahlen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Bevorzugte Zahlen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-01.png" alt="./images/fibonacci-folge-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-02.png" alt="./images/fibonacci-folge-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-03.png" alt="./images/fibonacci-folge-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-04.png" alt="./images/fibonacci-folge-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-01.png" alt="./images/renard-serien-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-02.png" alt="./images/renard-serien-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-03.png" alt="./images/renard-serien-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-04.png" alt="./images/renard-serien-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-05.png" alt="./images/renard-serien-05.png" width="auto"><figcaption class="bu"><p>DIN Reihe / Renard-Serie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/renard-serien-06.png" alt="./images/renard-serien-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-01.png" alt="./images/drittel-regel-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-02.png" alt="./images/drittel-regel-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-03.png" alt="./images/drittel-regel-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-04.png" alt="./images/drittel-regel-04.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/proportionen-und-abstaende/060-systematische-abstaende/index.html b/presentations/screendesign/proportionen-und-abstaende/060-systematische-abstaende/index.html
index 7a0b745b..43ae1480 100644
--- a/presentations/screendesign/proportionen-und-abstaende/060-systematische-abstaende/index.html
+++ b/presentations/screendesign/proportionen-und-abstaende/060-systematische-abstaende/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Systematische Abstände // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Systematische Abstände</h1><h2 class="js-delay subtitle">nach Nathan Curtis</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-01.png" alt="./images/abstand-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-02.png" alt="./images/abstand-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-03.png" alt="./images/abstand-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-04.png" alt="./images/abstand-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-05.png" alt="./images/abstand-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-06.png" alt="./images/abstand-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-07.png" alt="./images/abstand-07.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Systematische Abstände // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Systematische Abstände</h1><h2 class="js-delay subtitle">nach Nathan Curtis</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-01.png" alt="./images/abstand-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-02.png" alt="./images/abstand-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-03.png" alt="./images/abstand-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-04.png" alt="./images/abstand-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-05.png" alt="./images/abstand-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-06.png" alt="./images/abstand-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-07.png" alt="./images/abstand-07.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/proportionen-und-abstaende/index.html b/presentations/screendesign/proportionen-und-abstaende/index.html
index d93b0d62..07a3c586 100644
--- a/presentations/screendesign/proportionen-und-abstaende/index.html
+++ b/presentations/screendesign/proportionen-und-abstaende/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Proportionen und Abstände // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Systematische Proportionen und Abstände</h1></div></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Vollkommenheit entsteht offensichtlich nicht dann, wenn man nichts mehr hinzuzufügen hat, sondern wenn man nichts mehr wegnehmen kann.</p><cite>Antoine de Saint-Exupéry</cite></blockquote></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Reduziert man die Zahl der visuellen Elemente und integriert sie in ein Rastersystem, entstehen klare Designs, die sich durch eine spezifische Ordnung auszeichnen. Diese Ordnung verleiht den Informationen Glaubwürdigkeit und schafft Vertrauen.</p><cite>Josef Müller-Brockmann, Grid Systems in Graphic Design</cite></blockquote></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Goldener Schnitt</h1><h2 class="js-delay subtitle">Goldene Spirale</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-01.png" alt="./images/goldener-schnitt-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-02.png" alt="./images/goldener-schnitt-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-03.png" alt="./images/goldener-schnitt-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-04.png" alt="./images/goldener-schnitt-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-05.png" alt="./images/goldener-schnitt-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-06.png" alt="./images/goldener-schnitt-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-07.png" alt="./images/goldener-schnitt-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-08.png" alt="./images/goldener-schnitt-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-09.png" alt="./images/goldener-schnitt-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-10.png" alt="./images/goldener-schnitt-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-11.png" alt="./images/goldener-schnitt-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-12.png" alt="./images/goldener-schnitt-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-13.png" alt="./images/goldener-schnitt-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-14.png" alt="./images/goldener-schnitt-14.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-15.png" alt="./images/goldener-schnitt-15.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-16.png" alt="./images/goldener-schnitt-16.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-17.png" alt="./images/goldener-schnitt-17.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Bevorzugte Zahlen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-01.png" alt="./images/fibonacci-folge-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-02.png" alt="./images/fibonacci-folge-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-03.png" alt="./images/fibonacci-folge-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-04.png" alt="./images/fibonacci-folge-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-01.png" alt="./images/renard-serien-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-02.png" alt="./images/renard-serien-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-03.png" alt="./images/renard-serien-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-04.png" alt="./images/renard-serien-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-05.png" alt="./images/renard-serien-05.png" width="auto"><figcaption class="bu"><p>DIN Reihe / Renard-Serie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/renard-serien-06.png" alt="./images/renard-serien-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-01.png" alt="./images/drittel-regel-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-02.png" alt="./images/drittel-regel-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-03.png" alt="./images/drittel-regel-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-04.png" alt="./images/drittel-regel-04.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Negativraum</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/negativraum-01.png" alt="./images/negativraum-01.png" width="auto"></figure></section><section class="cite"><blockquote class="has-whitener"><p>White space or negative space is simply unmarked space in the design. It is the space between the layouts, lines of paragraphs, between paragraphs, between different UI elements and so on. White space does not literally mean an empty space with a white background. It can be of any color, texture, patterns or even a background image.</p><cite>Pratik Hegde</cite></blockquote></section><section class="cite"><blockquote class="has-whitener"><p>Die Beziehung positiv-negativ – eines der wichtigsten Gegensatzpaare bei allen Designs –entsteht automatisch. Ein Zwischenraum – ein Nebenprodukt – ist ebenso wichtig wie das Element, das ihn verursacht.</p><cite>Armin Hofmann</cite></blockquote></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-01.png" alt="./images/whitespace-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-02.png" alt="./images/whitespace-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-03.png" alt="./images/whitespace-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-04.png" alt="./images/whitespace-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-01.png" alt="./images/example-image-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-02.png" alt="./images/example-image-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-03.png" alt="./images/example-image-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-04.png" alt="./images/example-image-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-05.png" alt="./images/example-image-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-06.png" alt="./images/example-image-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Systematische Abstände</h1><h2 class="js-delay subtitle">nach Nathan Curtis</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-01.png" alt="./images/abstand-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-02.png" alt="./images/abstand-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-03.png" alt="./images/abstand-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-04.png" alt="./images/abstand-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-05.png" alt="./images/abstand-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-06.png" alt="./images/abstand-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-07.png" alt="./images/abstand-07.png" width="auto"></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-fullscreen is-centered"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Proportionen und Abstände // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Systematische Proportionen und Abstände</h1></div></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Vollkommenheit entsteht offensichtlich nicht dann, wenn man nichts mehr hinzuzufügen hat, sondern wenn man nichts mehr wegnehmen kann.</p><cite>Antoine de Saint-Exupéry</cite></blockquote></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Reduziert man die Zahl der visuellen Elemente und integriert sie in ein Rastersystem, entstehen klare Designs, die sich durch eine spezifische Ordnung auszeichnen. Diese Ordnung verleiht den Informationen Glaubwürdigkeit und schafft Vertrauen.</p><cite>Josef Müller-Brockmann, Grid Systems in Graphic Design</cite></blockquote></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Goldener Schnitt</h1><h2 class="js-delay subtitle">Goldene Spirale</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-01.png" alt="./images/goldener-schnitt-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-02.png" alt="./images/goldener-schnitt-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-03.png" alt="./images/goldener-schnitt-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-04.png" alt="./images/goldener-schnitt-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-05.png" alt="./images/goldener-schnitt-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-06.png" alt="./images/goldener-schnitt-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-07.png" alt="./images/goldener-schnitt-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-08.png" alt="./images/goldener-schnitt-08.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-09.png" alt="./images/goldener-schnitt-09.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-10.png" alt="./images/goldener-schnitt-10.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-11.png" alt="./images/goldener-schnitt-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-12.png" alt="./images/goldener-schnitt-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-13.png" alt="./images/goldener-schnitt-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-14.png" alt="./images/goldener-schnitt-14.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-15.png" alt="./images/goldener-schnitt-15.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-16.png" alt="./images/goldener-schnitt-16.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/goldener-schnitt-17.png" alt="./images/goldener-schnitt-17.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Bevorzugte Zahlen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-01.png" alt="./images/fibonacci-folge-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-02.png" alt="./images/fibonacci-folge-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-03.png" alt="./images/fibonacci-folge-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/fibonacci-folge-04.png" alt="./images/fibonacci-folge-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-01.png" alt="./images/renard-serien-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-02.png" alt="./images/renard-serien-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-03.png" alt="./images/renard-serien-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-04.png" alt="./images/renard-serien-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/renard-serien-05.png" alt="./images/renard-serien-05.png" width="auto"><figcaption class="bu"><p>DIN Reihe / Renard-Serie</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/renard-serien-06.png" alt="./images/renard-serien-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-01.png" alt="./images/drittel-regel-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-02.png" alt="./images/drittel-regel-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-03.png" alt="./images/drittel-regel-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/drittel-regel-04.png" alt="./images/drittel-regel-04.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Negativraum</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot is-fullscreen" data-transition="fade"><figure><img src="./images/negativraum-01.png" alt="./images/negativraum-01.png" width="auto"></figure></section><section class="cite"><blockquote class="has-whitener"><p>White space or negative space is simply unmarked space in the design. It is the space between the layouts, lines of paragraphs, between paragraphs, between different UI elements and so on. White space does not literally mean an empty space with a white background. It can be of any color, texture, patterns or even a background image.</p><cite>Pratik Hegde</cite></blockquote></section><section class="cite"><blockquote class="has-whitener"><p>Die Beziehung positiv-negativ – eines der wichtigsten Gegensatzpaare bei allen Designs –entsteht automatisch. Ein Zwischenraum – ein Nebenprodukt – ist ebenso wichtig wie das Element, das ihn verursacht.</p><cite>Armin Hofmann</cite></blockquote></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-01.png" alt="./images/whitespace-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-02.png" alt="./images/whitespace-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-03.png" alt="./images/whitespace-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/whitespace-04.png" alt="./images/whitespace-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-01.png" alt="./images/example-image-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-02.png" alt="./images/example-image-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-03.png" alt="./images/example-image-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-04.png" alt="./images/example-image-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-05.png" alt="./images/example-image-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-image-06.png" alt="./images/example-image-06.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Systematische Abstände</h1><h2 class="js-delay subtitle">nach Nathan Curtis</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-01.png" alt="./images/abstand-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-02.png" alt="./images/abstand-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-03.png" alt="./images/abstand-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-04.png" alt="./images/abstand-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-05.png" alt="./images/abstand-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/abstand-06.png" alt="./images/abstand-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/abstand-07.png" alt="./images/abstand-07.png" width="auto"></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-fullscreen is-centered"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/punkt/040-parameter/index.html b/presentations/screendesign/punkt/040-parameter/index.html
index c2b2fedc..4c5efc90 100644
--- a/presentations/screendesign/punkt/040-parameter/index.html
+++ b/presentations/screendesign/punkt/040-parameter/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Gestaltungsparameter // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Position des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="100" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="15" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="585" cy="30" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Größe des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="60" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="100" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="5" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Gestaltungsparameter // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Position des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="100" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="15" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="585" cy="30" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Größe des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="60" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="100" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="5" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/punkt/index.html b/presentations/screendesign/punkt/index.html
index 5dd6a374..9122e834 100644
--- a/presentations/screendesign/punkt/index.html
+++ b/presentations/screendesign/punkt/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Punkt // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Der Punkt</h1><h2>Das kleinste und einfachste Gestaltungselement</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-1.svg" alt="./images/punkt-1.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-2.svg" alt="./images/punkt-2.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-3.svg" alt="./images/punkt-3.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-4.svg" alt="./images/punkt-4.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-5.svg" alt="./images/punkt-5.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-6.svg" alt="./images/punkt-6.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-7.svg" alt="./images/punkt-7.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-8.svg" alt="./images/punkt-8.svg"></figure></section><section class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Format // Darstellungsfläche</p></figcaption></figure></section><section class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" width="900" height="500"><rect x="0" y="0" width="900" height="500" fill="#ffffff"/><circle cx="450" cy="240" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Format // Darstellungsfläche</p></figcaption></figure></section><section class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" width="450" height="900"><rect x="0" y="0" width="500" height="900" fill="#ffffff"/><circle cx="240" cy="450" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Format // Darstellungsfläche</p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/bill-overview.png" alt="./images/bill-overview.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/bill-dots.png" alt="./images/bill-dots.png" width="50%"><figcaption class="bu"><p>Max Bill: 15 Variationen über ein Thema</p></figcaption></figure></section></section><section data-slide-class="wrap" class="has-dark-bg mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Kräfte</h1><div class="fragment">Auf jedes Element einer Gestaltung wirken <mark>Kräfte</mark>.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-01.svg" alt="./images/schwerkraft-01.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-02.svg" alt="./images/schwerkraft-02.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-03.svg" alt="./images/schwerkraft-03.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-04.svg" alt="./images/schwerkraft-04.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="slide"><figure><img src="./images/leserichtung-01.svg" alt="./images/leserichtung-01.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/leserichtung-02.svg" alt="./images/leserichtung-02.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/leserichtung-03.svg" alt="./images/leserichtung-03.svg"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="fade"><div><h1>Gestaltungsparameter Übersicht</h1><p>Übersicht der Gestaltungsparameter für den <strong>Punkt</strong>.</p><p class="list">Position</p><p class="list">Anzahl</p><p class="list">Tonwert</p><p class="list">Farbe</p><p class="list">Transparenz</p><p class="list">Größe</p></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Position des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="100" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="15" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="585" cy="30" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Größe des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="60" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="100" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="5" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Zufall oder Gestaltung?</h1></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="220" cy="80" r="20" fill="#000000"/><circle cx="480" cy="380" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="220" cy="80" r="20" fill="#000000"/><circle cx="180" cy="130" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="220" cy="80" r="20" fill="#000000"/><circle cx="150" cy="110" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="140" cy="100" r="20" fill="#000000"/><circle cx="200" cy="100" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="140" cy="100" r="20" fill="#000000"/><circle cx="200" cy="100" r="20" fill="#000000"/><circle cx="380" cy="500" r="20" fill="#000000"/><circle cx="440" cy="500" r="20" fill="#000000"/><circle cx="500" cy="500" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="140" cy="140" r="10" fill="#000000"/><circle cx="180" cy="140" r="10" fill="#000000"/><circle cx="220" cy="140" r="10" fill="#000000"/><circle cx="260" cy="140" r="10" fill="#000000"/><circle cx="300" cy="140" r="10" fill="#000000"/><circle cx="340" cy="140" r="10" fill="#000000"/><circle cx="380" cy="140" r="10" fill="#000000"/><circle cx="420" cy="140" r="10" fill="#000000"/><circle cx="460" cy="140" r="10" fill="#000000"/><circle cx="140" cy="180" r="10" fill="#000000"/><circle cx="180" cy="180" r="10" fill="#000000"/><circle cx="220" cy="180" r="10" fill="#000000"/><circle cx="260" cy="180" r="10" fill="#000000"/><circle cx="300" cy="180" r="10" fill="#000000"/><circle cx="340" cy="180" r="10" fill="#000000"/><circle cx="380" cy="180" r="10" fill="#000000"/><circle cx="420" cy="180" r="10" fill="#000000"/><circle cx="460" cy="180" r="10" fill="#000000"/><circle cx="140" cy="220" r="10" fill="#000000"/><circle cx="180" cy="220" r="10" fill="#000000"/><circle cx="220" cy="220" r="10" fill="#000000"/><circle cx="260" cy="220" r="10" fill="#000000"/><circle cx="300" cy="220" r="10" fill="#000000"/><circle cx="340" cy="220" r="10" fill="#000000"/><circle cx="380" cy="220" r="10" fill="#000000"/><circle cx="420" cy="220" r="10" fill="#000000"/><circle cx="460" cy="220" r="10" fill="#000000"/><circle cx="140" cy="260" r="10" fill="#000000"/><circle cx="180" cy="260" r="10" fill="#000000"/><circle cx="220" cy="260" r="10" fill="#000000"/><circle cx="260" cy="260" r="10" fill="#000000"/><circle cx="300" cy="260" r="10" fill="#000000"/><circle cx="340" cy="260" r="10" fill="#000000"/><circle cx="380" cy="260" r="10" fill="#000000"/><circle cx="420" cy="260" r="10" fill="#000000"/><circle cx="460" cy="260" r="10" fill="#000000"/><circle cx="140" cy="300" r="10" fill="#000000"/><circle cx="180" cy="300" r="10" fill="#000000"/><circle cx="220" cy="300" r="10" fill="#000000"/><circle cx="260" cy="300" r="10" fill="#000000"/><circle cx="300" cy="300" r="10" fill="#000000"/><circle cx="340" cy="300" r="10" fill="#000000"/><circle cx="380" cy="300" r="10" fill="#000000"/><circle cx="420" cy="300" r="10" fill="#000000"/><circle cx="460" cy="300" r="10" fill="#000000"/><circle cx="140" cy="340" r="10" fill="#000000"/><circle cx="180" cy="340" r="10" fill="#000000"/><circle cx="220" cy="340" r="10" fill="#000000"/><circle cx="260" cy="340" r="10" fill="#000000"/><circle cx="300" cy="340" r="10" fill="#000000"/><circle cx="340" cy="340" r="10" fill="#000000"/><circle cx="380" cy="340" r="10" fill="#000000"/><circle cx="420" cy="340" r="10" fill="#000000"/><circle cx="460" cy="340" r="10" fill="#000000"/><circle cx="140" cy="380" r="10" fill="#000000"/><circle cx="180" cy="380" r="10" fill="#000000"/><circle cx="220" cy="380" r="10" fill="#000000"/><circle cx="260" cy="380" r="10" fill="#000000"/><circle cx="300" cy="380" r="10" fill="#000000"/><circle cx="340" cy="380" r="10" fill="#000000"/><circle cx="380" cy="380" r="10" fill="#000000"/><circle cx="420" cy="380" r="10" fill="#000000"/><circle cx="460" cy="380" r="10" fill="#000000"/><circle cx="140" cy="420" r="10" fill="#000000"/><circle cx="180" cy="420" r="10" fill="#000000"/><circle cx="220" cy="420" r="10" fill="#000000"/><circle cx="260" cy="420" r="10" fill="#000000"/><circle cx="300" cy="420" r="10" fill="#000000"/><circle cx="340" cy="420" r="10" fill="#000000"/><circle cx="380" cy="420" r="10" fill="#000000"/><circle cx="420" cy="420" r="10" fill="#000000"/><circle cx="460" cy="420" r="10" fill="#000000"/><circle cx="140" cy="460" r="10" fill="#000000"/><circle cx="180" cy="460" r="10" fill="#000000"/><circle cx="220" cy="460" r="10" fill="#000000"/><circle cx="260" cy="460" r="10" fill="#000000"/><circle cx="300" cy="460" r="10" fill="#000000"/><circle cx="340" cy="460" r="10" fill="#000000"/><circle cx="380" cy="460" r="10" fill="#000000"/><circle cx="420" cy="460" r="10" fill="#000000"/><circle cx="460" cy="460" r="10" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Punkt // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Der Punkt</h1><h2>Das kleinste und einfachste Gestaltungselement</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-1.svg" alt="./images/punkt-1.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-2.svg" alt="./images/punkt-2.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-3.svg" alt="./images/punkt-3.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-4.svg" alt="./images/punkt-4.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-5.svg" alt="./images/punkt-5.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-6.svg" alt="./images/punkt-6.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-7.svg" alt="./images/punkt-7.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/punkt-8.svg" alt="./images/punkt-8.svg"></figure></section><section class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Format // Darstellungsfläche</p></figcaption></figure></section><section class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" width="900" height="500"><rect x="0" y="0" width="900" height="500" fill="#ffffff"/><circle cx="450" cy="240" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Format // Darstellungsfläche</p></figcaption></figure></section><section class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" width="450" height="900"><rect x="0" y="0" width="500" height="900" fill="#ffffff"/><circle cx="240" cy="450" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Format // Darstellungsfläche</p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/bill-overview.png" alt="./images/bill-overview.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/bill-dots.png" alt="./images/bill-dots.png" width="50%"><figcaption class="bu"><p>Max Bill: 15 Variationen über ein Thema</p></figcaption></figure></section></section><section data-slide-class="wrap" class="has-dark-bg mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Kräfte</h1><div class="fragment">Auf jedes Element einer Gestaltung wirken <mark>Kräfte</mark>.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-01.svg" alt="./images/schwerkraft-01.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-02.svg" alt="./images/schwerkraft-02.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-03.svg" alt="./images/schwerkraft-03.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/schwerkraft-04.svg" alt="./images/schwerkraft-04.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="slide"><figure><img src="./images/leserichtung-01.svg" alt="./images/leserichtung-01.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/leserichtung-02.svg" alt="./images/leserichtung-02.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot has-dark-bg" data-transition="none"><figure><img src="./images/leserichtung-03.svg" alt="./images/leserichtung-03.svg"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="fade"><div><h1>Gestaltungsparameter Übersicht</h1><p>Übersicht der Gestaltungsparameter für den <strong>Punkt</strong>.</p><p class="list">Position</p><p class="list">Anzahl</p><p class="list">Tonwert</p><p class="list">Farbe</p><p class="list">Transparenz</p><p class="list">Größe</p></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Position des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="100" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="15" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-transistion="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="585" cy="30" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Position</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Gestaltungsparameter</h1><h2 class="js-delay subtitle">Größe des Elements</h2></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="60" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="100" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="300" cy="300" r="5" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Größe</p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Zufall oder Gestaltung?</h1></div></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="220" cy="80" r="20" fill="#000000"/><circle cx="480" cy="380" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="220" cy="80" r="20" fill="#000000"/><circle cx="180" cy="130" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="none" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="220" cy="80" r="20" fill="#000000"/><circle cx="150" cy="110" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="140" cy="100" r="20" fill="#000000"/><circle cx="200" cy="100" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="80" cy="100" r="20" fill="#000000"/><circle cx="140" cy="100" r="20" fill="#000000"/><circle cx="200" cy="100" r="20" fill="#000000"/><circle cx="380" cy="500" r="20" fill="#000000"/><circle cx="440" cy="500" r="20" fill="#000000"/><circle cx="500" cy="500" r="20" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section><section data-auto-animate class="image screenshot" data-transition="fade" data-background-color="#666"><figure><svg data-id="frame" height="600" width="600"><rect x="0" y="0" width="600" height="600" fill="#ffffff"/><circle cx="140" cy="140" r="10" fill="#000000"/><circle cx="180" cy="140" r="10" fill="#000000"/><circle cx="220" cy="140" r="10" fill="#000000"/><circle cx="260" cy="140" r="10" fill="#000000"/><circle cx="300" cy="140" r="10" fill="#000000"/><circle cx="340" cy="140" r="10" fill="#000000"/><circle cx="380" cy="140" r="10" fill="#000000"/><circle cx="420" cy="140" r="10" fill="#000000"/><circle cx="460" cy="140" r="10" fill="#000000"/><circle cx="140" cy="180" r="10" fill="#000000"/><circle cx="180" cy="180" r="10" fill="#000000"/><circle cx="220" cy="180" r="10" fill="#000000"/><circle cx="260" cy="180" r="10" fill="#000000"/><circle cx="300" cy="180" r="10" fill="#000000"/><circle cx="340" cy="180" r="10" fill="#000000"/><circle cx="380" cy="180" r="10" fill="#000000"/><circle cx="420" cy="180" r="10" fill="#000000"/><circle cx="460" cy="180" r="10" fill="#000000"/><circle cx="140" cy="220" r="10" fill="#000000"/><circle cx="180" cy="220" r="10" fill="#000000"/><circle cx="220" cy="220" r="10" fill="#000000"/><circle cx="260" cy="220" r="10" fill="#000000"/><circle cx="300" cy="220" r="10" fill="#000000"/><circle cx="340" cy="220" r="10" fill="#000000"/><circle cx="380" cy="220" r="10" fill="#000000"/><circle cx="420" cy="220" r="10" fill="#000000"/><circle cx="460" cy="220" r="10" fill="#000000"/><circle cx="140" cy="260" r="10" fill="#000000"/><circle cx="180" cy="260" r="10" fill="#000000"/><circle cx="220" cy="260" r="10" fill="#000000"/><circle cx="260" cy="260" r="10" fill="#000000"/><circle cx="300" cy="260" r="10" fill="#000000"/><circle cx="340" cy="260" r="10" fill="#000000"/><circle cx="380" cy="260" r="10" fill="#000000"/><circle cx="420" cy="260" r="10" fill="#000000"/><circle cx="460" cy="260" r="10" fill="#000000"/><circle cx="140" cy="300" r="10" fill="#000000"/><circle cx="180" cy="300" r="10" fill="#000000"/><circle cx="220" cy="300" r="10" fill="#000000"/><circle cx="260" cy="300" r="10" fill="#000000"/><circle cx="300" cy="300" r="10" fill="#000000"/><circle cx="340" cy="300" r="10" fill="#000000"/><circle cx="380" cy="300" r="10" fill="#000000"/><circle cx="420" cy="300" r="10" fill="#000000"/><circle cx="460" cy="300" r="10" fill="#000000"/><circle cx="140" cy="340" r="10" fill="#000000"/><circle cx="180" cy="340" r="10" fill="#000000"/><circle cx="220" cy="340" r="10" fill="#000000"/><circle cx="260" cy="340" r="10" fill="#000000"/><circle cx="300" cy="340" r="10" fill="#000000"/><circle cx="340" cy="340" r="10" fill="#000000"/><circle cx="380" cy="340" r="10" fill="#000000"/><circle cx="420" cy="340" r="10" fill="#000000"/><circle cx="460" cy="340" r="10" fill="#000000"/><circle cx="140" cy="380" r="10" fill="#000000"/><circle cx="180" cy="380" r="10" fill="#000000"/><circle cx="220" cy="380" r="10" fill="#000000"/><circle cx="260" cy="380" r="10" fill="#000000"/><circle cx="300" cy="380" r="10" fill="#000000"/><circle cx="340" cy="380" r="10" fill="#000000"/><circle cx="380" cy="380" r="10" fill="#000000"/><circle cx="420" cy="380" r="10" fill="#000000"/><circle cx="460" cy="380" r="10" fill="#000000"/><circle cx="140" cy="420" r="10" fill="#000000"/><circle cx="180" cy="420" r="10" fill="#000000"/><circle cx="220" cy="420" r="10" fill="#000000"/><circle cx="260" cy="420" r="10" fill="#000000"/><circle cx="300" cy="420" r="10" fill="#000000"/><circle cx="340" cy="420" r="10" fill="#000000"/><circle cx="380" cy="420" r="10" fill="#000000"/><circle cx="420" cy="420" r="10" fill="#000000"/><circle cx="460" cy="420" r="10" fill="#000000"/><circle cx="140" cy="460" r="10" fill="#000000"/><circle cx="180" cy="460" r="10" fill="#000000"/><circle cx="220" cy="460" r="10" fill="#000000"/><circle cx="260" cy="460" r="10" fill="#000000"/><circle cx="300" cy="460" r="10" fill="#000000"/><circle cx="340" cy="460" r="10" fill="#000000"/><circle cx="380" cy="460" r="10" fill="#000000"/><circle cx="420" cy="460" r="10" fill="#000000"/><circle cx="460" cy="460" r="10" fill="#000000"/></svg><figcaption class="bu is-dark"><p>Zufall oder Gestaltung?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/raeumlichkeit/070-beispiele/index.html b/presentations/screendesign/raeumlichkeit/070-beispiele/index.html
index afc03122..01605d71 100644
--- a/presentations/screendesign/raeumlichkeit/070-beispiele/index.html
+++ b/presentations/screendesign/raeumlichkeit/070-beispiele/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Anwendungsbeispiele // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Anwendungsbeispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/apple.jpg" alt="./images/apple.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/arte.jpg" alt="./images/arte.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/fhd.jpg" alt="./images/fhd.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/kalender.jpg" alt="./images/kalender.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/wii.jpg" alt="./images/wii.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/zdf.jpg" alt="./images/zdf.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/audi.jpg" alt="./images/audi.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-2.jpg" alt="./images/notice-2.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-1.jpg" alt="./images/notice-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-h.jpg" alt="./images/visual-h.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-hierarchy.jpg" alt="./images/visual-hierarchy.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Anwendungsbeispiele // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Anwendungsbeispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/apple.jpg" alt="./images/apple.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/arte.jpg" alt="./images/arte.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/fhd.jpg" alt="./images/fhd.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/kalender.jpg" alt="./images/kalender.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/wii.jpg" alt="./images/wii.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/zdf.jpg" alt="./images/zdf.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/audi.jpg" alt="./images/audi.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-2.jpg" alt="./images/notice-2.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-1.jpg" alt="./images/notice-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-h.jpg" alt="./images/visual-h.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-hierarchy.jpg" alt="./images/visual-hierarchy.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/raeumlichkeit/index.html b/presentations/screendesign/raeumlichkeit/index.html
index af1f6ddd..a8b4f53b 100644
--- a/presentations/screendesign/raeumlichkeit/index.html
+++ b/presentations/screendesign/raeumlichkeit/index.html
@@ -7,7 +7,7 @@
     }</style><text x="0" y="38" class="svg-headline">Ich bin die Headline</text><text x="0" y="100">Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier</text><text x="0" y="126">kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet.</text><text x="0" y="152">Da muss wesentlich mehr Produktaussage rein.</text></svg></figure></section><section data-auto-animate class="image screenshot" data-transition="fade"><figure><svg data-id="frame" height="300" width="800"><style>.svg-headline{
       font-size: 2em;
       font-weight: bold;
-    }</style><text x="0" y="38" class="svg-headline">Ich bin die Headline</text><text x="0" y="100" class="svg-is-lighter" fill="#999">Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier</text><text x="0" y="126" class="svg-is-lighter" fill="#999">kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet.</text><text x="0" y="152" class="svg-is-lighter" fill="#999">Da muss wesentlich mehr Produktaussage rein.</text></svg></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Größe</h1><div class="fragment">Große Elemente werden gegenüber kleinen Elementen als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-groesse-01.png" alt="images/raeumlichkeit-groesse-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-groesse-02.png" alt="images/raeumlichkeit-groesse-02.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Kontrast</h1><div class="fragment">Kontrastreiche Elemente werden gegenüber kontrastarmen Elementen als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-kontrast-01.png" alt="images/raeumlichkeit-kontrast-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-kontrast-02.png" alt="images/raeumlichkeit-kontrast-02.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Sättigung</h1><div class="fragment">Elemente in warmen und gesättigten Farben werden gegenüber Elementen in kalten und ungesättigten Farben als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-farbe-01.png" alt="images/raeumlichkeit-farbe-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-farbe-02.png" alt="images/raeumlichkeit-farbe-02.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Überdeckung</h1><div class="fragment">Elemente, die andere Elemente überdecken, werden als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-ueberdeckung-01.png" alt="images/raeumlichkeit-ueberdeckung-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-ueberdeckung-02.png" alt="images/raeumlichkeit-ueberdeckung-02.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-ueberdeckung-03.png" alt="images/raeumlichkeit-ueberdeckung-03.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Animation</h1><div class="fragment">Bewegte Bilder oder Elemente werden von uns bevorzugt wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/animation-1.png" alt="images/animation-1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/animation-2.gif" alt="images/animation-2.gif"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Anwendungsbeispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/apple.jpg" alt="./images/apple.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/arte.jpg" alt="./images/arte.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/fhd.jpg" alt="./images/fhd.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/kalender.jpg" alt="./images/kalender.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/wii.jpg" alt="./images/wii.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/zdf.jpg" alt="./images/zdf.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/audi.jpg" alt="./images/audi.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-2.jpg" alt="./images/notice-2.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-1.jpg" alt="./images/notice-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-h.jpg" alt="./images/visual-h.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-hierarchy.jpg" alt="./images/visual-hierarchy.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+    }</style><text x="0" y="38" class="svg-headline">Ich bin die Headline</text><text x="0" y="100" class="svg-is-lighter" fill="#999">Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier</text><text x="0" y="126" class="svg-is-lighter" fill="#999">kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet.</text><text x="0" y="152" class="svg-is-lighter" fill="#999">Da muss wesentlich mehr Produktaussage rein.</text></svg></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Größe</h1><div class="fragment">Große Elemente werden gegenüber kleinen Elementen als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-groesse-01.png" alt="images/raeumlichkeit-groesse-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-groesse-02.png" alt="images/raeumlichkeit-groesse-02.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Kontrast</h1><div class="fragment">Kontrastreiche Elemente werden gegenüber kontrastarmen Elementen als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-kontrast-01.png" alt="images/raeumlichkeit-kontrast-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-kontrast-02.png" alt="images/raeumlichkeit-kontrast-02.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Sättigung</h1><div class="fragment">Elemente in warmen und gesättigten Farben werden gegenüber Elementen in kalten und ungesättigten Farben als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-farbe-01.png" alt="images/raeumlichkeit-farbe-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-farbe-02.png" alt="images/raeumlichkeit-farbe-02.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Überdeckung</h1><div class="fragment">Elemente, die andere Elemente überdecken, werden als im Vordergrund stehend wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-ueberdeckung-01.png" alt="images/raeumlichkeit-ueberdeckung-01.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-ueberdeckung-02.png" alt="images/raeumlichkeit-ueberdeckung-02.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/raeumlichkeit-ueberdeckung-03.png" alt="images/raeumlichkeit-ueberdeckung-03.png"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-background-transition="slide" class="statement"><div><h1 class="title">Animation</h1><div class="fragment">Bewegte Bilder oder Elemente werden von uns bevorzugt wahrgenommen.</div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/animation-1.png" alt="images/animation-1.png"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="images/animation-2.gif" alt="images/animation-2.gif"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Anwendungsbeispiele</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/apple.jpg" alt="./images/apple.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/arte.jpg" alt="./images/arte.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/fhd.jpg" alt="./images/fhd.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/kalender.jpg" alt="./images/kalender.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/wii.jpg" alt="./images/wii.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/zdf.jpg" alt="./images/zdf.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/audi.jpg" alt="./images/audi.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-2.jpg" alt="./images/notice-2.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="convex"><figure><img src="./images/notice-1.jpg" alt="./images/notice-1.jpg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-h.jpg" alt="./images/visual-h.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="convex"><figure><img src="./images/visual-hierarchy.jpg" alt="./images/visual-hierarchy.jpg"><figcaption class="bu"><p>Welche Regeln werden hier genutzt?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-semantisches-differenzial/index.html b/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-semantisches-differenzial/index.html
index fcfb28a1..d574b73d 100644
--- a/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-semantisches-differenzial/index.html
+++ b/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-semantisches-differenzial/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Fragen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section class="simple"><div><h3>Alle Teile einer Information (wie Texte, Bilder, Farben etc), die von Menschen für Menschen gestaltet werden, kommunizieren. Dabei ist es gleichgültig, ob es sich bei der Information um einen Brief, eine Website oder eine Plakat handelt.</h3><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie wirkt eine Gestaltung?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie soll eine Gestaltung wirken?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was ist das Gestaltungsziel?</p></div></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-01.png" alt="./images/font-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-02.png" alt="./images/font-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-03.png" alt="./images/font-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-01.png" alt="./images/semantisches-differenzial-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-02.png" alt="./images/semantisches-differenzial-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Ein Selbstversuch</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-01.png" alt="./images/selbstversuch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-02.png" alt="./images/selbstversuch-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-03.png" alt="./images/selbstversuch-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-04.png" alt="./images/selbstversuch-04.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Fragen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section class="simple"><div><h3>Alle Teile einer Information (wie Texte, Bilder, Farben etc), die von Menschen für Menschen gestaltet werden, kommunizieren. Dabei ist es gleichgültig, ob es sich bei der Information um einen Brief, eine Website oder eine Plakat handelt.</h3><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie wirkt eine Gestaltung?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie soll eine Gestaltung wirken?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was ist das Gestaltungsziel?</p></div></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-01.png" alt="./images/font-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-02.png" alt="./images/font-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-03.png" alt="./images/font-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-01.png" alt="./images/semantisches-differenzial-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-02.png" alt="./images/semantisches-differenzial-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Ein Selbstversuch</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-01.png" alt="./images/selbstversuch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-02.png" alt="./images/selbstversuch-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-03.png" alt="./images/selbstversuch-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-04.png" alt="./images/selbstversuch-04.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/semantisches-diff-axis-maps-moodboards/030-moodboards/index.html b/presentations/screendesign/semantisches-diff-axis-maps-moodboards/030-moodboards/index.html
index fb2eb7d9..f6b35136 100644
--- a/presentations/screendesign/semantisches-diff-axis-maps-moodboards/030-moodboards/index.html
+++ b/presentations/screendesign/semantisches-diff-axis-maps-moodboards/030-moodboards/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Fragen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Moodboards</h1><h2 class="js-delay subtitle">Moodboards sind meist Collagen aus Bildern unterschiedlicher Art, Schlüsselwörtern und Farbstimmungen. Ziel ist die Visualisierung einer Grundstimmung, in die das Produkt oder der Service zukünftig passen soll.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-01.jpg" alt="./images/moodboard-01.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-02.jpg" alt="./images/moodboard-02.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-03.jpg" alt="./images/moodboard-03.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-04.jpg" alt="./images/moodboard-04.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-05.jpg" alt="./images/moodboard-05.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-06.jpg" alt="./images/moodboard-06.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-07.jpg" alt="./images/moodboard-07.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-08.jpg" alt="./images/moodboard-08.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-09.jpg" alt="./images/moodboard-09.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-10.jpg" alt="./images/moodboard-10.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-11.jpg" alt="./images/moodboard-11.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-12.jpg" alt="./images/moodboard-12.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-13.jpg" alt="./images/moodboard-13.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-01.png" alt="./images/colors-01.png" width="auto"><figcaption class="bu"><p>Häufig können Farbklimata direkt aus dem Moodboard generiert werden.</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-02.png" alt="./images/colors-02.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Fragen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Moodboards</h1><h2 class="js-delay subtitle">Moodboards sind meist Collagen aus Bildern unterschiedlicher Art, Schlüsselwörtern und Farbstimmungen. Ziel ist die Visualisierung einer Grundstimmung, in die das Produkt oder der Service zukünftig passen soll.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-01.jpg" alt="./images/moodboard-01.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-02.jpg" alt="./images/moodboard-02.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-03.jpg" alt="./images/moodboard-03.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-04.jpg" alt="./images/moodboard-04.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-05.jpg" alt="./images/moodboard-05.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-06.jpg" alt="./images/moodboard-06.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-07.jpg" alt="./images/moodboard-07.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-08.jpg" alt="./images/moodboard-08.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-09.jpg" alt="./images/moodboard-09.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-10.jpg" alt="./images/moodboard-10.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-11.jpg" alt="./images/moodboard-11.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-12.jpg" alt="./images/moodboard-12.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-13.jpg" alt="./images/moodboard-13.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-01.png" alt="./images/colors-01.png" width="auto"><figcaption class="bu"><p>Häufig können Farbklimata direkt aus dem Moodboard generiert werden.</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-02.png" alt="./images/colors-02.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html b/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html
index d5193fcd..667e8314 100644
--- a/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html
+++ b/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Semantisches Differential, Axis Maps und Moodboards // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Semantischen Differential, Axis Maps und Moodboards</h1></div></section><section data-slide-class="cite" class="mi-slide cite" data-background-image="./images/paul.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Man kann nicht nicht kommunizieren.</p><cite>Paul Watzlawick</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h3>Alle Teile einer Information (wie Texte, Bilder, Farben etc), die von Menschen für Menschen gestaltet werden, kommunizieren. Dabei ist es gleichgültig, ob es sich bei der Information um einen Brief, eine Website oder eine Plakat handelt.</h3><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie wirkt eine Gestaltung?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie soll eine Gestaltung wirken?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was ist das Gestaltungsziel?</p></div></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-01.png" alt="./images/font-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-02.png" alt="./images/font-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-03.png" alt="./images/font-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-01.png" alt="./images/semantisches-differenzial-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-02.png" alt="./images/semantisches-differenzial-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Ein Selbstversuch</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-01.png" alt="./images/selbstversuch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-02.png" alt="./images/selbstversuch-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-03.png" alt="./images/selbstversuch-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-04.png" alt="./images/selbstversuch-04.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Moodboards</h1><h2 class="js-delay subtitle">Moodboards sind meist Collagen aus Bildern unterschiedlicher Art, Schlüsselwörtern und Farbstimmungen. Ziel ist die Visualisierung einer Grundstimmung, in die das Produkt oder der Service zukünftig passen soll.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-01.jpg" alt="./images/moodboard-01.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-02.jpg" alt="./images/moodboard-02.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-03.jpg" alt="./images/moodboard-03.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-04.jpg" alt="./images/moodboard-04.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-05.jpg" alt="./images/moodboard-05.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-06.jpg" alt="./images/moodboard-06.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-07.jpg" alt="./images/moodboard-07.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-08.jpg" alt="./images/moodboard-08.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-09.jpg" alt="./images/moodboard-09.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-10.jpg" alt="./images/moodboard-10.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-11.jpg" alt="./images/moodboard-11.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-12.jpg" alt="./images/moodboard-12.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-13.jpg" alt="./images/moodboard-13.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-01.png" alt="./images/colors-01.png" width="auto"><figcaption class="bu"><p>Häufig können Farbklimata direkt aus dem Moodboard generiert werden.</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-02.png" alt="./images/colors-02.png" width="auto"></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Semantisches Differential, Axis Maps und Moodboards // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Semantischen Differential, Axis Maps und Moodboards</h1></div></section><section data-slide-class="cite" class="mi-slide cite" data-background-image="./images/paul.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Man kann nicht nicht kommunizieren.</p><cite>Paul Watzlawick</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h3>Alle Teile einer Information (wie Texte, Bilder, Farben etc), die von Menschen für Menschen gestaltet werden, kommunizieren. Dabei ist es gleichgültig, ob es sich bei der Information um einen Brief, eine Website oder eine Plakat handelt.</h3><figure><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie wirkt eine Gestaltung?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Wie soll eine Gestaltung wirken?</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list">Was ist das Gestaltungsziel?</p></div></figure></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-01.png" alt="./images/font-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-02.png" alt="./images/font-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/font-03.png" alt="./images/font-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-01.png" alt="./images/example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-02.png" alt="./images/example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/example-03.png" alt="./images/example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-01.png" alt="./images/semantisches-differenzial-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/semantisches-differenzial-02.png" alt="./images/semantisches-differenzial-02.png" width="auto"></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Ein Selbstversuch</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-01.png" alt="./images/selbstversuch-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-02.png" alt="./images/selbstversuch-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/selbstversuch-03.png" alt="./images/selbstversuch-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/selbstversuch-04.png" alt="./images/selbstversuch-04.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Moodboards</h1><h2 class="js-delay subtitle">Moodboards sind meist Collagen aus Bildern unterschiedlicher Art, Schlüsselwörtern und Farbstimmungen. Ziel ist die Visualisierung einer Grundstimmung, in die das Produkt oder der Service zukünftig passen soll.</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-01.jpg" alt="./images/moodboard-01.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-02.jpg" alt="./images/moodboard-02.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-03.jpg" alt="./images/moodboard-03.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-04.jpg" alt="./images/moodboard-04.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-05.jpg" alt="./images/moodboard-05.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-06.jpg" alt="./images/moodboard-06.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-07.jpg" alt="./images/moodboard-07.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-08.jpg" alt="./images/moodboard-08.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-09.jpg" alt="./images/moodboard-09.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-10.jpg" alt="./images/moodboard-10.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-11.jpg" alt="./images/moodboard-11.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-12.jpg" alt="./images/moodboard-12.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/moodboard-13.jpg" alt="./images/moodboard-13.jpg" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-01.png" alt="./images/colors-01.png" width="auto"><figcaption class="bu"><p>Häufig können Farbklimata direkt aus dem Moodboard generiert werden.</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/colors-02.png" alt="./images/colors-02.png" width="auto"></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/semiotik/010-kommunikationsmodelle/index.html b/presentations/screendesign/semiotik/010-kommunikationsmodelle/index.html
index 21e2b452..e4d2b54c 100644
--- a/presentations/screendesign/semiotik/010-kommunikationsmodelle/index.html
+++ b/presentations/screendesign/semiotik/010-kommunikationsmodelle/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Kommunikationsmodelle // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Kommunikation</h1><h2 class="js-delay subtitle">Was heißt/ ist das?</h2></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Kommunikations<strong>modelle</strong></h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-1.svg" alt="./images/kommunikationsmodell-1.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-2.svg" alt="./images/kommunikationsmodell-2.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-2a.svg" alt="./images/kommunikationsmodell-2a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3.svg" alt="./images/kommunikationsmodell-3.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3a.svg" alt="./images/kommunikationsmodell-3a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3b.svg" alt="./images/kommunikationsmodell-3b.svg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Kommunikationsmodelle // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Kommunikation</h1><h2 class="js-delay subtitle">Was heißt/ ist das?</h2></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Kommunikations<strong>modelle</strong></h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-1.svg" alt="./images/kommunikationsmodell-1.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-2.svg" alt="./images/kommunikationsmodell-2.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-2a.svg" alt="./images/kommunikationsmodell-2a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3.svg" alt="./images/kommunikationsmodell-3.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3a.svg" alt="./images/kommunikationsmodell-3a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3b.svg" alt="./images/kommunikationsmodell-3b.svg"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/semiotik/030-ampel/index.html b/presentations/screendesign/semiotik/030-ampel/index.html
index fada0082..190bd507 100644
--- a/presentations/screendesign/semiotik/030-ampel/index.html
+++ b/presentations/screendesign/semiotik/030-ampel/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Beispiel Semiotik // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Kleines Beispiel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-1.png" alt="./images/ampel-1.png"><figcaption class="bu"><p>Was ist das?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was ist das?<br><strong>Syntaktische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was bedeutet es?<br><strong>Semantische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-3.png" alt="./images/ampel-3.png"><figcaption class="bu"><p>Was heißt es für mich?<br><strong>Pragmatische Ebene</strong></p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Beispiel Semiotik // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Kleines Beispiel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-1.png" alt="./images/ampel-1.png"><figcaption class="bu"><p>Was ist das?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was ist das?<br><strong>Syntaktische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was bedeutet es?<br><strong>Semantische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-3.png" alt="./images/ampel-3.png"><figcaption class="bu"><p>Was heißt es für mich?<br><strong>Pragmatische Ebene</strong></p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/semiotik/index.html b/presentations/screendesign/semiotik/index.html
index 61878a4a..0727a709 100644
--- a/presentations/screendesign/semiotik/index.html
+++ b/presentations/screendesign/semiotik/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Semiotik // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Semiotik</h1><h2>Lehre von Zeichen und Zeichensystemen</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Kommunikation</h1><h2 class="js-delay subtitle">Was heißt/ ist das?</h2></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Kommunikations<strong>modelle</strong></h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-1.svg" alt="./images/kommunikationsmodell-1.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-2.svg" alt="./images/kommunikationsmodell-2.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-2a.svg" alt="./images/kommunikationsmodell-2a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3.svg" alt="./images/kommunikationsmodell-3.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3a.svg" alt="./images/kommunikationsmodell-3a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3b.svg" alt="./images/kommunikationsmodell-3b.svg"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Semiotik</h1><p>Lehre von Zeichen und Zeichensystemen.</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Syntaktik:</strong> Anordnung der Zeichen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Semantik:</strong> Bedeutung der Zeichen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Pragmatik:</strong> Beziehung der Zeichen und ihrer Benutzer&nbsp;&nbsp;</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Kleines Beispiel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-1.png" alt="./images/ampel-1.png"><figcaption class="bu"><p>Was ist das?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was ist das?<br><strong>Syntaktische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was bedeutet es?<br><strong>Semantische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-3.png" alt="./images/ampel-3.png"><figcaption class="bu"><p>Was heißt es für mich?<br><strong>Pragmatische Ebene</strong></p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/Logo_NIKE.svg" alt="./images/Logo_NIKE.svg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/Deutsche-post-horn.svg" alt="./images/Deutsche-post-horn.svg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/Deutsche_Bank_logo_without_wordmark.svg" alt="./images/Deutsche_Bank_logo_without_wordmark.svg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/audi-logo.jpg" alt="./images/audi-logo.jpg" width="30%"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/twitter-logo.svg" alt="./images/twitter-logo.svg" width="20%"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Semiotik // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Semiotik</h1><h2>Lehre von Zeichen und Zeichensystemen</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Kommunikation</h1><h2 class="js-delay subtitle">Was heißt/ ist das?</h2></div></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Kommunikations<strong>modelle</strong></h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-1.svg" alt="./images/kommunikationsmodell-1.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-2.svg" alt="./images/kommunikationsmodell-2.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="slide"><figure><img src="./images/kommunikationsmodell-2a.svg" alt="./images/kommunikationsmodell-2a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3.svg" alt="./images/kommunikationsmodell-3.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3a.svg" alt="./images/kommunikationsmodell-3a.svg"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kommunikationsmodell-3b.svg" alt="./images/kommunikationsmodell-3b.svg"></figure></section></section><section data-slide-class="simple" class="mi-slide simple" data-transition="convex"><div><h1>Semiotik</h1><p>Lehre von Zeichen und Zeichensystemen.</p><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Syntaktik:</strong> Anordnung der Zeichen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Semantik:</strong> Bedeutung der Zeichen</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Pragmatik:</strong> Beziehung der Zeichen und ihrer Benutzer&nbsp;&nbsp;</p></div></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Kleines Beispiel</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-1.png" alt="./images/ampel-1.png"><figcaption class="bu"><p>Was ist das?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was ist das?<br><strong>Syntaktische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-2.png" alt="./images/ampel-2.png"><figcaption class="bu"><p>Was bedeutet es?<br><strong>Semantische Ebene</strong></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/ampel-3.png" alt="./images/ampel-3.png"><figcaption class="bu"><p>Was heißt es für mich?<br><strong>Pragmatische Ebene</strong></p></figcaption></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/Logo_NIKE.svg" alt="./images/Logo_NIKE.svg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/Deutsche-post-horn.svg" alt="./images/Deutsche-post-horn.svg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/Deutsche_Bank_logo_without_wordmark.svg" alt="./images/Deutsche_Bank_logo_without_wordmark.svg"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/audi-logo.jpg" alt="./images/audi-logo.jpg" width="30%"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow"><figure><img src="./images/twitter-logo.svg" alt="./images/twitter-logo.svg" width="20%"><figcaption class="bu"><p>Auf welcher Ebene ist das Zeichen?</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/030-typosgraphein/index.html b/presentations/screendesign/typographie/030-typosgraphein/index.html
index 899aeeac..8ffb1aec 100644
--- a/presentations/screendesign/typographie/030-typosgraphein/index.html
+++ b/presentations/screendesign/typographie/030-typosgraphein/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Typosgraphein // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Typosgraphein</h1><h2 class="js-delay subtitle">Gestalt, Muster / Schreiben</h2></div></section><section class="cite" data-background="./images/typosgraphein-01.png"><blockquote class="has-whitener"><p>Das Aufgezeichnete ist uns erhalten geblieben, das Gesprochene nicht.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-02.png"><blockquote class="has-whitener"><p>Ohne Sprache und Schrift würden wir vielleicht eher den Berufsgruppen Jäger oder Sammler angehören.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-03.png"><blockquote class="has-whitener"><p>Die Kommunikation der Urmenschen wurde mit Hilfe von Mimik, Lauten und Gesten realisiert. Auch heute noch unterstützen wir Gesprochenes durch Mimik und Gestik, selbst wenn wir telefonieren und unsere Kommunikationspartner uns nicht sehen kann.</p></blockquote></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Typosgraphein // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Typosgraphein</h1><h2 class="js-delay subtitle">Gestalt, Muster / Schreiben</h2></div></section><section class="cite" data-background="./images/typosgraphein-01.png"><blockquote class="has-whitener"><p>Das Aufgezeichnete ist uns erhalten geblieben, das Gesprochene nicht.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-02.png"><blockquote class="has-whitener"><p>Ohne Sprache und Schrift würden wir vielleicht eher den Berufsgruppen Jäger oder Sammler angehören.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-03.png"><blockquote class="has-whitener"><p>Die Kommunikation der Urmenschen wurde mit Hilfe von Mimik, Lauten und Gesten realisiert. Auch heute noch unterstützen wir Gesprochenes durch Mimik und Gestik, selbst wenn wir telefonieren und unsere Kommunikationspartner uns nicht sehen kann.</p></blockquote></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/040-historie/index.html b/presentations/screendesign/typographie/040-historie/index.html
index 9245f4d7..79b67bde 100644
--- a/presentations/screendesign/typographie/040-historie/index.html
+++ b/presentations/screendesign/typographie/040-historie/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Historie // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Historie</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-01.png" alt="./images/historie-01.png" width="auto"><figcaption class="bu"><p>Schrift als Grundlage für den Staatsapparat</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-02.png" alt="./images/historie-02.png" width="auto"><figcaption class="bu"><p>Vinca Schrift. 6. bis 5. Jahrtausend v. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-03.png" alt="./images/historie-03.png" width="auto"><figcaption class="bu"><p>Ägyptische Hieroglyphen. 3200 v. bis 300 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"><figcaption class="bu"><p>Chinesisches Zeichen für „Berg“</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-05.png" alt="./images/historie-05.png" width="auto"><figcaption class="bu"><p>Griechisches Lautalphabet</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-06.png" alt="./images/historie-06.png" width="auto"><figcaption class="bu"><p>Alphabet der Etrusker</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-07.png" alt="./images/historie-07.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/rome-arch-of-titus-1960.png" alt="./images/rome-arch-of-titus-1960.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-08.png" alt="./images/historie-08.png" width="auto"><figcaption class="bu"><p>Capitalis quadrata und Capitalis rustica. 100 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-09.png" alt="./images/historie-09.png" width="auto"><figcaption class="bu"><p>Entstehung von Ober- und Unterlängen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-10.png" alt="./images/historie-10.png" width="auto"><figcaption class="bu"><p>Karolingische Minuskel. 800 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-11.png" alt="./images/historie-11.png" width="auto"><figcaption class="bu"><p>Entwicklung der Klein- und Großbuchstaben</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-12.png" alt="./images/historie-12.png" width="auto"><figcaption class="bu"><p>Brief des Paulus aus dem 16. Jahrhundert</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-13.png" alt="./images/historie-13.png" width="auto"><figcaption class="bu"><p>Buchseite aus dem 16. Jahrhundert mit farbigen Versalien</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutenberg-01.png" alt="./images/gutenberg-01.png" width="auto"><figcaption class="bu"><p>Johannes Gensfleisch, genannt Gutenberg</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/mazarine-bibel-01.png" alt="./images/mazarine-bibel-01.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-14.png" alt="./images/historie-14.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-15.png" alt="./images/historie-15.png" width="auto"><figcaption class="bu"><p>Satzspiegel der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/capitalis-rustica-01.png" alt="./images/capitalis-rustica-01.png" width="auto"><figcaption class="bu"><p>Textura, die Schrift der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-16.png" alt="./images/historie-16.png" width="auto"><figcaption class="bu"><p>Variabler Bleibuchstabe, 1960</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Historie // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Historie</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-01.png" alt="./images/historie-01.png" width="auto"><figcaption class="bu"><p>Schrift als Grundlage für den Staatsapparat</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-02.png" alt="./images/historie-02.png" width="auto"><figcaption class="bu"><p>Vinca Schrift. 6. bis 5. Jahrtausend v. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-03.png" alt="./images/historie-03.png" width="auto"><figcaption class="bu"><p>Ägyptische Hieroglyphen. 3200 v. bis 300 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"><figcaption class="bu"><p>Chinesisches Zeichen für „Berg“</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-05.png" alt="./images/historie-05.png" width="auto"><figcaption class="bu"><p>Griechisches Lautalphabet</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-06.png" alt="./images/historie-06.png" width="auto"><figcaption class="bu"><p>Alphabet der Etrusker</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-07.png" alt="./images/historie-07.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/rome-arch-of-titus-1960.png" alt="./images/rome-arch-of-titus-1960.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-08.png" alt="./images/historie-08.png" width="auto"><figcaption class="bu"><p>Capitalis quadrata und Capitalis rustica. 100 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-09.png" alt="./images/historie-09.png" width="auto"><figcaption class="bu"><p>Entstehung von Ober- und Unterlängen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-10.png" alt="./images/historie-10.png" width="auto"><figcaption class="bu"><p>Karolingische Minuskel. 800 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-11.png" alt="./images/historie-11.png" width="auto"><figcaption class="bu"><p>Entwicklung der Klein- und Großbuchstaben</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-12.png" alt="./images/historie-12.png" width="auto"><figcaption class="bu"><p>Brief des Paulus aus dem 16. Jahrhundert</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-13.png" alt="./images/historie-13.png" width="auto"><figcaption class="bu"><p>Buchseite aus dem 16. Jahrhundert mit farbigen Versalien</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutenberg-01.png" alt="./images/gutenberg-01.png" width="auto"><figcaption class="bu"><p>Johannes Gensfleisch, genannt Gutenberg</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/mazarine-bibel-01.png" alt="./images/mazarine-bibel-01.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-14.png" alt="./images/historie-14.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-15.png" alt="./images/historie-15.png" width="auto"><figcaption class="bu"><p>Satzspiegel der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/capitalis-rustica-01.png" alt="./images/capitalis-rustica-01.png" width="auto"><figcaption class="bu"><p>Textura, die Schrift der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-16.png" alt="./images/historie-16.png" width="auto"><figcaption class="bu"><p>Variabler Bleibuchstabe, 1960</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/055-schriftgruppen/index.html b/presentations/screendesign/typographie/055-schriftgruppen/index.html
index 822a132f..2f9c1c8f 100644
--- a/presentations/screendesign/typographie/055-schriftgruppen/index.html
+++ b/presentations/screendesign/typographie/055-schriftgruppen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Schriftgruppen der DIN 16518 // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image interlude screenshot"><div><h1 class="title">Wie viele und welche Schriften kennen Sie?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Schriftgruppen der DIN 16518 // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image interlude screenshot"><div><h1 class="title">Wie viele und welche Schriften kennen Sie?</h1></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/060-schriftgruppen-din/index.html b/presentations/screendesign/typographie/060-schriftgruppen-din/index.html
index 05cc4b52..8b5ffa30 100644
--- a/presentations/screendesign/typographie/060-schriftgruppen-din/index.html
+++ b/presentations/screendesign/typographie/060-schriftgruppen-din/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Schriftgruppen der DIN 16518 // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftgruppen der DIN 16518</h1></div></section><section class="simple"><div><h1>DIN 16518</h1><div><p class="list"><strong>Gruppe 1: Venezianische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 2: Französische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 3: Barock-Antiqua</strong></p><p class="list"><strong>Gruppe 4: Klassizistische Antiqua</strong></p><p class="list">Gruppe 5: Serifenbetonte Linear-Antiqua</p><p class="list">Gruppe 6: Serifenlose Linear-Antiqua</p><p class="list">Gruppe 7: Antiqua-Varianten</p><p class="list">Gruppe 8: Schreibschriften</p><p class="list">Gruppe 9: Handschriftliche Antiqua</p><p class="list">Gruppe 10: Gebrochene Schriften</p><p class="list">Gruppe 11: Fremde Schriften</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-01.png" alt="./images/schriftgruppe-01.png" width="auto"><figcaption class="bu"><p></p><h3>Venezianische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-02.png" alt="./images/schriftgruppe-02.png" width="auto"><figcaption class="bu"><p></p><h3>Französische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-03.png" alt="./images/schriftgruppe-03.png" width="auto"><figcaption class="bu"><p></p><h3>Barock-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-04.png" alt="./images/schriftgruppe-04.png" width="auto"><figcaption class="bu"><p></p><h3>Klassizistische Antiqua</h3><p></p></figcaption></figure></section><section class="video"><figure><iframe width="560" height="315" src="https://www.youtube.com/embed/VEFjzBjqgz4?si=5bcW2fMrr6v45THr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
+<!doctype html><html lang="de"><head><title>Schriftgruppen der DIN 16518 // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Schriftgruppen der DIN 16518</h1></div></section><section class="simple"><div><h1>DIN 16518</h1><div><p class="list"><strong>Gruppe 1: Venezianische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 2: Französische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 3: Barock-Antiqua</strong></p><p class="list"><strong>Gruppe 4: Klassizistische Antiqua</strong></p><p class="list">Gruppe 5: Serifenbetonte Linear-Antiqua</p><p class="list">Gruppe 6: Serifenlose Linear-Antiqua</p><p class="list">Gruppe 7: Antiqua-Varianten</p><p class="list">Gruppe 8: Schreibschriften</p><p class="list">Gruppe 9: Handschriftliche Antiqua</p><p class="list">Gruppe 10: Gebrochene Schriften</p><p class="list">Gruppe 11: Fremde Schriften</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-01.png" alt="./images/schriftgruppe-01.png" width="auto"><figcaption class="bu"><p></p><h3>Venezianische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-02.png" alt="./images/schriftgruppe-02.png" width="auto"><figcaption class="bu"><p></p><h3>Französische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-03.png" alt="./images/schriftgruppe-03.png" width="auto"><figcaption class="bu"><p></p><h3>Barock-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-04.png" alt="./images/schriftgruppe-04.png" width="auto"><figcaption class="bu"><p></p><h3>Klassizistische Antiqua</h3><p></p></figcaption></figure></section><section class="video"><figure><iframe width="560" height="315" src="https://www.youtube.com/embed/VEFjzBjqgz4?si=5bcW2fMrr6v45THr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
         clipboard-write; encrypted-media; gyroscope; 
         picture-in-picture" allowfullscreen></iframe><figcaption class="bu"><p>Eine kurze Geschichte der Typografie</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
diff --git a/presentations/screendesign/typographie/070-schriftgruppen-beinert /index.html b/presentations/screendesign/typographie/070-schriftgruppen-beinert /index.html
index 7d8efbff..e1c136e2 100644
--- a/presentations/screendesign/typographie/070-schriftgruppen-beinert /index.html	
+++ b/presentations/screendesign/typographie/070-schriftgruppen-beinert /index.html	
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Schriftklassifikationsmodell des Typographen Wolfgang Beinert // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Schriftklassifikationsmodell des Typographen Wolfgang Beinert</h1></div></section><section class="simple"><div><h1>Matrix Beinert Hauptgruppen</h1><div><p class="list">Gruppe 1: Antiqua Druckschriften mit Serifen</p><p class="list">Gruppe 2: Egyptienne Druckschriften mit betonten Serifen</p><p class="list">Gruppe 3: Grotesk Druckschriften ohne Serifen</p><p class="list">Gruppe 4: Corporate Typography Fonts Schriftsysteme, CD-Schriften, DIN- ISO- und OCR</p><p class="list">Gruppe 5: Zierschriften Dekorative, Display, Schreibmaschinen- und Digitale Schreibschriften</p><p class="list">Gruppe 6: Bildschirmschriften Pixel- und World Wide Web-Fonts</p><p class="list">Gruppe 7: Gebrochene Schriften</p><p class="list">Gruppe 8: Nichtrömische Schriften</p><p class="list">Gruppe 9: Bildzeichen Piktogramme, Ornamente, Zierrat, Logos usw</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-01.png" alt="./images/beinert-hauptgruppen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-02.png" alt="./images/beinert-hauptgruppen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-03.png" alt="./images/beinert-hauptgruppen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-04.png" alt="./images/beinert-hauptgruppen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-05.png" alt="./images/beinert-hauptgruppen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-06.png" alt="./images/beinert-hauptgruppen-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-07.png" alt="./images/beinert-hauptgruppen-07.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Schriftklassifikationsmodell des Typographen Wolfgang Beinert // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftklassifikationsmodell des Typographen Wolfgang Beinert</h1></div></section><section class="simple"><div><h1>Matrix Beinert Hauptgruppen</h1><div><p class="list">Gruppe 1: Antiqua Druckschriften mit Serifen</p><p class="list">Gruppe 2: Egyptienne Druckschriften mit betonten Serifen</p><p class="list">Gruppe 3: Grotesk Druckschriften ohne Serifen</p><p class="list">Gruppe 4: Corporate Typography Fonts Schriftsysteme, CD-Schriften, DIN- ISO- und OCR</p><p class="list">Gruppe 5: Zierschriften Dekorative, Display, Schreibmaschinen- und Digitale Schreibschriften</p><p class="list">Gruppe 6: Bildschirmschriften Pixel- und World Wide Web-Fonts</p><p class="list">Gruppe 7: Gebrochene Schriften</p><p class="list">Gruppe 8: Nichtrömische Schriften</p><p class="list">Gruppe 9: Bildzeichen Piktogramme, Ornamente, Zierrat, Logos usw</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-01.png" alt="./images/beinert-hauptgruppen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-02.png" alt="./images/beinert-hauptgruppen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-03.png" alt="./images/beinert-hauptgruppen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-04.png" alt="./images/beinert-hauptgruppen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-05.png" alt="./images/beinert-hauptgruppen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-06.png" alt="./images/beinert-hauptgruppen-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-07.png" alt="./images/beinert-hauptgruppen-07.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/090-buchstabenabstand/index.html b/presentations/screendesign/typographie/090-buchstabenabstand/index.html
index b73ecdc4..2b8fa26d 100644
--- a/presentations/screendesign/typographie/090-buchstabenabstand/index.html
+++ b/presentations/screendesign/typographie/090-buchstabenabstand/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Buchstabenabstand // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Zurichtung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-01.png" alt="./images/zurichtung-01.png" width="auto"><figcaption class="bu"><p>Besonderheiten und Parameter</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-02.png" alt="./images/zurichtung-02.png" width="auto"><figcaption class="bu"><p>Laufweite, optimiert für Schriftgrößen zwischen 9 und 12 Pt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-03.png" alt="./images/zurichtung-03.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-04.png" alt="./images/zurichtung-04.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-05.png" alt="./images/zurichtung-05.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-06.png" alt="./images/zurichtung-06.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-07.png" alt="./images/zurichtung-07.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Buchstabenabstand // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Zurichtung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-01.png" alt="./images/zurichtung-01.png" width="auto"><figcaption class="bu"><p>Besonderheiten und Parameter</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-02.png" alt="./images/zurichtung-02.png" width="auto"><figcaption class="bu"><p>Laufweite, optimiert für Schriftgrößen zwischen 9 und 12 Pt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-03.png" alt="./images/zurichtung-03.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-04.png" alt="./images/zurichtung-04.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-05.png" alt="./images/zurichtung-05.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-06.png" alt="./images/zurichtung-06.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-07.png" alt="./images/zurichtung-07.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/100-geviert/index.html b/presentations/screendesign/typographie/100-geviert/index.html
index b7407a84..24dff717 100644
--- a/presentations/screendesign/typographie/100-geviert/index.html
+++ b/presentations/screendesign/typographie/100-geviert/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Geviert // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Geviert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-01.png" alt="./images/geviert-01.png" width="auto"><figcaption class="bu"><p>Geviert</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Dicktengleiche Schrift</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-03.png" alt="./images/geviert-03.png" width="auto"><figcaption class="bu"><p>Courier von Howard Kettler, 1956</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Geviert // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Geviert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-01.png" alt="./images/geviert-01.png" width="auto"><figcaption class="bu"><p>Geviert</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Dicktengleiche Schrift</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-03.png" alt="./images/geviert-03.png" width="auto"><figcaption class="bu"><p>Courier von Howard Kettler, 1956</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/110-ligaturen/index.html b/presentations/screendesign/typographie/110-ligaturen/index.html
index a30fc6cc..342e82c7 100644
--- a/presentations/screendesign/typographie/110-ligaturen/index.html
+++ b/presentations/screendesign/typographie/110-ligaturen/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Ligaturen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Ligaturen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/ligaturen-01.png" alt="./images/ligaturen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-02.png" alt="./images/ligaturen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-03.png" alt="./images/ligaturen-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Ligaturen // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Ligaturen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/ligaturen-01.png" alt="./images/ligaturen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-02.png" alt="./images/ligaturen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-03.png" alt="./images/ligaturen-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/120-laufweite/index.html b/presentations/screendesign/typographie/120-laufweite/index.html
index 91c9e9f9..b9a9f6ce 100644
--- a/presentations/screendesign/typographie/120-laufweite/index.html
+++ b/presentations/screendesign/typographie/120-laufweite/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Laufweite // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Ändern der Laufweite</h1><h2 class="js-delay subtitle">Spationierung</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-01.png" alt="./images/laufweite-01.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-02.png" alt="./images/laufweite-02.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-03.png" alt="./images/laufweite-03.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-04.png" alt="./images/laufweite-04.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-05.png" alt="./images/laufweite-05.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Laufweite // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Ändern der Laufweite</h1><h2 class="js-delay subtitle">Spationierung</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-01.png" alt="./images/laufweite-01.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-02.png" alt="./images/laufweite-02.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-03.png" alt="./images/laufweite-03.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-04.png" alt="./images/laufweite-04.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-05.png" alt="./images/laufweite-05.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/130-schriftschandtaten/index.html b/presentations/screendesign/typographie/130-schriftschandtaten/index.html
index 1e133b32..c8a59b47 100644
--- a/presentations/screendesign/typographie/130-schriftschandtaten/index.html
+++ b/presentations/screendesign/typographie/130-schriftschandtaten/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Schriftschandtaten // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Schriftschandtaten</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-01.png" alt="./images/schandtaten-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-02.png" alt="./images/schandtaten-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-03.png" alt="./images/schandtaten-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Schriftschandtaten // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftschandtaten</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-01.png" alt="./images/schandtaten-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-02.png" alt="./images/schandtaten-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-03.png" alt="./images/schandtaten-03.png" width="auto"></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/140-schriftmischung/index.html b/presentations/screendesign/typographie/140-schriftmischung/index.html
index 11fba3b8..1edea8ec 100644
--- a/presentations/screendesign/typographie/140-schriftmischung/index.html
+++ b/presentations/screendesign/typographie/140-schriftmischung/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Schriftmischung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Schriftmischung</h1></div></section><section class="simple"><div><h1>Mischen von Schriften</h1><p>Schriften einer Familie können gemischt werden, z.B. <strong>Bold</strong> oder <strong>Regular</strong><br>Schriften unterschiedlicher Familien nur mit Ausnahmegenehmigung:</p><div><p class="list">Informationen übersichtlicher gestalten</p><p class="list">Zusammenhänge zu verdeutlichen</p><p class="list">wichtige Aussagen hervorheben</p></div><p>Beim Mischen darauf achten, dass die Familien sich stark voneinander unterscheiden.</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-01.png" alt="./images/schriftmischung-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-02.png" alt="./images/schriftmischung-02.png" width="auto"><figcaption class="bu"><p>American Typewriter, Myriad Pro</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Schriftmischung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftmischung</h1></div></section><section class="simple"><div><h1>Mischen von Schriften</h1><p>Schriften einer Familie können gemischt werden, z.B. <strong>Bold</strong> oder <strong>Regular</strong><br>Schriften unterschiedlicher Familien nur mit Ausnahmegenehmigung:</p><div><p class="list">Informationen übersichtlicher gestalten</p><p class="list">Zusammenhänge zu verdeutlichen</p><p class="list">wichtige Aussagen hervorheben</p></div><p>Beim Mischen darauf achten, dass die Familien sich stark voneinander unterscheiden.</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-01.png" alt="./images/schriftmischung-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-02.png" alt="./images/schriftmischung-02.png" width="auto"><figcaption class="bu"><p>American Typewriter, Myriad Pro</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/160-spaltenbreite/index.html b/presentations/screendesign/typographie/160-spaltenbreite/index.html
index 35f63713..8cde473b 100644
--- a/presentations/screendesign/typographie/160-spaltenbreite/index.html
+++ b/presentations/screendesign/typographie/160-spaltenbreite/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Spaltenbreite // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Spaltenbreite und Zeilenabstand</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-01.png" alt="./images/spaltenbreite-01.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-02.png" alt="./images/spaltenbreite-02.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03a.png" alt="./images/spaltenbreite-03a.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03b.png" alt="./images/spaltenbreite-03b.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03c.png" alt="./images/spaltenbreite-03c.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03d.png" alt="./images/spaltenbreite-03d.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03e.png" alt="./images/spaltenbreite-03e.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03f.png" alt="./images/spaltenbreite-03f.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03g.png" alt="./images/spaltenbreite-03g.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03h.png" alt="./images/spaltenbreite-03h.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-04.png" alt="./images/spaltenbreite-04.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-05.png" alt="./images/spaltenbreite-05.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-06.png" alt="./images/spaltenbreite-06.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Spaltenbreite // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Spaltenbreite und Zeilenabstand</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-01.png" alt="./images/spaltenbreite-01.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-02.png" alt="./images/spaltenbreite-02.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03a.png" alt="./images/spaltenbreite-03a.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03b.png" alt="./images/spaltenbreite-03b.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03c.png" alt="./images/spaltenbreite-03c.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03d.png" alt="./images/spaltenbreite-03d.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03e.png" alt="./images/spaltenbreite-03e.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03f.png" alt="./images/spaltenbreite-03f.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03g.png" alt="./images/spaltenbreite-03g.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03h.png" alt="./images/spaltenbreite-03h.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-04.png" alt="./images/spaltenbreite-04.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-05.png" alt="./images/spaltenbreite-05.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-06.png" alt="./images/spaltenbreite-06.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/170-grauwert/index.html b/presentations/screendesign/typographie/170-grauwert/index.html
index 7cc69c4c..88018cd6 100644
--- a/presentations/screendesign/typographie/170-grauwert/index.html
+++ b/presentations/screendesign/typographie/170-grauwert/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Der richtige Grauwert // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Der richtige Grauwert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-01.png" alt="./images/grauwert-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-02.png" alt="./images/grauwert-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-03.png" alt="./images/grauwert-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-04.png" alt="./images/grauwert-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-05.png" alt="./images/grauwert-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-06.png" alt="./images/grauwert-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-01.png" alt="./images/register-01.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-02.png" alt="./images/register-02.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-03.png" alt="./images/register-03.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-04.png" alt="./images/register-04.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-05.png" alt="./images/register-05.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/clever-typoposter.png" alt="./images/clever-typoposter.png" width="auto"><figcaption class="bu"><p>https://www.cleverprinting.de/das-kostenlose-cleverprinting-typoposter/</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Der richtige Grauwert // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="images" class="images mi-slide" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Der richtige Grauwert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-01.png" alt="./images/grauwert-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-02.png" alt="./images/grauwert-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-03.png" alt="./images/grauwert-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-04.png" alt="./images/grauwert-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-05.png" alt="./images/grauwert-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-06.png" alt="./images/grauwert-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-01.png" alt="./images/register-01.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-02.png" alt="./images/register-02.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-03.png" alt="./images/register-03.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-04.png" alt="./images/register-04.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-05.png" alt="./images/register-05.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/clever-typoposter.png" alt="./images/clever-typoposter.png" width="auto"><figcaption class="bu"><p>https://www.cleverprinting.de/das-kostenlose-cleverprinting-typoposter/</p></figcaption></figure></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/typographie/index.html b/presentations/screendesign/typographie/index.html
index c7bf0583..704e5fbe 100644
--- a/presentations/screendesign/typographie/index.html
+++ b/presentations/screendesign/typographie/index.html
@@ -1,6 +1,6 @@
-<!doctype html><html lang="de"><head><title>Typographie // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Typographie</h1><h2>--</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-01.png" alt="./images/typo-example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-02.png" alt="./images/typo-example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-03.png" alt="./images/typo-example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-04.png" alt="./images/typo-example-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-05.png" alt="./images/typo-example-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-06.png" alt="./images/typo-example-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-07.png" alt="./images/typo-example-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-08.png" alt="./images/typo-example-08.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><p>Dickte <strong>/</strong> Ligatur <strong>/</strong> Majuskel <strong>/</strong> Minuskel <strong>/</strong> Versalie <strong>/</strong> Gemeine <strong>/</strong> Hurenkind <strong>/</strong> Serife <strong>/</strong> Punze <strong>/</strong> Geviert <strong>/</strong> Schusterjunge</p></div></section><section class="simple"><div><h1>Erinnern Sie sich an einen Tag, an dem Sie nicht gesprochen haben?</h1></div></section><section class="simple"><div><h1>Erinnern Sie sich an einen Tag, an dem Sie nichts gelesen oder geschrieben haben?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/diagramm-tuba-3d-1991.png" alt="./images/diagramm-tuba-3d-1991.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Typosgraphein</h1><h2 class="js-delay subtitle">Gestalt, Muster / Schreiben</h2></div></section><section class="cite" data-background="./images/typosgraphein-01.png"><blockquote class="has-whitener"><p>Das Aufgezeichnete ist uns erhalten geblieben, das Gesprochene nicht.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-02.png"><blockquote class="has-whitener"><p>Ohne Sprache und Schrift würden wir vielleicht eher den Berufsgruppen Jäger oder Sammler angehören.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-03.png"><blockquote class="has-whitener"><p>Die Kommunikation der Urmenschen wurde mit Hilfe von Mimik, Lauten und Gesten realisiert. Auch heute noch unterstützen wir Gesprochenes durch Mimik und Gestik, selbst wenn wir telefonieren und unsere Kommunikationspartner uns nicht sehen kann.</p></blockquote></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Historie</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-01.png" alt="./images/historie-01.png" width="auto"><figcaption class="bu"><p>Schrift als Grundlage für den Staatsapparat</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-02.png" alt="./images/historie-02.png" width="auto"><figcaption class="bu"><p>Vinca Schrift. 6. bis 5. Jahrtausend v. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-03.png" alt="./images/historie-03.png" width="auto"><figcaption class="bu"><p>Ägyptische Hieroglyphen. 3200 v. bis 300 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"><figcaption class="bu"><p>Chinesisches Zeichen für „Berg“</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-05.png" alt="./images/historie-05.png" width="auto"><figcaption class="bu"><p>Griechisches Lautalphabet</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-06.png" alt="./images/historie-06.png" width="auto"><figcaption class="bu"><p>Alphabet der Etrusker</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-07.png" alt="./images/historie-07.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/rome-arch-of-titus-1960.png" alt="./images/rome-arch-of-titus-1960.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-08.png" alt="./images/historie-08.png" width="auto"><figcaption class="bu"><p>Capitalis quadrata und Capitalis rustica. 100 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-09.png" alt="./images/historie-09.png" width="auto"><figcaption class="bu"><p>Entstehung von Ober- und Unterlängen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-10.png" alt="./images/historie-10.png" width="auto"><figcaption class="bu"><p>Karolingische Minuskel. 800 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-11.png" alt="./images/historie-11.png" width="auto"><figcaption class="bu"><p>Entwicklung der Klein- und Großbuchstaben</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-12.png" alt="./images/historie-12.png" width="auto"><figcaption class="bu"><p>Brief des Paulus aus dem 16. Jahrhundert</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-13.png" alt="./images/historie-13.png" width="auto"><figcaption class="bu"><p>Buchseite aus dem 16. Jahrhundert mit farbigen Versalien</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutenberg-01.png" alt="./images/gutenberg-01.png" width="auto"><figcaption class="bu"><p>Johannes Gensfleisch, genannt Gutenberg</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/mazarine-bibel-01.png" alt="./images/mazarine-bibel-01.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-14.png" alt="./images/historie-14.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-15.png" alt="./images/historie-15.png" width="auto"><figcaption class="bu"><p>Satzspiegel der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/capitalis-rustica-01.png" alt="./images/capitalis-rustica-01.png" width="auto"><figcaption class="bu"><p>Textura, die Schrift der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-16.png" alt="./images/historie-16.png" width="auto"><figcaption class="bu"><p>Variabler Bleibuchstabe, 1960</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Anatomie der Buchstaben</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-01.png" alt="./images/anatomie-01.png" width="auto"><figcaption class="bu"><p>Renaissance Antiqua mit Majuskeln und Minuskeln</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-02.png" alt="./images/anatomie-02.png" width="auto"><figcaption class="bu"><p>Anatomie der Buchstaben: Bezeichnungen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-03.png" alt="./images/anatomie-03.png" width="auto"><figcaption class="bu"><p>Anatomie der Buchstaben: Bezeichnungen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-04.png" alt="./images/anatomie-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-05.png" alt="./images/anatomie-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-06.png" alt="./images/anatomie-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-07.png" alt="./images/anatomie-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-08.png" alt="./images/anatomie-08.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Wie viele und welche Schriften kennen Sie?</h1></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftgruppen der DIN 16518</h1></div></section><section class="simple"><div><h1>DIN 16518</h1><div><p class="list"><strong>Gruppe 1: Venezianische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 2: Französische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 3: Barock-Antiqua</strong></p><p class="list"><strong>Gruppe 4: Klassizistische Antiqua</strong></p><p class="list">Gruppe 5: Serifenbetonte Linear-Antiqua</p><p class="list">Gruppe 6: Serifenlose Linear-Antiqua</p><p class="list">Gruppe 7: Antiqua-Varianten</p><p class="list">Gruppe 8: Schreibschriften</p><p class="list">Gruppe 9: Handschriftliche Antiqua</p><p class="list">Gruppe 10: Gebrochene Schriften</p><p class="list">Gruppe 11: Fremde Schriften</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-01.png" alt="./images/schriftgruppe-01.png" width="auto"><figcaption class="bu"><p></p><h3>Venezianische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-02.png" alt="./images/schriftgruppe-02.png" width="auto"><figcaption class="bu"><p></p><h3>Französische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-03.png" alt="./images/schriftgruppe-03.png" width="auto"><figcaption class="bu"><p></p><h3>Barock-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-04.png" alt="./images/schriftgruppe-04.png" width="auto"><figcaption class="bu"><p></p><h3>Klassizistische Antiqua</h3><p></p></figcaption></figure></section><section class="video"><figure><iframe width="560" height="315" src="https://www.youtube.com/embed/VEFjzBjqgz4?si=5bcW2fMrr6v45THr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
+<!doctype html><html lang="de"><head><title>Typographie // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Typographie</h1><h2>--</h2></div></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-01.png" alt="./images/typo-example-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-02.png" alt="./images/typo-example-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-03.png" alt="./images/typo-example-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-04.png" alt="./images/typo-example-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-05.png" alt="./images/typo-example-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-06.png" alt="./images/typo-example-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-07.png" alt="./images/typo-example-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/typo-example-08.png" alt="./images/typo-example-08.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><p>Dickte <strong>/</strong> Ligatur <strong>/</strong> Majuskel <strong>/</strong> Minuskel <strong>/</strong> Versalie <strong>/</strong> Gemeine <strong>/</strong> Hurenkind <strong>/</strong> Serife <strong>/</strong> Punze <strong>/</strong> Geviert <strong>/</strong> Schusterjunge</p></div></section><section class="simple"><div><h1>Erinnern Sie sich an einen Tag, an dem Sie nicht gesprochen haben?</h1></div></section><section class="simple"><div><h1>Erinnern Sie sich an einen Tag, an dem Sie nichts gelesen oder geschrieben haben?</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/diagramm-tuba-3d-1991.png" alt="./images/diagramm-tuba-3d-1991.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Typosgraphein</h1><h2 class="js-delay subtitle">Gestalt, Muster / Schreiben</h2></div></section><section class="cite" data-background="./images/typosgraphein-01.png"><blockquote class="has-whitener"><p>Das Aufgezeichnete ist uns erhalten geblieben, das Gesprochene nicht.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-02.png"><blockquote class="has-whitener"><p>Ohne Sprache und Schrift würden wir vielleicht eher den Berufsgruppen Jäger oder Sammler angehören.</p></blockquote></section><section class="cite" data-background="./images/typosgraphein-03.png"><blockquote class="has-whitener"><p>Die Kommunikation der Urmenschen wurde mit Hilfe von Mimik, Lauten und Gesten realisiert. Auch heute noch unterstützen wir Gesprochenes durch Mimik und Gestik, selbst wenn wir telefonieren und unsere Kommunikationspartner uns nicht sehen kann.</p></blockquote></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Historie</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-01.png" alt="./images/historie-01.png" width="auto"><figcaption class="bu"><p>Schrift als Grundlage für den Staatsapparat</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-02.png" alt="./images/historie-02.png" width="auto"><figcaption class="bu"><p>Vinca Schrift. 6. bis 5. Jahrtausend v. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-03.png" alt="./images/historie-03.png" width="auto"><figcaption class="bu"><p>Ägyptische Hieroglyphen. 3200 v. bis 300 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-04.png" alt="./images/historie-04.png" width="auto"><figcaption class="bu"><p>Chinesisches Zeichen für „Berg“</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-05.png" alt="./images/historie-05.png" width="auto"><figcaption class="bu"><p>Griechisches Lautalphabet</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-06.png" alt="./images/historie-06.png" width="auto"><figcaption class="bu"><p>Alphabet der Etrusker</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-07.png" alt="./images/historie-07.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/rome-arch-of-titus-1960.png" alt="./images/rome-arch-of-titus-1960.png" width="auto"><figcaption class="bu"><p>Capitalis Monumentalis</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-08.png" alt="./images/historie-08.png" width="auto"><figcaption class="bu"><p>Capitalis quadrata und Capitalis rustica. 100 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-09.png" alt="./images/historie-09.png" width="auto"><figcaption class="bu"><p>Entstehung von Ober- und Unterlängen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-10.png" alt="./images/historie-10.png" width="auto"><figcaption class="bu"><p>Karolingische Minuskel. 800 n. Christus</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-11.png" alt="./images/historie-11.png" width="auto"><figcaption class="bu"><p>Entwicklung der Klein- und Großbuchstaben</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-12.png" alt="./images/historie-12.png" width="auto"><figcaption class="bu"><p>Brief des Paulus aus dem 16. Jahrhundert</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-13.png" alt="./images/historie-13.png" width="auto"><figcaption class="bu"><p>Buchseite aus dem 16. Jahrhundert mit farbigen Versalien</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/gutenberg-01.png" alt="./images/gutenberg-01.png" width="auto"><figcaption class="bu"><p>Johannes Gensfleisch, genannt Gutenberg</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/mazarine-bibel-01.png" alt="./images/mazarine-bibel-01.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-14.png" alt="./images/historie-14.png" width="auto"><figcaption class="bu"><p>Die Gutenberg Bibel (B42), 1450</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot shadow" data-transition="fade"><figure><img src="./images/historie-15.png" alt="./images/historie-15.png" width="auto"><figcaption class="bu"><p>Satzspiegel der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/capitalis-rustica-01.png" alt="./images/capitalis-rustica-01.png" width="auto"><figcaption class="bu"><p>Textura, die Schrift der Gutenberg Bibel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/historie-16.png" alt="./images/historie-16.png" width="auto"><figcaption class="bu"><p>Variabler Bleibuchstabe, 1960</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Anatomie der Buchstaben</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-01.png" alt="./images/anatomie-01.png" width="auto"><figcaption class="bu"><p>Renaissance Antiqua mit Majuskeln und Minuskeln</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-02.png" alt="./images/anatomie-02.png" width="auto"><figcaption class="bu"><p>Anatomie der Buchstaben: Bezeichnungen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-03.png" alt="./images/anatomie-03.png" width="auto"><figcaption class="bu"><p>Anatomie der Buchstaben: Bezeichnungen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-04.png" alt="./images/anatomie-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-05.png" alt="./images/anatomie-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-06.png" alt="./images/anatomie-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-07.png" alt="./images/anatomie-07.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/anatomie-08.png" alt="./images/anatomie-08.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Wie viele und welche Schriften kennen Sie?</h1></div></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Schriftgruppen der DIN 16518</h1></div></section><section class="simple"><div><h1>DIN 16518</h1><div><p class="list"><strong>Gruppe 1: Venezianische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 2: Französische Renaissance-Antiqua</strong></p><p class="list"><strong>Gruppe 3: Barock-Antiqua</strong></p><p class="list"><strong>Gruppe 4: Klassizistische Antiqua</strong></p><p class="list">Gruppe 5: Serifenbetonte Linear-Antiqua</p><p class="list">Gruppe 6: Serifenlose Linear-Antiqua</p><p class="list">Gruppe 7: Antiqua-Varianten</p><p class="list">Gruppe 8: Schreibschriften</p><p class="list">Gruppe 9: Handschriftliche Antiqua</p><p class="list">Gruppe 10: Gebrochene Schriften</p><p class="list">Gruppe 11: Fremde Schriften</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-01.png" alt="./images/schriftgruppe-01.png" width="auto"><figcaption class="bu"><p></p><h3>Venezianische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-02.png" alt="./images/schriftgruppe-02.png" width="auto"><figcaption class="bu"><p></p><h3>Französische Renaissance-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-03.png" alt="./images/schriftgruppe-03.png" width="auto"><figcaption class="bu"><p></p><h3>Barock-Antiqua</h3><p></p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftgruppe-04.png" alt="./images/schriftgruppe-04.png" width="auto"><figcaption class="bu"><p></p><h3>Klassizistische Antiqua</h3><p></p></figcaption></figure></section><section class="video"><figure><iframe width="560" height="315" src="https://www.youtube.com/embed/VEFjzBjqgz4?si=5bcW2fMrr6v45THr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
         clipboard-write; encrypted-media; gyroscope; 
-        picture-in-picture" allowfullscreen></iframe><figcaption class="bu"><p>Eine kurze Geschichte der Typografie</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Schriftklassifikationsmodell des Typographen Wolfgang Beinert</h1></div></section><section class="simple"><div><h1>Matrix Beinert Hauptgruppen</h1><div><p class="list">Gruppe 1: Antiqua Druckschriften mit Serifen</p><p class="list">Gruppe 2: Egyptienne Druckschriften mit betonten Serifen</p><p class="list">Gruppe 3: Grotesk Druckschriften ohne Serifen</p><p class="list">Gruppe 4: Corporate Typography Fonts Schriftsysteme, CD-Schriften, DIN- ISO- und OCR</p><p class="list">Gruppe 5: Zierschriften Dekorative, Display, Schreibmaschinen- und Digitale Schreibschriften</p><p class="list">Gruppe 6: Bildschirmschriften Pixel- und World Wide Web-Fonts</p><p class="list">Gruppe 7: Gebrochene Schriften</p><p class="list">Gruppe 8: Nichtrömische Schriften</p><p class="list">Gruppe 9: Bildzeichen Piktogramme, Ornamente, Zierrat, Logos usw</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-01.png" alt="./images/beinert-hauptgruppen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-02.png" alt="./images/beinert-hauptgruppen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-03.png" alt="./images/beinert-hauptgruppen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-04.png" alt="./images/beinert-hauptgruppen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-05.png" alt="./images/beinert-hauptgruppen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-06.png" alt="./images/beinert-hauptgruppen-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-07.png" alt="./images/beinert-hauptgruppen-07.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h1>Einteilung von Schriften</h1><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftgruppe oder -art:</strong> Antiqua, Grotesk, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftfamilie:</strong> Helvetica, Times, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftstärke:</strong> Leicht, Normal, Fett, etc. (Schnitt)</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Dicktenbreite:</strong> Schmal, Normal, Breit. etc. (Schnitt)</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftlage:</strong> Normal, Kursiv (italic), Kapitälchen (Schnitt)</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftgrad:</strong> 8 Punkt, 12 Punkt, etc. 1 Punkt(pt)=0,375 mm</p></div></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftlage-01.png" alt="./images/schriftlage-01.png" width="auto"><figcaption class="bu"><p>Einteilung von Schriften: Schriftlage</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftlage-02.png" alt="./images/schriftlage-02.png" width="auto"><figcaption class="bu"><p>Schriftschnitt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftlage-03.png" alt="./images/schriftlage-03.png" width="auto"><figcaption class="bu"><p>Einteilung von Schriften: Schriftstärke und Dicktenbreite</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Zurichtung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-01.png" alt="./images/zurichtung-01.png" width="auto"><figcaption class="bu"><p>Besonderheiten und Parameter</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-02.png" alt="./images/zurichtung-02.png" width="auto"><figcaption class="bu"><p>Laufweite, optimiert für Schriftgrößen zwischen 9 und 12 Pt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-03.png" alt="./images/zurichtung-03.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-04.png" alt="./images/zurichtung-04.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-05.png" alt="./images/zurichtung-05.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-06.png" alt="./images/zurichtung-06.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-07.png" alt="./images/zurichtung-07.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Geviert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-01.png" alt="./images/geviert-01.png" width="auto"><figcaption class="bu"><p>Geviert</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Dicktengleiche Schrift</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-03.png" alt="./images/geviert-03.png" width="auto"><figcaption class="bu"><p>Courier von Howard Kettler, 1956</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Ligaturen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/ligaturen-01.png" alt="./images/ligaturen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-02.png" alt="./images/ligaturen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-03.png" alt="./images/ligaturen-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Ändern der Laufweite</h1><h2 class="js-delay subtitle">Spationierung</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-01.png" alt="./images/laufweite-01.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-02.png" alt="./images/laufweite-02.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-03.png" alt="./images/laufweite-03.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-04.png" alt="./images/laufweite-04.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-05.png" alt="./images/laufweite-05.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Schriftschandtaten</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-01.png" alt="./images/schandtaten-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-02.png" alt="./images/schandtaten-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-03.png" alt="./images/schandtaten-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Schriftmischung</h1></div></section><section class="simple"><div><h1>Mischen von Schriften</h1><p>Schriften einer Familie können gemischt werden, z.B. <strong>Bold</strong> oder <strong>Regular</strong><br>Schriften unterschiedlicher Familien nur mit Ausnahmegenehmigung:</p><div><p class="list">Informationen übersichtlicher gestalten</p><p class="list">Zusammenhänge zu verdeutlichen</p><p class="list">wichtige Aussagen hervorheben</p></div><p>Beim Mischen darauf achten, dass die Familien sich stark voneinander unterscheiden.</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-01.png" alt="./images/schriftmischung-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-02.png" alt="./images/schriftmischung-02.png" width="auto"><figcaption class="bu"><p>American Typewriter, Myriad Pro</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Vereinfachung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-01.png" alt="./images/vereinfachung-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-02.png" alt="./images/vereinfachung-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-03.png" alt="./images/vereinfachung-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-04a.png" alt="./images/vereinfachung-04a.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-04b.png" alt="./images/vereinfachung-04b.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-04c.png" alt="./images/vereinfachung-04c.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-05a.png" alt="./images/vereinfachung-05a.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-05b.png" alt="./images/vereinfachung-05b.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-05c.png" alt="./images/vereinfachung-05c.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-07a.png" alt="./images/vereinfachung-07a.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-07b.png" alt="./images/vereinfachung-07b.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-07c.png" alt="./images/vereinfachung-07c.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10a.png" alt="./images/vereinfachung-10a.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10b.png" alt="./images/vereinfachung-10b.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10c.png" alt="./images/vereinfachung-10c.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10d.png" alt="./images/vereinfachung-10d.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-11.png" alt="./images/vereinfachung-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-12.png" alt="./images/vereinfachung-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-13.png" alt="./images/vereinfachung-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14a.png" alt="./images/vereinfachung-14a.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14b.png" alt="./images/vereinfachung-14b.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14c.png" alt="./images/vereinfachung-14c.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14d.png" alt="./images/vereinfachung-14d.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14e.png" alt="./images/vereinfachung-14e.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14f.png" alt="./images/vereinfachung-14f.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14g.png" alt="./images/vereinfachung-14g.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#00ad2f" class="image screenshot interlude"><div><h1 class="title">Spaltenbreite und Zeilenabstand</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-01.png" alt="./images/spaltenbreite-01.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-02.png" alt="./images/spaltenbreite-02.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03a.png" alt="./images/spaltenbreite-03a.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03b.png" alt="./images/spaltenbreite-03b.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03c.png" alt="./images/spaltenbreite-03c.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03d.png" alt="./images/spaltenbreite-03d.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03e.png" alt="./images/spaltenbreite-03e.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03f.png" alt="./images/spaltenbreite-03f.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03g.png" alt="./images/spaltenbreite-03g.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03h.png" alt="./images/spaltenbreite-03h.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-04.png" alt="./images/spaltenbreite-04.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-05.png" alt="./images/spaltenbreite-05.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-06.png" alt="./images/spaltenbreite-06.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Der richtige Grauwert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-01.png" alt="./images/grauwert-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-02.png" alt="./images/grauwert-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-03.png" alt="./images/grauwert-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-04.png" alt="./images/grauwert-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-05.png" alt="./images/grauwert-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-06.png" alt="./images/grauwert-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-01.png" alt="./images/register-01.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-02.png" alt="./images/register-02.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-03.png" alt="./images/register-03.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-04.png" alt="./images/register-04.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-05.png" alt="./images/register-05.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/clever-typoposter.png" alt="./images/clever-typoposter.png" width="auto"><figcaption class="bu"><p>https://www.cleverprinting.de/das-kostenlose-cleverprinting-typoposter/</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+        picture-in-picture" allowfullscreen></iframe><figcaption class="bu"><p>Eine kurze Geschichte der Typografie</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftklassifikationsmodell des Typographen Wolfgang Beinert</h1></div></section><section class="simple"><div><h1>Matrix Beinert Hauptgruppen</h1><div><p class="list">Gruppe 1: Antiqua Druckschriften mit Serifen</p><p class="list">Gruppe 2: Egyptienne Druckschriften mit betonten Serifen</p><p class="list">Gruppe 3: Grotesk Druckschriften ohne Serifen</p><p class="list">Gruppe 4: Corporate Typography Fonts Schriftsysteme, CD-Schriften, DIN- ISO- und OCR</p><p class="list">Gruppe 5: Zierschriften Dekorative, Display, Schreibmaschinen- und Digitale Schreibschriften</p><p class="list">Gruppe 6: Bildschirmschriften Pixel- und World Wide Web-Fonts</p><p class="list">Gruppe 7: Gebrochene Schriften</p><p class="list">Gruppe 8: Nichtrömische Schriften</p><p class="list">Gruppe 9: Bildzeichen Piktogramme, Ornamente, Zierrat, Logos usw</p></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-01.png" alt="./images/beinert-hauptgruppen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-02.png" alt="./images/beinert-hauptgruppen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-03.png" alt="./images/beinert-hauptgruppen-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-04.png" alt="./images/beinert-hauptgruppen-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-05.png" alt="./images/beinert-hauptgruppen-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-06.png" alt="./images/beinert-hauptgruppen-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/beinert-hauptgruppen-07.png" alt="./images/beinert-hauptgruppen-07.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section class="simple"><div><h1>Einteilung von Schriften</h1><div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftgruppe oder -art:</strong> Antiqua, Grotesk, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftfamilie:</strong> Helvetica, Times, etc.</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftstärke:</strong> Leicht, Normal, Fett, etc. (Schnitt)</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Dicktenbreite:</strong> Schmal, Normal, Breit. etc. (Schnitt)</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftlage:</strong> Normal, Kursiv (italic), Kapitälchen (Schnitt)</p></div><div data-slide-shortcode-class="fragment" class="fragment"><p class="list"><strong>Schriftgrad:</strong> 8 Punkt, 12 Punkt, etc. 1 Punkt(pt)=0,375 mm</p></div></div></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftlage-01.png" alt="./images/schriftlage-01.png" width="auto"><figcaption class="bu"><p>Einteilung von Schriften: Schriftlage</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftlage-02.png" alt="./images/schriftlage-02.png" width="auto"><figcaption class="bu"><p>Schriftschnitt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/schriftlage-03.png" alt="./images/schriftlage-03.png" width="auto"><figcaption class="bu"><p>Einteilung von Schriften: Schriftstärke und Dicktenbreite</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Zurichtung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-01.png" alt="./images/zurichtung-01.png" width="auto"><figcaption class="bu"><p>Besonderheiten und Parameter</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-02.png" alt="./images/zurichtung-02.png" width="auto"><figcaption class="bu"><p>Laufweite, optimiert für Schriftgrößen zwischen 9 und 12 Pt</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-03.png" alt="./images/zurichtung-03.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-04.png" alt="./images/zurichtung-04.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-05.png" alt="./images/zurichtung-05.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-06.png" alt="./images/zurichtung-06.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/zurichtung-07.png" alt="./images/zurichtung-07.png" width="auto"><figcaption class="bu"><p>Unterschneidung (Kerning)</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Geviert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-01.png" alt="./images/geviert-01.png" width="auto"><figcaption class="bu"><p>Geviert</p></figcaption></figure></section><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Dicktengleiche Schrift</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/geviert-03.png" alt="./images/geviert-03.png" width="auto"><figcaption class="bu"><p>Courier von Howard Kettler, 1956</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Ligaturen</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/ligaturen-01.png" alt="./images/ligaturen-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-02.png" alt="./images/ligaturen-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/ligaturen-03.png" alt="./images/ligaturen-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Ändern der Laufweite</h1><h2 class="js-delay subtitle">Spationierung</h2></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-01.png" alt="./images/laufweite-01.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-02.png" alt="./images/laufweite-02.png" width="auto"><figcaption class="bu"><p>Spationierung einer Gill Headline</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-03.png" alt="./images/laufweite-03.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-04.png" alt="./images/laufweite-04.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/laufweite-05.png" alt="./images/laufweite-05.png" width="auto"><figcaption class="bu"><p>Spationierung als Stilmittel</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftschandtaten</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-01.png" alt="./images/schandtaten-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-02.png" alt="./images/schandtaten-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schandtaten-03.png" alt="./images/schandtaten-03.png" width="auto"></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#9313ce" class="image screenshot interlude"><div><h1 class="title">Schriftmischung</h1></div></section><section class="simple"><div><h1>Mischen von Schriften</h1><p>Schriften einer Familie können gemischt werden, z.B. <strong>Bold</strong> oder <strong>Regular</strong><br>Schriften unterschiedlicher Familien nur mit Ausnahmegenehmigung:</p><div><p class="list">Informationen übersichtlicher gestalten</p><p class="list">Zusammenhänge zu verdeutlichen</p><p class="list">wichtige Aussagen hervorheben</p></div><p>Beim Mischen darauf achten, dass die Familien sich stark voneinander unterscheiden.</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-01.png" alt="./images/schriftmischung-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/schriftmischung-02.png" alt="./images/schriftmischung-02.png" width="auto"><figcaption class="bu"><p>American Typewriter, Myriad Pro</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Vereinfachung</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-01.png" alt="./images/vereinfachung-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-02.png" alt="./images/vereinfachung-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-03.png" alt="./images/vereinfachung-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-04a.png" alt="./images/vereinfachung-04a.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-04b.png" alt="./images/vereinfachung-04b.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-04c.png" alt="./images/vereinfachung-04c.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-05a.png" alt="./images/vereinfachung-05a.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-05b.png" alt="./images/vereinfachung-05b.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-05c.png" alt="./images/vereinfachung-05c.png" width="auto"><figcaption class="bu"><p>Wortguppen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-07a.png" alt="./images/vereinfachung-07a.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-07b.png" alt="./images/vereinfachung-07b.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-07c.png" alt="./images/vereinfachung-07c.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10a.png" alt="./images/vereinfachung-10a.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10b.png" alt="./images/vereinfachung-10b.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10c.png" alt="./images/vereinfachung-10c.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-10d.png" alt="./images/vereinfachung-10d.png" width="auto"><figcaption class="bu"><p>Was erkennen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-11.png" alt="./images/vereinfachung-11.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-12.png" alt="./images/vereinfachung-12.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/vereinfachung-13.png" alt="./images/vereinfachung-13.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14a.png" alt="./images/vereinfachung-14a.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14b.png" alt="./images/vereinfachung-14b.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14c.png" alt="./images/vereinfachung-14c.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14d.png" alt="./images/vereinfachung-14d.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14e.png" alt="./images/vereinfachung-14e.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14f.png" alt="./images/vereinfachung-14f.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/vereinfachung-14g.png" alt="./images/vereinfachung-14g.png" width="auto"><figcaption class="bu"><p>Vom Wort zur Zeile</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Spaltenbreite und Zeilenabstand</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-01.png" alt="./images/spaltenbreite-01.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-02.png" alt="./images/spaltenbreite-02.png" width="auto"><figcaption class="bu"><p>Die richtige Schrift</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03a.png" alt="./images/spaltenbreite-03a.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03b.png" alt="./images/spaltenbreite-03b.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03c.png" alt="./images/spaltenbreite-03c.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03d.png" alt="./images/spaltenbreite-03d.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03e.png" alt="./images/spaltenbreite-03e.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03f.png" alt="./images/spaltenbreite-03f.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03g.png" alt="./images/spaltenbreite-03g.png" width="auto"><figcaption class="bu"><p>Mengentexte lesen</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/spaltenbreite-03h.png" alt="./images/spaltenbreite-03h.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-04.png" alt="./images/spaltenbreite-04.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-05.png" alt="./images/spaltenbreite-05.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/spaltenbreite-06.png" alt="./images/spaltenbreite-06.png" width="auto"><figcaption class="bu"><p>Zeilenabstand</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#d16" class="image screenshot interlude"><div><h1 class="title">Der richtige Grauwert</h1></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-01.png" alt="./images/grauwert-01.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-02.png" alt="./images/grauwert-02.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-03.png" alt="./images/grauwert-03.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-04.png" alt="./images/grauwert-04.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-05.png" alt="./images/grauwert-05.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/grauwert-06.png" alt="./images/grauwert-06.png" width="auto"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-01.png" alt="./images/register-01.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-02.png" alt="./images/register-02.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-03.png" alt="./images/register-03.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-04.png" alt="./images/register-04.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/register-05.png" alt="./images/register-05.png" width="auto"><figcaption class="bu"><p>Register</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="none"><figure><img src="./images/clever-typoposter.png" alt="./images/clever-typoposter.png" width="auto"><figcaption class="bu"><p>https://www.cleverprinting.de/das-kostenlose-cleverprinting-typoposter/</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-centered is-fullscreen"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/visuelle-wahrnehmung/050-40-vereinfachung/index.html b/presentations/screendesign/visuelle-wahrnehmung/050-40-vereinfachung/index.html
index ccd87cfa..0a99df7e 100644
--- a/presentations/screendesign/visuelle-wahrnehmung/050-40-vereinfachung/index.html
+++ b/presentations/screendesign/visuelle-wahrnehmung/050-40-vereinfachung/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Vereinfachung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image interlude screenshot"><div><h1 class="title">Vereinfachung</h1><h2 class="js-delay subtitle">😱</h2></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Vereinfachung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image interlude screenshot"><div><h1 class="title">Vereinfachung</h1><h2 class="js-delay subtitle">😱</h2></div></section></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({
diff --git a/presentations/screendesign/visuelle-wahrnehmung/index.html b/presentations/screendesign/visuelle-wahrnehmung/index.html
index 409540b6..b2b2ec03 100644
--- a/presentations/screendesign/visuelle-wahrnehmung/index.html
+++ b/presentations/screendesign/visuelle-wahrnehmung/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="de"><head><title>Visuelle Wahrnehmung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Visuelle Wahrnehmung</h1><h2>Ein paar Basics</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-background-image="./images/communicare.jpg" data-transition="convex"><section class="split-view"><div><h1 class="title">Kommunikation</h1>communicare: teilen, mitteilen, teilnehmen lassen</div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/comm-model.png" alt="./images/comm-model.png" width="100%"><figcaption class="bu"><p>Grafik nach Nathan Shedro# : Information Interaction Design: A Unified Field Theory of Design. In: ›Information Design‹, Bob Jacobson (Hrsg.) MIT Press 2000</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-background-image="./images/paul.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Man kann nicht nicht kommunizieren.</p><cite>Paul Watzlawick // Philosoph, Psychotherapeut und Kommunikationswissenschaftler</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote></section><section data-slide-class="shout" class="mi-slide shout" data-background-color="#4952e1" data-background-image="./images/Collage-Plakate.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Alle Teile einer Information (wie Texte, Bilder, Farben etc), die von Menschen für Menschen gestaltet werden, kommunizieren. Dabei ist es gleichgültig, ob es sich bei der Information um einen Brief, eine Website, ein App, einen Türgriff oder eine Plakat handelt.</p><cite>Nichts bleibt stumm 🧐</cite></blockquote><p class="info is-passive">undefined</p></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.024.jpeg" alt="./images/design-basics-gefaellt-mir-sd.024.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.025.jpeg" alt="./images/design-basics-gefaellt-mir-sd.025.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.026.jpeg" alt="./images/design-basics-gefaellt-mir-sd.026.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.027.jpeg" alt="./images/design-basics-gefaellt-mir-sd.027.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.028.jpeg" alt="./images/design-basics-gefaellt-mir-sd.028.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.029.jpeg" alt="./images/design-basics-gefaellt-mir-sd.029.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.030.jpeg" alt="./images/design-basics-gefaellt-mir-sd.030.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.031.jpeg" alt="./images/design-basics-gefaellt-mir-sd.031.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.032.jpeg" alt="./images/design-basics-gefaellt-mir-sd.032.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.033.jpeg" alt="./images/design-basics-gefaellt-mir-sd.033.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/volle-seite.jpeg" alt="./images/volle-seite.jpeg" width="100%"><figcaption class="bu"><p>Viel hilft viel!</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Less is more</p><cite>Mies van der Rohe, Architekt</cite></blockquote></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Das Einfache ist nicht immer das Beste, aber das Beste ist immer einfach.</p><cite>Heinrich Tessenow, Architekt</cite></blockquote></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Die maßgebene Norm für den Wert eines grafischen Designs sind die Gesamtkosten der Wahrnehmungsarbeit.</p><cite>Abraham Moles, Informationstheoretiker</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#4952e1" class="image screenshot interlude"><div><h1 class="title">Vereinfachung</h1><h2 class="js-delay subtitle">😱</h2></div></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.052.jpeg" alt="./images/design-basics-gefaellt-mir-sd.052.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.053.jpeg" alt="./images/design-basics-gefaellt-mir-sd.053.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.054.jpeg" alt="./images/design-basics-gefaellt-mir-sd.054.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.055.jpeg" alt="./images/design-basics-gefaellt-mir-sd.055.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.056.jpeg" alt="./images/design-basics-gefaellt-mir-sd.056.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.057.jpeg" alt="./images/design-basics-gefaellt-mir-sd.057.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.060.jpeg" alt="./images/design-basics-gefaellt-mir-sd.060.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.061.jpeg" alt="./images/design-basics-gefaellt-mir-sd.061.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-background-image="./images/photocase735254596363-236.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Video ergo sum!</p><cite>René Descartes, Philosoph</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.079.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.080.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.081.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.082.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.083.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.084.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.085.jpeg" data-transition="fade"></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/brain.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/reiz-reaktion.jpeg" data-transition="fade"></section></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Unser Sehen beispielsweise ist ein konstruktiver Prozess … Erst unser Gehirn erzeugt die Welt, die wir zu sehen glauben.</p><cite>Dr. Christoph Teufel, Cardiff University Brain Research</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.096.jpeg" alt="./images/design-basics-gefaellt-mir-sd.096.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.097.jpeg" alt="./images/design-basics-gefaellt-mir-sd.097.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.098.jpeg" alt="./images/design-basics-gefaellt-mir-sd.098.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.099.jpeg" alt="./images/design-basics-gefaellt-mir-sd.099.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.100.jpeg" alt="./images/design-basics-gefaellt-mir-sd.100.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.101.jpeg" alt="./images/design-basics-gefaellt-mir-sd.101.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.102.jpeg" alt="./images/design-basics-gefaellt-mir-sd.102.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.103.jpeg" alt="./images/design-basics-gefaellt-mir-sd.103.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.104.jpeg" alt="./images/design-basics-gefaellt-mir-sd.104.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.105.jpeg" alt="./images/design-basics-gefaellt-mir-sd.105.jpeg" width="100%"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">in Erkennen</h1><p class="fragment qa-answer">steckt «kennen» 🤪</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Visuelle Aufnahme über die Augen</h1><p class="fragment qa-answer">Anteil an der visuellen Wahrnehmung weniger als 40 Prozent</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Abgleich der Informationen mit Erfahrenem durch das Gehirn</h1><p class="fragment qa-answer">Anteil an der visuellen Wahrnehmung mehr als 60 Prozent</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shado" data-transition="fade"><figure><img src="./images/eye-tracking.png" alt="./images/eye-tracking.png" width="100%"><figcaption class="bu"><p>Davon muss ich mir erst mal ein Bild machen.</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-transition="zoom"><blockquote class="has-whitener"><p>Jedes mal, wenn wir die Augen öffnen, haben wir ein Problem.</p><cite>Prof. Uwe Stoklossa in Blicktricks</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image no-shadow is-fullscreen" data-background="./images/problem-escher.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.112.jpeg" alt="./images/design-basics-gefaellt-mir-sd.112.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.113.jpeg" alt="./images/design-basics-gefaellt-mir-sd.113.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.114.jpeg" alt="./images/design-basics-gefaellt-mir-sd.114.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.115.jpeg" alt="./images/design-basics-gefaellt-mir-sd.115.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/titchener.png" alt="./images/titchener.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/linien-laenge.png" alt="./images/linien-laenge.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/herrmann-gitter.png" alt="./images/herrmann-gitter.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kaffeehaus.png" alt="./images/kaffeehaus.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-fullscreen is-centered"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
+<!doctype html><html lang="de"><head><title>Visuelle Wahrnehmung // Christian Noss</title><meta name="robots" content="noindex"><meta name="googlebot" content="noindex"><meta name="googlebot-news" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="/slides/reveal/dist/reset.css"><link rel="stylesheet" href="/slides/reveal/dist/reveal.css"><link rel="stylesheet" href="/slides/assets/main.css"><link rel="icon" type="image/svg" href="/slides/assets/images/preview_black_24dp.svg"><link rel="stylesheet" href="/slides/reveal/plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"><div class="is-full-width"><h1>Visuelle Wahrnehmung</h1><h2>Ein paar Basics</h2></div></section><section data-slide-class="wrap" class="mi-slide wrap" data-background-image="./images/communicare.jpg" data-transition="convex"><section class="split-view"><div><h1 class="title">Kommunikation</h1>communicare: teilen, mitteilen, teilnehmen lassen</div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/comm-model.png" alt="./images/comm-model.png" width="100%"><figcaption class="bu"><p>Grafik nach Nathan Shedro# : Information Interaction Design: A Unified Field Theory of Design. In: ›Information Design‹, Bob Jacobson (Hrsg.) MIT Press 2000</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-background-image="./images/paul.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Man kann nicht nicht kommunizieren.</p><cite>Paul Watzlawick // Philosoph, Psychotherapeut und Kommunikationswissenschaftler</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote></section><section data-slide-class="shout" class="mi-slide shout" data-background-color="#4952e1" data-background-image="./images/Collage-Plakate.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Alle Teile einer Information (wie Texte, Bilder, Farben etc), die von Menschen für Menschen gestaltet werden, kommunizieren. Dabei ist es gleichgültig, ob es sich bei der Information um einen Brief, eine Website, ein App, einen Türgriff oder eine Plakat handelt.</p><cite>Nichts bleibt stumm 🧐</cite></blockquote><p class="info is-passive">undefined</p></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.024.jpeg" alt="./images/design-basics-gefaellt-mir-sd.024.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.025.jpeg" alt="./images/design-basics-gefaellt-mir-sd.025.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.026.jpeg" alt="./images/design-basics-gefaellt-mir-sd.026.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.027.jpeg" alt="./images/design-basics-gefaellt-mir-sd.027.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.028.jpeg" alt="./images/design-basics-gefaellt-mir-sd.028.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.029.jpeg" alt="./images/design-basics-gefaellt-mir-sd.029.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.030.jpeg" alt="./images/design-basics-gefaellt-mir-sd.030.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.031.jpeg" alt="./images/design-basics-gefaellt-mir-sd.031.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.032.jpeg" alt="./images/design-basics-gefaellt-mir-sd.032.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.033.jpeg" alt="./images/design-basics-gefaellt-mir-sd.033.jpeg" width="100%"><figcaption class="bu"><p>Was sehen Sie?</p></figcaption></figure></section></section><section data-slide-class="images" class="mi-slide images" data-transition="convex"><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/volle-seite.jpeg" alt="./images/volle-seite.jpeg" width="100%"><figcaption class="bu"><p>Viel hilft viel!</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Less is more</p><cite>Mies van der Rohe, Architekt</cite></blockquote></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Das Einfache ist nicht immer das Beste, aber das Beste ist immer einfach.</p><cite>Heinrich Tessenow, Architekt</cite></blockquote></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Die maßgebene Norm für den Wert eines grafischen Designs sind die Gesamtkosten der Wahrnehmungsarbeit.</p><cite>Abraham Moles, Informationstheoretiker</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="convex"><section data-slide-shortcode-class="interlude" data-background-color="#aaa" class="image screenshot interlude"><div><h1 class="title">Vereinfachung</h1><h2 class="js-delay subtitle">😱</h2></div></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.052.jpeg" alt="./images/design-basics-gefaellt-mir-sd.052.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.053.jpeg" alt="./images/design-basics-gefaellt-mir-sd.053.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.054.jpeg" alt="./images/design-basics-gefaellt-mir-sd.054.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.055.jpeg" alt="./images/design-basics-gefaellt-mir-sd.055.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.056.jpeg" alt="./images/design-basics-gefaellt-mir-sd.056.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.057.jpeg" alt="./images/design-basics-gefaellt-mir-sd.057.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.060.jpeg" alt="./images/design-basics-gefaellt-mir-sd.060.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.061.jpeg" alt="./images/design-basics-gefaellt-mir-sd.061.jpeg" width="100%"><figcaption class="bu"><p>Unternehmensgegenstand?</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-background-image="./images/photocase735254596363-236.jpg" data-transition="convex"><blockquote class="has-whitener"><p>Video ergo sum!</p><cite>René Descartes, Philosoph</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.079.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.080.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.081.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.082.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.083.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.084.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/design-basics-gefaellt-mir-sd.085.jpeg" data-transition="fade"></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/brain.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image is-fullscreen" data-background="./images/reiz-reaktion.jpeg" data-transition="fade"></section></section><section data-slide-class="cite" class="mi-slide cite" data-transition="convex"><blockquote class="has-whitener"><p>Unser Sehen beispielsweise ist ein konstruktiver Prozess … Erst unser Gehirn erzeugt die Welt, die wir zu sehen glauben.</p><cite>Dr. Christoph Teufel, Cardiff University Brain Research</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.096.jpeg" alt="./images/design-basics-gefaellt-mir-sd.096.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.097.jpeg" alt="./images/design-basics-gefaellt-mir-sd.097.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.098.jpeg" alt="./images/design-basics-gefaellt-mir-sd.098.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.099.jpeg" alt="./images/design-basics-gefaellt-mir-sd.099.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.100.jpeg" alt="./images/design-basics-gefaellt-mir-sd.100.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.101.jpeg" alt="./images/design-basics-gefaellt-mir-sd.101.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.102.jpeg" alt="./images/design-basics-gefaellt-mir-sd.102.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.103.jpeg" alt="./images/design-basics-gefaellt-mir-sd.103.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.104.jpeg" alt="./images/design-basics-gefaellt-mir-sd.104.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.105.jpeg" alt="./images/design-basics-gefaellt-mir-sd.105.jpeg" width="100%"></figure></section></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">in Erkennen</h1><p class="fragment qa-answer">steckt «kennen» 🤪</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Visuelle Aufnahme über die Augen</h1><p class="fragment qa-answer">Anteil an der visuellen Wahrnehmung weniger als 40 Prozent</p></div></section><section data-slide-shortcode-class="qa" class="qa"><div class="qa-wrap"><h1 class="qa-question">Abgleich der Informationen mit Erfahrenem durch das Gehirn</h1><p class="fragment qa-answer">Anteil an der visuellen Wahrnehmung mehr als 60 Prozent</p></div></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shado" data-transition="fade"><figure><img src="./images/eye-tracking.png" alt="./images/eye-tracking.png" width="100%"><figcaption class="bu"><p>Davon muss ich mir erst mal ein Bild machen.</p></figcaption></figure></section></section><section data-slide-class="cite" class="mi-slide cite" data-transition="zoom"><blockquote class="has-whitener"><p>Jedes mal, wenn wir die Augen öffnen, haben wir ein Problem.</p><cite>Prof. Uwe Stoklossa in Blicktricks</cite></blockquote></section><section data-slide-class="wrap" class="mi-slide wrap" data-transition="zoom"><section data-slide-shortcode-class="screenshot" class="image no-shadow is-fullscreen" data-background="./images/problem-escher.jpeg" data-transition="fade"></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.112.jpeg" alt="./images/design-basics-gefaellt-mir-sd.112.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.113.jpeg" alt="./images/design-basics-gefaellt-mir-sd.113.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.114.jpeg" alt="./images/design-basics-gefaellt-mir-sd.114.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/design-basics-gefaellt-mir-sd.115.jpeg" alt="./images/design-basics-gefaellt-mir-sd.115.jpeg" width="100%"></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/titchener.png" alt="./images/titchener.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/linien-laenge.png" alt="./images/linien-laenge.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/herrmann-gitter.png" alt="./images/herrmann-gitter.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section><section data-slide-shortcode-class="screenshot" class="image screenshot no-shadow" data-transition="fade"><figure><img src="./images/kaffeehaus.png" alt="./images/kaffeehaus.png" width="80%"><figcaption class="bu"><p>BÜHLER, Peter, Patrick SCHLAICH und Dominik SINNER, 2017. Visuelle Kommunikation: Wahrnehmung - Perspektive - Gestaltung</p></figcaption></figure></section></section><section data-slide-class="outro" class="mi-slide outro" data-background-color="#231f20" data-transition="convex"><div class="is-fullscreen is-centered"><p></p><div class="outro"><figure class="outro-avatar"><img src="../../../assets/images/cnoss.jpeg"><figcaption><p>Danke für's Mitmachen</p><p class="small"><a href="https://christiannoss.de">https://christiannoss.de</a></p></figcaption></figure></div></div></section><section data-slide-class="intro" class="mi-slide intro" data-background-color="#9313ce" data-transition="zoom"></section></div></div><script src="/slides/reveal/dist/reveal.js"></script><script src="/slides/assets/scripts/libs/fittext.js"></script><script src="/slides/assets/scripts/main.js"></script><script src="/slides/reveal/plugin/notes/notes.js"></script><script src="/slides/reveal/plugin/markdown/markdown.js"></script><script src="/slides/reveal/plugin/highlight/highlight.js"></script><script src="/slides/reveal/plugin/zoom/zoom.js"></script><script>// More info about initialization & config:
         // - https://revealjs.com/initialization/
         // - https://revealjs.com/config/
         Reveal.initialize({