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 der visuellen Gestaltung von Florian Schulz

Grundlagen der visuellen Gestaltung von Florian Schulz

Die Beschäftigung mit der Visualisierung komplexer Inhalte, Prozesse, Funktionen oder ästhetischer Strukturen setzt ein fundiertes Grundlagenwissen der Elemente grafischen Gestaltens voraus. Ausgehend von der kleinsten Einheit, dem Punkt, bis hin zu komplexen Strukturen, werden gestalterische Mittel, ohne die Beeinflussung eines Inhaltes, kennengelernt. Erweiternd wird die Dimension Zeit hinzugenommen um dynamische Prozesse zu generieren.

(Quelle: Djokic, Danijela: Grundlagen der visuellen Gestaltung. Kursbeschreibung. www.incom.org, 2009)

Vorweg: Ich habe die Endpräsentation und das Animationstool hochgeladen, sodass man sich diese anschauen kann.

01 Punkt: Mit Stift und Papier den Punkten eine Bedeutung verleihen

In den ersten Stunden des Kurses haben wir uns mit der elementaren grafischen Einheit beschäftigt. Es galt durch bewusste Positionierung von Punkten bestimmte Aussagen deutlich zu machen. Eine Einführung über die Gesetzmäßigkeiten der Gestaltgesetze und der Wahrnehmungspsychologie halfen bei der Bearbeitung der ersten Aufgaben.

1.jpg1.jpg

01 Punkt: Mehrere Punkte

3.jpg3.jpg

4.jpg4.jpg

01 Punkt: Die vier Jahreszeiten

8.jpg8.jpg

01 Punkt: Punkte auf einem Raster

2.jpg2.jpg

02 Linie

Als nächstes folgte die Linie und ebenfalls die Aufgabe mit Linien bestimmte Begriffe zu visualisieren. Die Herausforderung dabei war es mit möglichst wenigen Linien eine möglichst klare Aussage zu schaffen. So hatte ich beim Begriff »vielfältig« zunächst viele unterschiedliche Formen von Linien doch dies war ziemlich chaotisch und überladen. Die finale Lösung gefällt mir viel besser.

10.jpg10.jpg

02 Linie: Gerade, gebogen, anschwellend, progressiv

Basierend auf bestimmten Parametern sollten Linienkompositionen im Quadrat geschaffen werden.

5.jpg5.jpg

6.jpg6.jpg

02 Linie: In 6 Schritten

7.jpg7.jpg

11.jpg11.jpg

02 Linie: Vom Punkt zur Linie zur Fläche

12.jpg12.jpg

03 Fläche: Bewegung

13.jpg13.jpg

03 Fläche: Kombination

In dieser Aufgabe sollten zwei selbst gewählte, einfache Flächen systematisch in Quadraten kombiniert werden. Ein Quadrat war in sich in 4 kleine Quadrate geteilt, die mit den Flächen gefüllt werden konnten. Aufgrund der Systematik habe ich diese Aufgabe nach eingehender Bearbeitung auf Papier später in Processing weiterbearbeitet. Ich finde es toll, wie durch diese einfache Regel so unglaublich viele verschiedene Flächen entstehen können.

14.jpg14.jpg

03 Fläche: Kontrast

Ebenfalls eine Aufgabe, bei der durch systematische Änderung eines Parameters, in diesem Fall des Grauwertes, die Wirkung des Gesamten verändert werden kann. Interessanterweise entstehen dadurch ganz unterschiedliche Bewegungen im Bild. Es zieht den Blick des Betrachters in das Bild hinein, heraus oder lässt ihn springen.

15.jpg15.jpg

04 Lineamente

Am Ende des Kurses ging es um Lineamente also Reihungen von Einzelbildern, die eine Entwicklung zeigen. Ziel war es später die statischen Lineamente in einem Raster zu animieren.

16.jpg16.jpg

05 Animationstool

Menü2.pngMenü2.png

Nachdem die Animationen erstellt wurden sollten wir uns überlegen, wie man diese mit Hilfe eines Animationstools Abspielen und Verändern kann. Ich wollte unbedingt, dass die Animationen im Mittelpunkt stehen und möglichst durch nichts gestört werden. Daher habe ich mich für ein Menü entschieden, dass an jedem Ort der Bühne durch klicken aufgerufen werden kann.

Darin habe ich dann 7 Werkzeuge untergebracht: Abspielen/Anhalten, Animation ändern, Abspielgeschwindigkeit ändern, Invertieren, Lineament ändern, Pulsieren an/aus, Zerteilen

Nachdem ein Werkzeug ausgewählt wurde, verschwindet das Menü.

Einige Werkzeuge benutzt man indem man auf die Animation klickt. Andere indem man eine horizontale Linie mit der Maus zieht.

Um das ganze deutlich zu machen, habe ich einen Film hochgeladen.

06 Navigation

Am Ende des Semesters wurden alle Ergebnisse präsentiert. Dafür habe ich ein Navigationskonzept erstellt, welches ich in Flash umgesetzt habe. Die Navigation besteht aus 4 Quadraten, die die 4 Aufgaben des Kurses repräsentieren. Diese Quadrate dienen als aktive Menüflächen, die sobald der User den Mauszeiger über sie bewegt transparent werden und Untermenüpunkte offenbaren. Diese repräsentiere die einzelnen Aufgaben der Themen. Wenn sie geklickt werden, fallen sie aus dem Menü heraus nach unten und bilden dort einen Verlauf der angesehenen Aufgaben. Somit zeigt das Menü nur noch die Aufgaben, die man noch nicht gesehen hat und der Verlauf ermöglicht es dennoch zu schon gesehenen Aufgaben zurückzukehren.

Bildschirmfoto 2010-03-26 um 09.31.56.pngBildschirmfoto 2010-03-26 um 09.31.56.png

menü.jpgmenü.jpg

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: DD

Entstehungszeitraum

Wintersemester 2009 / 2010