Webtechnologien
Sommersemester 2019
Webdesign
♯
♫
Webdesign
<section id="webdesign" class="slide cover"><div><h2>Webdesign</h2> </div></section> <section class="slide" id="design"><div><h2>Design</h2> <div class="parts "> <div class="part"> <p><img src="csm_Canton_Sottsass_26acd257c7.jpg" alt="Sottsass, 1981" /></p> </div><div class="part"> <p><img src="5f762ef060567bc1dfa81a5929758eaa.jpg" alt="Hans Roericht" /></p> </div> </div> <footer> <ul> <li>Wenn wir hier über Design reden, meinen wir eher das zweite Bild (Funktionalismus)</li> </ul> </footer> </div></section> <section class="slide" id="was-ist-design"><div><h2>Was ist Design</h2> <blockquote> <p>A plan for arranging elements in such a way as to best accomplish a particular purpose.</p> </blockquote> <p class="author">Charles Eames</p> <blockquote> <p>Design is not just what it looks like and feels like. Design is how it works.</p> </blockquote> <p class="author">Steve Jobs</p> <p>Ziele: Schnell, einfach, zugänglich</p> <footer> <blockquote> <p>„Design is the intermediary between information and understanding.<q> – Richard Grefé, Designstratege</p> </blockquote> <ul> <li>Design ist ein Ausdruck von Absicht.</li> <li>Basiert stark auf durch das Problem gegebenen Beschränkungen. (Aufgabe des Designers ist auch, möglichst viele davon zu erkennen.)</li> </ul> <p>Abwägungen:</p> <ul> <li>Schnell <ol> <li>Performance</li> <li>Zeit die es braucht, eine Aufgabe zu erledigen</li> </ol> </li> <li>Einfach / leicht zu benutzen <ol> <li>Reduziert. Dadurch evtl. weniger produktiv, weil keine elaborierten Features (Shortcuts, Wizards, Advanced Mode)</li> <li>Wie schnell kann ich eine Aufgabe erledigen (wieder)</li> </ol> </li> <li>Zugänglich <ol> <li>Weil es moralisch richtig ist</li> <li>Welche Beeinträchtigungen könnte meine Zielgruppe haben?</li> <li>Haben wir die Ressourcen, das umzuseten?</li> </ol> </li> <li>Vorteil: Dank CSS leicht wiederverwendbare Designs</li> </ul> </footer> </div></section> <section class="slide" id="gestalttheorie"><div><h2>Gestalttheorie</h2> <ul> <li>Wahrnehmung = Fähigkeit, Strukturen und Ordnungsprinzipien in Sinneseindrücken auszumachen</li> <li>Arten von Gestaltqualitäten des Wahrnehmungserlebens <ul> <li>Struktur</li> <li>Ganzbeschaffenheit</li> <li><q>Wesen</q></li> </ul> </li> </ul> <footer> <ul> <li> <p><q>Gestalt</q> als internationaler Fachbegriff</p> </li> <li>Struktur, (Gefüge, Tektonik): gerade, rund, symmetrisch, geschlossen, spitz, wellig</li> <li>Ganzbeschaffenheit: durchsichtig, leuchtend, rau, gelb</li> <li>„Wesen<q>: Charakter, Habitus, Gefühlswert</li> </ul> <p>Viele, viele Gesetze. Hier ein paar davon …</p> </footer> </div></section> <section class="slide" id="prinzipien"><div><h2>Prinzipien</h2> <div class="parts "> <div class="part"> <h3 id="emergenz">Emergenz</h3> <p><img src="emergenz.jpg" alt="Emergenz" /></p> </div><div class="part"> <h3 id="vergegenständlichung">Vergegenständlichung</h3> <p><img src="Reification.jpg" alt="Reification" /></p> </div> </div> <footer> <ul> <li>Emergenz / Übersummativität <ul> <li>Herausbildung neuer Eigenschaften eines Systems infolge des Zusammenspiels seiner Elemente (Beispiel: Bewusstsein)</li> <li>Das Ganze wird vor seinen Teilen erkannt</li> <li>(Der Hund emergiert aus dem Bild und erst danach werden die Einzelteile erkannt)</li> </ul> </li> <li>Vergegenständlichung <ul> <li>konstruktiver oder generativer Aspekt der Wahrnehmung</li> <li>es wird mehr erkannt als eigentlich gesehen / der Verstand füllt die Lücken</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="prinzipien-1"><div><h2>Prinzipien</h2> <div class="parts "> <div class="part"> <h3 id="invarianz">Invarianz</h3> <p><img src="Invariance.jpg" alt="Invariance" /></p> </div><div class="part"> <h3 id="multistabilität">Multistabilität</h3> <p><img src="Multistability.svg" alt="Multistability" /></p> </div> </div> <footer> <ul> <li>Invarianz / Beständigkeit <ul> <li>einfache Formen werden als solche wahrgenommen, unabhängig von Drehung, Verzerrung etc</li> <li>Verstand ist gut darin, Gemeinsamkeiten und Unterschiede zu erkennen</li> </ul> </li> <li>Multistabilität <ul> <li>Multistabile Wahrnehmung, Gestaltwechsel, Wahrnehmungswechsel (Kippbilder, M. C. Escher)</li> <li>Ist die Tendez, zwischen den Interpretationen mehrdeutiger Wahrnehmungserfahrungen instabil hin und her zu wechseln.</li> </ul> </li> <li>Wir tendieren dazu, unsere Wahrnehmung so zu ordnen, dass sie einfach, einheitlich, geschlossen, symmetrisch und gleichartig ist.</li> </ul> </footer> </div></section> <section class="slide" id="prägnanz"><div><h2>Prägnanz</h2> <p>Bevorzugte Warnehmung von Objekten, die sich durch ein bestimmtes Merkmal abheben (Prägnanztendenz).</p> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>● ● ● ● ● ● ● ● ● ● ● ● ● ● <span class="nt"><span></span>■<span class="nt"></span></span> ● ● ● ● ● ● ● ● ●<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">700%</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">.9</span><span class="p">;</span> <span class="p">}</span> <span class="nt">span</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#76b900</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Gestaltgesetze: die Art des Zusammenschlusses von erlebten Teilen zu einer erlebten Ganzheit</li> </ul> </footer> </div></section> <section class="slide" id="nähe"><div><h2>Nähe</h2> <p>Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen.<br /><br /></p> <div class="parts "> <div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">200%</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div><div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">200%</span><span class="p">;</span> <span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="nl">column-gap</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">-moz-column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="nl">-moz-column-gap</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">-webkit-column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="nl">-webkit-column-gap</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div> </div> <footer> <ul> <li>Beispiel: Kommentare</li> </ul> </footer> </div></section> <section class="slide" id="gemeinsame-region"><div><h2>Gemeinsame Region</h2> <p>Elemente in abgegrenzten Gebieten werden als zusammengehörig empfunden.<br /><br /></p> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●<span class="nt"></p></span> <span class="nt"><p></span>● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="m">#76b900</span><span class="p">;</span> <span class="nl">align-self</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">200%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:first-child</span> <span class="p">{</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:last-child</span> <span class="p">{</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="nl">border-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <p class="note">Quelle: <a href="http://www.csus.edu/indiv/w/wickelgren/psyc103/ClassVisionHigher2.html">Emily A Wickelgren</a></p> <footer> <ul> <li>Beispiel: iOS Lockscreen</li> </ul> </footer> </div></section> <section class="slide" id="ähnlichkeit"><div><h2>Ähnlichkeit</h2> <p>Einander ähnliche Elemente werden eher als zusammengehörig erlebt als einander unähnliche.</p> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>● ● ● ● ● ●<span class="nt"></p></span> <span class="nt"><p></span>● ● ● ● ● ●<span class="nt"></p></span> <span class="nt"><p></span>● ● ● ● ● ●<span class="nt"></p></span> <span class="nt"><p></span>● ● ● ● ● ●<span class="nt"></p></span> <span class="nt"><p></span>● ● ● ● ● ●<span class="nt"></p></span> <span class="nt"><p></span>● ● ● ● ● ●<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">p</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">200%</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">odd</span><span class="o">)</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">even</span><span class="o">)</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#ff5f00</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="symmetrie-und-anordnung"><div><h2>Symmetrie und Anordnung</h2> <p><img src="GestaltCommonRegionSign.jpg" alt="Gestalt Common Region Sign" class="right" /></p> <p>Elemente, die in symmetrischer Anordnung zu einander stehen, werden leichter wahrgenommen.<br /><br /></p> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><pre></span>[ ] { } [ ]<span class="nt"></pre></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">pre</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">700%</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="gute-gestalt"><div><h2>Gute Gestalt</h2> <p><img src="gute_gestalt.svg" alt="Gute Gestalt" class="right" width="380" /></p> <p>Warnehmungseinheiten bilden sich so aus, dass sie im Ergebnis möglichts einfache Formen darstellen.</p> </div></section> <section class="slide" id="figur--grund"><div><h2>Figur – Grund</h2> <p>Elemente werden entweder als Figur oder Grund wahrgenommen.<br /><br /></p> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>+<span class="nt"></p></span> <span class="nt"><p></span>+<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">p</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">700%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:last-child</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Gewichtung von Sinneseindrücken</li> <li>Beschreibt Unterscheidung von Vorder- und Hintergrund</li> <li>Figur: Element im Fokus, Vordergrund</li> <li>Das Auge</li> </ul> </footer> </div></section> <section class="slide" id="weitere"><div><h2>Weitere</h2> <ul> <li>Zwei oder mehrere sich gleichzeitig in eine Richtung bewegende Elemente werden als eine Einheit oder Gestalt wahrgenommen.</li> <li>Elemente, die sich gleichzeitig verändern, werden als zusammengehörig empfunden.</li> <li>Verbundene Elemente werden als ein Objekt empfunden.</li> </ul> <footer> <ul> <li>Gesetz der gemeinsamen Bewegung: Schwärme</li> </ul> </footer> </div></section> <section class="slide" id="dont-make-me-think"><div><h2>Don’t make me think!</h2> <p>Seiten sollten selbst-verständlich, deutlich und selbst-erklärend sein.<br /><br /></p> <p><img src="dont_make_me_think.jpg" alt="Don't make me think!" /></p> <p class="note">Quelle: <a href="http://en.wikipedia.org/wiki/Don't_Make_Me_Think">Steve Krug</a></p> <footer> <ul> <li>Ich sollte die Seite verstehen und benutzen können, ohne Aufwand und Denk-Arbeit zu investieren.</li> <li>Einfach keine <q>WTF?</q>s und Denkblasen über dem Kopd mit Fragezeichen drin.</li> <li>Und strapaziert nicht meine Geduld, denn die nächste Seite ist nur einen Klick entfernt. (Sind all diese Formularfelder wirklich nötig?)</li> <li><q>Get rid of half the words on each page, then get rid of half of what’s left.</q> But that one gets its own chapter later.</li> </ul> </footer> </div></section> <section class="slide" id="hierarchie"><div><h2>Hierarchie</h2> <p><img src="zendesk.jpg" alt="Zendesk" class="right" width="350" /></p> <ul> <li>Organisation der Inhalte nach ihrer Wichtigkeit.</li> <li>Möglich über: Farbe, Kontrast, Größe, Ausrichtung, Wiederholung, Nähe, Weißraum etc.</li> </ul> <footer> <p>x</p> <ul> <li>Gute visuelle Hierarchie ebnet dem Auge einen Weg und hilft, Fokus zu steuern</li> <li>Anderes Beispiel: Header …</li> </ul> </footer> </div></section> <section class="slide" id="z-muster"><div><h2>Z-Muster</h2> <p><img src="facebook.jpg" alt="Facebook" class="full-width" /></p> <p class="note">Quelle: <a href="http://t3n.de/news/z-pattern-muster-psychologie-web-526096/">t3n.de</a></p> <footer> <ul> <li>Auge überfliegt Seite in einem Z-Muster</li> </ul> </footer> </div></section> <section class="slide" id="goldener-schnitt"><div><h2>Goldener Schnitt</h2> <div class="parts "> <div class="part"> <p><img src="SimilarGoldenRectangles.svg" alt="Goldener Schnitt" /></p> </div><div class="part"> <p><br /><img src="twitter-gr.jpg" alt="Twitter" /></p> </div> </div> <p class="note">Quelle: <a href="https://de.wikipedia.org/wiki/Datei:SimilarGoldenRectangles.svg">Wikipedia</a>, <a href="http://growthspark.com/blog/bulletproof-your-designs-with-the-golden-ratio/">growthspark.com</a></p> <footer> <ul> <li><q>Fühlt sich einfach richtig an</q></li> <li>circa 1.618</li> </ul> </footer> </div></section> <section class="slide" id="drittel-regel"><div><h2>Drittel-Regel</h2> <p><img src="Rivertree_thirds_md.jpg" alt="Baum" class="full-width" /></p> <p class="note">Quelle: <a href="https://de.wikipedia.org/wiki/Datei:Rivertree_thirds_md.gif">Wikipedia</a></p> <footer> <ul> <li>Kann helfen, mehr Balance zu schaffen</li> </ul> </footer> </div></section> <section class="slide" id="raster-grids"><div><h2>Raster (Grids)</h2> <p>Eine Struktur, die eine Reihe von horizontalen und vertikalen Linien verwendet, um Inhalt zu arrangieren.</p> <p><img src="drupal_grid.jpg" alt="Drupal Grid" /></p> <footer> <ul> <li>Empfehlung: Vielfaches von 6, da 6/1, 6/2, 6/3</li> <li>häufig 12</li> </ul> </footer> </div></section> <section class="slide" id="abstände"><div><h2>Abstände</h2> <div class="parts "> <div class="part"> <p>Definieren einer <q>Einheit</q> und verschiedener Abstände, z.B.</p> <ul> <li>klein: 2em</li> <li>mittel: 4em</li> <li>groß: 6em</li> </ul> </div><div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><section></span> <span class="nt"><article></span> <span class="nt"><h3></span>Accusamus, pariatur, tenetur!<span class="nt"></h3></span> <span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h3></span>Culpa at consequuntur?<span class="nt"></h3></span> <span class="nt"><p></span>Earum harum, sed blanditiis, necessitatibus suscipit eius.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h3></span>Ad tempore fugiat<span class="nt"></h3></span> <span class="nt"><p></span>Repudiandae alias obcaecati consequuntur exercitationem inventore.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"></section></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">article</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">4em</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nb">transparent</span> <span class="sx">url(user.png)</span> <span class="nb">top</span> <span class="nb">left</span> <span class="nb">no-repeat</span><span class="p">;</span> <span class="nl">background-size</span><span class="p">:</span> <span class="m">3em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">article</span><span class="nd">:last-child</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div> </div> </div></section> <section class="slide" id="weißraum"><div><h2>Weißraum</h2> <div class="parts "> <div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><section></span> <span class="nt"><article></span> <span class="nt"><h2></span>Accusamus, pariatur, tenetur!<span class="nt"></h2></span> <span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h2></span>Culpa at consequuntur?<span class="nt"></h2></span> <span class="nt"><p></span>Earum harum, sed blanditiis, necessitatibus suscipit eius, ab sit reiciendis voluptas<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h2></span>Ad tempore fugiat<span class="nt"></h2></span> <span class="nt"><p></span>Repudiandae alias obcaecati consequuntur exercitationem inventore voluptatum, quis consectetur id atque.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"></section></span> </code></pre><pre class="highlight language-css" data-lang="css"><code></code></pre></div> </div><div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><section></span> <span class="nt"><article></span> <span class="nt"><h2></span>Accusamus, pariatur, tenetur!<span class="nt"></h2></span> <span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h2></span>Culpa at consequuntur?<span class="nt"></h2></span> <span class="nt"><p></span>Earum harum, sed blanditiis, necessitatibus suscipit eius, ab sit reiciendis voluptas<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h2></span>Ad tempore fugiat<span class="nt"></h2></span> <span class="nt"><p></span>Repudiandae alias obcaecati consequuntur exercitationem inventore voluptatum, quis consectetur id atque.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"></section></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">article</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">2.5em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h2</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">.5em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div> </div> <footer> <ul> <li>Don’t be afraid of the white space</li> </ul> </footer> </div></section> <section class="slide" id="fitts-gesetz"><div><h2>Fitts’ Gesetz</h2> <p>Benötigte Zeit eine Zielfläche zu erreichen, ist eine Funktion der Distanz zu dieser Fläche und deren Größe.<br /><br /></p> <div class="parts "> <div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Eins<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Zwei<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Drei<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Vier<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Fünf<span class="nt"></a></li></span> <span class="nt"></ul></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">ul</span><span class="o">,</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">lightgrey</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">lightblue</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div><div class="part"> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Eins<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Zwei<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Drei<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Vier<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Fünf<span class="nt"></a></li></span> <span class="nt"></ul></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">ul</span><span class="o">,</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">lightgrey</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">.25em</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">.25em</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">lightblue</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div> </div> <footer> <ul> <li>Web users are impatient and insist on instant gratification.</li> </ul> </footer> </div></section> <section class="slide" id="kontrast"><div><h2>Kontrast</h2> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><section></span> <span class="nt"><article></span> <span class="nt"><h2></span>Culpa at consequuntur?<span class="nt"></h2></span> <span class="nt"><small><time></span>21. August 2009<span class="nt"></time></span> by John Doe<span class="nt"></small></span> <span class="nt"><p></span>Labore sint rerum, id sapiente impedit consectetur corporis amet quam, iure unde explicabo reiciendis sunt suscipit velit fuga exercitationem nobis delectus quae. Voluptas, inventore deserunt explicabo unde quod accusantium recusandae dolores vero perspiciatis iure! Accusantium cum sed esse voluptatibus veniam temporibus eligendi sapiente.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"><article></span> <span class="nt"><h2></span>Ad tempore fugiat<span class="nt"></h2></span> <span class="nt"><small><time></span>1. November 2014<span class="nt"></time></span> by Jane Doe<span class="nt"></small></span> <span class="nt"><p></span>Quas similique velit, obcaecati accusantium laboriosam nam tenetur in modi? Perferendis similique dolor quis dolorum reprehenderit aspernatur, explicabo et modi numquam aperiam. Modi enim repellat dolore, numquam omnis quam tempore, blanditiis mollitia, totam autem aperiam error temporibus dolorem beatae nihil laborum aliquid repudiandae veritatis.<span class="nt"></p></span> <span class="nt"></article></span> <span class="nt"></section></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">article</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">2.5em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h2</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">small</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#999</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">.5em</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>We don’t read pages, we scan them.</li> </ul> </footer> </div></section> <section class="slide" id="typographie"><div><h2>Typographie</h2> <p><img src="Sans-Serif-Mono.svg" alt="Sans-Serif-Mono" class="right" width="200" /></p> <ul> <li>Typen: Serif, Sans Serif, Monospace</li> <li>Ziel: leicht lesbar (schnelle Informationsgewinnung)</li> </ul> <p><img src="wikipedia.png" alt="Wikipedia: Karotte" /></p> <footer> <ul> <li>Serif: Besser in höherer Auflösung (Print)</li> <li>Sans: Besser in geringerer Auflösung (Monitore)</li> </ul> </footer> </div></section> <section class="slide" id="typographie-1"><div><h2>Typographie</h2> <ul> <li>mindestens 16px (eher 18+)</li> <li>Zeilen sollten 2 bis 3 Alphabete lang sein (52–78 Zeichen; ideal: 65)</li> <li>Linksbündig</li> <li>Line-Height <ul> <li>1.1 für Überschriften</li> <li>1.5 für Fließtext</li> </ul> </li> </ul> <footer> <ul> <li>Zeitungsartikel in Spalten gesetzt und Bücher hochkannt</li> <li>Linksbündig <ul> <li>hilft Auge durch konstante vertikale kante</li> <li>nicht justify, da Flüsse</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="beispiel--roh"><div><h2>Beispiel – roh</h2> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h1></span>Die Leiden des jungen Werthers<span class="nt"></h1></span> <span class="nt"><p></span> Ei<span class="ni">&shy;</span>ne wun<span class="ni">&shy;</span>der<span class="ni">&shy;</span>ba<span class="ni">&shy;</span>re Hei<span class="ni">&shy;</span>ter<span class="ni">&shy;</span>keit hat mei<span class="ni">&shy;</span>ne gan<span class="ni">&shy;</span>ze See<span class="ni">&shy;</span>le ein<span class="ni">&shy;</span>ge<span class="ni">&shy;</span>nom<span class="ni">&shy;</span>men, gleich den süßen Frühlings<span class="ni">&shy;</span>mor<span class="ni">&shy;</span>gen, die ich mit gan<span class="ni">&shy;</span>zem Her<span class="ni">&shy;</span>zen ge<span class="ni">&shy;</span>nieße. Ich bin al<span class="ni">&shy;</span>lein und freue mich mei<span class="ni">&shy;</span>nes Le<span class="ni">&shy;</span>bens in die<span class="ni">&shy;</span>ser Ge<span class="ni">&shy;</span>gend, die für sol<span class="ni">&shy;</span>che See<span class="ni">&shy;</span>len ge<span class="ni">&shy;</span>schaf<span class="ni">&shy;</span>fen ist wie die mei<span class="ni">&shy;</span>ne. Ich bin so glück<span class="ni">&shy;</span>lich, mein Bes<span class="ni">&shy;</span>ter, so ganz in dem Gefühle von ru<span class="ni">&shy;</span>hi<span class="ni">&shy;</span>gem Da<span class="ni">&shy;</span>sein ver<span class="ni">&shy;</span>sun<span class="ni">&shy;</span>ken, daß mei<span class="ni">&shy;</span>ne Kunst dar<span class="ni">&shy;</span>un<span class="ni">&shy;</span>ter lei<span class="ni">&shy;</span>det. Ich könn<span class="ni">&shy;</span>te jetzt nicht zeich<span class="ni">&shy;</span>nen, nicht einen Strich, und bin nie ein größer<span class="ni">&shy;</span>er Ma<span class="ni">&shy;</span>ler ge<span class="ni">&shy;</span>we<span class="ni">&shy;</span>sen als in die<span class="ni">&shy;</span>sen Au<span class="ni">&shy;</span>gen<span class="ni">&shy;</span>bli<span class="ni">&shy;</span>cken. <span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code></code></pre></div> </div></section> <section class="slide" id="beispiel--zeilenlänge"><div><h2>Beispiel – Zeilenlänge</h2> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h1></span>Die Leiden des jungen Werthers<span class="nt"></h1></span> <span class="nt"><p></span> Ei<span class="ni">&shy;</span>ne wun<span class="ni">&shy;</span>der<span class="ni">&shy;</span>ba<span class="ni">&shy;</span>re Hei<span class="ni">&shy;</span>ter<span class="ni">&shy;</span>keit hat mei<span class="ni">&shy;</span>ne gan<span class="ni">&shy;</span>ze See<span class="ni">&shy;</span>le ein<span class="ni">&shy;</span>ge<span class="ni">&shy;</span>nom<span class="ni">&shy;</span>men, gleich den süßen Frühlings<span class="ni">&shy;</span>mor<span class="ni">&shy;</span>gen, die ich mit gan<span class="ni">&shy;</span>zem Her<span class="ni">&shy;</span>zen ge<span class="ni">&shy;</span>nieße. Ich bin al<span class="ni">&shy;</span>lein und freue mich mei<span class="ni">&shy;</span>nes Le<span class="ni">&shy;</span>bens in die<span class="ni">&shy;</span>ser Ge<span class="ni">&shy;</span>gend, die für sol<span class="ni">&shy;</span>che See<span class="ni">&shy;</span>len ge<span class="ni">&shy;</span>schaf<span class="ni">&shy;</span>fen ist wie die mei<span class="ni">&shy;</span>ne. Ich bin so glück<span class="ni">&shy;</span>lich, mein Bes<span class="ni">&shy;</span>ter, so ganz in dem Gefühle von ru<span class="ni">&shy;</span>hi<span class="ni">&shy;</span>gem Da<span class="ni">&shy;</span>sein ver<span class="ni">&shy;</span>sun<span class="ni">&shy;</span>ken, daß mei<span class="ni">&shy;</span>ne Kunst dar<span class="ni">&shy;</span>un<span class="ni">&shy;</span>ter lei<span class="ni">&shy;</span>det. Ich könn<span class="ni">&shy;</span>te jetzt nicht zeich<span class="ni">&shy;</span>nen, nicht einen Strich, und bin nie ein größer<span class="ni">&shy;</span>er Ma<span class="ni">&shy;</span>ler ge<span class="ni">&shy;</span>we<span class="ni">&shy;</span>sen als in die<span class="ni">&shy;</span>sen Au<span class="ni">&shy;</span>gen<span class="ni">&shy;</span>bli<span class="ni">&shy;</span>cken. <span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">25em</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.8em</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="beispiel--größe-und-abstand"><div><h2>Beispiel – Größe und Abstand</h2> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h1></span>Die Leiden des jungen Werthers<span class="nt"></h1></span> <span class="nt"><p></span> Ei<span class="ni">&shy;</span>ne wun<span class="ni">&shy;</span>der<span class="ni">&shy;</span>ba<span class="ni">&shy;</span>re Hei<span class="ni">&shy;</span>ter<span class="ni">&shy;</span>keit hat mei<span class="ni">&shy;</span>ne gan<span class="ni">&shy;</span>ze See<span class="ni">&shy;</span>le ein<span class="ni">&shy;</span>ge<span class="ni">&shy;</span>nom<span class="ni">&shy;</span>men, gleich den süßen Frühlings<span class="ni">&shy;</span>mor<span class="ni">&shy;</span>gen, die ich mit gan<span class="ni">&shy;</span>zem Her<span class="ni">&shy;</span>zen ge<span class="ni">&shy;</span>nieße. Ich bin al<span class="ni">&shy;</span>lein und freue mich mei<span class="ni">&shy;</span>nes Le<span class="ni">&shy;</span>bens in die<span class="ni">&shy;</span>ser Ge<span class="ni">&shy;</span>gend, die für sol<span class="ni">&shy;</span>che See<span class="ni">&shy;</span>len ge<span class="ni">&shy;</span>schaf<span class="ni">&shy;</span>fen ist wie die mei<span class="ni">&shy;</span>ne. Ich bin so glück<span class="ni">&shy;</span>lich, mein Bes<span class="ni">&shy;</span>ter, so ganz in dem Gefühle von ru<span class="ni">&shy;</span>hi<span class="ni">&shy;</span>gem Da<span class="ni">&shy;</span>sein ver<span class="ni">&shy;</span>sun<span class="ni">&shy;</span>ken, daß mei<span class="ni">&shy;</span>ne Kunst dar<span class="ni">&shy;</span>un<span class="ni">&shy;</span>ter lei<span class="ni">&shy;</span>det. Ich könn<span class="ni">&shy;</span>te jetzt nicht zeich<span class="ni">&shy;</span>nen, nicht einen Strich, und bin nie ein größer<span class="ni">&shy;</span>er Ma<span class="ni">&shy;</span>ler ge<span class="ni">&shy;</span>we<span class="ni">&shy;</span>sen als in die<span class="ni">&shy;</span>sen Au<span class="ni">&shy;</span>gen<span class="ni">&shy;</span>bli<span class="ni">&shy;</span>cken. <span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">25em</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.8em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="schatten"><div><h2>Schatten</h2> <p><img src="layering.gif" alt="Google Material Design" class="right" width="300" /></p> <ul> <li>Werkzeug, nicht zur Dekoration</li> <li>Schatten sind nie pur schwarz</li> <li>Höhere Objekte beschatten niedrigere (<a href="http://codepen.io/nw/pen/rVdPQW">Beispiel</a>)</li> <li>Knöpfe senken sich beim Drücken</li> <li>Licht kommt aus einer Richtung</li> </ul> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>✗<span class="nt"></p></span> <span class="nt"><p></span>✗<span class="nt"></p></span> <span class="nt"><p></span>✔<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#C6CCD2</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">1</span><span class="o">)</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">4px</span> <span class="m">4px</span> <span class="m">2px</span> <span class="no">black</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#BB2323</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">2</span><span class="o">)</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">#ccc</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#E47676</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">3</span><span class="o">)</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">2px</span> <span class="m">2px</span> <span class="m">2px</span> <span class="m">#C6CCD2</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#149D21</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Erstes: <q>Developer-Design</q></li> <li>Zweites: Licht kommt direkt von vorn?</li> <li> <p>Drittes: Gut, leichter Blaustich.</p> </li> <li>Schlagschatten können ein Design ruinieren, wenn falsch angewendet</li> <li>1-3px Schatten, 0-3px Abstand, 120˚ Einfallwinkel</li> </ul> </footer> </div></section> <section class="slide" id="farben"><div><h2>Farben</h2> <div class="editor hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>Bei Fließtext eher dunkles Grau verwenden<span class="nt"></p></span> <span class="nt"><div></span>Bei Boxen Textfarbe helle / dunkle Version der Hintergrundfarbe (nicht weiß oder grau)<span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">p</span><span class="o">,</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">3em</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.3</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span> <span class="p">}</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#268bd2</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.85</span><span class="p">);</span> <span class="p">}</span> <span class="nt">div</span><span class="nd">:before</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s2">'✔'</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">-1.1em</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="style-guides"><div><h2>Style Guides</h2> <p><img src="mozila_colors.jpg" alt="Mozilla Colors" class="right" /></p> <ul> <li>Style Guides / Gestaltungsrichtlinie helfen, einheitlich und konsistent zu arbeiten, indem Größen, Farben, Schriften etc festgelegt werden</li> <li>Beispiel-Generator: <a href="http://stylifyme.com/?stylify=mozilla.com">Stylify Me</a></li> </ul> </div></section> <section class="slide" id="bezeichnungen"><div><h2>Bezeichnungen</h2> <p><img src="save_dialogs.png" alt="Dialogs" class="right" /></p> <p>Verwendet Verben in Aktions-Elementen.</p> <p class="note">Quelle: <a href="http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/">Smashing Magazine</a></p> <footer> <ul> <li>Notwendigkeit, Text zu lesen.</li> </ul> </footer> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="http://goodui.org/">Good UI</a></li> <li><a href="http://hellohappy.org/beautiful-web-type/">Beautiful Web Type</a></li> <li><a href="http://mono.company/journal/design-practice/the-10-commandments-of-good-form-design-on-the-web/">Good Form Design on the Web</a></li> <li><a href="https://developer.apple.com/design/human-interface-guidelines/macos/overview/visual-index/">Apples Human Interface Guidelines</a></li> </ul> </div></section>