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 WS 06/07   //   Dokumentation von Thomas A. Sonsalla

Grundlagen der visuellen Gestaltung WS 06/07 // Dokumentation von Thomas A. Sonsalla

Der Punkt ist die kleinste Einheit im Bereich der graphischen Arbeit, er besitzt keinerlei Dimension, hat weder Länge noch Breite. Dennoch kann ein einzelner Punkt allein durch seine Größe und Position innerhalb einer Fläche völlig unterschiedliche Eigenschaften und Anmutungen vermitteln.

Die Auseinandersetzung mit diesem Thema erfolgt über 6 Aufgaben, bei denen verschiedene Anmutungen, ganz nach eigenem Gefühl, mittels einem und später auch mittels mehrerer Punkte dargestellt werden.

Aufgaben zum Thema Punkt

Aufgabe 1:
Positionieren Sie einen Punkt so, dass er folgende Anmutungen darstellt:

- leicht
- schwer
- schwebend
- lastend
- negativ
- positiv
- statisch
- dynamisch
- unruhig
- ruhig
- nah
- fernAufgabe 1:
Positionieren Sie einen Punkt so, dass er folgende Anmutungen darstellt:

- leicht
- schwer
- schwebend
- lastend
- negativ
- positiv
- statisch
- dynamisch
- unruhig
- ruhig
- nah
- fern
Aufgabe 2:
Positionieren Sie mehrere Punkte so, dass sie folgende Anmutungen darstellen:

- leicht
- schwer
- schwebend
- lastend
- negativ
- positiv
- statisch
- dynamisch
- unruhig
- ruhig
- nah
- fernAufgabe 2:
Positionieren Sie mehrere Punkte so, dass sie folgende Anmutungen darstellen:

- leicht
- schwer
- schwebend
- lastend
- negativ
- positiv
- statisch
- dynamisch
- unruhig
- ruhig
- nah
- fern
Aufgabe 3:
Positionieren sie mehrere Punkte so, dass sie folgende Anmutungen darstellen:
- Streuung
- Ansammlung
- Ausgrenzung
- Hierarchische Gruppe
- Flucht/BewegungAufgabe 3:
Positionieren sie mehrere Punkte so, dass sie folgende Anmutungen darstellen:
- Streuung
- Ansammlung
- Ausgrenzung
- Hierarchische Gruppe
- Flucht/Bewegung
Aufgabe 4:
Punktübung in 3 Schritten:
- Gleich grosse Punkte, Anzahl zunehmend
- 2 Punktgrössen, Anzahl zunehmend
- 3 Punktgrössen, Anzahl zunehmendAufgabe 4:
Punktübung in 3 Schritten:
- Gleich grosse Punkte, Anzahl zunehmend
- 2 Punktgrössen, Anzahl zunehmend
- 3 Punktgrössen, Anzahl zunehmend
Visualisieren Sie die vier Jahreszeiten mit Hilfe von verschiedenen Punktgrössen. Analysieren Sie vorab die typischen EigenschaftenVisualisieren Sie die vier Jahreszeiten mit Hilfe von verschiedenen Punktgrössen. Analysieren Sie vorab die typischen Eigenschaften
Visualisieren Sie mit gleichen oder verschiedenen Punktgrössen die Begriffe:

- krumm
- lebendig
- reich
- eisigVisualisieren Sie mit gleichen oder verschiedenen Punktgrössen die Begriffe:

- krumm
- lebendig
- reich
- eisig

Mit der Linie gewinnt die gestalterische Arbeit die erste Dimension. Im Gegensatz zur festen Position eines Punktes besitzt die Linie einen Anfang und ein Ende und hat somit eine Länge, durch die zusätzlich definiert werden kann.

Um den Charakter der Länge und die Wirkung, die mehrere Linien in unterschiedlichen Abständen und Formen aufweisen, zu ergründen, werden 2 Aufgaben gestellt, in denen umfangreich nach eigenen Ideen Linen entwickelt und je nach Aufgabenstellung arrangiert werden.

Die 3. Aufgabe wiederholt noch einmal, zum Vergleich, eine Übung bei der Punktaufgabe, allerdings werden andere Begriffe visualisiert.

Aufgaben zum Thema Linie

- Positionieren Sie mehrere gerade Linien gleicher Stärke so, dass sich ihr Abstand progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien bei gleichem Abstand so, dass sich ihre Stärke progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien so, dass sich ihr Abstand und ihre Stärke progressiv vergrössert.

