Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/docs/presentations/misc/pen-and-paper/155-me/index.html b/docs/presentations/misc/pen-and-paper/155-me/index.html
index e3592417..a2f9efb3 100644
--- a/docs/presentations/misc/pen-and-paper/155-me/index.html
+++ b/docs/presentations/misc/pen-and-paper/155-me/index.html
@@ -1,7 +1,7 @@
- Selbstporträt // Christian Noss
+ Selbstportrait // Christian Noss
@@ -23,7 +23,7 @@
-
Selbstporträt
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.
+
Selbstportrait
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.
Tauschen Sie sich aus, vergleichen Sie die Portraits, wählen Sie das, welches Sie am Besten wieder gibt.
10 Minuten Bearbeitungszeit
@@ -175,14 +179,10 @@
Hey, da ist ja auch ne rechte Hirnhälfte!
-
Selbstporträt
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.
-
Tauschen Sie sich aus, vergleichen Sie die Portraits, wählen Sie das, welches Sie am Besten wieder gibt.
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.
Bei Screendesign geht es darum Denkweise und Vokabular eines Designers kennen zu lernen. Denn Medieninformatiker arbeiten häufig in interdisziplinären Teams mit Gestaltern, 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 der Gestalter 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.
Warum sind die Aufgaben oft so schwammig formuliert?
Es kommt vor, dass Aufgaben unvollständig, vielleicht sogar unzureichend formuliert werden. Es gibt im Grunde zwei Wege damit umzugehen …
Möglichkeit 1
Sie regen sich darüber auf, sprechen sich mit Kommilitonen ab, versuchen die Aufgabenstellung 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.
geben Überblick über ein Themengebiet // zeigen theoretische Grundlagen // sind interaktiv und initiieren Diskurs
Trainings
trainieren den Umgang mit Domänen-spezifischer Software (Figma) // zeigen und trainieren Best-Practices // bauen handwerkliche Fertigkeiten auf
Workshops
bringen Theorie und Praxis zusammen // schulen und trainieren in einem bestimmten Themenfeld // bieten Platz zum Experimentieren und für komplexe Fragestellungen
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20212.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20212.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20213.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20213.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20214.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20214.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20215.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20215.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20216.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20216.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20217.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20217.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20218.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20218.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/images/eva-20219.jpg b/docs/presentations/screendesign/about-screendesign/images/eva-20219.jpg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/about-screendesign/index.html b/docs/presentations/screendesign/about-screendesign/index.html
index 437624b9..de867010 100644
--- a/docs/presentations/screendesign/about-screendesign/index.html
+++ b/docs/presentations/screendesign/about-screendesign/index.html
@@ -34,7 +34,7 @@
Worum geht es in diesem Modul?
-
Dataforest Designkonzept
+
Dataforest Designkonzept
@@ -44,7 +44,7 @@
Worum geht es in diesem Modul?
-
Call to Action
Dataforest Designkonzept
+
Call to Action
Dataforest Designkonzept
@@ -57,7 +57,7 @@
Worum geht es in diesem Modul?
-
Formular
Dataforest Designkonzept
+
Formular
Dataforest Designkonzept
@@ -83,7 +83,7 @@
Worum geht es in diesem Modul?
-
Dive.is Verteilerseite
für kleine Viewports
+
Dive.is Verteilerseite
für kleine Viewports
@@ -116,7 +116,7 @@
Worum geht es in diesem Modul?
-
Wenn man eine Reise tut
dann hat wan viel zu wählen.
+
Wenn man eine Reise tut
dann hat wan viel zu wählen.
@@ -139,7 +139,7 @@
Worum geht es in diesem Modul?
-
EDV Service
+
EDV Service
@@ -149,7 +149,7 @@
Worum geht es in diesem Modul?
-
Typo
+
Typo
@@ -225,7 +225,7 @@
Worum geht es in diesem Modul?
-
Leitfaden
für ein schmerzfreies Modul
+
Leitfaden
für ein schmerzfreies Modul
Was wollen wir sehen?
Bei Screendesign geht es darum Denkweise und Vokabular eines Designers kennen zu lernen. Denn Medieninformatiker arbeiten häufig in interdisziplinären Teams mit Gestaltern, 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 der Gestalter 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.
Warum sind die Aufgaben oft so schwammig formuliert?
Es kommt vor, dass Aufgaben unvollständig, vielleicht sogar unzureichend formuliert werden. Es gibt im Grunde zwei Wege damit umzugehen …
Möglichkeit 1
Sie regen sich darüber auf, sprechen sich mit Kommilitonen ab, versuchen die Aufgabenstellung 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.
@@ -288,7 +288,7 @@
Worum geht es in diesem Modul?
-
Veranstaltungsarten
und deren Ziele
+
Veranstaltungsarten
und deren Ziele
Vorträge
geben Überblick über ein Themengebiet // zeigen theoretische Grundlagen // sind interaktiv und initiieren Diskurs
Trainings
trainieren den Umgang mit Domänen-spezifischer Software (Figma) // zeigen und trainieren Best-Practices // bauen handwerkliche Fertigkeiten auf
Workshops
bringen Theorie und Praxis zusammen // schulen und trainieren in einem bestimmten Themenfeld // bieten Platz zum Experimentieren und für komplexe Fragestellungen
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html
new file mode 100644
index 00000000..e26519b3
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Dataforrest Intro // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Was ist Design?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/010-design-in-diesem-studiengang/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/010-design-in-diesem-studiengang/index.html
new file mode 100644
index 00000000..914fb63e
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/010-design-in-diesem-studiengang/index.html
@@ -0,0 +1,59 @@
+
+
+
+ Was hat Design in diesem Studiengang für eine Berechtigung? // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Was hat Design in diesem Studiengang für eine Berechtigung?
Absolventen der Medieninformatik analysieren, realisieren, betreiben und evaluieren informationstechnische Prozesse und Systeme zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung medienbasierter Informationen.
+
Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. Absolvent*innen der Medieninformatik arbeiten dabei vorwiegend in Teams und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist Interdisziplinarität gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es vermittelt Sichtweisen und Techniken aus verschiedenen Fachgebieten, von Computergrafik über Mensch-Computer-Interaktion bis Videoproduktion, von Kommunikationsdesign über Programmentwicklung bis Marketing.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/020-software/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/020-software/index.html
new file mode 100644
index 00000000..cb844bea
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/020-software/index.html
@@ -0,0 +1,56 @@
+
+
+
+ Wir entwicklern Software! // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Wir entwicklern Software!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/025-ziele/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/025-ziele/index.html
new file mode 100644
index 00000000..ab3a71c4
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/025-ziele/index.html
@@ -0,0 +1,59 @@
+
+
+
+ Ziele // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ziele
Rolle von Design in der Medieninformatik.
+
Grundbegriffe klären.
+
Grundsätzliche Herangehensweisen und Sichtweisen klären.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html
new file mode 100644
index 00000000..d268b876
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products/index.html
@@ -0,0 +1,61 @@
+
+
+
+ How to create Digital Products? // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How to create Digital Products?
+
Typical Product Team
+
Different Types of Design(ers)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html
new file mode 100644
index 00000000..7844f12a
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten/index.html
@@ -0,0 +1,58 @@
+
+
+
+ Wie würden Sie die folgenden Designs bewerten? // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Wie würden Sie die folgenden Designs bewerten?
Oder anders gefragt: nach welchen Kriterien würde Sie bewerten?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
new file mode 100644
index 00000000..6f65ee61
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
@@ -0,0 +1,65 @@
+
+
+
+ Design is ... // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design is ...
+
Desing is...
making things pretty?
+
Desing is...
moving pixels around?
+
+
+
Desing is...
asking the right questions.
+
Desing is...
identifying and solving problems.
+
Was wären die richtigen Fragen am Anfang eines Designprozesses?
+
Wie können wir Probleme identifizieren?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/055-pause/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/055-pause/index.html
new file mode 100644
index 00000000..b2365ad2
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/055-pause/index.html
@@ -0,0 +1,56 @@
+
+
+
+ Pause // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Pause
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html
new file mode 100644
index 00000000..af967480
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen/index.html
@@ -0,0 +1,93 @@
+
+
+
+ Woran erkennen wir gutes Design? // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Woran erkennen wir gutes Design?
+
+
Good Design is innovative
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.
+
Good design is aesthetic
+
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.
+
Good design makes a product useful
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.
+
Good design makes a product understandable
It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.
+
Good design is unobtrusive
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.
+
Good design is honest
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.
+
Good design is long-lasting
It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.
+
Good design is thorough down to the last detail
Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.
+
Good design is environmentally-friendly
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.
+
Good design is as little design as possible
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.
+
Dieter Rams Industrial Designer
+
+
+
+
+
Rams Kriterien
+
innovative
+
aesthetic
+
makes a product useful
+
makes a product understandable
+
unobtrusive
+
honest
+
long-lasting
+
thorough down to the last detail
+
environmentally-friendly
+
as little design as possible
+
+
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html
new file mode 100644
index 00000000..741678e4
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/070-design-basics/index.html
@@ -0,0 +1,67 @@
+
+
+
+ Design Basics // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design Basics
+
+
+
Zum Start
+
versuchen Sie offen zu sein
+
Gestaltungslösungen sind nicht binär
+
versuchen Sie unvollständige Aufgabenstellung durch gute Fragen zu komplettieren
+
entwickeln Sie stets Alternativen und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren Varianten) ist
+
entwickeln Sie Argumente und Begründungszusammenhänge für Ihre Gestaltungen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/090-funktionen-zielgruppe/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/090-funktionen-zielgruppe/index.html
new file mode 100644
index 00000000..e40ec213
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/090-funktionen-zielgruppe/index.html
@@ -0,0 +1,72 @@
+
+
+
+ Beschreiben Sie Funktion und Zielgruppe? // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Beschreiben Sie Funktion und Zielgruppe?
Zielsetzung & Zielgruppe
+
Henne & Ei Problem
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?
+
Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?
+
Was ist der Unterschied?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/100-layout/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/100-layout/index.html
new file mode 100644
index 00000000..b35634da
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/100-layout/index.html
@@ -0,0 +1,78 @@
+
+
+
+ Wie beschreiben wir ein Layout? // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Wie beschreiben wir ein Layout?
Gutes Auge, präzise Sprache
+
+
Wie beschreiben wir ein Layout?
Nach welcher Systematik können wir vorgehen?
+
+
Wie beschreiben wir ein Layout?
Welche visuellen Elementtypen gibt es eigentlich?
+
+
+
+
+
+
+
+
+
+
+
+
Wie beschreiben wir ein Layout?
Welche visuellen Eigenschaften kann ein Element haben?
+
Punkt // Linie // Fläche // Form
+
+
+
Wie beschreiben wir ein Layout?
+
Welche visuellen Eigenschaften kann ein Element haben?
+
Punkt // Linie // Fläche // Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
new file mode 100644
index 00000000..c28c23dc
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
@@ -0,0 +1,70 @@
+
+
+
+ Notieren Sie visuelle Eigenschaften für die folgenden Beispiele. // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/115-layoutbeschreiben/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/115-layoutbeschreiben/index.html
new file mode 100644
index 00000000..2a3337ea
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/115-layoutbeschreiben/index.html
@@ -0,0 +1,59 @@
+
+
+
+ Gutes Auge, präzise Sprache // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Gutes Auge, präzise Sprache
Wie beschreiben wir ein Layout?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/120-zusammenfassung/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/120-zusammenfassung/index.html
new file mode 100644
index 00000000..f73c9172
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/120-zusammenfassung/index.html
@@ -0,0 +1,61 @@
+
+
+
+ Zusammenfassung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Zusammenfassung
Design macht den Unterschied.
+
Design ist ein »wicked problem«.
+
Design stellt Fragen.
+
Medieninformatiker können entscheidende Rollen in Teams übernehmen.
+
Wir gestalten in der Regel nicht für uns selbst.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/9999-outro/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-01.png
new file mode 100644
index 00000000..63b93bf8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-02.png
new file mode 100644
index 00000000..f79eceec
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-03.png
new file mode 100755
index 00000000..8b1990f8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-01.png
new file mode 100644
index 00000000..d428c5ad
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-02.png
new file mode 100644
index 00000000..1efc2912
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-03.png
new file mode 100755
index 00000000..39aad03a
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-04.png
new file mode 100755
index 00000000..9beb9f13
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05.png
new file mode 100755
index 00000000..92d144cb
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05a.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05a.png
new file mode 100755
index 00000000..a6503d05
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05a.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-06.png
new file mode 100755
index 00000000..f44f64ed
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-07.png
new file mode 100644
index 00000000..3a8fbc47
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-08.png
new file mode 100644
index 00000000..60323ddb
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-09.png
new file mode 100755
index 00000000..5de4fb59
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-10.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-10.png
new file mode 100755
index 00000000..34d93242
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-10.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-11.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-11.png
new file mode 100755
index 00000000..e1ca39b8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-11.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-12.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-12.png
new file mode 100755
index 00000000..7d4cf558
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-12.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-13.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-13.png
new file mode 100755
index 00000000..dedace3e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-13.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-14.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-14.png
new file mode 100755
index 00000000..dfd8bff8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-14.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-15.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-15.png
new file mode 100644
index 00000000..23905c5c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-15.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-16.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-16.png
new file mode 100644
index 00000000..390ed489
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-16.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-17.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-17.png
new file mode 100755
index 00000000..3f59940e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-17.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-18.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-18.png
new file mode 100755
index 00000000..87b5dc7f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-18.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-19.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-19.png
new file mode 100755
index 00000000..520a9b7c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-19.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-a.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-a.png
new file mode 100644
index 00000000..94bf76c0
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-a.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-b.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-b.png
new file mode 100644
index 00000000..a7d0966b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-b.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-c.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-c.png
new file mode 100644
index 00000000..45ae9bfc
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-c.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-01.png
new file mode 100644
index 00000000..d5bd334c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-02.png
new file mode 100755
index 00000000..b1c23b3f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-01.png
new file mode 100755
index 00000000..271d738f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-02.png
new file mode 100644
index 00000000..8de520d3
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-03.png
new file mode 100755
index 00000000..6468f819
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-04.png
new file mode 100644
index 00000000..2b9cf9b1
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-01.png
new file mode 100755
index 00000000..8f65e1c5
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-02.png
new file mode 100755
index 00000000..b28ee92e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-03.png
new file mode 100755
index 00000000..61560c23
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-04.png
new file mode 100755
index 00000000..1c7f540b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-05.png
new file mode 100755
index 00000000..2df71657
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-06.png
new file mode 100755
index 00000000..8fed0c56
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-07.png
new file mode 100755
index 00000000..4df41f30
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-08.png
new file mode 100755
index 00000000..28b9e10b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-09.png
new file mode 100755
index 00000000..a7375c7b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-10.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-10.png
new file mode 100755
index 00000000..b8f24766
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-10.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-11.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-11.png
new file mode 100755
index 00000000..f7f3634d
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-11.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-12.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-12.png
new file mode 100755
index 00000000..ce9568e0
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-12.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-13.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-13.png
new file mode 100755
index 00000000..10890ba9
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-13.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-01.png
new file mode 100755
index 00000000..2cce7d49
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-02.png
new file mode 100644
index 00000000..b6169060
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-03.png
new file mode 100644
index 00000000..bf63a2b5
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-04.png
new file mode 100644
index 00000000..3697e549
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-05.png
new file mode 100755
index 00000000..319c2c41
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-06.png
new file mode 100644
index 00000000..cc0fcb6a
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07-b.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07-b.png
new file mode 100644
index 00000000..1df8409b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07-b.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07.png
new file mode 100644
index 00000000..60ba4a93
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-08.png
new file mode 100755
index 00000000..d0abbe04
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09-b.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09-b.png
new file mode 100644
index 00000000..965d0c69
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09-b.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09.png
new file mode 100644
index 00000000..3e368062
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-01.png
new file mode 100644
index 00000000..08868580
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-02.png
new file mode 100644
index 00000000..f54a35bf
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-03.png
new file mode 100755
index 00000000..9d019d2f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-04.png
new file mode 100644
index 00000000..a41ef537
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-05.png
new file mode 100755
index 00000000..0e61eeec
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-06.png
new file mode 100755
index 00000000..c298138e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-07.png
new file mode 100755
index 00000000..87664a83
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-08.png
new file mode 100755
index 00000000..ea3e3994
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-09.png
new file mode 100755
index 00000000..f76548e0
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-10.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-10.png
new file mode 100644
index 00000000..88e14ac9
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-10.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-11.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-11.png
new file mode 100755
index 00000000..bfcddcbe
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-11.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-12.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-12.png
new file mode 100755
index 00000000..fcd08e0b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-12.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-13.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-13.png
new file mode 100644
index 00000000..bc9b91e1
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-13.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-14.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-14.png
new file mode 100644
index 00000000..e129718c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-14.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-15.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-15.png
new file mode 100644
index 00000000..6fe5c1c6
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-15.png differ
diff --git a/src/presentations/misc/demo/images/time-square.jpg.jpg b/docs/presentations/screendesign/design-in-der-medieninformatik/images/time-square.jpg.jpg
similarity index 100%
rename from src/presentations/misc/demo/images/time-square.jpg.jpg
rename to docs/presentations/screendesign/design-in-der-medieninformatik/images/time-square.jpg.jpg
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/design-in-der-medieninformatik/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-01.png
new file mode 100755
index 00000000..2e954292
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-02.png
new file mode 100755
index 00000000..904a8dae
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-03.png
new file mode 100755
index 00000000..85167903
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-04.png
new file mode 100755
index 00000000..106be91f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-01.png
new file mode 100644
index 00000000..7cde9d87
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-02.png
new file mode 100644
index 00000000..73c9c068
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/index.html
new file mode 100644
index 00000000..33f0cab7
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/index.html
@@ -0,0 +1,345 @@
+
+
+
+ Design in der Medieninformatik (DONE) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Was ist Design?
+
+
+
+
+
+
+
+
+
+
Was hat Design in diesem Studiengang für eine Berechtigung?
Absolventen der Medieninformatik analysieren, realisieren, betreiben und evaluieren informationstechnische Prozesse und Systeme zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung medienbasierter Informationen.
+
Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. Absolvent*innen der Medieninformatik arbeiten dabei vorwiegend in Teams und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist Interdisziplinarität gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es vermittelt Sichtweisen und Techniken aus verschiedenen Fachgebieten, von Computergrafik über Mensch-Computer-Interaktion bis Videoproduktion, von Kommunikationsdesign über Programmentwicklung bis Marketing.
+
+
+
+
+
+
+
+
+
Wir entwicklern Software!
+
+
+
+
+
+
+
Ziele
Rolle von Design in der Medieninformatik.
+
Grundbegriffe klären.
+
Grundsätzliche Herangehensweisen und Sichtweisen klären.
+
+
+
+
+
+
+
+
How to create Digital Products?
+
Typical Product Team
+
Different Types of Design(ers)
+
+
+
+
+
+
+
+
+
+
Wie würden Sie die folgenden Designs bewerten?
Oder anders gefragt: nach welchen Kriterien würde Sie bewerten?
+
+
+
+
+
+
+
+
+
Design is ...
+
Desing is...
making things pretty?
+
Desing is...
moving pixels around?
+
+
+
Desing is...
asking the right questions.
+
Desing is...
identifying and solving problems.
+
Was wären die richtigen Fragen am Anfang eines Designprozesses?
+
Wie können wir Probleme identifizieren?
+
+
+
+
+
+
+
+
Pause
+
+
+
+
+
+
+
Woran erkennen wir gutes Design?
+
+
Good Design is innovative
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.
+
Good design is aesthetic
+
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.
+
Good design makes a product useful
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.
+
Good design makes a product understandable
It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.
+
Good design is unobtrusive
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.
+
Good design is honest
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.
+
Good design is long-lasting
It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.
+
Good design is thorough down to the last detail
Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.
+
Good design is environmentally-friendly
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.
+
Good design is as little design as possible
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.
+
Dieter Rams Industrial Designer
+
+
+
+
+
Rams Kriterien
+
innovative
+
aesthetic
+
makes a product useful
+
makes a product understandable
+
unobtrusive
+
honest
+
long-lasting
+
thorough down to the last detail
+
environmentally-friendly
+
as little design as possible
+
+
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
Rams Kriterien // Was ist hier die Designleistung?
+
+
+
+
+
+
+
+
Design Basics
+
+
+
Zum Start
+
versuchen Sie offen zu sein
+
Gestaltungslösungen sind nicht binär
+
versuchen Sie unvollständige Aufgabenstellung durch gute Fragen zu komplettieren
+
entwickeln Sie stets Alternativen und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren Varianten) ist
+
entwickeln Sie Argumente und Begründungszusammenhänge für Ihre Gestaltungen
+
+
+
+
+
+
+
+
+
+
Beschreiben Sie Funktion und Zielgruppe?
Zielsetzung & Zielgruppe
+
Henne & Ei Problem
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design?
+
Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?
+
Funktion & Zielgruppe: gutes Design? Was ist der Unterschied?
+
Was ist der Unterschied?
+
+
+
+
+
+
+
Wie beschreiben wir ein Layout?
Gutes Auge, präzise Sprache
+
+
Wie beschreiben wir ein Layout?
Nach welcher Systematik können wir vorgehen?
+
+
Wie beschreiben wir ein Layout?
Welche visuellen Elementtypen gibt es eigentlich?
+
+
+
+
+
+
+
+
+
+
+
+
Wie beschreiben wir ein Layout?
Welche visuellen Eigenschaften kann ein Element haben?
+
Punkt // Linie // Fläche // Form
+
+
+
Wie beschreiben wir ein Layout?
+
Welche visuellen Eigenschaften kann ein Element haben?
+
Punkt // Linie // Fläche // Form
+
+
+
+
+
+
+
Notieren Sie visuelle Eigenschaften für die folgenden Beispiele.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Gutes Auge, präzise Sprache
Wie beschreiben wir ein Layout?
+
+
+
+
+
+
+
+
+
+
Zusammenfassung
Design macht den Unterschied.
+
Design ist ein »wicked problem«.
+
Design stellt Fragen.
+
Medieninformatiker können entscheidende Rollen in Teams übernehmen.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/100-farbe-zum/index.html b/docs/presentations/screendesign/farben/100-farbe-zum/index.html
new file mode 100644
index 00000000..ff2eedf4
--- /dev/null
+++ b/docs/presentations/screendesign/farben/100-farbe-zum/index.html
@@ -0,0 +1,64 @@
+
+
+
+ Farbe zum // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Farbe zum
Farben sollten besonnen und wenn möglich sparsam eingesetzt werden.
+
Ein Farbklima aus zwei Grundfarben reicht meist aus.
+
Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.
+
Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.
+
Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.
+
Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.
+
Je farbiger ein Text, umso unleserlicher wird er.
+
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/110-adobe-color/index.html b/docs/presentations/screendesign/farben/110-adobe-color/index.html
new file mode 100644
index 00000000..c683dd1a
--- /dev/null
+++ b/docs/presentations/screendesign/farben/110-adobe-color/index.html
@@ -0,0 +1,56 @@
+
+
+
+ Farbe zum Akzentuieren // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Farbe zum Akzentuieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/9999-outro/index.html b/docs/presentations/screendesign/farben/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/farben/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Farben sollten besonnen und wenn möglich sparsam eingesetzt werden.
+
Ein Farbklima aus zwei Grundfarben reicht meist aus.
+
Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.
+
Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.
+
Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.
+
Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.
+
Je farbiger ein Text, umso unleserlicher wird er.
+
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.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/000-intro/index.html b/docs/presentations/screendesign/gestaltgesetze/000-intro/index.html
new file mode 100644
index 00000000..bf00b81c
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/000-intro/index.html
@@ -0,0 +1,272 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/010-cite/index.html b/docs/presentations/screendesign/gestaltgesetze/010-cite/index.html
new file mode 100644
index 00000000..60a0247a
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/010-cite/index.html
@@ -0,0 +1,111 @@
+
+
+
+ Cite // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/020-watzlawick/index.html b/docs/presentations/screendesign/gestaltgesetze/020-watzlawick/index.html
new file mode 100644
index 00000000..17d02060
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/020-watzlawick/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Cite with Image // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Man kann nicht nicht kommunizieren.
+Paul Watzlawick, Philosoph, Psychotherapeut und Kommunikationswissenschaftler
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/040-bilder-wo-es-voll-ist/index.html b/docs/presentations/screendesign/gestaltgesetze/040-bilder-wo-es-voll-ist/index.html
new file mode 100644
index 00000000..276ed98b
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/040-bilder-wo-es-voll-ist/index.html
@@ -0,0 +1,456 @@
+
+
+
+ Bilder wo et voll ist // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/060-aufmerksamkeitstest/index.html b/docs/presentations/screendesign/gestaltgesetze/060-aufmerksamkeitstest/index.html
new file mode 100644
index 00000000..9237e27f
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/060-aufmerksamkeitstest/index.html
@@ -0,0 +1,176 @@
+
+
+
+ Aufmerksamkeitstest // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/100-orientierung/index.html b/docs/presentations/screendesign/gestaltgesetze/100-orientierung/index.html
new file mode 100644
index 00000000..0cebaff5
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/100-orientierung/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/110-orientierung-karte/index.html b/docs/presentations/screendesign/gestaltgesetze/110-orientierung-karte/index.html
new file mode 100644
index 00000000..82b2668f
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/110-orientierung-karte/index.html
@@ -0,0 +1,328 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/330-lindgaard/index.html b/docs/presentations/screendesign/gestaltgesetze/330-lindgaard/index.html
new file mode 100644
index 00000000..e692d97c
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/330-lindgaard/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Gitte Lindgaard // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/9999-outro/index.html b/docs/presentations/screendesign/gestaltgesetze/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/FAZ_neu_S1_gross-570.jpg b/docs/presentations/screendesign/gestaltgesetze/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/amazon.jpg b/docs/presentations/screendesign/gestaltgesetze/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/amazon.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/bild-titel.jpg b/docs/presentations/screendesign/gestaltgesetze/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/bild-titel.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/docs/presentations/screendesign/gestaltgesetze/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/droppedImage-598.pdf.jpg b/docs/presentations/screendesign/gestaltgesetze/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/droppedImage-598.pdf.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/greece-chalcis.jpg b/docs/presentations/screendesign/gestaltgesetze/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/greece-chalcis.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/docs/presentations/screendesign/gestaltgesetze/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/docs/presentations/screendesign/gestaltgesetze/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/kronen-zeitung.jpg b/docs/presentations/screendesign/gestaltgesetze/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/kronen-zeitung.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/lingscars.jpg b/docs/presentations/screendesign/gestaltgesetze/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/lingscars.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/lueneburger-zeitung-eonwerbung.jpg b/docs/presentations/screendesign/gestaltgesetze/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/map-cologne.jpg b/docs/presentations/screendesign/gestaltgesetze/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/map-cologne.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/map-cologne2.jpg b/docs/presentations/screendesign/gestaltgesetze/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/map-cologne2.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/messy-website.jpg b/docs/presentations/screendesign/gestaltgesetze/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/messy-website.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/pasted-image-697.png.jpg b/docs/presentations/screendesign/gestaltgesetze/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/pasted-image-697.png.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/paul.jpg b/docs/presentations/screendesign/gestaltgesetze/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/paul.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/quelle.pdf.jpg b/docs/presentations/screendesign/gestaltgesetze/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/quelle.pdf.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/reduktion-bsp.jpg b/docs/presentations/screendesign/gestaltgesetze/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/reduktion-bsp.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/t3n-magazin.jpg b/docs/presentations/screendesign/gestaltgesetze/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/t3n-magazin.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/tagesschau.jpg b/docs/presentations/screendesign/gestaltgesetze/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/tagesschau.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/time-square.jpg.jpg b/docs/presentations/screendesign/gestaltgesetze/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/time-square.jpg.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/gestaltgesetze/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/tunnel7.jpg b/docs/presentations/screendesign/gestaltgesetze/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/tunnel7.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/yale-art.jpg b/docs/presentations/screendesign/gestaltgesetze/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/yale-art.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/images/zdf.jpg b/docs/presentations/screendesign/gestaltgesetze/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/docs/presentations/screendesign/gestaltgesetze/images/zdf.jpg differ
diff --git a/docs/presentations/screendesign/gestaltgesetze/index.html b/docs/presentations/screendesign/gestaltgesetze/index.html
new file mode 100644
index 00000000..9a1f6c32
--- /dev/null
+++ b/docs/presentations/screendesign/gestaltgesetze/index.html
@@ -0,0 +1,264 @@
+
+
+
+ Gestaltgesetze (WIP) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
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.
+
+
+
+
Ziele
+
Konsistente GUI sicherstellen
+
Werkzeug für Designer und Entwickler
+
Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären
+
+
+
+
+
+
+
Anforderungen
+
Welchen Anforderungen muss eine Design Dokumentation gerecht werden?
+
Was sollte dokumentiert werden?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html b/docs/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html
new file mode 100644
index 00000000..425356ca
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/020-gestaltungsziel/index.html
@@ -0,0 +1,57 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Gestaltungsziel
Wie soll das Design wirken und warum?
+
https://values.design.firefox.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/030-form-space/index.html b/docs/presentations/screendesign/interface-inventar/030-form-space/index.html
new file mode 100644
index 00000000..b7e30d74
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/030-form-space/index.html
@@ -0,0 +1,74 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Form & Space
+
+
+
+
Form & Space
+
Spalten
+
Raster
+
Grundaufteilung
+
Abstände
+
Hierarchisierung
+
Negativraum
+
+
+
Layout/ Gestalterische Macrostruktur & Raster
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/040-farbe/index.html b/docs/presentations/screendesign/interface-inventar/040-farbe/index.html
new file mode 100644
index 00000000..94e6b833
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/040-farbe/index.html
@@ -0,0 +1,70 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
Ziele
+
Konsistente GUI sicherstellen
+
Werkzeug für Designer und Entwickler
+
Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären
+
+
+
+
+
+
+
Anforderungen
+
Welchen Anforderungen muss eine Design Dokumentation gerecht werden?
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/000-intro/index.html b/docs/presentations/screendesign/layout/000-intro/index.html
new file mode 100644
index 00000000..bf00b81c
--- /dev/null
+++ b/docs/presentations/screendesign/layout/000-intro/index.html
@@ -0,0 +1,272 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/010-cite/index.html b/docs/presentations/screendesign/layout/010-cite/index.html
new file mode 100644
index 00000000..60a0247a
--- /dev/null
+++ b/docs/presentations/screendesign/layout/010-cite/index.html
@@ -0,0 +1,111 @@
+
+
+
+ Cite // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/020-watzlawick/index.html b/docs/presentations/screendesign/layout/020-watzlawick/index.html
new file mode 100644
index 00000000..17d02060
--- /dev/null
+++ b/docs/presentations/screendesign/layout/020-watzlawick/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Cite with Image // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Man kann nicht nicht kommunizieren.
+Paul Watzlawick, Philosoph, Psychotherapeut und Kommunikationswissenschaftler
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/040-bilder-wo-es-voll-ist/index.html b/docs/presentations/screendesign/layout/040-bilder-wo-es-voll-ist/index.html
new file mode 100644
index 00000000..276ed98b
--- /dev/null
+++ b/docs/presentations/screendesign/layout/040-bilder-wo-es-voll-ist/index.html
@@ -0,0 +1,456 @@
+
+
+
+ Bilder wo et voll ist // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/060-aufmerksamkeitstest/index.html b/docs/presentations/screendesign/layout/060-aufmerksamkeitstest/index.html
new file mode 100644
index 00000000..9237e27f
--- /dev/null
+++ b/docs/presentations/screendesign/layout/060-aufmerksamkeitstest/index.html
@@ -0,0 +1,176 @@
+
+
+
+ Aufmerksamkeitstest // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/100-orientierung/index.html b/docs/presentations/screendesign/layout/100-orientierung/index.html
new file mode 100644
index 00000000..0cebaff5
--- /dev/null
+++ b/docs/presentations/screendesign/layout/100-orientierung/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/110-orientierung-karte/index.html b/docs/presentations/screendesign/layout/110-orientierung-karte/index.html
new file mode 100644
index 00000000..82b2668f
--- /dev/null
+++ b/docs/presentations/screendesign/layout/110-orientierung-karte/index.html
@@ -0,0 +1,328 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/330-lindgaard/index.html b/docs/presentations/screendesign/layout/330-lindgaard/index.html
new file mode 100644
index 00000000..e692d97c
--- /dev/null
+++ b/docs/presentations/screendesign/layout/330-lindgaard/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Gitte Lindgaard // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/9999-outro/index.html b/docs/presentations/screendesign/layout/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/layout/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/layout/images/FAZ_neu_S1_gross-570.jpg b/docs/presentations/screendesign/layout/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/amazon.jpg b/docs/presentations/screendesign/layout/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/amazon.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/bild-titel.jpg b/docs/presentations/screendesign/layout/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/bild-titel.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/docs/presentations/screendesign/layout/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/droppedImage-598.pdf.jpg b/docs/presentations/screendesign/layout/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/droppedImage-598.pdf.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/greece-chalcis.jpg b/docs/presentations/screendesign/layout/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/greece-chalcis.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/docs/presentations/screendesign/layout/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/docs/presentations/screendesign/layout/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/kronen-zeitung.jpg b/docs/presentations/screendesign/layout/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/kronen-zeitung.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/lingscars.jpg b/docs/presentations/screendesign/layout/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/lingscars.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/lueneburger-zeitung-eonwerbung.jpg b/docs/presentations/screendesign/layout/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/map-cologne.jpg b/docs/presentations/screendesign/layout/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/map-cologne.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/map-cologne2.jpg b/docs/presentations/screendesign/layout/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/map-cologne2.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/messy-website.jpg b/docs/presentations/screendesign/layout/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/messy-website.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/pasted-image-697.png.jpg b/docs/presentations/screendesign/layout/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/pasted-image-697.png.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/paul.jpg b/docs/presentations/screendesign/layout/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/paul.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/quelle.pdf.jpg b/docs/presentations/screendesign/layout/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/quelle.pdf.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/reduktion-bsp.jpg b/docs/presentations/screendesign/layout/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/reduktion-bsp.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/t3n-magazin.jpg b/docs/presentations/screendesign/layout/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/t3n-magazin.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/tagesschau.jpg b/docs/presentations/screendesign/layout/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/tagesschau.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/time-square.jpg.jpg b/docs/presentations/screendesign/layout/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/time-square.jpg.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/layout/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/tunnel7.jpg b/docs/presentations/screendesign/layout/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/tunnel7.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/yale-art.jpg b/docs/presentations/screendesign/layout/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/yale-art.jpg differ
diff --git a/docs/presentations/screendesign/layout/images/zdf.jpg b/docs/presentations/screendesign/layout/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/docs/presentations/screendesign/layout/images/zdf.jpg differ
diff --git a/docs/presentations/screendesign/layout/index.html b/docs/presentations/screendesign/layout/index.html
new file mode 100644
index 00000000..3feeefe9
--- /dev/null
+++ b/docs/presentations/screendesign/layout/index.html
@@ -0,0 +1,305 @@
+
+
+
+ Layout (WIP) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
Welche visuellen Eigenschaften kann ein Element haben?
+
Punkt // Linie // Fläche // Form
+
+
+
Wie beschreiben wir ein Layout?
+
Welche visuellen Eigenschaften kann ein Element haben?
+
Punkt // Linie // Fläche // Form
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
Gutes Auge, präzise Sprache
Wie beschreiben wir ein Layout?
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/linie/000-intro/index.html b/docs/presentations/screendesign/linie/000-intro/index.html
index e1f82dc5..c6fdf8e7 100644
--- a/docs/presentations/screendesign/linie/000-intro/index.html
+++ b/docs/presentations/screendesign/linie/000-intro/index.html
@@ -24,12 +24,69 @@
-
Räumlichkeit
-
Wie funktioniert visuelle Tiefenstaffelung?
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
@@ -47,8 +104,8 @@
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
-
About Screendesign
-
Worum geht es in diesem Modul?
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
@@ -58,7 +115,8 @@
Worum geht es in diesem Modul?
-
Wahrnehmungsarbeit
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
@@ -68,8 +126,8 @@
Wahrnehmungsarbeit
-
Eindeutigkeit
-
Ordnen Sie Elemente so eindeutig wie möglich an.
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
@@ -79,8 +137,19 @@
Ordnen Sie Elemente so eindeutig wie möglich an.
-
Semiotik
-
Lehre von Zeichen und Zeichensystemen
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
@@ -101,11 +170,78 @@
Das kleinste und einfachste Gestaltungselement
-
Linie
-
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.004.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.004.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.005.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.005.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.006.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.006.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.007.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.007.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.008.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.008.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.009.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.009.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.010.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.010.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.011.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.011.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.012.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.012.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.013.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.013.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.014.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.014.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.015.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.015.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.016.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.016.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.017.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.017.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.018.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.018.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.019.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.019.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/images/040-Linie.020.jpeg b/docs/presentations/screendesign/linie/images/040-Linie.020.jpeg
old mode 100644
new mode 100755
diff --git a/docs/presentations/screendesign/linie/index.html b/docs/presentations/screendesign/linie/index.html
index 58e538d7..35f512e1 100644
--- a/docs/presentations/screendesign/linie/index.html
+++ b/docs/presentations/screendesign/linie/index.html
@@ -1,7 +1,7 @@
- Die Linie // Christian Noss
+ Linie // Christian Noss
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/000-intro/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/000-intro/index.html
new file mode 100644
index 00000000..bf00b81c
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/000-intro/index.html
@@ -0,0 +1,272 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/010-cite/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/010-cite/index.html
new file mode 100644
index 00000000..60a0247a
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/010-cite/index.html
@@ -0,0 +1,111 @@
+
+
+
+ Cite // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/020-watzlawick/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/020-watzlawick/index.html
new file mode 100644
index 00000000..17d02060
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/020-watzlawick/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Cite with Image // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Man kann nicht nicht kommunizieren.
+Paul Watzlawick, Philosoph, Psychotherapeut und Kommunikationswissenschaftler
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/040-bilder-wo-es-voll-ist/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/040-bilder-wo-es-voll-ist/index.html
new file mode 100644
index 00000000..276ed98b
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/040-bilder-wo-es-voll-ist/index.html
@@ -0,0 +1,456 @@
+
+
+
+ Bilder wo et voll ist // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/060-aufmerksamkeitstest/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/060-aufmerksamkeitstest/index.html
new file mode 100644
index 00000000..9237e27f
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/060-aufmerksamkeitstest/index.html
@@ -0,0 +1,176 @@
+
+
+
+ Aufmerksamkeitstest // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/100-orientierung/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/100-orientierung/index.html
new file mode 100644
index 00000000..0cebaff5
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/100-orientierung/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/110-orientierung-karte/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/110-orientierung-karte/index.html
new file mode 100644
index 00000000..82b2668f
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/110-orientierung-karte/index.html
@@ -0,0 +1,328 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/330-lindgaard/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/330-lindgaard/index.html
new file mode 100644
index 00000000..e692d97c
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/330-lindgaard/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Gitte Lindgaard // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/9999-outro/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/FAZ_neu_S1_gross-570.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/amazon.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/amazon.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/bild-titel.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/bild-titel.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/droppedImage-598.pdf.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/droppedImage-598.pdf.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/greece-chalcis.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/greece-chalcis.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/kronen-zeitung.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/kronen-zeitung.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/lingscars.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/lingscars.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/lueneburger-zeitung-eonwerbung.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/map-cologne.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/map-cologne.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/map-cologne2.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/map-cologne2.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/messy-website.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/messy-website.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/pasted-image-697.png.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/pasted-image-697.png.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/paul.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/paul.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/quelle.pdf.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/quelle.pdf.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/reduktion-bsp.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/reduktion-bsp.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/t3n-magazin.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/t3n-magazin.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/tagesschau.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/tagesschau.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/time-square.jpg.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/time-square.jpg.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/tunnel7.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/tunnel7.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/yale-art.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/yale-art.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/images/zdf.jpg b/docs/presentations/screendesign/proportionen-und-abstaende/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/docs/presentations/screendesign/proportionen-und-abstaende/images/zdf.jpg differ
diff --git a/docs/presentations/screendesign/proportionen-und-abstaende/index.html b/docs/presentations/screendesign/proportionen-und-abstaende/index.html
new file mode 100644
index 00000000..a8ec0019
--- /dev/null
+++ b/docs/presentations/screendesign/proportionen-und-abstaende/index.html
@@ -0,0 +1,264 @@
+
+
+
+ Proportionen und Abstände (WIP) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/010-cite/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/010-cite/index.html
new file mode 100644
index 00000000..60a0247a
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/010-cite/index.html
@@ -0,0 +1,111 @@
+
+
+
+ Cite // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-watzlawick/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-watzlawick/index.html
new file mode 100644
index 00000000..17d02060
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-watzlawick/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Cite with Image // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Man kann nicht nicht kommunizieren.
+Paul Watzlawick, Philosoph, Psychotherapeut und Kommunikationswissenschaftler
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/040-bilder-wo-es-voll-ist/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/040-bilder-wo-es-voll-ist/index.html
new file mode 100644
index 00000000..276ed98b
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/040-bilder-wo-es-voll-ist/index.html
@@ -0,0 +1,456 @@
+
+
+
+ Bilder wo et voll ist // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/060-aufmerksamkeitstest/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/060-aufmerksamkeitstest/index.html
new file mode 100644
index 00000000..9237e27f
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/060-aufmerksamkeitstest/index.html
@@ -0,0 +1,176 @@
+
+
+
+ Aufmerksamkeitstest // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/100-orientierung/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/100-orientierung/index.html
new file mode 100644
index 00000000..0cebaff5
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/100-orientierung/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/110-orientierung-karte/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/110-orientierung-karte/index.html
new file mode 100644
index 00000000..82b2668f
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/110-orientierung-karte/index.html
@@ -0,0 +1,328 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/330-lindgaard/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/330-lindgaard/index.html
new file mode 100644
index 00000000..e692d97c
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/330-lindgaard/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Gitte Lindgaard // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/9999-outro/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/FAZ_neu_S1_gross-570.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/amazon.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/amazon.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/bild-titel.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/bild-titel.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/droppedImage-598.pdf.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/droppedImage-598.pdf.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/greece-chalcis.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/greece-chalcis.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/kronen-zeitung.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/kronen-zeitung.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lingscars.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lingscars.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lueneburger-zeitung-eonwerbung.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne2.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne2.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/messy-website.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/messy-website.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/pasted-image-697.png.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/pasted-image-697.png.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/paul.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/paul.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/quelle.pdf.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/quelle.pdf.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/reduktion-bsp.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/reduktion-bsp.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/t3n-magazin.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/t3n-magazin.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tagesschau.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tagesschau.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/time-square.jpg.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/time-square.jpg.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tunnel7.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tunnel7.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/yale-art.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/yale-art.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/zdf.jpg b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/zdf.jpg differ
diff --git a/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html
new file mode 100644
index 00000000..531e9fc1
--- /dev/null
+++ b/docs/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.html
@@ -0,0 +1,264 @@
+
+
+
+ Semantisches Differential, Axis Maps und Moodboards (WIP) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/010-cite/index.html b/docs/presentations/screendesign/textsatz/010-cite/index.html
new file mode 100644
index 00000000..60a0247a
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/010-cite/index.html
@@ -0,0 +1,111 @@
+
+
+
+ Cite // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/020-watzlawick/index.html b/docs/presentations/screendesign/textsatz/020-watzlawick/index.html
new file mode 100644
index 00000000..17d02060
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/020-watzlawick/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Cite with Image // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Man kann nicht nicht kommunizieren.
+Paul Watzlawick, Philosoph, Psychotherapeut und Kommunikationswissenschaftler
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/040-bilder-wo-es-voll-ist/index.html b/docs/presentations/screendesign/textsatz/040-bilder-wo-es-voll-ist/index.html
new file mode 100644
index 00000000..276ed98b
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/040-bilder-wo-es-voll-ist/index.html
@@ -0,0 +1,456 @@
+
+
+
+ Bilder wo et voll ist // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/060-aufmerksamkeitstest/index.html b/docs/presentations/screendesign/textsatz/060-aufmerksamkeitstest/index.html
new file mode 100644
index 00000000..9237e27f
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/060-aufmerksamkeitstest/index.html
@@ -0,0 +1,176 @@
+
+
+
+ Aufmerksamkeitstest // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/100-orientierung/index.html b/docs/presentations/screendesign/textsatz/100-orientierung/index.html
new file mode 100644
index 00000000..0cebaff5
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/100-orientierung/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/110-orientierung-karte/index.html b/docs/presentations/screendesign/textsatz/110-orientierung-karte/index.html
new file mode 100644
index 00000000..82b2668f
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/110-orientierung-karte/index.html
@@ -0,0 +1,328 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/330-lindgaard/index.html b/docs/presentations/screendesign/textsatz/330-lindgaard/index.html
new file mode 100644
index 00000000..e692d97c
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/330-lindgaard/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Gitte Lindgaard // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/9999-outro/index.html b/docs/presentations/screendesign/textsatz/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/textsatz/images/FAZ_neu_S1_gross-570.jpg b/docs/presentations/screendesign/textsatz/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/amazon.jpg b/docs/presentations/screendesign/textsatz/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/amazon.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/bild-titel.jpg b/docs/presentations/screendesign/textsatz/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/bild-titel.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/docs/presentations/screendesign/textsatz/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/droppedImage-598.pdf.jpg b/docs/presentations/screendesign/textsatz/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/droppedImage-598.pdf.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/greece-chalcis.jpg b/docs/presentations/screendesign/textsatz/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/greece-chalcis.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/docs/presentations/screendesign/textsatz/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/docs/presentations/screendesign/textsatz/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/kronen-zeitung.jpg b/docs/presentations/screendesign/textsatz/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/kronen-zeitung.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/lingscars.jpg b/docs/presentations/screendesign/textsatz/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/lingscars.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/lueneburger-zeitung-eonwerbung.jpg b/docs/presentations/screendesign/textsatz/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/map-cologne.jpg b/docs/presentations/screendesign/textsatz/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/map-cologne.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/map-cologne2.jpg b/docs/presentations/screendesign/textsatz/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/map-cologne2.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/messy-website.jpg b/docs/presentations/screendesign/textsatz/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/messy-website.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/pasted-image-697.png.jpg b/docs/presentations/screendesign/textsatz/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/pasted-image-697.png.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/paul.jpg b/docs/presentations/screendesign/textsatz/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/paul.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/quelle.pdf.jpg b/docs/presentations/screendesign/textsatz/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/quelle.pdf.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/reduktion-bsp.jpg b/docs/presentations/screendesign/textsatz/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/reduktion-bsp.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/t3n-magazin.jpg b/docs/presentations/screendesign/textsatz/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/t3n-magazin.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/tagesschau.jpg b/docs/presentations/screendesign/textsatz/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/tagesschau.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/time-square.jpg.jpg b/docs/presentations/screendesign/textsatz/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/time-square.jpg.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/textsatz/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/tunnel7.jpg b/docs/presentations/screendesign/textsatz/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/tunnel7.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/yale-art.jpg b/docs/presentations/screendesign/textsatz/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/yale-art.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/images/zdf.jpg b/docs/presentations/screendesign/textsatz/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/docs/presentations/screendesign/textsatz/images/zdf.jpg differ
diff --git a/docs/presentations/screendesign/textsatz/index.html b/docs/presentations/screendesign/textsatz/index.html
new file mode 100644
index 00000000..38698ff9
--- /dev/null
+++ b/docs/presentations/screendesign/textsatz/index.html
@@ -0,0 +1,264 @@
+
+
+
+ Textsatz (WIP) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/000-intro/index.html b/docs/presentations/screendesign/typographie/000-intro/index.html
new file mode 100644
index 00000000..bf00b81c
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/000-intro/index.html
@@ -0,0 +1,272 @@
+
+
+
+ Wahrnehmungsarbeit // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
+
About Screendesign
+
Worum geht es in diesem Modul?
+
+
+
+
+
+
+
+
+
Design in der Medieninformatik
+
---
+
+
+
+
+
+
+
+
+
+
Eindeutigkeit
+
Ordnen Sie Elemente so eindeutig wie möglich an.
+
+
+
+
+
+
+
+
+
Figur und Grund
+
---
+
+
+
+
+
+
+
+
+
+
Fläche und Form
+
--
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Linie
+
zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Der Punkt
+
Das kleinste und einfachste Gestaltungselement
+
+
+
+
+
+
+
+
+
Räumlichkeit
+
Wie funktioniert visuelle Tiefenstaffelung?
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Semiotik
+
Lehre von Zeichen und Zeichensystemen
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
+
Wahrnehmungsarbeit
+
+
+
+
+
+
+
+
+
Farbe
+
---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/010-cite/index.html b/docs/presentations/screendesign/typographie/010-cite/index.html
new file mode 100644
index 00000000..60a0247a
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/010-cite/index.html
@@ -0,0 +1,111 @@
+
+
+
+ Cite // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/020-watzlawick/index.html b/docs/presentations/screendesign/typographie/020-watzlawick/index.html
new file mode 100644
index 00000000..17d02060
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/020-watzlawick/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Cite with Image // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Man kann nicht nicht kommunizieren.
+Paul Watzlawick, Philosoph, Psychotherapeut und Kommunikationswissenschaftler
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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/040-bilder-wo-es-voll-ist/index.html b/docs/presentations/screendesign/typographie/040-bilder-wo-es-voll-ist/index.html
new file mode 100644
index 00000000..276ed98b
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/040-bilder-wo-es-voll-ist/index.html
@@ -0,0 +1,456 @@
+
+
+
+ Bilder wo et voll ist // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/060-aufmerksamkeitstest/index.html b/docs/presentations/screendesign/typographie/060-aufmerksamkeitstest/index.html
new file mode 100644
index 00000000..9237e27f
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/060-aufmerksamkeitstest/index.html
@@ -0,0 +1,176 @@
+
+
+
+ Aufmerksamkeitstest // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/100-orientierung/index.html b/docs/presentations/screendesign/typographie/100-orientierung/index.html
new file mode 100644
index 00000000..0cebaff5
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/100-orientierung/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
Orientierung
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/110-orientierung-karte/index.html b/docs/presentations/screendesign/typographie/110-orientierung-karte/index.html
new file mode 100644
index 00000000..82b2668f
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/110-orientierung-karte/index.html
@@ -0,0 +1,328 @@
+
+
+
+ Orientierung // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/330-lindgaard/index.html b/docs/presentations/screendesign/typographie/330-lindgaard/index.html
new file mode 100644
index 00000000..e692d97c
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/330-lindgaard/index.html
@@ -0,0 +1,120 @@
+
+
+
+ Gitte Lindgaard // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/9999-outro/index.html b/docs/presentations/screendesign/typographie/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+ About Screendesign // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/typographie/images/FAZ_neu_S1_gross-570.jpg b/docs/presentations/screendesign/typographie/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/amazon.jpg b/docs/presentations/screendesign/typographie/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/amazon.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/bild-titel.jpg b/docs/presentations/screendesign/typographie/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/bild-titel.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/docs/presentations/screendesign/typographie/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/droppedImage-598.pdf.jpg b/docs/presentations/screendesign/typographie/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/droppedImage-598.pdf.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/greece-chalcis.jpg b/docs/presentations/screendesign/typographie/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/greece-chalcis.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/docs/presentations/screendesign/typographie/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/docs/presentations/screendesign/typographie/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/kronen-zeitung.jpg b/docs/presentations/screendesign/typographie/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/kronen-zeitung.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/lingscars.jpg b/docs/presentations/screendesign/typographie/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/lingscars.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/lueneburger-zeitung-eonwerbung.jpg b/docs/presentations/screendesign/typographie/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/map-cologne.jpg b/docs/presentations/screendesign/typographie/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/map-cologne.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/map-cologne2.jpg b/docs/presentations/screendesign/typographie/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/map-cologne2.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/messy-website.jpg b/docs/presentations/screendesign/typographie/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/messy-website.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/pasted-image-697.png.jpg b/docs/presentations/screendesign/typographie/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/pasted-image-697.png.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/paul.jpg b/docs/presentations/screendesign/typographie/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/paul.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/quelle.pdf.jpg b/docs/presentations/screendesign/typographie/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/quelle.pdf.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/reduktion-bsp.jpg b/docs/presentations/screendesign/typographie/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/reduktion-bsp.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/t3n-magazin.jpg b/docs/presentations/screendesign/typographie/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/t3n-magazin.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/tagesschau.jpg b/docs/presentations/screendesign/typographie/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/tagesschau.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/time-square.jpg.jpg b/docs/presentations/screendesign/typographie/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/time-square.jpg.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/typographie/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/tunnel7.jpg b/docs/presentations/screendesign/typographie/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/tunnel7.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/yale-art.jpg b/docs/presentations/screendesign/typographie/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/yale-art.jpg differ
diff --git a/docs/presentations/screendesign/typographie/images/zdf.jpg b/docs/presentations/screendesign/typographie/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/docs/presentations/screendesign/typographie/images/zdf.jpg differ
diff --git a/docs/presentations/screendesign/typographie/index.html b/docs/presentations/screendesign/typographie/index.html
new file mode 100644
index 00000000..f17daba6
--- /dev/null
+++ b/docs/presentations/screendesign/typographie/index.html
@@ -0,0 +1,264 @@
+
+
+
+ Typographie (WIP) // Christian Noss
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Demo Präsentation
+
Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
+
+
+
+
+
+
Hier wird ein Zitat hübsch angezeigt.
+Max Mustermann, Beispiel
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
+
+
+
+
+
+
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
+
+
+
+
+
+
+
Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
+Max Mustermann, Beispiel
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.
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
+Gitte Lindgaard, Psychologin
Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press).
Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression.
+
+
+
+
+
Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/misc/demo/images/time-square.jpg b/src/presentations/misc/demo/images/time-square.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/misc/demo/images/time-square.jpg differ
diff --git a/src/presentations/misc/pen-and-paper/155-me.md b/src/presentations/misc/pen-and-paper/155-me.md
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/158-things.md b/src/presentations/misc/pen-and-paper/158-things.md
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/charaktere.jpg b/src/presentations/misc/pen-and-paper/images/charaktere.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/dinge.jpg b/src/presentations/misc/pen-and-paper/images/dinge.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/me.jpg b/src/presentations/misc/pen-and-paper/images/me.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/menschen.jpg b/src/presentations/misc/pen-and-paper/images/menschen.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/mike-rode-matrix.jpg b/src/presentations/misc/pen-and-paper/images/mike-rode-matrix.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/sketching-in-real-world-02.jpg b/src/presentations/misc/pen-and-paper/images/sketching-in-real-world-02.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/sketching-in-real-world-03.jpg b/src/presentations/misc/pen-and-paper/images/sketching-in-real-world-03.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/misc/pen-and-paper/images/sketching-in-real-world.jpg b/src/presentations/misc/pen-and-paper/images/sketching-in-real-world.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20212.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20212.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20213.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20213.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20214.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20214.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20215.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20215.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20216.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20216.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20217.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20217.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20218.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20218.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/about-screendesign/images/eva-20219.jpg b/src/presentations/screendesign/about-screendesign/images/eva-20219.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/000-intro.md b/src/presentations/screendesign/design-in-der-medieninformatik/000-intro.md
new file mode 100755
index 00000000..fe223a0f
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/000-intro.md
@@ -0,0 +1,14 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Design in der Medieninformatik
+
+## ---
+
+
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro.md b/src/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro.md
new file mode 100755
index 00000000..9362cdb3
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/005-was-ist-design-intro.md
@@ -0,0 +1,23 @@
+---
+title: Dataforrest Intro
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
+
+
+
+
+
+
+{% interlude "Was ist Design?"%}
+
+
+
+
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/010-design-in-diesem-studiengang.md b/src/presentations/screendesign/design-in-der-medieninformatik/010-design-in-diesem-studiengang.md
new file mode 100755
index 00000000..3c23c0e4
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/010-design-in-diesem-studiengang.md
@@ -0,0 +1,10 @@
+---
+title: Was hat Design in diesem Studiengang für eine Berechtigung?
+layout: presentation.11ty.js
+slideClasses: simple
+status: ok
+---
+
+{% fragment "
Absolventen der Medieninformatik analysieren, realisieren, betreiben und evaluieren informationstechnische Prozesse und Systeme zur Gestaltung, Produktion, Bearbeitung, Distribution und Nutzung medienbasierter Informationen.
" %}
+{% fragment "
Das Studium der Medieninformatik zielt somit im Kern auf die Vermittlung entsprechender Methoden, Techniken und Denkweisen der Informatik. Absolvent*innen der Medieninformatik arbeiten dabei vorwiegend in Teams und müssen dort ihre erworbenen Kompetenzen einbringen können – hier ist Interdisziplinarität gefragt, erwünscht und gefordert. Auch darauf bereitet das Studium der Medieninformatik vor: es vermittelt Sichtweisen und Techniken aus verschiedenen Fachgebieten, von Computergrafik über Mensch-Computer-Interaktion bis Videoproduktion, von Kommunikationsdesign über Programmentwicklung bis Marketing.
+
" %}
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/020-software.md b/src/presentations/screendesign/design-in-der-medieninformatik/020-software.md
new file mode 100755
index 00000000..33de0180
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/020-software.md
@@ -0,0 +1,10 @@
+---
+title: Wir entwicklern Software!
+layout: presentation.11ty.js
+slideClasses: simple
+status: ok
+transition: zoom
+---
+
+
+
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/025-ziele.md b/src/presentations/screendesign/design-in-der-medieninformatik/025-ziele.md
new file mode 100755
index 00000000..24650d67
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/025-ziele.md
@@ -0,0 +1,10 @@
+---
+title: Ziele
+layout: presentation.11ty.js
+slideClasses: simple
+status: ok
+---
+
+{% fragment '
Rolle von Design in der Medieninformatik.
' %}
+{% fragment '
Grundbegriffe klären.
' %}
+{% fragment '
Grundsätzliche Herangehensweisen und Sichtweisen klären.
' %}
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products.md b/src/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products.md
new file mode 100755
index 00000000..50f6f680
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/030-how-to-digital-products.md
@@ -0,0 +1,17 @@
+---
+title: How to create Digital Products?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+{% interlude "How to create Digital Products?"%}
+
+{% screenshot "./images/digital-products-01.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Typical Product Team"}' %}
+
+{% screenshot "./images/digital-products-02.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":"Different Types of Design(ers)"}' %}
+
+{% screenshot "./images/digital-products-03.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/digital-products-04.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten.md b/src/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten.md
new file mode 100755
index 00000000..a48beb70
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/040-designs-bewerten.md
@@ -0,0 +1,12 @@
+---
+title: Wie würden Sie die folgenden Designs bewerten?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+{% interlude "Wie würden Sie die folgenden Designs bewerten?", "Oder anders gefragt: nach welchen Kriterien würde Sie bewerten?" %}
+
+{% screenshot "./images/design-bewerten-01.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/design-bewerten-02.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
\ No newline at end of file
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/050-design-is.md b/src/presentations/screendesign/design-in-der-medieninformatik/050-design-is.md
new file mode 100755
index 00000000..df557e84
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/050-design-is.md
@@ -0,0 +1,22 @@
+---
+title: Design is ...
+layout: presentation.11ty.js
+slideClasses: wrap
+status: ok
+---
+
+{% interlude "Design is ..." %}
+
+{% qa "Desing is...", "making things pretty?" %}
+{% qa "Desing is...", "moving pixels around?" %}
+
+
+{% screenshot "./images/wir-duerfen-01.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/wir-duerfen-02.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% qa "Desing is...", "asking the right questions." %}
+{% qa "Desing is...", "identifying and solving problems." %}
+
+{% interlude "Was wären die richtigen Fragen am Anfang eines Designprozesses?" %}
+{% interlude "Wie können wir Probleme identifizieren?" %}
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/055-pause.md b/src/presentations/screendesign/design-in-der-medieninformatik/055-pause.md
new file mode 100755
index 00000000..3ba2db24
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/055-pause.md
@@ -0,0 +1,7 @@
+---
+title: Pause
+layout: presentation.11ty.js
+slideClasses: simple
+status: ok
+transition: zoom
+---
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen.md b/src/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen.md
new file mode 100755
index 00000000..77fa3b3d
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/060-gutes-design-erkennen.md
@@ -0,0 +1,65 @@
+---
+title: Woran erkennen wir gutes Design?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+transition: zoom
+---
+
+{% interlude "Woran erkennen wir gutes Design?" %}
+
+{% screenshot "./images/gutes-design-01.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% statement "Good Design is innovative", "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." %}
+
+{% statement "Good design is aesthetic
+", "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." %}
+
+{% statement "Good design makes a product useful", "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." %}
+
+{% statement "Good design makes a product understandable", "It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory." %}
+
+{% statement "Good design is unobtrusive", "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." %}
+
+{% statement "Good design is honest", "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." %}
+
+{% statement "Good design is long-lasting", "It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society." %}
+
+{% statement "Good design is thorough down to the last detail", "Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user." %}
+
+{% statement "Good design is environmentally-friendly", "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." %}
+
+{% statement "Good design is as little design as possible", "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." %}
+
+{% screenshot "./images/gutes-design-02.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":"Dieter Rams Industrial Designer"}' %}
+
+{% screenshot "./images/gutes-design-03.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/gutes-design-04.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+
+
+
Rams Kriterien
+ {% fragment '
innovative
' %}
+ {% fragment '
aesthetic
' %}
+ {% fragment '
makes a product useful
' %}
+ {% fragment '
makes a product understandable
' %}
+ {% fragment '
unobtrusive
' %}
+ {% fragment '
honest
' %}
+ {% fragment '
long-lasting
' %}
+ {% fragment '
thorough down to the last detail
' %}
+ {% fragment '
environmentally-friendly
' %}
+ {% fragment '
as little design as possible
' %}
+
+
+
+{% screenshot "./images/gutes-design-05.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Rams Kriterien // Was ist hier die Designleistung?"}' %}
+
+{% screenshot "./images/gutes-design-06.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":"Rams Kriterien // Was ist hier die Designleistung?"}' %}
+
+{% screenshot "./images/gutes-design-07-b.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":"Rams Kriterien // Was ist hier die Designleistung?"}' %}
+
+{% screenshot "./images/gutes-design-08.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Rams Kriterien // Was ist hier die Designleistung?"}' %}
+
+{% screenshot "./images/gutes-design-09-b.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":"Rams Kriterien // Was ist hier die Designleistung?"}' %}
diff --git a/src/presentations/screendesign/design-in-der-medieninformatik/070-design-basics.md b/src/presentations/screendesign/design-in-der-medieninformatik/070-design-basics.md
new file mode 100755
index 00000000..dc93c241
--- /dev/null
+++ b/src/presentations/screendesign/design-in-der-medieninformatik/070-design-basics.md
@@ -0,0 +1,20 @@
+---
+title: Design Basics
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+transition: zoom
+---
+
+{% interlude "Design Basics" %}
+
+
+
+
Zum Start
+ {% fragment "
versuchen Sie offen zu sein
" %}
+ {% fragment "
Gestaltungslösungen sind nicht binär
" %}
+ {% fragment "
versuchen Sie unvollständige Aufgabenstellung durch gute Fragen zu komplettieren
" %}
+ {% fragment "
entwickeln Sie stets Alternativen und dokumentieren diese um nachweisen zu können, dass die gewählte Lösung die Beste (zumindest aus ihren Varianten) ist
" %}
+ {% fragment "
entwickeln Sie Argumente und Begründungszusammenhänge für Ihre Gestaltungen
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/farben/100-farbe-zum.md b/src/presentations/screendesign/farben/100-farbe-zum.md
new file mode 100755
index 00000000..dbe62ef2
--- /dev/null
+++ b/src/presentations/screendesign/farben/100-farbe-zum.md
@@ -0,0 +1,15 @@
+---
+title: Farbe zum
+layout: presentation.11ty.js
+slideClasses: simple
+transition: none
+---
+
+{% fragment '
Farben sollten besonnen und wenn möglich sparsam eingesetzt werden.
' %}
+{% fragment '
Ein Farbklima aus zwei Grundfarben reicht meist aus.
' %}
+{% fragment '
Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.
' %}
+{% fragment '
Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.
' %}
+{% fragment '
Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.
' %}
+{% fragment '
Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.
' %}
+{% fragment '
Je farbiger ein Text, umso unleserlicher wird er.
' %}
+{% fragment '
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.
' %}
diff --git a/src/presentations/screendesign/farben/110-adobe-color.md b/src/presentations/screendesign/farben/110-adobe-color.md
new file mode 100755
index 00000000..9cca209d
--- /dev/null
+++ b/src/presentations/screendesign/farben/110-adobe-color.md
@@ -0,0 +1,8 @@
+---
+title: Farbe zum Akzentuieren
+layout: presentation.11ty.js
+slideClasses: images
+transition: none
+---
+
+{% screenshot "./images/outro/adobe-color.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":"Farbe zum Akzentuieren"}' %}
\ No newline at end of file
diff --git a/src/presentations/screendesign/farben/9999-outro.md b/src/presentations/screendesign/farben/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/farben/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-01.png b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-01.png
new file mode 100755
index 00000000..d5138068
Binary files /dev/null and b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-01.png differ
diff --git a/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-02.png b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-02.png
new file mode 100644
index 00000000..be982db7
Binary files /dev/null and b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-02.png differ
diff --git a/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-03.png b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-03.png
new file mode 100644
index 00000000..827c4dfa
Binary files /dev/null and b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-03.png differ
diff --git a/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-04.png b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-04.png
new file mode 100644
index 00000000..24386919
Binary files /dev/null and b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-04.png differ
diff --git a/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-05.png b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-05.png
new file mode 100644
index 00000000..d69eec34
Binary files /dev/null and b/src/presentations/screendesign/farben/images/akzentuierung/akzentuieren-05.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/corporate-color-01.png b/src/presentations/screendesign/farben/images/farbe/corporate-color-01.png
new file mode 100755
index 00000000..2edb81b7
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/corporate-color-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/corporate-color-01.svg b/src/presentations/screendesign/farben/images/farbe/corporate-color-01.svg
new file mode 100755
index 00000000..ffcd39c4
--- /dev/null
+++ b/src/presentations/screendesign/farben/images/farbe/corporate-color-01.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/presentations/screendesign/farben/images/farbe/corporate-color-02.png b/src/presentations/screendesign/farben/images/farbe/corporate-color-02.png
new file mode 100755
index 00000000..cc293a98
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/corporate-color-02.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/corporate-color-03-1.png b/src/presentations/screendesign/farben/images/farbe/corporate-color-03-1.png
new file mode 100755
index 00000000..52d89167
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/corporate-color-03-1.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/corporate-color-03.png b/src/presentations/screendesign/farben/images/farbe/corporate-color-03.png
new file mode 100755
index 00000000..fa5fb278
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/corporate-color-03.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/corporate-color-04.png b/src/presentations/screendesign/farben/images/farbe/corporate-color-04.png
new file mode 100755
index 00000000..83497635
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/corporate-color-04.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/der-gleiche-farbwert.png b/src/presentations/screendesign/farben/images/farbe/der-gleiche-farbwert.png
new file mode 100755
index 00000000..2ea8d9f0
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/der-gleiche-farbwert.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/intro.png b/src/presentations/screendesign/farben/images/farbe/intro.png
new file mode 100755
index 00000000..38ffeea6
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/intro.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/verlaeufe-01.png b/src/presentations/screendesign/farben/images/farbe/verlaeufe-01.png
new file mode 100755
index 00000000..6fc62b65
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/verlaeufe-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/verlaeufe-02.png b/src/presentations/screendesign/farben/images/farbe/verlaeufe-02.png
new file mode 100755
index 00000000..a45e034f
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/verlaeufe-02.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/verlaeufe-03.png b/src/presentations/screendesign/farben/images/farbe/verlaeufe-03.png
new file mode 100755
index 00000000..15167b94
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/verlaeufe-03.png differ
diff --git a/src/presentations/screendesign/farben/images/farbe/verlaeufe-04.png b/src/presentations/screendesign/farben/images/farbe/verlaeufe-04.png
new file mode 100755
index 00000000..b0415667
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbe/verlaeufe-04.png differ
diff --git a/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-01.png b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-01.png
new file mode 100644
index 00000000..2650ec39
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-02.png b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-02.png
new file mode 100644
index 00000000..e74fb75c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-02.png differ
diff --git a/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-03.png b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-03.png
new file mode 100644
index 00000000..82665745
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-03.png differ
diff --git a/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-04.png b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-04.png
new file mode 100644
index 00000000..1bec894c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-04.png differ
diff --git a/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-05.png b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-05.png
new file mode 100644
index 00000000..795c0e31
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-05.png differ
diff --git a/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-06.png b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-06.png
new file mode 100644
index 00000000..8b0a814c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbenlesen/farben-lesen-06.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/blau-zitat.png b/src/presentations/screendesign/farben/images/farbwirkung/blau-zitat.png
new file mode 100755
index 00000000..1386036d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/blau-zitat.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-blau.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-blau.png
new file mode 100644
index 00000000..0b095dd4
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-blau.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-cyan.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-cyan.png
new file mode 100644
index 00000000..f110711c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-cyan.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gelb.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gelb.png
new file mode 100644
index 00000000..8b3cc134
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gelb.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-grau.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-grau.png
new file mode 100644
index 00000000..5a8d16fa
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-grau.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gruen.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gruen.png
new file mode 100644
index 00000000..c3695659
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gruen.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-orange.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-orange.png
new file mode 100644
index 00000000..69cf88d9
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-orange.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-rot.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-rot.png
new file mode 100644
index 00000000..6a8dc302
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-rot.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-schwarz.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-schwarz.png
new file mode 100644
index 00000000..1ec40522
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-schwarz.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-violett.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-violett.png
new file mode 100644
index 00000000..c6c9f046
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-violett.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-weiss.png b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-weiss.png
new file mode 100644
index 00000000..82663078
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-weiss.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farbharmonie-01.png b/src/presentations/screendesign/farben/images/farbwirkung/farbharmonie-01.png
new file mode 100644
index 00000000..b0088876
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farbharmonie-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farbharmonie-02.png b/src/presentations/screendesign/farben/images/farbwirkung/farbharmonie-02.png
new file mode 100644
index 00000000..3cc1c6e6
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farbharmonie-02.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farbklimata-01.png b/src/presentations/screendesign/farben/images/farbwirkung/farbklimata-01.png
new file mode 100755
index 00000000..9e0adbb5
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farbklimata-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farbklimata-02.png b/src/presentations/screendesign/farben/images/farbwirkung/farbklimata-02.png
new file mode 100755
index 00000000..7101d433
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farbklimata-02.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/farbkreis-01.png b/src/presentations/screendesign/farben/images/farbwirkung/farbkreis-01.png
new file mode 100755
index 00000000..d23e3f6a
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/farbkreis-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-a.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-a.png
new file mode 100644
index 00000000..9eaf893d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-b.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-b.png
new file mode 100644
index 00000000..35692ea2
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-c.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-c.png
new file mode 100644
index 00000000..e7061093
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-c.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-d.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-d.png
new file mode 100644
index 00000000..9c27078c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-d.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-a.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-a.png
new file mode 100644
index 00000000..9baff740
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-b.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-b.png
new file mode 100644
index 00000000..866877be
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-c.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-c.png
new file mode 100644
index 00000000..5b6bcf8d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-c.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-d.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-d.png
new file mode 100644
index 00000000..56612b4c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-d.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-a.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-a.png
new file mode 100644
index 00000000..1af4830b
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-b.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-b.png
new file mode 100644
index 00000000..c190af71
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-c.png b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-c.png
new file mode 100644
index 00000000..bc378705
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-c.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-01-a.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-01-a.png
new file mode 100755
index 00000000..db18dd1f
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-01-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-01-b.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-01-b.png
new file mode 100755
index 00000000..ccb6d971
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-01-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-02-a.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-02-a.png
new file mode 100755
index 00000000..a7801603
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-02-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-02-b.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-02-b.png
new file mode 100755
index 00000000..323100a2
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-02-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-03-a.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-03-a.png
new file mode 100755
index 00000000..96ad6a19
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-03-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-03-b.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-03-b.png
new file mode 100755
index 00000000..31a13cec
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-03-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-04-a.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-04-a.png
new file mode 100755
index 00000000..061e8078
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-04-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-04-b.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-04-b.png
new file mode 100755
index 00000000..8a3d1edf
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-04-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-05-a.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-05-a.png
new file mode 100755
index 00000000..233ca40b
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-05-a.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/pixel-05-b.png b/src/presentations/screendesign/farben/images/farbwirkung/pixel-05-b.png
new file mode 100755
index 00000000..5507f11e
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/pixel-05-b.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-01.png b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-01.png
new file mode 100644
index 00000000..38627ad1
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-01.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-02.png b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-02.png
new file mode 100644
index 00000000..d4e2bda5
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-02.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-03.png b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-03.png
new file mode 100644
index 00000000..98e8c067
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-03.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-04.png b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-04.png
new file mode 100644
index 00000000..034d1812
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-04.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-05.png b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-05.png
new file mode 100644
index 00000000..a5739ea6
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-05.png differ
diff --git a/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-06.png b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-06.png
new file mode 100644
index 00000000..47c088f8
Binary files /dev/null and b/src/presentations/screendesign/farben/images/farbwirkung/windows-farbe-06.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbklima-01.png b/src/presentations/screendesign/farben/images/grundlagen/farbklima-01.png
new file mode 100755
index 00000000..7441bb8a
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbklima-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbkreis-01.png b/src/presentations/screendesign/farben/images/grundlagen/farbkreis-01.png
new file mode 100755
index 00000000..3808a2bf
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbkreis-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbkreise-01.png b/src/presentations/screendesign/farben/images/grundlagen/farbkreise-01.png
new file mode 100755
index 00000000..2e416091
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbkreise-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbmischung-01.png b/src/presentations/screendesign/farben/images/grundlagen/farbmischung-01.png
new file mode 100755
index 00000000..a551bc7a
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbmischung-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbmischung-02.png b/src/presentations/screendesign/farben/images/grundlagen/farbmischung-02.png
new file mode 100755
index 00000000..c6759a3b
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbmischung-02.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-01.png b/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-01.png
new file mode 100755
index 00000000..3fef9b94
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-02.png b/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-02.png
new file mode 100755
index 00000000..3303e172
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-02.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-03.png b/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-03.png
new file mode 100755
index 00000000..80564137
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbmodelle-03.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/farbspektrum-01.png b/src/presentations/screendesign/farben/images/grundlagen/farbspektrum-01.png
new file mode 100755
index 00000000..a0a44b6b
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/farbspektrum-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/hue-saturation-brightness-01.png b/src/presentations/screendesign/farben/images/grundlagen/hue-saturation-brightness-01.png
new file mode 100755
index 00000000..c6a6cc2e
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/hue-saturation-brightness-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/saettigung-01.png b/src/presentations/screendesign/farben/images/grundlagen/saettigung-01.png
new file mode 100755
index 00000000..0ac24194
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/saettigung-01.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/saettigung-02.png b/src/presentations/screendesign/farben/images/grundlagen/saettigung-02.png
new file mode 100755
index 00000000..43a85395
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/saettigung-02.png differ
diff --git a/src/presentations/screendesign/farben/images/grundlagen/saettigung-helligkeit-01.png b/src/presentations/screendesign/farben/images/grundlagen/saettigung-helligkeit-01.png
new file mode 100755
index 00000000..38f97312
Binary files /dev/null and b/src/presentations/screendesign/farben/images/grundlagen/saettigung-helligkeit-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-01.png
new file mode 100755
index 00000000..e68cc9e8
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-02.png
new file mode 100755
index 00000000..ab49fe37
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-03.png
new file mode 100755
index 00000000..fe3b63ef
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-04.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-04.png
new file mode 100755
index 00000000..56244ed3
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-04.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-05.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-05.png
new file mode 100755
index 00000000..a0f05623
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-05.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-06.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-06.png
new file mode 100755
index 00000000..c31356ac
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-06.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-07.png b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-07.png
new file mode 100755
index 00000000..2ae459fe
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-07.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-01.png
new file mode 100755
index 00000000..bae5ebca
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-02.png
new file mode 100755
index 00000000..5a89ef04
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-03.png
new file mode 100755
index 00000000..1c9ab455
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-04.png b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-04.png
new file mode 100755
index 00000000..1e62fa9e
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-04.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-05.png b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-05.png
new file mode 100755
index 00000000..0eadf93d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-05.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-06.png b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-06.png
new file mode 100755
index 00000000..24c2f040
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-06.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/flimmern-01.png b/src/presentations/screendesign/farben/images/kontraste/flimmern-01.png
new file mode 100755
index 00000000..40fefb53
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/flimmern-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/flimmern-02.png b/src/presentations/screendesign/farben/images/kontraste/flimmern-02.png
new file mode 100755
index 00000000..3b81d94d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/flimmern-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/flimmern-03.png b/src/presentations/screendesign/farben/images/kontraste/flimmern-03.png
new file mode 100755
index 00000000..b2bde4ea
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/flimmern-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-01.png
new file mode 100755
index 00000000..77988ee1
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-02.png
new file mode 100755
index 00000000..bfe378cd
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-03.png
new file mode 100755
index 00000000..2fc17372
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-04.png b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-04.png
new file mode 100755
index 00000000..3c3b9d29
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-04.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-05.png b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-05.png
new file mode 100755
index 00000000..e594f434
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-05.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-06.png b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-06.png
new file mode 100755
index 00000000..dad751ee
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-06.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-01.png
new file mode 100755
index 00000000..2a57a5f3
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-02.png
new file mode 100755
index 00000000..779cd508
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-03.png
new file mode 100755
index 00000000..a7396962
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-04.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-04.png
new file mode 100755
index 00000000..a62ec90b
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-04.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-05.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-05.png
new file mode 100755
index 00000000..71c7909b
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-05.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-06.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-06.png
new file mode 100755
index 00000000..c72c3d7a
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-06.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-07.png b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-07.png
new file mode 100755
index 00000000..e294db04
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-07.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-01.png
new file mode 100755
index 00000000..16ff2999
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-02.png
new file mode 100755
index 00000000..23b4823c
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-03.png
new file mode 100755
index 00000000..12662032
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-04.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-04.png
new file mode 100755
index 00000000..6ec00332
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-04.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-05.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-05.png
new file mode 100755
index 00000000..3b3b59e6
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-05.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-06.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-06.png
new file mode 100755
index 00000000..51f405a5
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-06.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-07.png b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-07.png
new file mode 100755
index 00000000..8f4b25c9
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-07.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-01.png
new file mode 100755
index 00000000..5bd32052
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-02.png
new file mode 100755
index 00000000..9a88f40d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-01.png
new file mode 100755
index 00000000..3ccfa5d6
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-02.png
new file mode 100755
index 00000000..f769d3d7
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-03.png
new file mode 100755
index 00000000..1e898080
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-01.png b/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-01.png
new file mode 100755
index 00000000..5c96c413
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-01.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-02.png b/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-02.png
new file mode 100755
index 00000000..ff836f14
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-02.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-03.png b/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-03.png
new file mode 100755
index 00000000..b261dea8
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/simultan-kontrast-03.png differ
diff --git a/src/presentations/screendesign/farben/images/kontraste/uebersicht-01.png b/src/presentations/screendesign/farben/images/kontraste/uebersicht-01.png
new file mode 100755
index 00000000..90f8876e
Binary files /dev/null and b/src/presentations/screendesign/farben/images/kontraste/uebersicht-01.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-01.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-01.png
new file mode 100644
index 00000000..45104e22
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-01.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-02.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-02.png
new file mode 100644
index 00000000..f2eda554
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-02.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-03.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-03.png
new file mode 100644
index 00000000..023430d6
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-03.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-04.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-04.png
new file mode 100644
index 00000000..7dda2d09
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-04.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-05.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-05.png
new file mode 100644
index 00000000..d57c2cc5
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-05.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-06.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-06.png
new file mode 100644
index 00000000..942146c9
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-06.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-07.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-07.png
new file mode 100644
index 00000000..26334aa0
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-07.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-08.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-08.png
new file mode 100644
index 00000000..74c9c5ab
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-08.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-09.png b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-09.png
new file mode 100644
index 00000000..20ca8b00
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-09.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/fernwirkung-01.png b/src/presentations/screendesign/farben/images/lesbarkeit/fernwirkung-01.png
new file mode 100644
index 00000000..6ee5326d
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/fernwirkung-01.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/flimmern-01.png b/src/presentations/screendesign/farben/images/lesbarkeit/flimmern-01.png
new file mode 100644
index 00000000..607af690
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/flimmern-01.png differ
diff --git a/src/presentations/screendesign/farben/images/lesbarkeit/nahwirkung-01.png b/src/presentations/screendesign/farben/images/lesbarkeit/nahwirkung-01.png
new file mode 100644
index 00000000..b1c31efc
Binary files /dev/null and b/src/presentations/screendesign/farben/images/lesbarkeit/nahwirkung-01.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/ebr-01.png b/src/presentations/screendesign/farben/images/orientierung/ebr-01.png
new file mode 100644
index 00000000..f6494862
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/ebr-01.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/ebr-02.png b/src/presentations/screendesign/farben/images/orientierung/ebr-02.png
new file mode 100644
index 00000000..931faafe
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/ebr-02.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/ebr-03.png b/src/presentations/screendesign/farben/images/orientierung/ebr-03.png
new file mode 100644
index 00000000..4a841e91
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/ebr-03.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/ebr-04.png b/src/presentations/screendesign/farben/images/orientierung/ebr-04.png
new file mode 100644
index 00000000..fca73074
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/ebr-04.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/farbstrahl-01.png b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-01.png
new file mode 100644
index 00000000..335f5c27
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-01.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/farbstrahl-02.png b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-02.png
new file mode 100644
index 00000000..811e4060
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-02.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/farbstrahl-03.png b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-03.png
new file mode 100644
index 00000000..fdb4b9e2
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-03.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/farbstrahl-04.png b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-04.png
new file mode 100644
index 00000000..a32cf0ba
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/farbstrahl-04.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-01.png b/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-01.png
new file mode 100644
index 00000000..cd07310e
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-01.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-02.png b/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-02.png
new file mode 100644
index 00000000..7ab40a5f
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-02.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-03.png b/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-03.png
new file mode 100644
index 00000000..a3858d38
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/green-peace-energy-03.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/kabel-01.png b/src/presentations/screendesign/farben/images/orientierung/kabel-01.png
new file mode 100644
index 00000000..bc27a8e3
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/kabel-01.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/koeln-fahrplan-01.png b/src/presentations/screendesign/farben/images/orientierung/koeln-fahrplan-01.png
new file mode 100644
index 00000000..b8bebe57
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/koeln-fahrplan-01.png differ
diff --git a/src/presentations/screendesign/farben/images/orientierung/regeln-01.png b/src/presentations/screendesign/farben/images/orientierung/regeln-01.png
new file mode 100644
index 00000000..dc1f295e
Binary files /dev/null and b/src/presentations/screendesign/farben/images/orientierung/regeln-01.png differ
diff --git a/src/presentations/screendesign/farben/images/outro/adobe-color.png b/src/presentations/screendesign/farben/images/outro/adobe-color.png
new file mode 100644
index 00000000..2e7687b1
Binary files /dev/null and b/src/presentations/screendesign/farben/images/outro/adobe-color.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-01.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-01.png
new file mode 100644
index 00000000..4ffc1680
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-01.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-02.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-02.png
new file mode 100644
index 00000000..797716ea
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-02.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-03.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-03.png
new file mode 100644
index 00000000..ab2e4416
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-03.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-04.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-04.png
new file mode 100644
index 00000000..2d2a82ae
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-04.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-05.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-05.png
new file mode 100644
index 00000000..30ec59d8
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-05.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-06.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-06.png
new file mode 100644
index 00000000..e425d096
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-06.png differ
diff --git a/src/presentations/screendesign/farben/images/strukturierung/strukturieren-07.png b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-07.png
new file mode 100644
index 00000000..41c66828
Binary files /dev/null and b/src/presentations/screendesign/farben/images/strukturierung/strukturieren-07.png differ
diff --git a/src/presentations/screendesign/farben/index.md b/src/presentations/screendesign/farben/index.md
new file mode 100755
index 00000000..5bedd4ba
--- /dev/null
+++ b/src/presentations/screendesign/farben/index.md
@@ -0,0 +1,7 @@
+---
+title: Farben (DONE)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/figur-und-grund/000-intro.md b/src/presentations/screendesign/figur-und-grund/000-intro.md
new file mode 100755
index 00000000..f96019cf
--- /dev/null
+++ b/src/presentations/screendesign/figur-und-grund/000-intro.md
@@ -0,0 +1,14 @@
+---
+title: Figur und Grund
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
Kinder können schon im ersten Lebensjahr die Grundelemente unterscheiden. "}' %}
+
+{% screenshot "./images/traffic-sign.png", '{"transition":"fade", "classes":"screenshot no-shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/formen-03.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/formen-04.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/formen-05.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/formen-06.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/formen-07.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/newspaper-01.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/newspaper-02.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/mondrian-01.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":"Piet Mondrian - Komposition mit Rot, Gelb, Blau und Schwarz, 1921"}' %}
+
+{% screenshot "./images/abstrakt-01.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/abstrakt-02.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/abstrakt-03.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/abstrakt-04.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/abstrakt-05.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/abstrakt-06.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/abstrakt-07.png", '{"transition":"fade", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+
+
+{% screenshot "./images/vase-gesicht-01.png", '{"transition":"fade", "classes":"shadow", "width":"auto", "bu":""}' %}
diff --git a/src/presentations/screendesign/flaeche-und-form/9999-outro.md b/src/presentations/screendesign/flaeche-und-form/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/flaeche-und-form/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-01.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-01.png
new file mode 100644
index 00000000..ba172a54
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-01.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-02.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-02.png
new file mode 100644
index 00000000..4b8dbdcf
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-02.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-03.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-03.png
new file mode 100644
index 00000000..7ea0eeec
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-03.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-04.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-04.png
new file mode 100644
index 00000000..b747a44d
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-04.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-05.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-05.png
new file mode 100644
index 00000000..91b37e54
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-05.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-06.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-06.png
new file mode 100644
index 00000000..da7cf143
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-06.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/abstrakt-07.png b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-07.png
new file mode 100644
index 00000000..29cca278
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/abstrakt-07.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-01.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-01.png
new file mode 100644
index 00000000..bae7be4b
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-01.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-02.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-02.png
new file mode 100644
index 00000000..fb4c33af
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-02.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-03.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-03.png
new file mode 100644
index 00000000..ef3fd973
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-03.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-04.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-04.png
new file mode 100644
index 00000000..435e84c9
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-04.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-05.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-05.png
new file mode 100644
index 00000000..d34c325c
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-05.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-06.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-06.png
new file mode 100644
index 00000000..e4239d76
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-06.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-07.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-07.png
new file mode 100644
index 00000000..b456d3c5
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-07.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-08.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-08.png
new file mode 100644
index 00000000..400ebaff
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-08.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-09.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-09.png
new file mode 100644
index 00000000..935af83e
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-09.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/flaeche-10.png b/src/presentations/screendesign/flaeche-und-form/images/flaeche-10.png
new file mode 100644
index 00000000..6d5542e6
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/flaeche-10.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-01.png b/src/presentations/screendesign/flaeche-und-form/images/formen-01.png
new file mode 100644
index 00000000..fa6471a9
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-01.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-02.png b/src/presentations/screendesign/flaeche-und-form/images/formen-02.png
new file mode 100644
index 00000000..f2179873
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-02.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-03.png b/src/presentations/screendesign/flaeche-und-form/images/formen-03.png
new file mode 100644
index 00000000..504bca83
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-03.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-04.png b/src/presentations/screendesign/flaeche-und-form/images/formen-04.png
new file mode 100644
index 00000000..48166ce2
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-04.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-05.png b/src/presentations/screendesign/flaeche-und-form/images/formen-05.png
new file mode 100644
index 00000000..3b9c5496
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-05.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-06.png b/src/presentations/screendesign/flaeche-und-form/images/formen-06.png
new file mode 100644
index 00000000..5356d8f6
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-06.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/formen-07.png b/src/presentations/screendesign/flaeche-und-form/images/formen-07.png
new file mode 100644
index 00000000..1ad86040
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/formen-07.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/mondrian-01.png b/src/presentations/screendesign/flaeche-und-form/images/mondrian-01.png
new file mode 100644
index 00000000..f829b221
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/mondrian-01.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/newspaper-01.png b/src/presentations/screendesign/flaeche-und-form/images/newspaper-01.png
new file mode 100644
index 00000000..d94e3a61
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/newspaper-01.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/newspaper-02.png b/src/presentations/screendesign/flaeche-und-form/images/newspaper-02.png
new file mode 100644
index 00000000..ae20ed39
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/newspaper-02.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/traffic-sign.png b/src/presentations/screendesign/flaeche-und-form/images/traffic-sign.png
new file mode 100755
index 00000000..04ed440c
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/traffic-sign.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/images/vase-gesicht-01.png b/src/presentations/screendesign/flaeche-und-form/images/vase-gesicht-01.png
new file mode 100644
index 00000000..0b8e740a
Binary files /dev/null and b/src/presentations/screendesign/flaeche-und-form/images/vase-gesicht-01.png differ
diff --git a/src/presentations/screendesign/flaeche-und-form/index.md b/src/presentations/screendesign/flaeche-und-form/index.md
new file mode 100755
index 00000000..041901e6
--- /dev/null
+++ b/src/presentations/screendesign/flaeche-und-form/index.md
@@ -0,0 +1,7 @@
+---
+title: Fläche & Form (DONE)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/flow-and-transition/000-intro.md b/src/presentations/screendesign/flow-and-transition/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/flow-and-transition/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/flow-and-transition/9999-outro.md b/src/presentations/screendesign/flow-and-transition/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/flow-and-transition/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/flow-and-transition/index.md b/src/presentations/screendesign/flow-and-transition/index.md
new file mode 100755
index 00000000..4b9ff74c
--- /dev/null
+++ b/src/presentations/screendesign/flow-and-transition/index.md
@@ -0,0 +1,7 @@
+---
+title: Flow & Transistion (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/gestaltgesetze/000-intro.md b/src/presentations/screendesign/gestaltgesetze/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/gestaltgesetze/010-cite.md b/src/presentations/screendesign/gestaltgesetze/010-cite.md
new file mode 100755
index 00000000..799d130e
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/010-cite.md
@@ -0,0 +1,8 @@
+---
+title: Cite
+layout: presentation.11ty.js
+slideClasses: cite
+author: Max Mustermann, Beispiel
+---
+
+Hier wird ein Zitat hübsch angezeigt.
diff --git a/src/presentations/screendesign/gestaltgesetze/020-watzlawick.md b/src/presentations/screendesign/gestaltgesetze/020-watzlawick.md
new file mode 100755
index 00000000..d8b3df86
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/020-watzlawick.md
@@ -0,0 +1,11 @@
+---
+title: Cite with Image
+layout: presentation.11ty.js
+slideClasses: cite
+img: paul
+author: Max Mustermann, Beispiel
+status: ok
+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."
+---
+
+Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
diff --git a/src/presentations/screendesign/gestaltgesetze/040-bilder-wo-es-voll-ist.md b/src/presentations/screendesign/gestaltgesetze/040-bilder-wo-es-voll-ist.md
new file mode 100755
index 00000000..4d79eba4
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/040-bilder-wo-es-voll-ist.md
@@ -0,0 +1,55 @@
+---
+title: Bilder wo et voll ist
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
diff --git a/src/presentations/screendesign/gestaltgesetze/060-aufmerksamkeitstest.md b/src/presentations/screendesign/gestaltgesetze/060-aufmerksamkeitstest.md
new file mode 100755
index 00000000..5a386555
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/060-aufmerksamkeitstest.md
@@ -0,0 +1,15 @@
+---
+title: Aufmerksamkeitstest
+layout: presentation.11ty.js
+slideClasses: video
+status: ok
+---
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
diff --git a/src/presentations/screendesign/gestaltgesetze/100-orientierung.md b/src/presentations/screendesign/gestaltgesetze/100-orientierung.md
new file mode 100755
index 00000000..3f032ae4
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/100-orientierung.md
@@ -0,0 +1,9 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: statement
+status: ok
+transition: zoom
+---
+
+ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
diff --git a/src/presentations/screendesign/gestaltgesetze/110-orientierung-karte.md b/src/presentations/screendesign/gestaltgesetze/110-orientierung-karte.md
new file mode 100755
index 00000000..3785e55f
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/110-orientierung-karte.md
@@ -0,0 +1,38 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: image
+status: ok
+transition: none
+---
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/gestaltgesetze/330-lindgaard.md b/src/presentations/screendesign/gestaltgesetze/330-lindgaard.md
new file mode 100755
index 00000000..7c815821
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/330-lindgaard.md
@@ -0,0 +1,11 @@
+---
+title: Gitte Lindgaard
+layout: presentation.11ty.js
+slideClasses: shout
+author: Gitte Lindgaard, Psychologin
+src: "Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press)."
+status: ok
+info: "Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression."
+---
+
+Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/screendesign/gestaltgesetze/9999-outro.md b/src/presentations/screendesign/gestaltgesetze/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/gestaltgesetze/images/FAZ_neu_S1_gross-570.jpg b/src/presentations/screendesign/gestaltgesetze/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/amazon.jpg b/src/presentations/screendesign/gestaltgesetze/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/amazon.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/bild-titel.jpg b/src/presentations/screendesign/gestaltgesetze/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/bild-titel.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/src/presentations/screendesign/gestaltgesetze/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/droppedImage-598.pdf.jpg b/src/presentations/screendesign/gestaltgesetze/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/droppedImage-598.pdf.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/greece-chalcis.jpg b/src/presentations/screendesign/gestaltgesetze/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/greece-chalcis.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/src/presentations/screendesign/gestaltgesetze/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/src/presentations/screendesign/gestaltgesetze/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/kronen-zeitung.jpg b/src/presentations/screendesign/gestaltgesetze/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/kronen-zeitung.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/lingscars.jpg b/src/presentations/screendesign/gestaltgesetze/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/lingscars.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/lueneburger-zeitung-eonwerbung.jpg b/src/presentations/screendesign/gestaltgesetze/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/map-cologne.jpg b/src/presentations/screendesign/gestaltgesetze/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/map-cologne.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/map-cologne2.jpg b/src/presentations/screendesign/gestaltgesetze/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/map-cologne2.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/messy-website.jpg b/src/presentations/screendesign/gestaltgesetze/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/messy-website.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/pasted-image-697.png.jpg b/src/presentations/screendesign/gestaltgesetze/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/pasted-image-697.png.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/paul.jpg b/src/presentations/screendesign/gestaltgesetze/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/paul.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/quelle.pdf.jpg b/src/presentations/screendesign/gestaltgesetze/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/quelle.pdf.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/reduktion-bsp.jpg b/src/presentations/screendesign/gestaltgesetze/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/reduktion-bsp.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/t3n-magazin.jpg b/src/presentations/screendesign/gestaltgesetze/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/t3n-magazin.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/tagesschau.jpg b/src/presentations/screendesign/gestaltgesetze/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/tagesschau.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/time-square.jpg.jpg b/src/presentations/screendesign/gestaltgesetze/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/time-square.jpg.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/tokyo-shinjuku.jpg b/src/presentations/screendesign/gestaltgesetze/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/tokyo-shinjuku.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/tunnel7.jpg b/src/presentations/screendesign/gestaltgesetze/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/tunnel7.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/yale-art.jpg b/src/presentations/screendesign/gestaltgesetze/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/yale-art.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/images/zdf.jpg b/src/presentations/screendesign/gestaltgesetze/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/src/presentations/screendesign/gestaltgesetze/images/zdf.jpg differ
diff --git a/src/presentations/screendesign/gestaltgesetze/index.md b/src/presentations/screendesign/gestaltgesetze/index.md
new file mode 100755
index 00000000..e88080b7
--- /dev/null
+++ b/src/presentations/screendesign/gestaltgesetze/index.md
@@ -0,0 +1,7 @@
+---
+title: Gestaltgesetze (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/interface-inventar/000-intro.md b/src/presentations/screendesign/interface-inventar/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/interface-inventar/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/interface-inventar/010-bespiele.md b/src/presentations/screendesign/interface-inventar/010-bespiele.md
new file mode 100755
index 00000000..34534c8c
--- /dev/null
+++ b/src/presentations/screendesign/interface-inventar/010-bespiele.md
@@ -0,0 +1,60 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: images
+transition: zoom
+---
+
+
+{% interlude "Interface Inventar aufbauen und visualisieren"%}
+
+
+
+
+ {% fragment '
Design Manual
' %}
+ {% fragment '
Styleguide
' %}
+ {% fragment '
Pattern Lab
' %}
+ {% fragment '
UI Patterns
' %}
+ {% fragment '
Living Styleguide
' %}
+
+
+ styleguides.io
+
+
+
+
+{% statement "Konsistenz", "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." %}
+
+
+
+
+
Ziele
+ {% fragment '
Konsistente GUI sicherstellen
' %}
+ {% fragment '
Werkzeug für Designer und Entwickler
' %}
+ {% fragment '
Systematik und Grundgedanken des Gestaltungskonzept abbilden und erklären
' %}
+
+
+
+
+
+
+
+
Anforderungen
+ {% fragment '
Welchen Anforderungen muss eine Design Dokumentation gerecht werden?
Behavior Flow, Transition, Microinteraction, Reaktion auf Viewports
' %}
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/interface-inventar/9999-outro.md b/src/presentations/screendesign/interface-inventar/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/interface-inventar/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/interface-inventar/images/farbe/farbe-01.png b/src/presentations/screendesign/interface-inventar/images/farbe/farbe-01.png
new file mode 100644
index 00000000..01511e37
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/farbe/farbe-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/farbe/farbe-02.png b/src/presentations/screendesign/interface-inventar/images/farbe/farbe-02.png
new file mode 100755
index 00000000..42801cd0
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/farbe/farbe-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/form-space/space-01.png b/src/presentations/screendesign/interface-inventar/images/form-space/space-01.png
new file mode 100755
index 00000000..1d7754f2
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/form-space/space-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/form-space/space-02.png b/src/presentations/screendesign/interface-inventar/images/form-space/space-02.png
new file mode 100755
index 00000000..ebd100ac
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/form-space/space-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/gestaltungsziel/firefox-design-values.png b/src/presentations/screendesign/interface-inventar/images/gestaltungsziel/firefox-design-values.png
new file mode 100755
index 00000000..b5b61e82
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/gestaltungsziel/firefox-design-values.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-01.png b/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-01.png
new file mode 100644
index 00000000..e2176f0f
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-02.png b/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-02.png
new file mode 100644
index 00000000..cd7142f0
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-03.png b/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-03.png
new file mode 100644
index 00000000..2ad50683
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/interaktion/interaktion-03.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/media/media-01.png b/src/presentations/screendesign/interface-inventar/images/media/media-01.png
new file mode 100644
index 00000000..670aa4e0
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/media/media-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/media/media-02.png b/src/presentations/screendesign/interface-inventar/images/media/media-02.png
new file mode 100755
index 00000000..f5995cfb
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/media/media-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/media/media-03.png b/src/presentations/screendesign/interface-inventar/images/media/media-03.png
new file mode 100755
index 00000000..554c5978
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/media/media-03.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-01.png b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-01.png
new file mode 100755
index 00000000..7b8b73ed
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-02.png b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-02.png
new file mode 100755
index 00000000..463df785
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-03.png b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-03.png
new file mode 100755
index 00000000..7857cbb5
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-03.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-04.png b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-04.png
new file mode 100755
index 00000000..8cf839b0
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-04.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-05.png b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-05.png
new file mode 100644
index 00000000..d4497bed
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-05.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-06.jpg b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-06.jpg
new file mode 100755
index 00000000..480cb5bd
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-06.jpg differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-07.jpg b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-07.jpg
new file mode 100755
index 00000000..3343ddc8
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-07.jpg differ
diff --git a/src/presentations/screendesign/interface-inventar/images/struktur/struktur-08.jpg b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-08.jpg
new file mode 100755
index 00000000..0fe0b580
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/struktur/struktur-08.jpg differ
diff --git a/src/presentations/screendesign/interface-inventar/images/typo/typo-01.png b/src/presentations/screendesign/interface-inventar/images/typo/typo-01.png
new file mode 100644
index 00000000..070667bc
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/typo/typo-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/typo/typo-02.png b/src/presentations/screendesign/interface-inventar/images/typo/typo-02.png
new file mode 100644
index 00000000..d7138528
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/typo/typo-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/typo/typo-03.png b/src/presentations/screendesign/interface-inventar/images/typo/typo-03.png
new file mode 100755
index 00000000..c298c2ca
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/typo/typo-03.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/website-01.png b/src/presentations/screendesign/interface-inventar/images/website-01.png
new file mode 100755
index 00000000..109d8d18
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/website-01.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/website-02.png b/src/presentations/screendesign/interface-inventar/images/website-02.png
new file mode 100755
index 00000000..c492ffe2
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/website-02.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/website-03.png b/src/presentations/screendesign/interface-inventar/images/website-03.png
new file mode 100755
index 00000000..c3da1885
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/website-03.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/website-04.png b/src/presentations/screendesign/interface-inventar/images/website-04.png
new file mode 100755
index 00000000..0a2edef1
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/website-04.png differ
diff --git a/src/presentations/screendesign/interface-inventar/images/website-05.png b/src/presentations/screendesign/interface-inventar/images/website-05.png
new file mode 100755
index 00000000..2ee42571
Binary files /dev/null and b/src/presentations/screendesign/interface-inventar/images/website-05.png differ
diff --git a/src/presentations/screendesign/interface-inventar/index.md b/src/presentations/screendesign/interface-inventar/index.md
new file mode 100755
index 00000000..5376c5e1
--- /dev/null
+++ b/src/presentations/screendesign/interface-inventar/index.md
@@ -0,0 +1,7 @@
+---
+title: Interface Inventar aufbauen und dokumentieren (DONE)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/layout/000-intro.md b/src/presentations/screendesign/layout/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/layout/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/layout/010-cite.md b/src/presentations/screendesign/layout/010-cite.md
new file mode 100755
index 00000000..799d130e
--- /dev/null
+++ b/src/presentations/screendesign/layout/010-cite.md
@@ -0,0 +1,8 @@
+---
+title: Cite
+layout: presentation.11ty.js
+slideClasses: cite
+author: Max Mustermann, Beispiel
+---
+
+Hier wird ein Zitat hübsch angezeigt.
diff --git a/src/presentations/screendesign/layout/020-watzlawick.md b/src/presentations/screendesign/layout/020-watzlawick.md
new file mode 100755
index 00000000..d8b3df86
--- /dev/null
+++ b/src/presentations/screendesign/layout/020-watzlawick.md
@@ -0,0 +1,11 @@
+---
+title: Cite with Image
+layout: presentation.11ty.js
+slideClasses: cite
+img: paul
+author: Max Mustermann, Beispiel
+status: ok
+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."
+---
+
+Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
diff --git a/src/presentations/screendesign/layout/040-bilder-wo-es-voll-ist.md b/src/presentations/screendesign/layout/040-bilder-wo-es-voll-ist.md
new file mode 100755
index 00000000..4d79eba4
--- /dev/null
+++ b/src/presentations/screendesign/layout/040-bilder-wo-es-voll-ist.md
@@ -0,0 +1,55 @@
+---
+title: Bilder wo et voll ist
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
diff --git a/src/presentations/screendesign/layout/060-aufmerksamkeitstest.md b/src/presentations/screendesign/layout/060-aufmerksamkeitstest.md
new file mode 100755
index 00000000..5a386555
--- /dev/null
+++ b/src/presentations/screendesign/layout/060-aufmerksamkeitstest.md
@@ -0,0 +1,15 @@
+---
+title: Aufmerksamkeitstest
+layout: presentation.11ty.js
+slideClasses: video
+status: ok
+---
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
diff --git a/src/presentations/screendesign/layout/100-orientierung.md b/src/presentations/screendesign/layout/100-orientierung.md
new file mode 100755
index 00000000..3f032ae4
--- /dev/null
+++ b/src/presentations/screendesign/layout/100-orientierung.md
@@ -0,0 +1,9 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: statement
+status: ok
+transition: zoom
+---
+
+ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
diff --git a/src/presentations/screendesign/layout/110-orientierung-karte.md b/src/presentations/screendesign/layout/110-orientierung-karte.md
new file mode 100755
index 00000000..3785e55f
--- /dev/null
+++ b/src/presentations/screendesign/layout/110-orientierung-karte.md
@@ -0,0 +1,38 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: image
+status: ok
+transition: none
+---
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/layout/330-lindgaard.md b/src/presentations/screendesign/layout/330-lindgaard.md
new file mode 100755
index 00000000..7c815821
--- /dev/null
+++ b/src/presentations/screendesign/layout/330-lindgaard.md
@@ -0,0 +1,11 @@
+---
+title: Gitte Lindgaard
+layout: presentation.11ty.js
+slideClasses: shout
+author: Gitte Lindgaard, Psychologin
+src: "Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press)."
+status: ok
+info: "Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression."
+---
+
+Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/screendesign/layout/9999-outro.md b/src/presentations/screendesign/layout/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/layout/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/layout/images/FAZ_neu_S1_gross-570.jpg b/src/presentations/screendesign/layout/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/src/presentations/screendesign/layout/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/src/presentations/screendesign/layout/images/amazon.jpg b/src/presentations/screendesign/layout/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/src/presentations/screendesign/layout/images/amazon.jpg differ
diff --git a/src/presentations/screendesign/layout/images/bild-titel.jpg b/src/presentations/screendesign/layout/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/src/presentations/screendesign/layout/images/bild-titel.jpg differ
diff --git a/src/presentations/screendesign/layout/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/src/presentations/screendesign/layout/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/src/presentations/screendesign/layout/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/layout/images/droppedImage-598.pdf.jpg b/src/presentations/screendesign/layout/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/src/presentations/screendesign/layout/images/droppedImage-598.pdf.jpg differ
diff --git a/src/presentations/screendesign/layout/images/greece-chalcis.jpg b/src/presentations/screendesign/layout/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/src/presentations/screendesign/layout/images/greece-chalcis.jpg differ
diff --git a/src/presentations/screendesign/layout/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/src/presentations/screendesign/layout/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/src/presentations/screendesign/layout/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/layout/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/src/presentations/screendesign/layout/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/src/presentations/screendesign/layout/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/layout/images/kronen-zeitung.jpg b/src/presentations/screendesign/layout/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/src/presentations/screendesign/layout/images/kronen-zeitung.jpg differ
diff --git a/src/presentations/screendesign/layout/images/lingscars.jpg b/src/presentations/screendesign/layout/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/src/presentations/screendesign/layout/images/lingscars.jpg differ
diff --git a/src/presentations/screendesign/layout/images/lueneburger-zeitung-eonwerbung.jpg b/src/presentations/screendesign/layout/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/src/presentations/screendesign/layout/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/src/presentations/screendesign/layout/images/map-cologne.jpg b/src/presentations/screendesign/layout/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/src/presentations/screendesign/layout/images/map-cologne.jpg differ
diff --git a/src/presentations/screendesign/layout/images/map-cologne2.jpg b/src/presentations/screendesign/layout/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/src/presentations/screendesign/layout/images/map-cologne2.jpg differ
diff --git a/src/presentations/screendesign/layout/images/messy-website.jpg b/src/presentations/screendesign/layout/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/src/presentations/screendesign/layout/images/messy-website.jpg differ
diff --git a/src/presentations/screendesign/layout/images/pasted-image-697.png.jpg b/src/presentations/screendesign/layout/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/src/presentations/screendesign/layout/images/pasted-image-697.png.jpg differ
diff --git a/src/presentations/screendesign/layout/images/paul.jpg b/src/presentations/screendesign/layout/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/src/presentations/screendesign/layout/images/paul.jpg differ
diff --git a/src/presentations/screendesign/layout/images/quelle.pdf.jpg b/src/presentations/screendesign/layout/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/src/presentations/screendesign/layout/images/quelle.pdf.jpg differ
diff --git a/src/presentations/screendesign/layout/images/reduktion-bsp.jpg b/src/presentations/screendesign/layout/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/src/presentations/screendesign/layout/images/reduktion-bsp.jpg differ
diff --git a/src/presentations/screendesign/layout/images/t3n-magazin.jpg b/src/presentations/screendesign/layout/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/src/presentations/screendesign/layout/images/t3n-magazin.jpg differ
diff --git a/src/presentations/screendesign/layout/images/tagesschau.jpg b/src/presentations/screendesign/layout/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/src/presentations/screendesign/layout/images/tagesschau.jpg differ
diff --git a/src/presentations/screendesign/layout/images/time-square.jpg.jpg b/src/presentations/screendesign/layout/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/screendesign/layout/images/time-square.jpg.jpg differ
diff --git a/src/presentations/screendesign/layout/images/tokyo-shinjuku.jpg b/src/presentations/screendesign/layout/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/src/presentations/screendesign/layout/images/tokyo-shinjuku.jpg differ
diff --git a/src/presentations/screendesign/layout/images/tunnel7.jpg b/src/presentations/screendesign/layout/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/src/presentations/screendesign/layout/images/tunnel7.jpg differ
diff --git a/src/presentations/screendesign/layout/images/yale-art.jpg b/src/presentations/screendesign/layout/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/src/presentations/screendesign/layout/images/yale-art.jpg differ
diff --git a/src/presentations/screendesign/layout/images/zdf.jpg b/src/presentations/screendesign/layout/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/src/presentations/screendesign/layout/images/zdf.jpg differ
diff --git a/src/presentations/screendesign/layout/index.md b/src/presentations/screendesign/layout/index.md
new file mode 100755
index 00000000..5af8044d
--- /dev/null
+++ b/src/presentations/screendesign/layout/index.md
@@ -0,0 +1,7 @@
+---
+title: Layout (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/linie/images/040-Linie.004.jpeg b/src/presentations/screendesign/linie/images/040-Linie.004.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.005.jpeg b/src/presentations/screendesign/linie/images/040-Linie.005.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.006.jpeg b/src/presentations/screendesign/linie/images/040-Linie.006.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.007.jpeg b/src/presentations/screendesign/linie/images/040-Linie.007.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.008.jpeg b/src/presentations/screendesign/linie/images/040-Linie.008.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.009.jpeg b/src/presentations/screendesign/linie/images/040-Linie.009.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.010.jpeg b/src/presentations/screendesign/linie/images/040-Linie.010.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.011.jpeg b/src/presentations/screendesign/linie/images/040-Linie.011.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.012.jpeg b/src/presentations/screendesign/linie/images/040-Linie.012.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.013.jpeg b/src/presentations/screendesign/linie/images/040-Linie.013.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.014.jpeg b/src/presentations/screendesign/linie/images/040-Linie.014.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.015.jpeg b/src/presentations/screendesign/linie/images/040-Linie.015.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.016.jpeg b/src/presentations/screendesign/linie/images/040-Linie.016.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.017.jpeg b/src/presentations/screendesign/linie/images/040-Linie.017.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.018.jpeg b/src/presentations/screendesign/linie/images/040-Linie.018.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.019.jpeg b/src/presentations/screendesign/linie/images/040-Linie.019.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/images/040-Linie.020.jpeg b/src/presentations/screendesign/linie/images/040-Linie.020.jpeg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/linie/index.md b/src/presentations/screendesign/linie/index.md
index a00e509f..afbec7e7 100755
--- a/src/presentations/screendesign/linie/index.md
+++ b/src/presentations/screendesign/linie/index.md
@@ -1,5 +1,5 @@
---
-title: Die Linie
+title: Linie
layout: presentation.11ty.js
slideClasses: outro
transition: convex
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/000-intro.md b/src/presentations/screendesign/proportionen-und-abstaende/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/010-cite.md b/src/presentations/screendesign/proportionen-und-abstaende/010-cite.md
new file mode 100755
index 00000000..799d130e
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/010-cite.md
@@ -0,0 +1,8 @@
+---
+title: Cite
+layout: presentation.11ty.js
+slideClasses: cite
+author: Max Mustermann, Beispiel
+---
+
+Hier wird ein Zitat hübsch angezeigt.
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/020-watzlawick.md b/src/presentations/screendesign/proportionen-und-abstaende/020-watzlawick.md
new file mode 100755
index 00000000..d8b3df86
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/020-watzlawick.md
@@ -0,0 +1,11 @@
+---
+title: Cite with Image
+layout: presentation.11ty.js
+slideClasses: cite
+img: paul
+author: Max Mustermann, Beispiel
+status: ok
+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."
+---
+
+Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/040-bilder-wo-es-voll-ist.md b/src/presentations/screendesign/proportionen-und-abstaende/040-bilder-wo-es-voll-ist.md
new file mode 100755
index 00000000..4d79eba4
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/040-bilder-wo-es-voll-ist.md
@@ -0,0 +1,55 @@
+---
+title: Bilder wo et voll ist
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/060-aufmerksamkeitstest.md b/src/presentations/screendesign/proportionen-und-abstaende/060-aufmerksamkeitstest.md
new file mode 100755
index 00000000..5a386555
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/060-aufmerksamkeitstest.md
@@ -0,0 +1,15 @@
+---
+title: Aufmerksamkeitstest
+layout: presentation.11ty.js
+slideClasses: video
+status: ok
+---
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/100-orientierung.md b/src/presentations/screendesign/proportionen-und-abstaende/100-orientierung.md
new file mode 100755
index 00000000..3f032ae4
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/100-orientierung.md
@@ -0,0 +1,9 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: statement
+status: ok
+transition: zoom
+---
+
+ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/110-orientierung-karte.md b/src/presentations/screendesign/proportionen-und-abstaende/110-orientierung-karte.md
new file mode 100755
index 00000000..3785e55f
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/110-orientierung-karte.md
@@ -0,0 +1,38 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: image
+status: ok
+transition: none
+---
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/330-lindgaard.md b/src/presentations/screendesign/proportionen-und-abstaende/330-lindgaard.md
new file mode 100755
index 00000000..7c815821
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/330-lindgaard.md
@@ -0,0 +1,11 @@
+---
+title: Gitte Lindgaard
+layout: presentation.11ty.js
+slideClasses: shout
+author: Gitte Lindgaard, Psychologin
+src: "Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press)."
+status: ok
+info: "Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression."
+---
+
+Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/9999-outro.md b/src/presentations/screendesign/proportionen-und-abstaende/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/FAZ_neu_S1_gross-570.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/amazon.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/amazon.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/bild-titel.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/bild-titel.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/droppedImage-598.pdf.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/droppedImage-598.pdf.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/greece-chalcis.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/greece-chalcis.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/kronen-zeitung.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/kronen-zeitung.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/lingscars.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/lingscars.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/lueneburger-zeitung-eonwerbung.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/map-cologne.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/map-cologne.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/map-cologne2.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/map-cologne2.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/messy-website.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/messy-website.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/pasted-image-697.png.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/pasted-image-697.png.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/paul.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/paul.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/quelle.pdf.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/quelle.pdf.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/reduktion-bsp.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/reduktion-bsp.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/t3n-magazin.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/t3n-magazin.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/tagesschau.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/tagesschau.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/time-square.jpg.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/time-square.jpg.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/tokyo-shinjuku.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/tokyo-shinjuku.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/tunnel7.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/tunnel7.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/yale-art.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/yale-art.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/images/zdf.jpg b/src/presentations/screendesign/proportionen-und-abstaende/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/src/presentations/screendesign/proportionen-und-abstaende/images/zdf.jpg differ
diff --git a/src/presentations/screendesign/proportionen-und-abstaende/index.md b/src/presentations/screendesign/proportionen-und-abstaende/index.md
new file mode 100755
index 00000000..06282106
--- /dev/null
+++ b/src/presentations/screendesign/proportionen-und-abstaende/index.md
@@ -0,0 +1,7 @@
+---
+title: Proportionen und Abstände (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/punkt/index.md b/src/presentations/screendesign/punkt/index.md
index c48da647..76322f94 100755
--- a/src/presentations/screendesign/punkt/index.md
+++ b/src/presentations/screendesign/punkt/index.md
@@ -1,5 +1,5 @@
---
-title: Der Punkt
+title: Punkt
layout: presentation.11ty.js
slideClasses: outro
transition: convex
diff --git a/src/presentations/screendesign/raeumlichkeit/images/animation-1.png b/src/presentations/screendesign/raeumlichkeit/images/animation-1.png
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/animation-2.gif b/src/presentations/screendesign/raeumlichkeit/images/animation-2.gif
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/apple.jpg b/src/presentations/screendesign/raeumlichkeit/images/apple.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/arte.jpg b/src/presentations/screendesign/raeumlichkeit/images/arte.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/audi.jpg b/src/presentations/screendesign/raeumlichkeit/images/audi.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/fhd.jpg b/src/presentations/screendesign/raeumlichkeit/images/fhd.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/kalender.jpg b/src/presentations/screendesign/raeumlichkeit/images/kalender.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/malaga-3619271_1920.jpg b/src/presentations/screendesign/raeumlichkeit/images/malaga-3619271_1920.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/notice-1.jpg b/src/presentations/screendesign/raeumlichkeit/images/notice-1.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/notice-2.jpg b/src/presentations/screendesign/raeumlichkeit/images/notice-2.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-01.jpg b/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-01.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-02.jpg b/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-02.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-03.jpg b/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-03.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-04.jpg b/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-04.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-05.jpg b/src/presentations/screendesign/raeumlichkeit/images/playmobil-edit-05.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/visual-h.jpg b/src/presentations/screendesign/raeumlichkeit/images/visual-h.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/visual-hierarchy.jpg b/src/presentations/screendesign/raeumlichkeit/images/visual-hierarchy.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/wii.jpg b/src/presentations/screendesign/raeumlichkeit/images/wii.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/raeumlichkeit/images/zdf.jpg b/src/presentations/screendesign/raeumlichkeit/images/zdf.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/000-intro.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/010-cite.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/010-cite.md
new file mode 100755
index 00000000..799d130e
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/010-cite.md
@@ -0,0 +1,8 @@
+---
+title: Cite
+layout: presentation.11ty.js
+slideClasses: cite
+author: Max Mustermann, Beispiel
+---
+
+Hier wird ein Zitat hübsch angezeigt.
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-watzlawick.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-watzlawick.md
new file mode 100755
index 00000000..d8b3df86
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/020-watzlawick.md
@@ -0,0 +1,11 @@
+---
+title: Cite with Image
+layout: presentation.11ty.js
+slideClasses: cite
+img: paul
+author: Max Mustermann, Beispiel
+status: ok
+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."
+---
+
+Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/040-bilder-wo-es-voll-ist.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/040-bilder-wo-es-voll-ist.md
new file mode 100755
index 00000000..4d79eba4
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/040-bilder-wo-es-voll-ist.md
@@ -0,0 +1,55 @@
+---
+title: Bilder wo et voll ist
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/060-aufmerksamkeitstest.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/060-aufmerksamkeitstest.md
new file mode 100755
index 00000000..5a386555
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/060-aufmerksamkeitstest.md
@@ -0,0 +1,15 @@
+---
+title: Aufmerksamkeitstest
+layout: presentation.11ty.js
+slideClasses: video
+status: ok
+---
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/100-orientierung.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/100-orientierung.md
new file mode 100755
index 00000000..3f032ae4
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/100-orientierung.md
@@ -0,0 +1,9 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: statement
+status: ok
+transition: zoom
+---
+
+ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/110-orientierung-karte.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/110-orientierung-karte.md
new file mode 100755
index 00000000..3785e55f
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/110-orientierung-karte.md
@@ -0,0 +1,38 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: image
+status: ok
+transition: none
+---
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/330-lindgaard.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/330-lindgaard.md
new file mode 100755
index 00000000..7c815821
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/330-lindgaard.md
@@ -0,0 +1,11 @@
+---
+title: Gitte Lindgaard
+layout: presentation.11ty.js
+slideClasses: shout
+author: Gitte Lindgaard, Psychologin
+src: "Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press)."
+status: ok
+info: "Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression."
+---
+
+Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/9999-outro.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/FAZ_neu_S1_gross-570.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/amazon.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/amazon.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/bild-titel.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/bild-titel.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/droppedImage-598.pdf.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/droppedImage-598.pdf.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/greece-chalcis.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/greece-chalcis.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/kronen-zeitung.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/kronen-zeitung.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lingscars.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lingscars.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lueneburger-zeitung-eonwerbung.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne2.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/map-cologne2.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/messy-website.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/messy-website.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/pasted-image-697.png.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/pasted-image-697.png.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/paul.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/paul.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/quelle.pdf.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/quelle.pdf.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/reduktion-bsp.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/reduktion-bsp.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/t3n-magazin.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/t3n-magazin.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tagesschau.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tagesschau.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/time-square.jpg.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/time-square.jpg.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tokyo-shinjuku.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tokyo-shinjuku.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tunnel7.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/tunnel7.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/yale-art.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/yale-art.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/zdf.jpg b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/images/zdf.jpg differ
diff --git a/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.md b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.md
new file mode 100755
index 00000000..1903f6ea
--- /dev/null
+++ b/src/presentations/screendesign/semantisches-diff-axis-maps-moodboards/index.md
@@ -0,0 +1,7 @@
+---
+title: Semantisches Differential, Axis Maps und Moodboards (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/semiotik/images/audi-logo.jpg b/src/presentations/screendesign/semiotik/images/audi-logo.jpg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/semiotik/images/twitter-logo.png b/src/presentations/screendesign/semiotik/images/twitter-logo.png
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/semiotik/images/twitter-logo.svg b/src/presentations/screendesign/semiotik/images/twitter-logo.svg
old mode 100644
new mode 100755
diff --git a/src/presentations/screendesign/textsatz/000-intro.md b/src/presentations/screendesign/textsatz/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/textsatz/010-cite.md b/src/presentations/screendesign/textsatz/010-cite.md
new file mode 100755
index 00000000..799d130e
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/010-cite.md
@@ -0,0 +1,8 @@
+---
+title: Cite
+layout: presentation.11ty.js
+slideClasses: cite
+author: Max Mustermann, Beispiel
+---
+
+Hier wird ein Zitat hübsch angezeigt.
diff --git a/src/presentations/screendesign/textsatz/020-watzlawick.md b/src/presentations/screendesign/textsatz/020-watzlawick.md
new file mode 100755
index 00000000..d8b3df86
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/020-watzlawick.md
@@ -0,0 +1,11 @@
+---
+title: Cite with Image
+layout: presentation.11ty.js
+slideClasses: cite
+img: paul
+author: Max Mustermann, Beispiel
+status: ok
+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."
+---
+
+Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
diff --git a/src/presentations/screendesign/textsatz/040-bilder-wo-es-voll-ist.md b/src/presentations/screendesign/textsatz/040-bilder-wo-es-voll-ist.md
new file mode 100755
index 00000000..4d79eba4
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/040-bilder-wo-es-voll-ist.md
@@ -0,0 +1,55 @@
+---
+title: Bilder wo et voll ist
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
diff --git a/src/presentations/screendesign/textsatz/060-aufmerksamkeitstest.md b/src/presentations/screendesign/textsatz/060-aufmerksamkeitstest.md
new file mode 100755
index 00000000..5a386555
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/060-aufmerksamkeitstest.md
@@ -0,0 +1,15 @@
+---
+title: Aufmerksamkeitstest
+layout: presentation.11ty.js
+slideClasses: video
+status: ok
+---
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
diff --git a/src/presentations/screendesign/textsatz/100-orientierung.md b/src/presentations/screendesign/textsatz/100-orientierung.md
new file mode 100755
index 00000000..3f032ae4
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/100-orientierung.md
@@ -0,0 +1,9 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: statement
+status: ok
+transition: zoom
+---
+
+ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
diff --git a/src/presentations/screendesign/textsatz/110-orientierung-karte.md b/src/presentations/screendesign/textsatz/110-orientierung-karte.md
new file mode 100755
index 00000000..3785e55f
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/110-orientierung-karte.md
@@ -0,0 +1,38 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: image
+status: ok
+transition: none
+---
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/textsatz/330-lindgaard.md b/src/presentations/screendesign/textsatz/330-lindgaard.md
new file mode 100755
index 00000000..7c815821
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/330-lindgaard.md
@@ -0,0 +1,11 @@
+---
+title: Gitte Lindgaard
+layout: presentation.11ty.js
+slideClasses: shout
+author: Gitte Lindgaard, Psychologin
+src: "Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press)."
+status: ok
+info: "Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression."
+---
+
+Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/screendesign/textsatz/9999-outro.md b/src/presentations/screendesign/textsatz/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/textsatz/images/FAZ_neu_S1_gross-570.jpg b/src/presentations/screendesign/textsatz/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/amazon.jpg b/src/presentations/screendesign/textsatz/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/amazon.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/bild-titel.jpg b/src/presentations/screendesign/textsatz/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/bild-titel.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/src/presentations/screendesign/textsatz/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/droppedImage-598.pdf.jpg b/src/presentations/screendesign/textsatz/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/droppedImage-598.pdf.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/greece-chalcis.jpg b/src/presentations/screendesign/textsatz/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/greece-chalcis.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/src/presentations/screendesign/textsatz/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/src/presentations/screendesign/textsatz/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/kronen-zeitung.jpg b/src/presentations/screendesign/textsatz/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/kronen-zeitung.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/lingscars.jpg b/src/presentations/screendesign/textsatz/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/lingscars.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/lueneburger-zeitung-eonwerbung.jpg b/src/presentations/screendesign/textsatz/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/map-cologne.jpg b/src/presentations/screendesign/textsatz/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/map-cologne.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/map-cologne2.jpg b/src/presentations/screendesign/textsatz/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/map-cologne2.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/messy-website.jpg b/src/presentations/screendesign/textsatz/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/messy-website.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/pasted-image-697.png.jpg b/src/presentations/screendesign/textsatz/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/pasted-image-697.png.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/paul.jpg b/src/presentations/screendesign/textsatz/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/paul.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/quelle.pdf.jpg b/src/presentations/screendesign/textsatz/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/quelle.pdf.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/reduktion-bsp.jpg b/src/presentations/screendesign/textsatz/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/reduktion-bsp.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/t3n-magazin.jpg b/src/presentations/screendesign/textsatz/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/t3n-magazin.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/tagesschau.jpg b/src/presentations/screendesign/textsatz/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/tagesschau.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/time-square.jpg.jpg b/src/presentations/screendesign/textsatz/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/time-square.jpg.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/tokyo-shinjuku.jpg b/src/presentations/screendesign/textsatz/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/tokyo-shinjuku.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/tunnel7.jpg b/src/presentations/screendesign/textsatz/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/tunnel7.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/yale-art.jpg b/src/presentations/screendesign/textsatz/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/yale-art.jpg differ
diff --git a/src/presentations/screendesign/textsatz/images/zdf.jpg b/src/presentations/screendesign/textsatz/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/src/presentations/screendesign/textsatz/images/zdf.jpg differ
diff --git a/src/presentations/screendesign/textsatz/index.md b/src/presentations/screendesign/textsatz/index.md
new file mode 100755
index 00000000..92bebcd9
--- /dev/null
+++ b/src/presentations/screendesign/textsatz/index.md
@@ -0,0 +1,7 @@
+---
+title: Textsatz (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
diff --git a/src/presentations/screendesign/typographie/000-intro.md b/src/presentations/screendesign/typographie/000-intro.md
new file mode 100755
index 00000000..6205575a
--- /dev/null
+++ b/src/presentations/screendesign/typographie/000-intro.md
@@ -0,0 +1,13 @@
+---
+title: Wahrnehmungsarbeit
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+# Demo Präsentation
+## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/typographie/010-cite.md b/src/presentations/screendesign/typographie/010-cite.md
new file mode 100755
index 00000000..799d130e
--- /dev/null
+++ b/src/presentations/screendesign/typographie/010-cite.md
@@ -0,0 +1,8 @@
+---
+title: Cite
+layout: presentation.11ty.js
+slideClasses: cite
+author: Max Mustermann, Beispiel
+---
+
+Hier wird ein Zitat hübsch angezeigt.
diff --git a/src/presentations/screendesign/typographie/020-watzlawick.md b/src/presentations/screendesign/typographie/020-watzlawick.md
new file mode 100755
index 00000000..d8b3df86
--- /dev/null
+++ b/src/presentations/screendesign/typographie/020-watzlawick.md
@@ -0,0 +1,11 @@
+---
+title: Cite with Image
+layout: presentation.11ty.js
+slideClasses: cite
+img: paul
+author: Max Mustermann, Beispiel
+status: ok
+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."
+---
+
+Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.
diff --git a/src/presentations/screendesign/typographie/040-bilder-wo-es-voll-ist.md b/src/presentations/screendesign/typographie/040-bilder-wo-es-voll-ist.md
new file mode 100755
index 00000000..4d79eba4
--- /dev/null
+++ b/src/presentations/screendesign/typographie/040-bilder-wo-es-voll-ist.md
@@ -0,0 +1,55 @@
+---
+title: Bilder wo et voll ist
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+
+
+
+
+
diff --git a/src/presentations/screendesign/typographie/060-aufmerksamkeitstest.md b/src/presentations/screendesign/typographie/060-aufmerksamkeitstest.md
new file mode 100755
index 00000000..5a386555
--- /dev/null
+++ b/src/presentations/screendesign/typographie/060-aufmerksamkeitstest.md
@@ -0,0 +1,15 @@
+---
+title: Aufmerksamkeitstest
+layout: presentation.11ty.js
+slideClasses: video
+status: ok
+---
+
+
+
+
+
+
kleiner Aufmerksamkeitstest
+
+
+
diff --git a/src/presentations/screendesign/typographie/100-orientierung.md b/src/presentations/screendesign/typographie/100-orientierung.md
new file mode 100755
index 00000000..3f032ae4
--- /dev/null
+++ b/src/presentations/screendesign/typographie/100-orientierung.md
@@ -0,0 +1,9 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: statement
+status: ok
+transition: zoom
+---
+
+ist die handlungs- und bedeutungsbezogene, menschliche Sicht der Welt.
diff --git a/src/presentations/screendesign/typographie/110-orientierung-karte.md b/src/presentations/screendesign/typographie/110-orientierung-karte.md
new file mode 100755
index 00000000..3785e55f
--- /dev/null
+++ b/src/presentations/screendesign/typographie/110-orientierung-karte.md
@@ -0,0 +1,38 @@
+---
+title: Orientierung
+layout: presentation.11ty.js
+slideClasses: image
+status: ok
+transition: none
+---
+
+
+
+
Orientierung schaffen
+ aber wie?
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren: Unwichtiges weglassen
+
strukturieren: Muster bilden
+
hierarchisieren: Bezüge herstellen
+
+
+
+
+
+
+
+
Orientierung schaffen
+
+
reduzieren
+
strukturieren
+
hierarchisieren
+
+
+
\ No newline at end of file
diff --git a/src/presentations/screendesign/typographie/330-lindgaard.md b/src/presentations/screendesign/typographie/330-lindgaard.md
new file mode 100755
index 00000000..7c815821
--- /dev/null
+++ b/src/presentations/screendesign/typographie/330-lindgaard.md
@@ -0,0 +1,11 @@
+---
+title: Gitte Lindgaard
+layout: presentation.11ty.js
+slideClasses: shout
+author: Gitte Lindgaard, Psychologin
+src: "Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2005). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology (in Press)."
+status: ok
+info: "Three studies were conducted to ascertain how quickly people form an opinion about web page visual appeal and its relation to several design features. In the first study, 22 participants twice rated the visual appeal of web pages presented for 500msecs each. Thirty-one participants took part in the second study, which replicated the first, but participants also rated each web page on seven design dimensions. Visual appeal was found to be closely related to several design features.
Forty participants took part in study 3, which replicated studies 1 and 2, but employed a 50msec condition to allow comparisons between exposure times. Throughout, visual appeal ratings were highly correlated from one trial to the next as were the correlations between the 50msec and 500msec conditions.
Thus, visual appeal is assessed within 50msecs. These findings suggest that web designers have about 50msecs to make a good first impression."
+---
+
+Attention (web) designers: you have 50 milliseconds to make a good first impression!
diff --git a/src/presentations/screendesign/typographie/9999-outro.md b/src/presentations/screendesign/typographie/9999-outro.md
new file mode 100755
index 00000000..fecc5c6d
--- /dev/null
+++ b/src/presentations/screendesign/typographie/9999-outro.md
@@ -0,0 +1,6 @@
+---
+title: About Screendesign
+layout: presentation.11ty.js
+slideClasses: outro
+transition: convex
+---
diff --git a/src/presentations/screendesign/typographie/images/FAZ_neu_S1_gross-570.jpg b/src/presentations/screendesign/typographie/images/FAZ_neu_S1_gross-570.jpg
new file mode 100755
index 00000000..d2f96746
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/FAZ_neu_S1_gross-570.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/amazon.jpg b/src/presentations/screendesign/typographie/images/amazon.jpg
new file mode 100755
index 00000000..e28eedeb
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/amazon.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/bild-titel.jpg b/src/presentations/screendesign/typographie/images/bild-titel.jpg
new file mode 100755
index 00000000..1d1d40c3
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/bild-titel.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg b/src/presentations/screendesign/typographie/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg
new file mode 100755
index 00000000..b08e3e41
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/dan-freeman-G4E6PcOt4Ps-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/droppedImage-598.pdf.jpg b/src/presentations/screendesign/typographie/images/droppedImage-598.pdf.jpg
new file mode 100755
index 00000000..3638f01e
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/droppedImage-598.pdf.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/greece-chalcis.jpg b/src/presentations/screendesign/typographie/images/greece-chalcis.jpg
new file mode 100755
index 00000000..0f99cb06
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/greece-chalcis.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg b/src/presentations/screendesign/typographie/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg
new file mode 100755
index 00000000..862e36f8
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/iwona-castiello-d-antonio-dnMLdR814aA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg b/src/presentations/screendesign/typographie/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg
new file mode 100755
index 00000000..f26af0d5
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/juan-davila-P8PlK2nGwqA-unsplash.jpg.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/kronen-zeitung.jpg b/src/presentations/screendesign/typographie/images/kronen-zeitung.jpg
new file mode 100755
index 00000000..fa518ffa
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/kronen-zeitung.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/lingscars.jpg b/src/presentations/screendesign/typographie/images/lingscars.jpg
new file mode 100755
index 00000000..fe77606c
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/lingscars.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/lueneburger-zeitung-eonwerbung.jpg b/src/presentations/screendesign/typographie/images/lueneburger-zeitung-eonwerbung.jpg
new file mode 100755
index 00000000..99e59765
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/lueneburger-zeitung-eonwerbung.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/map-cologne.jpg b/src/presentations/screendesign/typographie/images/map-cologne.jpg
new file mode 100755
index 00000000..9dfcf618
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/map-cologne.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/map-cologne2.jpg b/src/presentations/screendesign/typographie/images/map-cologne2.jpg
new file mode 100755
index 00000000..311eaf1b
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/map-cologne2.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/messy-website.jpg b/src/presentations/screendesign/typographie/images/messy-website.jpg
new file mode 100755
index 00000000..68d01e54
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/messy-website.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/pasted-image-697.png.jpg b/src/presentations/screendesign/typographie/images/pasted-image-697.png.jpg
new file mode 100755
index 00000000..36452afa
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/pasted-image-697.png.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/paul.jpg b/src/presentations/screendesign/typographie/images/paul.jpg
new file mode 100755
index 00000000..7335fa28
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/paul.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/quelle.pdf.jpg b/src/presentations/screendesign/typographie/images/quelle.pdf.jpg
new file mode 100755
index 00000000..72b533c3
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/quelle.pdf.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/reduktion-bsp.jpg b/src/presentations/screendesign/typographie/images/reduktion-bsp.jpg
new file mode 100755
index 00000000..8831a98d
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/reduktion-bsp.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/t3n-magazin.jpg b/src/presentations/screendesign/typographie/images/t3n-magazin.jpg
new file mode 100755
index 00000000..081aaa0b
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/t3n-magazin.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/tagesschau.jpg b/src/presentations/screendesign/typographie/images/tagesschau.jpg
new file mode 100755
index 00000000..50e0aafd
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/tagesschau.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/time-square.jpg.jpg b/src/presentations/screendesign/typographie/images/time-square.jpg.jpg
new file mode 100755
index 00000000..22497263
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/time-square.jpg.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/tokyo-shinjuku.jpg b/src/presentations/screendesign/typographie/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/tokyo-shinjuku.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/tunnel7.jpg b/src/presentations/screendesign/typographie/images/tunnel7.jpg
new file mode 100755
index 00000000..8edd4c29
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/tunnel7.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/yale-art.jpg b/src/presentations/screendesign/typographie/images/yale-art.jpg
new file mode 100755
index 00000000..b497a2f9
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/yale-art.jpg differ
diff --git a/src/presentations/screendesign/typographie/images/zdf.jpg b/src/presentations/screendesign/typographie/images/zdf.jpg
new file mode 100755
index 00000000..2fdffc8a
Binary files /dev/null and b/src/presentations/screendesign/typographie/images/zdf.jpg differ
diff --git a/src/presentations/screendesign/typographie/index.md b/src/presentations/screendesign/typographie/index.md
new file mode 100755
index 00000000..5fc5e13e
--- /dev/null
+++ b/src/presentations/screendesign/typographie/index.md
@@ -0,0 +1,7 @@
+---
+title: Typographie (WIP)
+layout: presentation.11ty.js
+slideClasses: intro
+transition: zoom
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
new file mode 100644
index 00000000..6f65ee61
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/050-design-is/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/055-pause/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/055-pause/index.html
new file mode 100644
index 00000000..b2365ad2
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/055-pause/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
new file mode 100644
index 00000000..c28c23dc
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/110-visuelle-eigenschaften/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/115-layoutbeschreiben/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/115-layoutbeschreiben/index.html
new file mode 100644
index 00000000..2a3337ea
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/115-layoutbeschreiben/index.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/120-zusammenfassung/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/120-zusammenfassung/index.html
new file mode 100644
index 00000000..f73c9172
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/120-zusammenfassung/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/9999-outro/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-01.png
new file mode 100644
index 00000000..63b93bf8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-02.png
new file mode 100644
index 00000000..f79eceec
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-03.png
new file mode 100755
index 00000000..8b1990f8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/beschreiben-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-01.png
new file mode 100644
index 00000000..d428c5ad
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-02.png
new file mode 100644
index 00000000..1efc2912
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-03.png
new file mode 100755
index 00000000..39aad03a
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-04.png
new file mode 100755
index 00000000..9beb9f13
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05.png
new file mode 100755
index 00000000..92d144cb
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05a.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05a.png
new file mode 100755
index 00000000..a6503d05
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-05a.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-06.png
new file mode 100755
index 00000000..f44f64ed
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-07.png
new file mode 100644
index 00000000..3a8fbc47
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-08.png
new file mode 100644
index 00000000..60323ddb
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-09.png
new file mode 100755
index 00000000..5de4fb59
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-10.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-10.png
new file mode 100755
index 00000000..34d93242
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-10.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-11.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-11.png
new file mode 100755
index 00000000..e1ca39b8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-11.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-12.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-12.png
new file mode 100755
index 00000000..7d4cf558
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-12.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-13.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-13.png
new file mode 100755
index 00000000..dedace3e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-13.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-14.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-14.png
new file mode 100755
index 00000000..dfd8bff8
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-14.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-15.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-15.png
new file mode 100644
index 00000000..23905c5c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-15.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-16.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-16.png
new file mode 100644
index 00000000..390ed489
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-16.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-17.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-17.png
new file mode 100755
index 00000000..3f59940e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-17.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-18.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-18.png
new file mode 100755
index 00000000..87b5dc7f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-18.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-19.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-19.png
new file mode 100755
index 00000000..520a9b7c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-19.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-a.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-a.png
new file mode 100644
index 00000000..94bf76c0
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-a.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-b.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-b.png
new file mode 100644
index 00000000..a7d0966b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-b.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-c.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-c.png
new file mode 100644
index 00000000..45ae9bfc
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-basics-c.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-01.png
new file mode 100644
index 00000000..d5bd334c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-02.png
new file mode 100755
index 00000000..b1c23b3f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/design-bewerten-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-01.png
new file mode 100755
index 00000000..271d738f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-02.png
new file mode 100644
index 00000000..8de520d3
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-03.png
new file mode 100755
index 00000000..6468f819
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-04.png
new file mode 100644
index 00000000..2b9cf9b1
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/digital-products-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-01.png
new file mode 100755
index 00000000..8f65e1c5
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-02.png
new file mode 100755
index 00000000..b28ee92e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-03.png
new file mode 100755
index 00000000..61560c23
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-04.png
new file mode 100755
index 00000000..1c7f540b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-05.png
new file mode 100755
index 00000000..2df71657
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-06.png
new file mode 100755
index 00000000..8fed0c56
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-07.png
new file mode 100755
index 00000000..4df41f30
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-08.png
new file mode 100755
index 00000000..28b9e10b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-09.png
new file mode 100755
index 00000000..a7375c7b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-10.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-10.png
new file mode 100755
index 00000000..b8f24766
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-10.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-11.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-11.png
new file mode 100755
index 00000000..f7f3634d
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-11.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-12.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-12.png
new file mode 100755
index 00000000..ce9568e0
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-12.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-13.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-13.png
new file mode 100755
index 00000000..10890ba9
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/eigenschaften-13.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-01.png
new file mode 100755
index 00000000..2cce7d49
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-02.png
new file mode 100644
index 00000000..b6169060
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-03.png
new file mode 100644
index 00000000..bf63a2b5
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-04.png
new file mode 100644
index 00000000..3697e549
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-05.png
new file mode 100755
index 00000000..319c2c41
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-06.png
new file mode 100644
index 00000000..cc0fcb6a
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07-b.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07-b.png
new file mode 100644
index 00000000..1df8409b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07-b.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07.png
new file mode 100644
index 00000000..60ba4a93
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-08.png
new file mode 100755
index 00000000..d0abbe04
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09-b.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09-b.png
new file mode 100644
index 00000000..965d0c69
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09-b.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09.png
new file mode 100644
index 00000000..3e368062
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/gutes-design-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-01.png
new file mode 100644
index 00000000..08868580
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-02.png
new file mode 100644
index 00000000..f54a35bf
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-03.png
new file mode 100755
index 00000000..9d019d2f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-04.png
new file mode 100644
index 00000000..a41ef537
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-05.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-05.png
new file mode 100755
index 00000000..0e61eeec
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-05.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-06.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-06.png
new file mode 100755
index 00000000..c298138e
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-06.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-07.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-07.png
new file mode 100755
index 00000000..87664a83
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-07.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-08.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-08.png
new file mode 100755
index 00000000..ea3e3994
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-08.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-09.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-09.png
new file mode 100755
index 00000000..f76548e0
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-09.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-10.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-10.png
new file mode 100644
index 00000000..88e14ac9
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-10.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-11.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-11.png
new file mode 100755
index 00000000..bfcddcbe
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-11.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-12.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-12.png
new file mode 100755
index 00000000..fcd08e0b
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-12.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-13.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-13.png
new file mode 100644
index 00000000..bc9b91e1
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-13.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-14.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-14.png
new file mode 100644
index 00000000..e129718c
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-14.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-15.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-15.png
new file mode 100644
index 00000000..6fe5c1c6
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/layout-15.png differ
diff --git a/src/presentations/misc/demo/images/time-square.jpg.jpg b/docs/presentations/screendesign/design-in-der-medieninformatik/images/time-square.jpg.jpg
similarity index 100%
rename from src/presentations/misc/demo/images/time-square.jpg.jpg
rename to docs/presentations/screendesign/design-in-der-medieninformatik/images/time-square.jpg.jpg
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/tokyo-shinjuku.jpg b/docs/presentations/screendesign/design-in-der-medieninformatik/images/tokyo-shinjuku.jpg
new file mode 100755
index 00000000..40927675
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/tokyo-shinjuku.jpg differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-01.png
new file mode 100755
index 00000000..2e954292
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-02.png
new file mode 100755
index 00000000..904a8dae
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-03.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-03.png
new file mode 100755
index 00000000..85167903
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-03.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-04.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-04.png
new file mode 100755
index 00000000..106be91f
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/was-ist-design-04.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-01.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-01.png
new file mode 100644
index 00000000..7cde9d87
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-01.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-02.png b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-02.png
new file mode 100644
index 00000000..73c9c068
Binary files /dev/null and b/docs/presentations/screendesign/design-in-der-medieninformatik/images/wir-duerfen-02.png differ
diff --git a/docs/presentations/screendesign/design-in-der-medieninformatik/index.html b/docs/presentations/screendesign/design-in-der-medieninformatik/index.html
new file mode 100644
index 00000000..33f0cab7
--- /dev/null
+++ b/docs/presentations/screendesign/design-in-der-medieninformatik/index.html
@@ -0,0 +1,345 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html b/docs/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html
new file mode 100644
index 00000000..5b5ced31
--- /dev/null
+++ b/docs/presentations/screendesign/farben/030-wechselwirkungen-farbkontraste/index.html
@@ -0,0 +1,298 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/040-farbwirkung/index.html b/docs/presentations/screendesign/farben/040-farbwirkung/index.html
new file mode 100644
index 00000000..8df96b57
--- /dev/null
+++ b/docs/presentations/screendesign/farben/040-farbwirkung/index.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/050-lesbarkeit/index.html b/docs/presentations/screendesign/farben/050-lesbarkeit/index.html
new file mode 100644
index 00000000..3b7eba8f
--- /dev/null
+++ b/docs/presentations/screendesign/farben/050-lesbarkeit/index.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/060-farbenlesen/index.html b/docs/presentations/screendesign/farben/060-farbenlesen/index.html
new file mode 100644
index 00000000..3c671cca
--- /dev/null
+++ b/docs/presentations/screendesign/farben/060-farbenlesen/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html b/docs/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html
new file mode 100644
index 00000000..daa10bc4
--- /dev/null
+++ b/docs/presentations/screendesign/farben/070-farbe-zum-orientieren/index.html
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/080-farbe-zum-strukturieren/index.html b/docs/presentations/screendesign/farben/080-farbe-zum-strukturieren/index.html
new file mode 100644
index 00000000..fb56b532
--- /dev/null
+++ b/docs/presentations/screendesign/farben/080-farbe-zum-strukturieren/index.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/090-farbe-zum-akzentuieren copy/index.html b/docs/presentations/screendesign/farben/090-farbe-zum-akzentuieren copy/index.html
new file mode 100644
index 00000000..54016989
--- /dev/null
+++ b/docs/presentations/screendesign/farben/090-farbe-zum-akzentuieren copy/index.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html b/docs/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html
new file mode 100644
index 00000000..62c2adf8
--- /dev/null
+++ b/docs/presentations/screendesign/farben/090-farbe-zum-akzentuieren/index.html
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-01.png b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-01.png
new file mode 100755
index 00000000..d5138068
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-02.png b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-02.png
new file mode 100644
index 00000000..be982db7
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-03.png b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-03.png
new file mode 100644
index 00000000..827c4dfa
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-04.png b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-04.png
new file mode 100644
index 00000000..24386919
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-05.png b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-05.png
new file mode 100644
index 00000000..d69eec34
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/akzentuierung/akzentuieren-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/corporate-color-01.png b/docs/presentations/screendesign/farben/images/farbe/corporate-color-01.png
new file mode 100755
index 00000000..2edb81b7
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/corporate-color-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/corporate-color-01.svg b/docs/presentations/screendesign/farben/images/farbe/corporate-color-01.svg
new file mode 100755
index 00000000..ffcd39c4
--- /dev/null
+++ b/docs/presentations/screendesign/farben/images/farbe/corporate-color-01.svg
@@ -0,0 +1,5 @@
+
diff --git a/docs/presentations/screendesign/farben/images/farbe/corporate-color-02.png b/docs/presentations/screendesign/farben/images/farbe/corporate-color-02.png
new file mode 100755
index 00000000..cc293a98
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/corporate-color-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/corporate-color-03-1.png b/docs/presentations/screendesign/farben/images/farbe/corporate-color-03-1.png
new file mode 100755
index 00000000..52d89167
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/corporate-color-03-1.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/corporate-color-03.png b/docs/presentations/screendesign/farben/images/farbe/corporate-color-03.png
new file mode 100755
index 00000000..fa5fb278
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/corporate-color-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/corporate-color-04.png b/docs/presentations/screendesign/farben/images/farbe/corporate-color-04.png
new file mode 100755
index 00000000..83497635
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/corporate-color-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/der-gleiche-farbwert.png b/docs/presentations/screendesign/farben/images/farbe/der-gleiche-farbwert.png
new file mode 100755
index 00000000..2ea8d9f0
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/der-gleiche-farbwert.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/intro.png b/docs/presentations/screendesign/farben/images/farbe/intro.png
new file mode 100755
index 00000000..38ffeea6
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/intro.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/verlaeufe-01.png b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-01.png
new file mode 100755
index 00000000..6fc62b65
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/verlaeufe-02.png b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-02.png
new file mode 100755
index 00000000..a45e034f
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/verlaeufe-03.png b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-03.png
new file mode 100755
index 00000000..15167b94
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbe/verlaeufe-04.png b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-04.png
new file mode 100755
index 00000000..b0415667
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbe/verlaeufe-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-01.png b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-01.png
new file mode 100644
index 00000000..2650ec39
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-02.png b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-02.png
new file mode 100644
index 00000000..e74fb75c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-03.png b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-03.png
new file mode 100644
index 00000000..82665745
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-04.png b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-04.png
new file mode 100644
index 00000000..1bec894c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-05.png b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-05.png
new file mode 100644
index 00000000..795c0e31
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-06.png b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-06.png
new file mode 100644
index 00000000..8b0a814c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbenlesen/farben-lesen-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/blau-zitat.png b/docs/presentations/screendesign/farben/images/farbwirkung/blau-zitat.png
new file mode 100755
index 00000000..1386036d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/blau-zitat.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-blau.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-blau.png
new file mode 100644
index 00000000..0b095dd4
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-blau.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-cyan.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-cyan.png
new file mode 100644
index 00000000..f110711c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-cyan.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gelb.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gelb.png
new file mode 100644
index 00000000..8b3cc134
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gelb.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-grau.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-grau.png
new file mode 100644
index 00000000..5a8d16fa
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-grau.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gruen.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gruen.png
new file mode 100644
index 00000000..c3695659
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-gruen.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-orange.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-orange.png
new file mode 100644
index 00000000..69cf88d9
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-orange.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-rot.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-rot.png
new file mode 100644
index 00000000..6a8dc302
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-rot.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-schwarz.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-schwarz.png
new file mode 100644
index 00000000..1ec40522
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-schwarz.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-violett.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-violett.png
new file mode 100644
index 00000000..c6c9f046
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-violett.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-weiss.png b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-weiss.png
new file mode 100644
index 00000000..82663078
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farb-bedeutung-weiss.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farbharmonie-01.png b/docs/presentations/screendesign/farben/images/farbwirkung/farbharmonie-01.png
new file mode 100644
index 00000000..b0088876
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farbharmonie-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farbharmonie-02.png b/docs/presentations/screendesign/farben/images/farbwirkung/farbharmonie-02.png
new file mode 100644
index 00000000..3cc1c6e6
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farbharmonie-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farbklimata-01.png b/docs/presentations/screendesign/farben/images/farbwirkung/farbklimata-01.png
new file mode 100755
index 00000000..9e0adbb5
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farbklimata-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farbklimata-02.png b/docs/presentations/screendesign/farben/images/farbwirkung/farbklimata-02.png
new file mode 100755
index 00000000..7101d433
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farbklimata-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/farbkreis-01.png b/docs/presentations/screendesign/farben/images/farbwirkung/farbkreis-01.png
new file mode 100755
index 00000000..d23e3f6a
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/farbkreis-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-a.png
new file mode 100644
index 00000000..9eaf893d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-b.png
new file mode 100644
index 00000000..35692ea2
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-c.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-c.png
new file mode 100644
index 00000000..e7061093
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-c.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-d.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-d.png
new file mode 100644
index 00000000..9c27078c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-01-d.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-a.png
new file mode 100644
index 00000000..9baff740
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-b.png
new file mode 100644
index 00000000..866877be
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-c.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-c.png
new file mode 100644
index 00000000..5b6bcf8d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-c.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-d.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-d.png
new file mode 100644
index 00000000..56612b4c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-02-d.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-a.png
new file mode 100644
index 00000000..1af4830b
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-b.png
new file mode 100644
index 00000000..c190af71
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-c.png b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-c.png
new file mode 100644
index 00000000..bc378705
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/licht-raum-03-c.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-01-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-01-a.png
new file mode 100755
index 00000000..db18dd1f
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-01-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-01-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-01-b.png
new file mode 100755
index 00000000..ccb6d971
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-01-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-02-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-02-a.png
new file mode 100755
index 00000000..a7801603
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-02-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-02-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-02-b.png
new file mode 100755
index 00000000..323100a2
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-02-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-03-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-03-a.png
new file mode 100755
index 00000000..96ad6a19
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-03-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-03-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-03-b.png
new file mode 100755
index 00000000..31a13cec
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-03-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-04-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-04-a.png
new file mode 100755
index 00000000..061e8078
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-04-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-04-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-04-b.png
new file mode 100755
index 00000000..8a3d1edf
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-04-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-05-a.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-05-a.png
new file mode 100755
index 00000000..233ca40b
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-05-a.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/pixel-05-b.png b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-05-b.png
new file mode 100755
index 00000000..5507f11e
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/pixel-05-b.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-01.png b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-01.png
new file mode 100644
index 00000000..38627ad1
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-02.png b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-02.png
new file mode 100644
index 00000000..d4e2bda5
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-03.png b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-03.png
new file mode 100644
index 00000000..98e8c067
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-04.png b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-04.png
new file mode 100644
index 00000000..034d1812
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-05.png b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-05.png
new file mode 100644
index 00000000..a5739ea6
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-06.png b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-06.png
new file mode 100644
index 00000000..47c088f8
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/farbwirkung/windows-farbe-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbklima-01.png b/docs/presentations/screendesign/farben/images/grundlagen/farbklima-01.png
new file mode 100755
index 00000000..7441bb8a
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbklima-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbkreis-01.png b/docs/presentations/screendesign/farben/images/grundlagen/farbkreis-01.png
new file mode 100755
index 00000000..3808a2bf
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbkreis-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbkreise-01.png b/docs/presentations/screendesign/farben/images/grundlagen/farbkreise-01.png
new file mode 100755
index 00000000..2e416091
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbkreise-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbmischung-01.png b/docs/presentations/screendesign/farben/images/grundlagen/farbmischung-01.png
new file mode 100755
index 00000000..a551bc7a
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbmischung-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbmischung-02.png b/docs/presentations/screendesign/farben/images/grundlagen/farbmischung-02.png
new file mode 100755
index 00000000..c6759a3b
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbmischung-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-01.png b/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-01.png
new file mode 100755
index 00000000..3fef9b94
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-02.png b/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-02.png
new file mode 100755
index 00000000..3303e172
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-03.png b/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-03.png
new file mode 100755
index 00000000..80564137
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbmodelle-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/farbspektrum-01.png b/docs/presentations/screendesign/farben/images/grundlagen/farbspektrum-01.png
new file mode 100755
index 00000000..a0a44b6b
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/farbspektrum-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/hue-saturation-brightness-01.png b/docs/presentations/screendesign/farben/images/grundlagen/hue-saturation-brightness-01.png
new file mode 100755
index 00000000..c6a6cc2e
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/hue-saturation-brightness-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/saettigung-01.png b/docs/presentations/screendesign/farben/images/grundlagen/saettigung-01.png
new file mode 100755
index 00000000..0ac24194
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/saettigung-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/saettigung-02.png b/docs/presentations/screendesign/farben/images/grundlagen/saettigung-02.png
new file mode 100755
index 00000000..43a85395
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/saettigung-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/grundlagen/saettigung-helligkeit-01.png b/docs/presentations/screendesign/farben/images/grundlagen/saettigung-helligkeit-01.png
new file mode 100755
index 00000000..38f97312
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/grundlagen/saettigung-helligkeit-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-01.png
new file mode 100755
index 00000000..e68cc9e8
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-02.png
new file mode 100755
index 00000000..ab49fe37
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-03.png
new file mode 100755
index 00000000..fe3b63ef
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-04.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-04.png
new file mode 100755
index 00000000..56244ed3
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-05.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-05.png
new file mode 100755
index 00000000..a0f05623
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-06.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-06.png
new file mode 100755
index 00000000..c31356ac
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-07.png b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-07.png
new file mode 100755
index 00000000..2ae459fe
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/bunt-unbunt-kontrast-07.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-01.png
new file mode 100755
index 00000000..bae5ebca
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-02.png
new file mode 100755
index 00000000..5a89ef04
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-03.png
new file mode 100755
index 00000000..1c9ab455
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-04.png b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-04.png
new file mode 100755
index 00000000..1e62fa9e
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-05.png b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-05.png
new file mode 100755
index 00000000..0eadf93d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-06.png b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-06.png
new file mode 100755
index 00000000..24c2f040
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/farbe-an-sich-kontrast-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/flimmern-01.png b/docs/presentations/screendesign/farben/images/kontraste/flimmern-01.png
new file mode 100755
index 00000000..40fefb53
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/flimmern-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/flimmern-02.png b/docs/presentations/screendesign/farben/images/kontraste/flimmern-02.png
new file mode 100755
index 00000000..3b81d94d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/flimmern-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/flimmern-03.png b/docs/presentations/screendesign/farben/images/kontraste/flimmern-03.png
new file mode 100755
index 00000000..b2bde4ea
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/flimmern-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-01.png
new file mode 100755
index 00000000..77988ee1
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-02.png
new file mode 100755
index 00000000..bfe378cd
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-03.png
new file mode 100755
index 00000000..2fc17372
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-04.png b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-04.png
new file mode 100755
index 00000000..3c3b9d29
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-05.png b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-05.png
new file mode 100755
index 00000000..e594f434
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-06.png b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-06.png
new file mode 100755
index 00000000..dad751ee
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/hell-dunkel-kontrast-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-01.png
new file mode 100755
index 00000000..2a57a5f3
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-02.png
new file mode 100755
index 00000000..779cd508
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-03.png
new file mode 100755
index 00000000..a7396962
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-04.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-04.png
new file mode 100755
index 00000000..a62ec90b
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-05.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-05.png
new file mode 100755
index 00000000..71c7909b
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-06.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-06.png
new file mode 100755
index 00000000..c72c3d7a
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-07.png b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-07.png
new file mode 100755
index 00000000..e294db04
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/kalt-warm-kontrast-07.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-01.png
new file mode 100755
index 00000000..16ff2999
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-02.png
new file mode 100755
index 00000000..23b4823c
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-03.png
new file mode 100755
index 00000000..12662032
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-04.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-04.png
new file mode 100755
index 00000000..6ec00332
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-05.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-05.png
new file mode 100755
index 00000000..3b3b59e6
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-06.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-06.png
new file mode 100755
index 00000000..51f405a5
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-07.png b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-07.png
new file mode 100755
index 00000000..8f4b25c9
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/komplementaer-kontrast-07.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-01.png
new file mode 100755
index 00000000..5bd32052
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-02.png
new file mode 100755
index 00000000..9a88f40d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/qualitaets-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-01.png
new file mode 100755
index 00000000..3ccfa5d6
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-02.png
new file mode 100755
index 00000000..f769d3d7
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-03.png
new file mode 100755
index 00000000..1e898080
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/quantitaets-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-01.png b/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-01.png
new file mode 100755
index 00000000..5c96c413
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-02.png b/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-02.png
new file mode 100755
index 00000000..ff836f14
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-03.png b/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-03.png
new file mode 100755
index 00000000..b261dea8
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/simultan-kontrast-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/kontraste/uebersicht-01.png b/docs/presentations/screendesign/farben/images/kontraste/uebersicht-01.png
new file mode 100755
index 00000000..90f8876e
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/kontraste/uebersicht-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-01.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-01.png
new file mode 100644
index 00000000..45104e22
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-02.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-02.png
new file mode 100644
index 00000000..f2eda554
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-03.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-03.png
new file mode 100644
index 00000000..023430d6
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-04.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-04.png
new file mode 100644
index 00000000..7dda2d09
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-05.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-05.png
new file mode 100644
index 00000000..d57c2cc5
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-06.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-06.png
new file mode 100644
index 00000000..942146c9
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-07.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-07.png
new file mode 100644
index 00000000..26334aa0
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-07.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-08.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-08.png
new file mode 100644
index 00000000..74c9c5ab
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-08.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-09.png b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-09.png
new file mode 100644
index 00000000..20ca8b00
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/buch-lesbarkeit-09.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/fernwirkung-01.png b/docs/presentations/screendesign/farben/images/lesbarkeit/fernwirkung-01.png
new file mode 100644
index 00000000..6ee5326d
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/fernwirkung-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/flimmern-01.png b/docs/presentations/screendesign/farben/images/lesbarkeit/flimmern-01.png
new file mode 100644
index 00000000..607af690
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/flimmern-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/lesbarkeit/nahwirkung-01.png b/docs/presentations/screendesign/farben/images/lesbarkeit/nahwirkung-01.png
new file mode 100644
index 00000000..b1c31efc
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/lesbarkeit/nahwirkung-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/ebr-01.png b/docs/presentations/screendesign/farben/images/orientierung/ebr-01.png
new file mode 100644
index 00000000..f6494862
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/ebr-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/ebr-02.png b/docs/presentations/screendesign/farben/images/orientierung/ebr-02.png
new file mode 100644
index 00000000..931faafe
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/ebr-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/ebr-03.png b/docs/presentations/screendesign/farben/images/orientierung/ebr-03.png
new file mode 100644
index 00000000..4a841e91
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/ebr-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/ebr-04.png b/docs/presentations/screendesign/farben/images/orientierung/ebr-04.png
new file mode 100644
index 00000000..fca73074
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/ebr-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-01.png b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-01.png
new file mode 100644
index 00000000..335f5c27
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-02.png b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-02.png
new file mode 100644
index 00000000..811e4060
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-03.png b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-03.png
new file mode 100644
index 00000000..fdb4b9e2
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-04.png b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-04.png
new file mode 100644
index 00000000..a32cf0ba
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/farbstrahl-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-01.png b/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-01.png
new file mode 100644
index 00000000..cd07310e
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-02.png b/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-02.png
new file mode 100644
index 00000000..7ab40a5f
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-03.png b/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-03.png
new file mode 100644
index 00000000..a3858d38
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/green-peace-energy-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/kabel-01.png b/docs/presentations/screendesign/farben/images/orientierung/kabel-01.png
new file mode 100644
index 00000000..bc27a8e3
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/kabel-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/koeln-fahrplan-01.png b/docs/presentations/screendesign/farben/images/orientierung/koeln-fahrplan-01.png
new file mode 100644
index 00000000..b8bebe57
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/koeln-fahrplan-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/orientierung/regeln-01.png b/docs/presentations/screendesign/farben/images/orientierung/regeln-01.png
new file mode 100644
index 00000000..dc1f295e
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/orientierung/regeln-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/outro/adobe-color.png b/docs/presentations/screendesign/farben/images/outro/adobe-color.png
new file mode 100644
index 00000000..2e7687b1
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/outro/adobe-color.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-01.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-01.png
new file mode 100644
index 00000000..4ffc1680
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-01.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-02.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-02.png
new file mode 100644
index 00000000..797716ea
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-02.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-03.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-03.png
new file mode 100644
index 00000000..ab2e4416
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-03.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-04.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-04.png
new file mode 100644
index 00000000..2d2a82ae
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-04.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-05.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-05.png
new file mode 100644
index 00000000..30ec59d8
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-05.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-06.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-06.png
new file mode 100644
index 00000000..e425d096
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-06.png differ
diff --git a/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-07.png b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-07.png
new file mode 100644
index 00000000..41c66828
Binary files /dev/null and b/docs/presentations/screendesign/farben/images/strukturierung/strukturieren-07.png differ
diff --git a/docs/presentations/screendesign/farben/index.html b/docs/presentations/screendesign/farben/index.html
new file mode 100644
index 00000000..b34a2a3d
--- /dev/null
+++ b/docs/presentations/screendesign/farben/index.html
@@ -0,0 +1,727 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/figur-und-grund/images/abstrakt-01.jpg b/docs/presentations/screendesign/figur-und-grund/images/abstrakt-01.jpg
new file mode 100755
index 00000000..eb075d4d
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/abstrakt-01.jpg differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/abstrakt-02.jpg b/docs/presentations/screendesign/figur-und-grund/images/abstrakt-02.jpg
new file mode 100755
index 00000000..e6d61385
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/abstrakt-02.jpg differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/carlsberg-01.jpg b/docs/presentations/screendesign/figur-und-grund/images/carlsberg-01.jpg
new file mode 100755
index 00000000..85370c3c
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/carlsberg-01.jpg differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/carlsberg-02.jpg b/docs/presentations/screendesign/figur-und-grund/images/carlsberg-02.jpg
new file mode 100755
index 00000000..2a6d3475
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/carlsberg-02.jpg differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-01.png b/docs/presentations/screendesign/figur-und-grund/images/example-01.png
new file mode 100755
index 00000000..05dc4d3e
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-01.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-02.png b/docs/presentations/screendesign/figur-und-grund/images/example-02.png
new file mode 100755
index 00000000..070dfb0f
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-02.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-03.png b/docs/presentations/screendesign/figur-und-grund/images/example-03.png
new file mode 100755
index 00000000..7e1e691d
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-03.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-04.png b/docs/presentations/screendesign/figur-und-grund/images/example-04.png
new file mode 100755
index 00000000..7a695be7
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-04.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-04a.png b/docs/presentations/screendesign/figur-und-grund/images/example-04a.png
new file mode 100644
index 00000000..0b8e740a
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-04a.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-05.png b/docs/presentations/screendesign/figur-und-grund/images/example-05.png
new file mode 100644
index 00000000..a76ea8ec
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-05.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-06.png b/docs/presentations/screendesign/figur-und-grund/images/example-06.png
new file mode 100644
index 00000000..84a016e5
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-06.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-06a.png b/docs/presentations/screendesign/figur-und-grund/images/example-06a.png
new file mode 100644
index 00000000..38ffb8a8
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-06a.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-07.png b/docs/presentations/screendesign/figur-und-grund/images/example-07.png
new file mode 100644
index 00000000..52198d27
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-07.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-07a.png b/docs/presentations/screendesign/figur-und-grund/images/example-07a.png
new file mode 100644
index 00000000..9acf3fce
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-07a.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-08.png b/docs/presentations/screendesign/figur-und-grund/images/example-08.png
new file mode 100644
index 00000000..83e4ec8c
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-08.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/example-08a.png b/docs/presentations/screendesign/figur-und-grund/images/example-08a.png
new file mode 100644
index 00000000..78b45e87
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/example-08a.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/form-01.png b/docs/presentations/screendesign/figur-und-grund/images/form-01.png
new file mode 100644
index 00000000..5f2b75ef
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/form-01.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/form-02.png b/docs/presentations/screendesign/figur-und-grund/images/form-02.png
new file mode 100644
index 00000000..daa36131
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/form-02.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/form-02a.png b/docs/presentations/screendesign/figur-und-grund/images/form-02a.png
new file mode 100644
index 00000000..72687ad2
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/form-02a.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/form-03.png b/docs/presentations/screendesign/figur-und-grund/images/form-03.png
new file mode 100644
index 00000000..28d8730e
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/form-03.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/form-04.png b/docs/presentations/screendesign/figur-und-grund/images/form-04.png
new file mode 100644
index 00000000..852e2001
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/form-04.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/muster-01.png b/docs/presentations/screendesign/figur-und-grund/images/muster-01.png
new file mode 100644
index 00000000..8f4541a4
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/muster-01.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/muster-02.png b/docs/presentations/screendesign/figur-und-grund/images/muster-02.png
new file mode 100644
index 00000000..7a84dc1e
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/muster-02.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/images/muster-03.png b/docs/presentations/screendesign/figur-und-grund/images/muster-03.png
new file mode 100644
index 00000000..bd34b52d
Binary files /dev/null and b/docs/presentations/screendesign/figur-und-grund/images/muster-03.png differ
diff --git a/docs/presentations/screendesign/figur-und-grund/index.html b/docs/presentations/screendesign/figur-und-grund/index.html
new file mode 100644
index 00000000..e5a368b8
--- /dev/null
+++ b/docs/presentations/screendesign/figur-und-grund/index.html
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/030-form-space/index.html b/docs/presentations/screendesign/interface-inventar/030-form-space/index.html
new file mode 100644
index 00000000..b7e30d74
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/030-form-space/index.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/040-farbe/index.html b/docs/presentations/screendesign/interface-inventar/040-farbe/index.html
new file mode 100644
index 00000000..94e6b833
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/040-farbe/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/050-media/index.html b/docs/presentations/screendesign/interface-inventar/050-media/index.html
new file mode 100644
index 00000000..9c5d2a45
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/050-media/index.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/055-typo-satz/index.html b/docs/presentations/screendesign/interface-inventar/055-typo-satz/index.html
new file mode 100644
index 00000000..7a4aa0a3
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/055-typo-satz/index.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/060-interaktion/index.html b/docs/presentations/screendesign/interface-inventar/060-interaktion/index.html
new file mode 100644
index 00000000..92c4c2c5
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/060-interaktion/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/070-komponenten/index.html b/docs/presentations/screendesign/interface-inventar/070-komponenten/index.html
new file mode 100644
index 00000000..3a8e87dd
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/070-komponenten/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/080-strukturieren/index.html b/docs/presentations/screendesign/interface-inventar/080-strukturieren/index.html
new file mode 100644
index 00000000..b7e1ba86
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/080-strukturieren/index.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/presentations/screendesign/interface-inventar/9999-outro/index.html b/docs/presentations/screendesign/interface-inventar/9999-outro/index.html
new file mode 100644
index 00000000..7ffda695
--- /dev/null
+++ b/docs/presentations/screendesign/interface-inventar/9999-outro/index.html
@@ -0,0 +1,300 @@
+
+
+
+
+
+
+ 
