Die Projekte des Kurses sind auf [dieser Übersichtsseite](http://interface.fh-potsdam.de/webtypo/studenten/ivo-herrmann/ „Übersichtsseite der Aufgaben des Kurses “) zu finden.

In der ersten Aufgabe ging es darum, sich mit drei Zitaten aus dem ersten Kapitel des Buches „The Elements of Typographic Style“ von Robert Bringhurst auseinanderzusetzen. Diese drei Zitate sollten in den Webkontext übertragen werden, um die technischen Machbarkeit zu prüfen. Dabei wollte ich typografische Interpretationen und deren Anwendbarkeit im Web, anhand von Beispielen, mit entsprechenden Erläuterungen, verdeutlichen.

[Website zur Aufgabe 1](http://interface.fh-potsdam.de/webtypo/studenten/ivo-herrmann/aufgabe-1/zitate/ „Website zur Aufgabe 1“)

Bei dieser Aufgabe wurden uns Texabschnitte aus dem Buch „The Elements of Typographic Style“ von Robert Bringhurst zugelost. Dabei habe ich den Part zum Thema Ligaturen gezogen. Ein Thema, was im Web noch nicht all zu viel Aufmerksamkeit auf sich zieht, jedoch interessante Möglichkeiten für Semantik und Lesbarkeit von Inhalten bietet.

Nach einer kleinen Einleitung in die Welt der Ligaturen und der Definition nach Robert Bringhurst, habe ich Bespiele für die Nutzung von Ligaturen im Web entwickelt. Dabei bin ich auf eine interessante Technik für eine wahrscheinlich nicht vorhergesehene Nutzung von Ligaturen im Web gestoßen. Ligaturen können nämlich auch für Icons und Logos benutzt werden. Dazu müssen die entsprechenden Icons/Logos in einen eigenen Webfont erstellt werden. Durch die Deklaration von Zeichenfolgen bestimmt man diese Grafiken dann als Ligatur. Mehr dazu und eine detaillierte Beschreibung Anhand eines Beispiels, ist in dieser Aufgabe beschrieben.

[Website zur Aufgabe 2](http://interface.fh-potsdam.de/webtypo/studenten/ivo-herrmann/aufgabe-1/abschnitte/ „Website zur Aufgabe 2“)

Für Aufgabe 3 sollten wir uns vorerst eine Schrift aussuchen, um diese anschließend zu analysieren. Dabei lag der Fokus auf der Charakteristik der Schrift. Die Erkenntnise sollten visuell aufbereitet werden, dabei waren folgende Eigenschaften zu beachten: Generelle Anmutung, Strichführung, Strichstärken, Kontraste, Kurven, Winkel, Abschlüsse und weitere Besonderheiten.

Nachdem die Charakteristik der Schrift klar war, ging es an die Gestaltung von passenden Icons. Ich habe mich für die Source Sans Pro entschieden. Eine serifenlose Schrift vorerst gestaltet für die Nutzung in grafischen Benutzeroberflächen. Die Analyse und die Icons sind in dieser Aufgabe beschrieben.

[Website zur Aufgabe 3](http://interface.fh-potsdam.de/webtypo/studenten/ivo-herrmann/fingeruebung-1/ „Website zur Aufgabe 3“)

Im Rahmen von Aufgabe 2 und 3 sollten zwei eigene Projekte fürs Web in Form zweier Microsites aufbereitet werden. Für mich eine Traumaufgabe, da ich zur Zeit an meinem Portfolio arbeite und somit zwei Vorlagen für Projektdokumentationen gestalten konnte.

Projekt 1 – Die Octodrum

In meinem ersten Semester an der Fachhochschule Potsdam habe ich am Kurs Musical Interfaces teilgenommen. Dabei entstand die Octodrum, ein Midi-Controller zum Trommeln. Für die damalige Dokumentation sollten wir ein kurzes Video machen, welches nun auch der Einstiegspunkt bei diesem Template ist. Da ich immer gerne den Prozess beschreibe, sollte auch die eigentliche Dokumentation ihren Platz finden. Für das Projekt selber ist aber an sich das Video absolut ausreichend und so beschloss ich die Doku in den unteren Bereich der Seite zu verschieben. So kann jeder der Interesse hat mehr über die Entstehung erfahren, das Ergebnis ist aber auf den ersten Blick erkennbar.

[Website zur Aufgabe 4](http://interface.fh-potsdam.de/webtypo/studenten/ivo-herrmann/aufgabe-2/ „Website zur Aufgabe 4“)

Projekt 2 – Meine Fotos

Beim zweiten Projekt habe ich mich für die Darstellung meiner Fotos entschieden. Dazu habe ich drei verschieden Themen behandelt und in jeweilige Galerien gepackt. Jede Galerie hat ein Intro mit einem Themenbild und einer kleinen Beschreibung. Die eigentlichen Fotos kommen erst dynamisch nach einem Klick. Hierbei habe ich viel mit neuen Technologien experimentiert, wodurch die Funktion und Benutzbarkeit im Moment auch nur im Chrome Browser wirklich gut gewährleistet ist. Ein großer Fokus lag hier auf den Animationen nach Interaktion, mit denen ich den Aufbau der Galerien verdeutlichen wollte.

[Website zur Aufgabe 5](http://interface.fh-potsdam.de/webtypo/studenten/ivo-herrmann/aufgabe-3/ „Website zur Aufgabe 5“)

Der Kurs hat mir riesig Spaß gemacht und viel gebracht. Die Vorträge von Chris haben neben der allgemeinen Einführung in die Welt der Webtypografie auch viele nützliche Tipps und Tricks zu Techniken enthalten. Die Aufgaben fand ich sehr abwechslungsreich und einfach passend zum Thema. Das wir eigene Projekte als Inhaltsgrundlage benutzen durften, war für mich das Highlight dabei. Da durch die Wiederverwendbarkeit für mein eigenes Portfolio ein Mehrwert entstand. Wir haben die Zwischenstände der Aufgaben stets besprochen, wobei das Feedback ehrlich und dadurch auch sehr hilfreich war.

Besonders gefiehl mir auch der Blog, den wir begleitend zum Kurs befüllt haben. Da alle einen etwas anderen Fokus für die eigenen Projekte hatten, wurden hier auch unterschiedlichste Links zu Tipps und Techniken veröffentlicht. So konnte ich Inhalte entdecken, die ich sonst wahrscheinlich nicht beachtet hätte.

Frontend-Kenntnisse sollten auf jeden Fall vorhanden sein, damit bei den Aufgaben der Fokus auf der Konzeption und der Gestaltung liegen kann. Wer Spaß am Entwickeln fürs Web hat, ist hier an der richtigen Stelle.