- Führen Sie diese Übung ebenfalls mit gebogenen und eckigen Linien durch.

- Führen Sie diese Übung mit an- und abschwellenden, geraden, gebogenen und eckigen Linien durch.

- Digitalisieren Sie je 3 Varianten.- Positionieren Sie mehrere gerade Linien gleicher Stärke so, dass sich ihr Abstand progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien bei gleichem Abstand so, dass sich ihre Stärke progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien so, dass sich ihr Abstand und ihre Stärke progressiv vergrössert.

- Führen Sie diese Übung ebenfalls mit gebogenen und eckigen Linien durch.

- Führen Sie diese Übung mit an- und abschwellenden, geraden, gebogenen und eckigen Linien durch.

- Digitalisieren Sie je 3 Varianten.
- Positionieren Sie mehrere gerade Linien gleicher Stärke so, dass sich ihr Abstand progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien bei gleichem Abstand so, dass sich ihre Stärke progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien so, dass sich ihr Abstand und ihre Stärke progressiv vergrössert.

- Führen Sie diese Übung ebenfalls mit gebogenen und eckigen Linien durch.

- Führen Sie diese Übung mit an- und abschwellenden, geraden, gebogenen und eckigen Linien durch.

- Digitalisieren Sie je 3 Varianten.- Positionieren Sie mehrere gerade Linien gleicher Stärke so, dass sich ihr Abstand progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien bei gleichem Abstand so, dass sich ihre Stärke progressiv vergrössert.
- Positionieren Sie mehrere gerade Linien so, dass sich ihr Abstand und ihre Stärke progressiv vergrössert.

- Führen Sie diese Übung ebenfalls mit gebogenen und eckigen Linien durch.

- Führen Sie diese Übung mit an- und abschwellenden, geraden, gebogenen und eckigen Linien durch.

- Digitalisieren Sie je 3 Varianten.
Linienübung in 6 Schritten:
- Gleich lange, gleich starke gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke gerade Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke gerade Linien, Anzahl logisch und spannungsvoll zunehmend.Linienübung in 6 Schritten:
- Gleich lange, gleich starke gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke gerade Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
Linienübung in 6 Schritten:
- Gleich lange, gleich starke gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke gebogene Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.Linienübung in 6 Schritten:
- Gleich lange, gleich starke gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke gebogene Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
Linienübung in 6 Schritten:
- Gleich lange, gleich starke an- und abschwellende gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke an- und abschwellende gerade Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke an- und abschwellende gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke an- und abschwellende gerade Linien, Anzahl logisch und spannungsvoll zunehmend.Linienübung in 6 Schritten:
- Gleich lange, gleich starke an- und abschwellende gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke an- und abschwellende gerade Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke an- und abschwellende gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke an- und abschwellende gerade Linien, Anzahl logisch und spannungsvoll zunehmend.
Linienübung in 6 Schritten:
- Gleich lange, gleich starke an- und abschwellende gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke an- und abschwellende gebogene Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke an- und abschwellende gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke an- und abschwellende gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.Linienübung in 6 Schritten:
- Gleich lange, gleich starke an- und abschwellende gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Gleich lange, gleich starke an- und abschwellende gebogene Linien, Anzahl rhythmisch zunehmend.
- Verschieden lange, gleich starke an- und abschwellende gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
- Verschieden lange, verschieden starke an- und abschwellende gebogene Linien, Anzahl logisch und spannungsvoll zunehmend.
Digitalisieren Sie die Begriffe in einem und/oder mehreren Schritten:
- laut
- rhythmisch
- schnell
- vielfältig
- belebt
- ruhig
Digitalisieren Sie die Begriffe in einem und/oder mehreren Schritten:
- laut
- rhythmisch
- schnell
- vielfältig
- belebt
- ruhig

Flaeche.jpgFlaeche.jpg

In den vorherigen Übungen konnte man feststellen, dass sowohl Punkte als auch Linien ab einer bestimmten Größe schon als Fläche betrachtet werden können.

Eine Fläche besitzt im Gegensatz zur Linie eine zweite Dimension, sie hat nicht nur eine Länge, sondern auch eine Breite.

Noch viel mehr als bei Punkt und Linie kommt jetzt der Faktor der Proportion und Anordnung zum Tragen.

