Der Kurs bestand aus mehreren kleinen und größeren Teilaufgaben. Zum Einen wurden 3 längere Texte, mit Ausschnitten aus verschiedenen Büchern, sowohl mikro- als auch makrotypografisch bearbeitet. Zum Anderen gab es kleinere Fingerübungen, bei denen man sich im Detail mit Schriften im Web beschäftigte. (z.B. Formulare, Iconset aus einer beliebigen Font, Zitate, ...)

Eine Übersicht mit allen Aufgaben befindet sich hier: http://webtypografie.andrekurfuerst.de/

Copyright

©André Kurfürst

Quelle: http://heartcover.eu/buch/Kreativitaet+aushalten+-+Psychologie+fuer+Designer/26

Die erste Aufgabe beschäftigte sich mit dem Buch [Kreativität aushalten: Psychologie für Designer - Frank Berzbach](http://www.amazon.de/Kreativit%C3%A4t-aushalten-Psychologie-f%C3%BCr-Designer/dp/3874397866/ref=sr_1_1?ie=UTF8&qid=1411477930&sr=8-1&keywords=Kreativit%C3%A4t+aushalten%3A+Psychologie+f%C3%BCr+Designer+-+Frank+Berzbach „Kreativität aushalten: Psychologie für Designer - Frank Berzbach“).

Hierbei sollten wir uns eine Schrift aussuchen und diverse semantische und visuelle Überlegungen (Auszeichnungen für Überschriften, Schlüsselsätze, Zitate, …) getätigt werden. Die Seite sollte dabei sowohl auf großen, als auch auf kleinen Bildschirmen funktionieren.

Für mich war diese Aufgabe eine gute Übung zum Warmwerden. Ich habe mich sehr schwer getan, eine bzw. zwei Schrift/en auszusuchen, die optisch in mein Raster und zum Buch passten. Daher blieb die Gestaltung sehr minimalistisch ohne größere grafische Highlights. Da mir der Umgang mit Schriften schwer fiel, suchte ich mir mehrere Schriftenpaare aus und band sie in die Webseite ein. Mit Chris Magiera tauschte ich mich danach über die gute oder schlechte Verwendung der einzelnen Schriften aus. Dies war im Nachhinein für mich eine sehr wichtige Übung.

Auf der Webseite gibt es rechts oben eine Toolbar. In dieser kann man die Silbentrennung und den Fluid-Modus (Schriftgröße passt sich automatisch an die Größe des Fensters an) an- oder ausschalten. Darunter befindet sich eine Select-Box zur Auswahl der Schriftpaare.

Aus Copyrightgründen durfte nicht der gesamte Text dargestellt werden und wurde in den hellen Bereichen mit Blindtext aufgefüllt.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/text-1/

In dieser Übung sollten wir eine HTML-Seite erstellen, in der wie einige inspirierende Dinge, wie Webseiten, Bücher, Schriften, Tools und Glyphen, vorstellen sollten.

Ich habe hier eine Webseite gebaut, die als eine Art Akkordeon fungiert. Das Schöne daran ist, dass so gut wie kein Javascript dafür erforderlich ist, da ich mit der neuen CSS Maßeinheit vh gearbeitet habe.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/inspiration/

Copyright

©André Kurfürst

Quelle: http://iconosquare.com/p/483018063190539810_181726134

Ein vorher ausgesuchtes Zitat sollte typografisch auf 3 Seiten unterschiedlich aufbereitet werden.

Zitat: I love deadlines. I like the whooshing sound they make as they fly by. Douglas Adams

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/fingeruebung-1/

Copyright

©André Kurfürst

Quelle: http://www.goeo.de/netzwelt/neue-schriftarten-fur-website-mit-google-fonts-api

Die 3. Übung beschäftigt sich mit dem Buch von Robert Bringhursts „The elements of typografic style“. Wir sollten versuchen neben den klassischen Darstellungsformen auch neue Interpretationen zu finden. Der Text enthält sehr viele Schlüsselwörter, Randnotizen und Definitionen. Hinzu kommen noch mehrere Bilder. Wir sollten dabei auch eine mobile Version erstellen. Ich habe mich hier für eine große Bildspalte entschieden, die automatisch beim Scrollen das richtige Bild anzeigt.

Aus Copyrightgründen musste der Text komplett ausgetauscht werden.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/text-2/

In dieser Übung sollte sich jeder ein Themengebiet in Form einer CSS-Eigenschaft aussuchen und diese dann hinsichtlich seiner Syntax untersuchen. Dabei sollten sinnvolle und ästhetische Anwendungsbeispiele entstehen. Ich habe mich für die Eigenschaft Filter entschieden. Zuerst habe ich alle Möglichkeiten, wie blur, brightness, contrast,... usw ausführlich erklärt und sie dann in einer Art Spielplatz zum selber testen freigegeben. Man kann hierbei wirklich schön sehen, wie gut diese ursprünglichen Photoshop-Effekte funktionieren.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/fingeruebung-2/

In dieser Übung sollten wir uns mit einem Feedback-Formular und dessen Kommentarübersicht auseinandersetzen. Ich habe hier versucht eine sehr hohe Benutzerfreundlichkeit beim Ausfüllen des Formulars zu erzielen. Dabei bekommt der User sofort mitgeteilt, ob er das Formular richtig oder falsch ausfüllt. Mir war es wichtig, dass der Benutzer ständig Feedback darüber bekommt, was er gerade ausgefüllt. Auch das Abschicken, wenn auch nicht funktional, gibt ein Feedback zurück, wenn alles erfolgreich war.

Die Kommentare sind sehr flat gehalten. Die Antworten auf Kommentare zum besseren Verständnis der Hierarchie eingerückt.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/fingeruebung-3/

Copyright

©André Kurfürst

Quelle: http://www.stylepark.com/de/beitraege/buecher

Die letzte Textaufgabe hatte wieder die gleichen Anforderungen, wie die anderen beiden Texte davor, mit Ausnahme der Skalierbarkeit. Die Seite ist eine Touch-optimierte Oberfläche geworden, die es erlaubt mit sämtlichen Eingabegeräten zu navigieren (Pfeiltasten, Maus oder Finger)

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/text-3/

Die vorletzte Fingerübung beschäftigte sich mit der Erstellung eines kleinen Icon-Sets. Dazu mussten wir uns eine Schrift auswählen und diese nach deren Charakteristiken (Strichstärken, Kurvenformen, …) analysieren. Diese Icons sollten dann in einem Webseiten-Kontext dargestellt werden.

Ich habe Icons für eine Navigation für die Schriftart Raleway erstellt. Dabei habe ich mich besonders auf die Strichstärken konzentriert. Leider kam es dann dazu, dass die Linien der Icons auf normalen Monitoren (ohne Retina) teilweise „verschluckt“ worden. Auch das etwas unterschiedliche Schriftartenrendering machte die Sache nicht einfacher. Am Ende ist eine kleine Icon-Sammlung entstanden, die auf „unscharfen“ und scharfen Displays gut erkennbar sind.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/fingeruebung-4/

Die letzte Aufgabe war die Erstellung einer Index-Seite für alle im Laufe des Kurses entstandenen Aufgaben.

Ich habe mich hier entschieden, kurz auf meine Arbeitstools hinzuweisen und in der Übersicht für jede Aufgabe alle verwendeten Farben, Schriften und die Anzahl der geschriebenen Codezeilen zu vermerken.

Die Übung ist unter folgender Adresse zu erreichen: http://webtypografie.andrekurfuerst.de/fingeruebung-5/

Da ich schon seit über 8 Jahren als Frontend-Entwickler arbeite, war das reine Coding für mich nicht so schwer, aber darum ging es mir im Endeffekt nicht. Ich hatte immer Probleme mit Schriftauswahl. Durch die vielen Übungen wurde ich praktisch „gezwungen“ mich damit näher auseinander zu setzen und das hat mir wirklich sehr weiter geholfen. Wenn auch die erste Übung sehr holprig los ging und ich mich sehr schwer getan habe, bin ich doch von Aufgabe zu Aufgabe für mich persönlich immer besser geworden. Auch CSS technisch habe ich, zumindest was Typografie angeht, einiges dazu lernen können.