Einzelelementen bilden Gruppen, die wiederum auf einer Seite oder
Benutzeroberfläche platziert werden.
Themen dieser Lerneinheit: trennende und verbindende Hilfselemente,
Ordnung und Chaos, Monotonie und Variation, Bewegung und Dynamik,
optische Täuschung.
Status:
(empty)
Version:
(empty)
History:
(empty)
Author
Author 1:
Viktor
Solt-Bittner
E-Mail:
viktor@bonsai-cuts.at
Author 2:
(empty)
E-Mail:
(empty)
Author 3:
(empty)
E-Mail:
(empty)
Author 4:
(empty)
E-Mail:
(empty)
Author 5:
(empty)
E-Mail:
(empty)
Organization:
Bonsai
Cuts, www.bonsai-cuts.at
Content
Aufteilung und Gruppierung
1
Formale Gruppierung stellt inhaltliche
Zusammenhänge dar.
Die Aufteilung und Gruppierung von Zeichen auf einer Benutzeroberfläche
bieten die einfachste Möglichkeit, inhaltliche Zusammenhänge visuell
darzustellen.
Die Kompositionsprinzipien von Aufteilung und Gruppierung folgen
dem Gestaltgesetz der Nähe und dem Gesetz des Gemeinsamen Schicksals.
Distanz
Innerhalb einer Gruppe von Zeichen werden jene, die in größerer räumlicher
Nähe zueinander platziert sind, als inhaltlich stärker zusammengehörend
empfunden.
Weiter auseinander platzierte Zeichen werden als weniger zusammengehörend
gesehen. Ab einer gewissen Entfernung reißt die empfundene Verbindung
ganz ab.
AUTO
Der Abstand zwischen der
ersten Dreiergruppe von Zeichen und den zwei Zeichen in der Mitte
trennt diese Gruppen deutlich voneinander. Der Abstand vor dem ganz
rechten Zeichen ist so groß, dass die Verbindung zu den zwei linken
Zeichengruppen ganz abgerissen ist.
AUTO
Distanzen wirken relativ zur Größe der Bildteile und der gesamten
Bildfläche.
Trenn- und Verbindungselemente
Trenn- und Verbindungselemente können die empfundene räumlichen Distanz
zwischen Zeichen vergrößern bzw. verkleinern.
Diese Sekundärelemente können linear oder flächig sein. Meist werden
sie gestalterisch so einfach gehalten, dass sie als Zeichen nicht
bewusst wahrgenommen werden.
AUTO
AUTO
Ein Trennelement kann oft ohne sonstige Veränderung nur durch Drehung
– meist im Rechten Winkel – zum Verbindungselement werden und umgekehrt.
Die vier „Himmelsrichtungen“ einer Bildfläche werden mit verschiedenen
Begriffen in Verbindung gebracht und haben entsprechende psychologische
Bedeutung:
Innerhalb einer Gruppe von Zeichen werden höher platzierte als wichtiger
empfunden.
Der Kontrasteindruck zwischen oben und unten kann durch Farbgebung,
Distanz oder die Verwendung von Trennelementen verstärkt oder abgeschwächt
werden.
Horizontale Platzierung
1
Links
zuerst, wichtiger, zu Hause, Subjekt (Autor, Leser)
Rechts
später, nachfolgend, untergeordnet, fort, Objekt (die anderen)
2
Die Wirkung der horizontalen Platzierung ist schwächer als die der
vertikalen. Sie scheint stark von der Leserichtung abzuhängen, die
Einfluss darauf nimmt, in welcher Reihenfolge wir nicht nur Text sondern
auch alle anderen visuellen Zeichen „lesen“.
Links
zuerst, wichtiger, zu Hause, Subjekt (Autor, Leser)
Rechts
später, nachfolgend, untergeordnet, fort, Objekt (die anderen)
Muster
1
Muster machen Gruppen leichter fassbar.
Ordnung und Monotonie
Teilordnung
Ordnungsbruch
Grundordnung, Variation
2
Zeichengruppen, die zu einem Muster angeordnet werden, wirken übersichtlicher.
Muster sind einprägsamer als unregelmäßige Gruppierungen. Die Anzahl
der zu einem Muster geordneten Einzelelemente ist schneller erfassbar
als jene von unregelmäßig arrangierten Elementen.
AUTO
Im Gegensatz zur linken Gruppe ist die Zahl der zu einem Muster angeordneten
Punkte rechts mit einem Blick erfassbar.
Ordnung und Monotonie
Ab einer Menge von ca. 12 bis 15 Einzelelementen wird der Eindruck
von Ordnung, den ein Muster vermittelt, durch den Eindruck von Monotonie
zunehmend überlagert.
AUTO
AUTO
Diese Eintönigkeit kann durch die Zusammenfassung zu kleineren Teilordnungen
gemildert werden.
AUTO
Ordnung und Variation
Aus einem Muster ausbrechende Zeichen ziehen Aufmerksamkeit auf sich.
AUTO
AUTO
Eine strenge Grundordnung, die variiert und in kleinen Details aufgebrochen
wird, wirkt visuell besonders anregend.
AUTO
Das Design eines orientalischen Teppichs basiert auf einer grundlegenden
Ordnung, die aber ständig abgewandelt und durchbrochen wird. Monotonie
wird auf spielerische Weise vermieden, ohne dass der Eindruck von
Chaos entsteht.
Gewicht und Gegengewicht
1
Einzelteile beeinflussen das Gesamtgleichgewicht
der Komposition.
2
AUTO
So wie ein einzelnes Gestaltungselement im oder aus dem visuellen
Gleichgewicht erscheinen kann, so kann auch ein ganzes Bild, eine
Seite oder Benutzeroberfläche ausgewogen oder instabil erscheinen.
Das komplexe Gesamtgleichgewicht wird durch die Platzierung der Gestaltungselemente
im Gesamtformat, durch ihre Größe, Farbe und Helligkeit beeinflusst.
Gleichgewicht der Formen
Besonders deutlich tritt die Komposition als Suche nach ausgewogener
Verteilung von Farben und Formen in der abstrakten, auf einfache Formen
reduzierten Malerei in den Vordergrund der Bildgestaltung. Doch die
klassische gegenständliche Malerei oder die angewandte Kunst – also
das Design – folgt bewusst oder intuitiv den selben Regeln.
Visuelle Komposition bei Malewitsch
Für sich allein wäre jedes der Vierecke aus dieser Komposition instabil
und würde den Eindruck erzeugen, als müsste es umkippen. Durch die
Platzierung der Teile zueinander und in Beziehung zum Gesamtformat
entsteht der Eindruck von Gleichgewicht, ähnlich wie in einem Mobile.
Durch anklicken können Sie einzelne Vierecke aus- und wieder einschalten.
Beachten Sie, wie das Gleichgewicht der Bildkomposition verändert
wird. Nicht jedes Element hat für das Gesamtgleichgewicht gleich große
Bedeutung.
zurück, heimwärts, Widerstand überwindend, Objekt (die anderen)
Bewegung nach rechts
vorwärts, fort, im Strom fließend, Subjekt (Autor, Leser)
2
Bewegungswahrnehmung
Unabhängig von Farbe oder Form nehmen wir
Bewegung als eigene visuelle Qualität wahr.
Bewegung zieht unseren Blick unwiderstehlich an. In einer Multimediaanwendung
können einfache animierte Elemente in einer statischen Umgebung den
Blick des Betrachters lenken.
Dieses Gestaltungsmittel muss allerdings
äußerst sparsam eingesetzt werden, da Animation leicht die gesamte
Aufmerksamkeit auf sich ziehen und von allen anderen Teilen abziehen
kann.
AUTO
AUTO
Klicken Sie auf die rote Kreisscheibe. Versuchen Sie, den Text zu
lesen, ohne sich vom hüpfenden Kreis ablenken zu lassen. (Durch nochmaliges
Klicken auf den Kreis kann die Animation wieder gestoppt werden.)
Bewegungsrichtung
Die Prinzipien der Aufteilung und Gruppierung können durch Bewegung
verstärkt werden.
zurück, heimwärts, Widerstand überwindend, Objekt (die anderen)
Bewegung nach rechts
vorwärts, fort, im Strom fließend, Subjekt (Autor, Leser)
AUTO
Wie für die Platzierung gilt auch hier: die horizontale Bewegungsrichtung
wirkt nicht so stark wie die vertikale. Die Wirkung kann durch andere
Gestaltungsmittel verstärkt oder abgeschwächt werden.
Diagonale Bewegungen verbinden die Merkmale von horizontaler und
vertikaler Bewegung.
Elemente, die sich mit gleicher Geschwindigkeit in gleicher Richtung
bewegen, werden als Gruppe wahrgenommen.
Ruhe und Dynamik
1
Ausrichtung
Dynamik durch große Ausdehnungsunterschiede
Komplexität
Dynamik durch komplexe Form
Geschlossenheit
Dynamik durch offene Form
Überschneidung
Dynamik durch überschneidende Formen
Diagonalen
Dynamik durch schräge Form
Krümmung
Dynamik durch gekrümmte Linien
Kontrast
Dynamik durch hohe Kontraste
visuelles Gewicht
Distanzen
Farben
Wiederholung
Dynamik und Statik durch Wiederholung verstärken
Symmetrie
Statik durch Symmetrie
2
Auch unbewegte Bildelemente und Elementgruppen erzeugen durch ihre
formalen Eigenschaften oder durch die Anordnung einer Gruppe den Eindruck
von Statik oder Dynamik, wodurch die gesamte Komposition beeinflusst
wird.
Durch die Kombination verschiedener Gestaltungsmittel kann der Eindruck
von Dynamik gesteigert oder abgeschwächt werden.
Ausrichtung
Bildelemente, deren horizontale und vertikale Ausdehnung annähernd
gleich ist, wirken statisch.
Große Unterschiede in der Ausdehnung wirken dynamisch. Die Dynamik
entsteht in Richtung der weiteren Ausdehnung.
AUTO
Komplexität
Einfache, schnell erfassbare Formen wirken ruhiger als komplexe.
AUTO
Geschlossenheit
Geschlossene lineare Formen wirken ruhiger als offene Formen.
AUTO
Überschneidung
Voneinander isolierte Bildteile wirken ruhiger als einander überschneidende
und verdeckende Formen.
AUTO
Diagonalen
Schräge Formen wirken dynamischer als waagrechte oder senkrechte.
AUTO
Krümmung
Gekrümmte Linien wirken dynamischer als Geraden.
AUTO
Kontrast
Große Unterschiede bei visuellem Gewicht, Farbe oder Distanz zwischen
einzelnen Bildelementen erzeugen einen dynamischeren Eindruck als
kontrastarme Kompositionen.
AUTO
Wiederholung
Durch Wiederholung kann die statische oder dynamische Wirkung der
Einzelelemente verstärkt werden.
Dynamische Formen wirken durch Wiederholung noch stärker. Zu häufige
Wiederholung erzeugt Monotonie.
Symmetrie
Spiegelsymmetrische Komposition bewirkt Statik, indem sich die dynamische
Wirkung von Einzelteilen aufhebt.
AUTO
Optische Täuschung
1
Größentäuschung
Spitze und runde Formen scheinen kleiner als flache.
Figur-Grund-Kippbild
ein Becher oder zwei Köpfe
Scheinverzerrungen
Gerade Linien erscheinen in der Nähe von gekrümmten Linien in die
Gegenrichtung gekrümmt.
Phantombilder
grau flimmernde Punkte an den Kreuzungen von weißen Linien vor schwarzem
Hintergrund.
2
Visuelle Sinnestäuschungen
Wie alle Illusionen resultieren optische Täuschungen aus Unzulänglichkeiten
unserer Wahrnehmung. Sie sind kein physikalisches Phänomen. „Visuelle
Täuschung“ wäre daher treffender. Die Bezeichnung „Optische Täuschung“
hat sich jedoch eingebürgert.
Die Irritation, die optische Täuschungen auslösen können, ist auf
einer Benutzeroberfläche selten erwünscht. Daher wird in der visuellen
Gestaltung meist versucht, optische Täuschungen zu vermeiden, oder
den durch sie hervorgerufenen Effekt wieder auszugleichen.
AUTO
Die im Folgenden aufgelisteten Täuschungen treten im visuellen Design
häufig auf.
Größentäuschung
Spitze und runde Formen erscheinen bei tatsächlich gleicher Größe
kleiner als flach begrenzte Formen.
Lösung: Im Schrift- oder Piktogrammdesign werden diese Formen entsprechend
größer gezeichnet, um die Täuschung auszugleichen.
AUTO
Figur-Grund-Kippbild
Zu den bekanntesten optischen Täuschung gehört das Figur-Grund-Kippbild
nach Edgar Rubin. An Stelle eines Bechers können auch zwei Köpfe im
Profil gesehen werden. Figur und Hintergrund wechseln einander dabei
in ihrer Bedeutung ab.
Lösung: Um diese Täuschung zu vermeiden, muss die Figur von allen
Seiten vom Hintergrund eingeschlossen oder deutlich detailreicher
als dieser sein. Bei dunklen Figuren vor hellem Hintergrund tritt
diese Täuschung seltener auf als bei Hell auf Dunkel.
AUTO
Scheinverzerrungen
Gerade Linien, die von gekrümmten Linien geschnitten werden oder
in nächster Nähe zu diesen stehen erscheinen leicht in die Gegenrichtung
gekrümmt.
Lösung: Durch leichte Krümmung in die selbe Richtung wie die stark
gekrümmte Linie erscheint die erste nun wieder gerade.
AUTO
Das von einem Kreis umgebene Quadrat scheint konkav verzerrt. Rechts
wurde diese Täuschung durch eine tatsächliche konvexe Krümmung bereinigt.
Phantombilder
An den Kreuzungen von weißen Linien vor schwarzem Hintergrund scheinen
grau flimmernde Punkte sichtbar. Dieser Effekt kann auf Landkarten
oder Gebäudeplänen extrem irritierend wirken.
Lösung: Bei verringertem Helligkeitskontrast zwischen Figur und Hintergrund
verschwindet die Illusion.