In 4 unterschiedlichen Aufgaben wird das Gefühl dafür in Form von Hinzufügen und Wegnnehmen von Flächen, variierter Anordnung gleicher Flächenelemente sowie einer Flächenkomposition mit unterschiedlichen Graustufen vermittelt.

Aufgaben zum Thema Fläche

- Positionieren Sie mehrere gleichgrosse quadratische Flächen so, dass sie innerhalb von 9 Schritten durch Drehen, Wegnehmen, Ergänzen, Verschieben einen spannungsvollen Bewegungsablauf darstellen.
Alle 9 Schritte gehören zusammen, jedoch sollte jedes für sich stehen können.
- Wiederholen Sie die Aufgabe mit zwei oder mehreren unterschiedlich grossen Flächen.- Positionieren Sie mehrere gleichgrosse quadratische Flächen so, dass sie innerhalb von 9 Schritten durch Drehen, Wegnehmen, Ergänzen, Verschieben einen spannungsvollen Bewegungsablauf darstellen.
Alle 9 Schritte gehören zusammen, jedoch sollte jedes für sich stehen können.
- Wiederholen Sie die Aufgabe mit zwei oder mehreren unterschiedlich grossen Flächen.
- Positionieren Sie mehrere gleichgrosse quadratische Flächen so, dass sie innerhalb von 9 Schritten durch Drehen, Wegnehmen, Ergänzen, Verschieben einen spannungsvollen Bewegungsablauf darstellen.
Alle 9 Schritte gehören zusammen, jedoch sollte jedes für sich stehen können.
- Wiederholen Sie die Aufgabe mit zwei oder mehreren unterschiedlich grossen Flächen.- Positionieren Sie mehrere gleichgrosse quadratische Flächen so, dass sie innerhalb von 9 Schritten durch Drehen, Wegnehmen, Ergänzen, Verschieben einen spannungsvollen Bewegungsablauf darstellen.
Alle 9 Schritte gehören zusammen, jedoch sollte jedes für sich stehen können.
- Wiederholen Sie die Aufgabe mit zwei oder mehreren unterschiedlich grossen Flächen.
Positionieren Sie zwei/vier Flächenelemente so, dass sie durch neue Anordnung Variationen der Fläche entwickeln.Positionieren Sie zwei/vier Flächenelemente so, dass sie durch neue Anordnung Variationen der Fläche entwickeln.
Erstellen Sie in neun oder mehr nachvollziehbaren Schritten einen spannungsvollen Ablauf vom Punkt, über Linie zu einer Fläche. Sie dürfen mit Quadraten oder abgerundeten Ecken arbeiten.Erstellen Sie in neun oder mehr nachvollziehbaren Schritten einen spannungsvollen Ablauf vom Punkt, über Linie zu einer Fläche. Sie dürfen mit Quadraten oder abgerundeten Ecken arbeiten.
Erstellen Sie in neun oder mehr nachvollziehbaren Schritten einen spannungsvollen Ablauf vom Punkt, über Linie zu einer Fläche. Sie dürfen mit Quadraten oder abgerundeten Ecken arbeiten.Erstellen Sie in neun oder mehr nachvollziehbaren Schritten einen spannungsvollen Ablauf vom Punkt, über Linie zu einer Fläche. Sie dürfen mit Quadraten oder abgerundeten Ecken arbeiten.
Erstellen Sie in neun oder mehr nachvollziehbaren Schritten einen spannungsvollen Ablauf vom Punkt, über Linie zu einer Fläche. Sie dürfen mit Quadraten oder abgerundeten Ecken arbeiten.Erstellen Sie in neun oder mehr nachvollziehbaren Schritten einen spannungsvollen Ablauf vom Punkt, über Linie zu einer Fläche. Sie dürfen mit Quadraten oder abgerundeten Ecken arbeiten.

Transformation

Vier unterschiedliche geometrische Grundelemente, die sich auf einer 7x7 Fläche in je einer Ecke befinden, sollen durch Transformation in 7 Schritten miteinander verbunden werden.

Jedes Element muss durch lineare Übergänge logisch zu einem anderen Element transformierbar sein.

Die so entstandene Matrix ist hier zu sehen:

Sonsalla_Transformation.jpgSonsalla_Transformation.jpg

Lineamente.jpgLineamente.jpg

Ein Lineament stellt eine Transformation eines Elementes zu einer anderen Form in mehreren Schritten dar. Dies kann durch Verformung geschehen, aber auch durch Multiplikation, Division, Addition oder Substraktion.

