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

Grundlagen Visual Interface Design

In Visual Interface Design entstanden vier kleinere Projekte, in denen einzelne Aspekte des Gestaltens für Bildschirme behandelt wurden.

Fakten sammeln, Fakten zeigen

01_IMG_5594.png01_IMG_5594.png

Aus dem ersten Projekt Fakten sammeln, Fakten zeigen ging eine Infografik hervor, die meine Reisen im Jahr 2013 in Zahlen darstellt.

Fahrtenbuch 2013 ist eine Informationsgrafik über die vielen Reisen, welche ich im vergangenen Jahr un­ternommen habe. Aufgeführt sind die Kosten, die Kilometer, die ich zurück gelegt habe und die Zeit, die ich auf Reisen verbracht habe.

Die große, runde Grafik veranschaulicht die Werte, auf­geteilt auf die zwölf Monate. Unterhalb dieser Grafik befinden sich Auflistungen über die verschiedenen Ver­kehrsmittel und Gründe für meine Reisen sowie die Durchschnittswerte für eine Fahrt. Außerdem wird noch gezeigt, in welchem Verhältnis die Entfernung zur Fahrzeit steht, die ich mir für einen Euro kaufen kann.

01_Infografik_Fahrten2013_06.png01_Infografik_Fahrten2013_06.png

Vor allem die Infografik war eine Aufgabe, für die ich mich sehr begeis­tern konnte. Im vergangenen Jahr bin ich wegen meiner Freundin in Mainz und meiner Band in Hanau sehr häufig zwischen Berlin und dem Rhein-Main-Gebiet gependelt. Ich fasste also alle Reisen im vergangenen Jahr zusammen und erstellte daraus ein Plakat, das detailliert Auskunft über die Daten der einzelnen Monate gibt und vergleicht, welches von Bahn, Auto, Bus und Flugzeug das günstigste Verkehrsmittel im Vergleich von Strecke, Geschwindigkeit und Preis ist.

Pixel vs. Vektor

02_Rasterfont_-01.png02_Rasterfont_-01.png

In Pixel vs. Vektor entstand eine Rasterschrift mit einem Hauch von ,Blacklettercharakterʻ.

Die Rasterschrift Los Pollos basiert auf einem Raster aus Dreiecken, die durch die diagonale Teilung von Quadraten entstehen. Da die Buchstaben unterschiedliche Breiten aufweisen, kann es vorkommen, dass sich die Steigung der Diagonalen ändert. Deshalb gibt es zwei Varianten der Schrift, jenachdem, welche Steigung die dem Raster zu grunde liegenden Diagonalen aufweisen.

02_Rasterfont_-02.png02_Rasterfont_-02.png

02_Rasterfont_-03.png02_Rasterfont_-03.png

02_Rasterfont_-04.png02_Rasterfont_-04.png

Zeichen sprechen visuell

Zeichen sprechen visuell ist der Titel des dritten Projekts, in dem eine Icon­­familie für die einzelnen Module unseres Studiums entstand. Auch hier habe ich mich eines Rasters bedient, um die vielen unterschiedlichen Themen in einer Formsprache zu vereinigen.

Die Zeichenfamilie steht für die Sieben Module des Grundstudiums, also für die Grundlagenkurse für Elemntares Gestalten und die Atelierkurse, die Fachkurse Interfacedesign, Kommunikationsdesign und Produktdesign sowie die Theorie und Werkstattkurse.

Alle Zeichen basieren auf einem Raster aus 0°, 30°, 60° und 90° Linien. Es wird immer ein rechteckiges Grundelement mit einem grauen, Gegenstand dargestellt.

03_icons-01.png03_icons-01.png

Der Faktor Zeit

In Der Faktor Zeit entwarf ich drei Buttons mit Hilfe von HTML, CSS und jQuery für eine Website, die ich bereits vor einiger Zeit umgesetzt hatte.

Nr. 1

04_button_sketches-01.png04_button_sketches-01.png

Nr. 1 ist ein ganz simpler Button im Flat-Design mit leichtem Schlagschatten unterhalb. Wird der Mauszeiger über den Button bewegt färbt er sich dunkel ein. Beim Klick springt der Schatten nach innen, der Button ein/zwei Pixel nach unten und der Button wirkt eingedrückt.

Nr. 2

04_button_sketches-02.png04_button_sketches-02.png

Nr. 2 ist ein senden Button. Nach dem Klick wird der Button zum Ladebalken, wobei der bewegende Teil des Balken den Text „wird gesendet“ nach draußen schiebt und selbst mir „gesendet“ deklariert ist.

Nr. 3

04_button_sketches-03.png04_button_sketches-03.png

Innerhalb von Nr. 3 bewegt sich, an Anlehnung an die Website, eine schräge, dunkle Fläche nach oben. Genau das gleiche passiert mit einer noch dunkleren Fläche während des Klicks.

Fazit

Dass die Projekte des Kurses auf vier kleinere Aufgaben verteilt waren, hat mir gut gefallen, denn so hatte ich das ganze Semester über gleichmäßig zu tun. Auch das Feedback in lockerer Atmosphäre aus dem Kurs und von Constanze hat mich immer wieder dazu gebracht, meine Arbeiten zu überdenken und zu verbessern. Auch gut gefallen hat mir die Theorie Einheit mit dem Text von Preim und Dachselt, wobei ich auch nichts dagegen gehabt hätte den Text zu Hause zu lesen und im Kurs darüber zu diskutieren. Insgesamt ist Visual Interface Design ein Kurs, den ich jedem nur weiterempfehlen kann.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Constanze Langer

Entstehungszeitraum

Wintersemester 2013 / 2014