Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Webdesign</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Webdesign</h1> </header> <section bg="design.jpg" id="webdesign" class="slide cover"><div><h2>Webdesign</h2> <p class="note right">Quelle: <a href="https://unsplash.com/photos/-uQZPtoJ8nk">Anastasiia Kamil</a></p> </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</li> <li>Nicht Aufhübschung, nicht Annäherung an Kunst, sondern rein auf die Verbesserung der Funktion ausgerichtet</li> <li>Orientiert sich an den durch das Problem gegebenen Beschränkungen. (Aufgabe des Designers ist auch, möglichst viele davon zu erkennen.)</li> </ul> <p>Ziele: Schnell, einfach, zugänglich</p> <ul> <li>Schnell <ul> <li>Optimiert Performance der Nutzer</li> <li>Verringert Zeit zwischen der Präsentation einer Information und deren Verständnis</li> <li>Verringert Zeit die es braucht, eine Aufgabe zu erledigen</li> </ul> </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="arten-von-design"><div><h2>Arten von Design</h2> <ul> <li>Graphic Design</li> <li>User Interface Design</li> <li>User Experience Design</li> <li>Product / Service Design</li> </ul> <footer> <ul> <li>wir konzentrieren uns auf UI / UX</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 shout" id="text"><div><h2>Text</h2> <footer> <ul> <li>Kommen wir zu konkreten Regeln …</li> <li>Text, Layouts, Interaktionen, Formulare</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>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> <p><img src="wikipedia.png" alt="Wikipedia: Karotte" /></p> <footer> <ul> <li>Die Standardstyles für Text zu verbessern ist ziemlich leicht: <ul> <li>Zeilenlänge kürzen, Zentrieren, Schrift und Zeilenabstände größer, evtl. Kontrast unter den Inhalten</li> </ul> </li> <li>Ziel: leicht lesbar (schnelle Informationsgewinnung) <ul> <li>Serif: Besser in höherer Auflösung (Print)</li> <li>Sans: Besser in geringerer Auflösung (Monitore)</li> </ul> </li> <li>Zeilenlänge: 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 Weißraum-Flüsse</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="1-inhalt"><div><h2>1. Inhalt</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> <footer> <ul> <li>Ohne guten Inhalt ist alles Design egal.</li> </ul> </footer> </div></section> <section class="slide" id="2-zentrierung--zeilenlänge"><div><h2>2. Zentrierung / Zeilenlänge</h2> <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">25rem</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> </code></pre> <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="3-größen-abstände-schriftart"><div><h2>3. Größen, Abstände, Schriftart</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.5em</span><span class="p">;</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">Georgia</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.1</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">17px</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="nl">font-family</span><span class="p">:</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="n">Arial</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="4-farben-und-kontrast"><div><h2>4. Farben und Kontrast</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"><small></span>1774 von Johann Wolfgang Goethe <span class="nt"></small></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="nl">color</span><span class="p">:</span> <span class="m">#555</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.5em</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.1</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#111</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.25em</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">h1</span><span class="o">,</span> <span class="nt">small</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">Georgia</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">17px</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="nl">font-family</span><span class="p">:</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="n">Arial</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 shout" id="layouts"><div><h2>Layouts</h2> <footer> <ul> <li>Häufig nicht nur Text, sondern viele Elemente drum herum</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>Sind auf bestimmte Anordnungen konditioniert: Oben links Logo, oben rechts Profil etc</li> <li>Auge überfliegt Seite in einem Z-Muster</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> <footer> <ul> <li>Herausbilden einer einer visuellen Hierachie zur schnelleren Orientierung</li> </ul> </footer> </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 shout" id="interaktionen"><div><h2>Interaktionen</h2> <!-- ## TODO - https://gerireid.com/forms.html --> </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="bezeichnungen"><div><h2>Bezeichnungen</h2> <p><img src="save_dialogs.png" alt="Dialogs" class="right" /></p> <ul> <li>Verwendung von Verben in Aktions-Elementen.</li> </ul> <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 shout" id="rest"><div><h2>Rest</h2> </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="farbrelationen"><div><h2>Farbrelationen</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="konsistenz"><div><h2>Konsistenz</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="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="https://jgthms.com/web-design-in-4-minutes/">Web Design in 4 minutes</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> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>