Als Aufgabe werden Lineamente in 7 Schritten erstellt, dabei ist das Ausgangselement sowie die Art der Verwandlung frei wählbar.

T_Sonsalla_Lineamente_A01.jpgT_Sonsalla_Lineamente_A01.jpg

Permutationen.jpgPermutationen.jpg

Die Permutation ist die Aneinanderreihung bereits erstellter Lineamente nach einem logischen Muster in einer Fläche von 7x7. Dies kann das Stapeln der Lineamente bedeuten als auch eine komplette Neustrukturierung, welche ein spannendes Muster erzeugt und der Permutation eine Richtung gibt.

Nach Erstellung der Permutationen aus ausgewählten Lineamenten werden diese verkleinert und widerum auf einer Fläche von nun 4x4 aneinandergereiht, gespiegelt oder der Tonwert umgekehrt, um spannungsvolle Effekte und Muster zu erstellen.

Durch das Einfärben der Permutationen können die Strukturen, die entstanden sind, verstärkt oder abgeschwächt werden. Die Richtung, in die eine Permutation zu verlaufen schien, wird mit Farbverläufen verstärkt oder abgeschwächt, je nach Richtung des Verlaufs.

Permutationen s/w

Sonsalla_Permutation02.jpgSonsalla_Permutation02.jpg
Sonsalla_Permutation03.jpgSonsalla_Permutation03.jpg
Sonsalla_Permutation05.jpgSonsalla_Permutation05.jpg
Sonsalla_Permutation06.jpgSonsalla_Permutation06.jpg
Sonsalla_Permutation07.jpgSonsalla_Permutation07.jpg
Sonsalla_Permutation08.jpgSonsalla_Permutation08.jpg

Permutationen Farbe

Sonsalla_PermutationFarbe01.jpgSonsalla_PermutationFarbe01.jpg
Sonsalla_PermutationFarbe02.jpgSonsalla_PermutationFarbe02.jpg

Animationen.jpgAnimationen.jpg

Die Spannung, die einer Permutation innewohnt, soll nun mittels Animationen verdeutlicht werden. Gleichzeitig enstehen bei der Auseinandesetzung mit diesem Thema völlig neue Abläufe und Bewegungen.

Zur Gewöhnung an das Thema Animationen sind folgende Testanimationen entstanden, manche mehr, manche weniger aufwendig:

Animation 1

Sonsalla_Animation01.jpgSonsalla_Animation01.jpg

Animation 2

Sonsalla_Animation02.jpgSonsalla_Animation02.jpg

Animation 3

Sonsalla_Animation03.jpgSonsalla_Animation03.jpg

Animation 4

Sonsalla_Animation04.jpgSonsalla_Animation04.jpg

Animation 5

Sonsalla_Animation05.jpgSonsalla_Animation05.jpg

Animation 6

Animation 7

Sonsalla_Animation07.jpgSonsalla_Animation07.jpg

Animation 8

Sonsalla_Animation08.jpgSonsalla_Animation08.jpg

Animation 9

Sonsalla_Animation09.jpgSonsalla_Animation09.jpg

Endaufgabe

Die finale Aufgabe ist ein Animationstool, mit dem es einem unbedarften User möglich ist, sich die Arbeiten, die im Kurs entstanden sind, anzusehen. Es sollte leicht zu navigieren und ebenso zu verstehen sein.

Das Tool besteht aus zwei großen Bereichen.

Der Erste enthält eine Auswahl an Arbeiten aus dem statischen Teil des Kurses, von Punkt bis zu den farbigen Permutationen. Dem User ist es möglich, sich wie bei einer Slideshow sämtliche Arbeiten nacheinander anzusehen oder nur einen bestimmten Teil, wie z.B. Linien.

Desweiteren wird durch Überfahren eines Info-Buttons ein kleiner, erklärender Text zu den Aufgaben eingeblendet, der kurz die Aufgabenstellung umreißt.

Der zweite Bereich des Animationstools ist gleichzeitig die eigentliche Endaufgabe.

Mittels einer Toolbar wird dem User ermöglicht, sich verschiedene Animationen anzusehen. Dabei hat er jederzeit die Wahl,

  • das Lineament
  • die Größe der Permutation
  • die Farbe
  • die Animation

zu ändern. So kann er schnell Vergleiche ziehen, z.B. zwischen zwei Lineamenten und wie diese die gleiche Animation verändern.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: DD

Entstehungszeitraum

SoSe 06 – WiSe 06 / 07