Merge pull request #13 from cnoss/layout

layout

src/presentations/screendesign/gestaltgesetze/100-beispiele.md

@@ -20,7 +20,7 @@ status: ok
 {% screenshot "./images/example-07.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-08.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-09.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
-{% screenshot "./images/ibm-logo.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/ibm-logo.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":"IBM Logo"}' %}
 {% screenshot "./images/example-10.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-11.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-12.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
@@ -29,10 +29,10 @@ status: ok
 {% screenshot "./images/example-15.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-16.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-17.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}
-{% screenshot "./images/java-logo.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/java-logo.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":"Java Logo"}' %}
 {% screenshot "./images/example-18.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-19.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
-{% screenshot "./images/woolmark-logo.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/woolmark-logo.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":"Woolmark Logo"}' %}
 {% screenshot "./images/example-20.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-21.png", '{"transition":"none", "classes":"no-shadow", "width":"auto", "bu":""}' %}
 {% screenshot "./images/example-22.png", '{"transition":"none", "classes":"shadow", "width":"auto", "bu":""}' %}

src/presentations/screendesign/layout/000-intro.md

@@ -1,13 +1,12 @@
 ---
-title: Wahrnehmungsarbeit
+title: Layout und Raster
 layout: presentation.11ty.js
 slideClasses: intro
 transition: zoom
 ---
 
 <div class="is-full-width">
 
-# Demo Präsentation
-## Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz
+# Layout
 
 </div>

src/presentations/screendesign/layout/010-das-layout.md

@@ -0,0 +1,49 @@
+---
+title: Worum geht es?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+{% interlude "Das Layout.", "Gestalterische Macrostruktur"%}
+
+{% screenshot "./images/layout-01.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-02.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-03.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-04.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-05.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-06.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-07.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/layout-08.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":""}' %}
+
+<section class="simple">
+  <div>
+    <div>
+      {% fragment "<p class=\"list\"><strong>Was?</strong> Inhalt</p>" %}
+      {% fragment "<p class=\"list\"><strong>Warum?</strong> Ziel</p>" %}
+      {% fragment "<p class=\"list\"><strong>Für wen?</strong> Zielgruppe</p>" %}
+      {% fragment "<p class=\"list\"><strong>Wo?</strong> Präsentationsmedium</p>" %}
+      {% fragment "<p class=\"list\"><strong>Wie?</strong> stilistische Festlegungen</p>" %}
+    </div>
+</section>
+
+{% screenshot "./images/layout-09.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Elemente einer Seite"}' %}
+
+{% screenshot "./images/layout-09b.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Layout"}' %}
+
+{% screenshot "./images/layout-09c.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+{% screenshot "./images/layout-10.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Satzspiegelkonstruktion durch Diagonalzug (Villardsche Figur)"}' %}
+
+{% screenshot "./images/layout-11.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Satzspiegel"}' %}
+
+{% screenshot "./images/layout-12.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Satzspiegel"}' %}
+
+
+
+{% screenshot "./images/layout-14.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Gestaltungsraster"}' %}
+{% screenshot "./images/layout-15.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"2-spaltiges Gestaltungsraster"}' %}
+{% screenshot "./images/layout-16.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"3-spaltiges  Gestaltungsraster"}' %}
+{% screenshot "./images/layout-17.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"4-spaltiges  Gestaltungsraster"}' %}
+
+{% screenshot "./images/layout-18.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"4-spaltiges  Gestaltungsraster"}' %}

src/presentations/screendesign/layout/020-gestaltungsraster.md

@@ -0,0 +1,16 @@
+---
+title: Worum geht es?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+{% interlude "Das Gestaltungsraster.", "Gestalterische Mikrostruktur"%}
+
+{% screenshot "./images/gestaltungsraster-01.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/gestaltungsraster-02.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/gestaltungsraster-03.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/gestaltungsraster-04.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/gestaltungsraster-05.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/gestaltungsraster-06.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/gestaltungsraster-07.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}

src/presentations/screendesign/layout/030-scribbles.md

@@ -0,0 +1,21 @@
+---
+title: Worum geht es?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+{% interlude "Ein Gestaltungsraster hilft immer!"%}
+
+{% screenshot "./images/sketch-01.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+{% screenshot "./images/sketch-02.png", '{"transition":"fade", "classes": "shadow", "width":"auto", "bu":""}' %}
+
+<section class="simple">
+  <div>
+    <h1>Rastersysteme zum Starten</h1>
+    <div>
+      {% fragment "<p class=\"list\">Raster sollten gleichmäßig sein.</p>" %}
+      {% fragment "<p class=\"list\">Abstand zwischen zwei Spalten muss stimmig sein.</p>" %}
+      {% fragment "<p class=\"list\">Spaltenbreite muss auf Brotschrift abgestimmt sein.</p>" %}
+    </div>
+</section>

src/presentations/screendesign/layout/040-raster-icons.md

@@ -0,0 +1,14 @@
+---
+title: Worum geht es?
+layout: presentation.11ty.js
+slideClasses: images
+status: ok
+---
+
+{% interlude "Raster, Icons & Größe.", "Lessons Learned"%}
+
+{% screenshot "./images/raster-01.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Raster: Grund- und Gestaltungsraster verwenden"}' %}
+{% screenshot "./images/raster-02.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Icons: benutze fertige Sets"}' %}
+{% screenshot "./images/raster-03.png", '{"transition":"fade", "classes": "no-shadow", "width":"auto", "bu":"Größe: Layout auf Device testen"}' %}
+
+