Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Webtypo - Heike Otten

WEBTYPO!

Im Kurs Webtypografie bei Chris Magiera haben wir -wer hät's gedacht- mit Typografie im Web beschäftigt. Chris startete den Kurs, mit einigen Vorträgen zum Thema Typografie, aus denen ich vor allem mitnahm, mit welchen konkreten Mitteln ich typografische Möglichkeiten, die ich aus dem Print kenne, auch mit HTML und CSS umsetzen kann. Später konnte ich diese Mittel direkt in den fünf Aufgaben anwenden.

----------------------------> ab zur Übersichtsseite!

Bevor diese Doku alle Überaschung vorwegnimmt, schau dir doch erst einmal die [ÜBERSICHTSSEITE](http://bit.ly/1yglGfY „Übersichtsseite“) an!

_1 Elements of typographic style applied to the web

Elements2.jpgElements2.jpg

In der ersten Aufgabe behandelte jede_r von uns einen Abschnitt aus Robert Bringhurst Klassiker „The Elements of typographic Style“ und übertrug seine Ideen und Regeln auf die Webtypografie. Da ich zuvor praktisch keine Erfahrungen im Webdesign hatte, stelle mich diese Aufgabe vor die Herausforderung zu beurteilen, welche Faktoren im Web sich auf Bringhurst beziehen lassen. Gleichzeitig konnte ich mich durch diese Aufgabe mehr in das Thema einarbeiten und mir Wissen anlesen, dass mir in späteren Aufgaben geholfen hat. Die entstandenen Texte setzen wir anschließend als Website um. Meine Umsetzung bezieht sich auf den klassischen Stil der Printausgabe. Auch wenn die Umsetzung sicherlich noch nicht perfekt ist, habe ich durch die Aufgabe grundlegendes über Raster und Schrift im Web lernen können.

_2 Zitate

Bildschirmfoto 2015-03-31 um 23.00.32.pngBildschirmfoto 2015-03-31 um 23.00.32.png

In der zweiten Aufgabe setzen wir drei Zitate von Bringhurst typografisch um. Hier hat mir besonders die Freiheit der Aufgabe gefallen. Fern von jedem Raster konnte mit der Anordnung der Zitate frei experimentieren. Entstanden sind drei ganz unterschiedliche Entwürfe – von konzeptionell zu grafisch plakativ.

_3 Eskapade Fraktur Icons

Bildschirmfoto 2015-03-31 um 23.01.00.pngBildschirmfoto 2015-03-31 um 23.01.00.png

Als „Fingerübung“ haben wir anschließend ein Iconset zu einer Schrift unserer Wahl entworfen. Ich entschied mich für die Eskapade Fraktur, da ich durch die zunehmenden Möglichkeiten im Web auch Raum für verspieltere Schriften und Icons sah. Außerdem fand ich es spannend ein Iconset für eine Fraktur zu entwerfen, was auf den den ersten Blick erst einmal gegensätzlich scheint. In der Umsetzung sollte sich zeigen, dass es gar nicht so einfach ist, die starken Charakteristika der Fraktur auf Icons zu übertragen. Unterm Strich hat mir diese Aufgabe nicht nur super viel Spaß gemacht, sondern mich auch für die bewusste Auswahl von Icons sensibilisiert.

_2 Rotamanipulator

Bildschirmfoto 2015-03-31 um 22.59.47.pngBildschirmfoto 2015-03-31 um 22.59.47.png

Die erste Projektseite erstellte ich über den „Rotmanipulator“, ein tragbares Gerät, das mit visueller Wahrnehmung spielt. Die Umsetzung bezieht sich auf die visuelle Verwirrung, die das Gerät erzeugt und zeigt mal Text, mal Bild. Für mich war diese Aufgabe ein Übung in der Anordnung von Text und Bild zueinander, die ich relativ frei platziert habe. Gleichzeitig habe gelernt Videos einzubetten und zu stylen und simple Animationen zu erstellen.

_3 Sounds of Beijing

Bildschirmfoto 2015-03-31 um 23.00.13.pngBildschirmfoto 2015-03-31 um 23.00.13.png

Für die zweite Projektseite habe ich ein Projekt ausgewählt, von dem ich glaubte, dass es durch die Präsentation als Website deutlich profitieren würde. Sounds of Beijing zeigt Soundsequenzen, die an unterschiedlichen Orten in Peking aufgenommen wurden. In der Umsetzung habe ich die Sounds den Orten auf einer Karte zugeordnet. Durch clicken auf die Orte können die Sounds mit dazugehörigen Videos abgespielt werden. Vor allem Verwendung von Javascript war bei dieser Aufgabe neu für mich und es hat einige Versuche gebraucht, bis der Videoplayer einigermaßen so funktioniert hat, wie ich es mir vorgestellt hatte. Beim Setzen des dazugehörigen Textes, merkte ich aber auch, wie viel ich in dem Kurs bereits dazugelernt hatte. Insgesamt würde die Idee des Projektes meiner Meinung nach noch besser als horizontal scrollbare Website funktionieren, die noch mehr an die in der Überschrift aufgegriffene Soundamplitude erinnert.

Fazit

Der Webtypo Kurs hat mich wirklich weiter gebracht. Auch wenn ich immer wieder mal kürze, mal längere Durststrecken durchstehen musste, weil meine Vorstellungen sich selten (für mich) einfach umsetzen ließen oder irgendwo ein Semikolon verschwunden ist und meine Formatierung durcheinander bringt. Besonders bezogen auf HTML und CSS konnte viel dazu lernen: Am Anfang hatte ich praktisch keine Erfahrungen. Jetzt nach dem Kurs habe ich eine Vorstellung davon, wie ich meine Ideen umsetzen kann und welche Möglichkeiten mir Webdesign bietet. Kritisch betrachtet, denke ich, dass die typografische Arbeit leider etwas darunter gelitten hat, dass ich mich viel mit HTML und CSS auseinandersetzen musste. Mit mehr Kenntnissen hätte ich aus einigen Aufgaben sicher noch mehr herausholen können und typografisch mutiger und freier gestalten können.

Danke!

Am Schluss möchte ich mich natürlich noch bedanken: Zunächst einmal bei Chris, für sehr hilfreiches und motivierendes feedback, bei Marie für produktive Co-Workingsessions, bei Philipp und Lennart für hilfreiche Tipps und kritisches Feedback und natürlich beim ganzen Kurs für anregendes Feedback und Inspiration.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Chris Magiera

Zugehöriger Workspace

Webtypografie – WS 14/15

Entstehungszeitraum

Sommersemester 2015

Keywords