Gruppenprojekt - Judo

Beschreibung Deutsch: Ziel des Projekts war es, eine Virtual-Reality-Erfahrung von Judo als grafische Darstellung zu schaffen. Die Typografie und das Layout spiegeln die Bewegung des Sports wider, ohne zu viel Chaos in die Szene zu bringen. Das Konzept ist inspiriert von den Entwürfen von Josef Müller-Brockmann, Otl Aicher und Ladislav Sutnar. Die Ansichten transportieren 2D-Layouts in den 3D-Raum und nutzen den Parallaxen-Effekt als primäres Ausdrucksmittel. Die Verwendung einer einzigen Schriftart, Sofia Sans, und minimaler Farben mit starken Kontrasten war für das Erreichen eines klaren und minimalistischen Looks von wesentlicher Bedeutung.

Zunächst wurden verschiedene Ideen für den Aufbau der Szene erforscht. Eine Idee war, ein 3D-Planetensystem in die Szene einzubauen, in dem der Benutzer mit einem Handschuh durch die Szene und die Planeten navigieren kann. Probleme mit der Skalierbarkeit und die Notwendigkeit, sich mehr auf Text und Typografie zu konzentrieren, führten jedoch zu einem minimalistischen Ansatz, bei dem Bilder und Oberflächen zur Hervorhebung des Textes verwendet wurden. Das Experimentieren mit Text in der Szene führte zur Schaffung von Strukturen und Bildern, die sich in die Räume einfügen.

Es wurde eine gründliche Analyse durchgeführt, von Farbkompositionen in der asiatischen Kultur bis hin zu den Emotionen, die durch verschiedene Sportarten, Typografie, Symbole usw. vermittelt werden. Auch die Integration des Textes, die Wahl der Artikel, die Skalierung, die Lesbarkeit und die Schaffung von Raumeffekten ohne Boden wurden untersucht. Inspiriert wurde das Projekt durch Recherchen zu Entwürfen von Josef Müller-Brockmann, Ladislav Sutnar und Otl Aicher. Das Layout und die Farbwahl der Szenen ähnelten den Plakaten dieser Designer, mit zusätzlicher Bewegung im 3D-Raum.

Die erste Szene befasste sich mit den Judoregeln und den verschiedenen Gürtelgraden. Ein minimalistisches Farbschema und kurze Texte, die an denselben Stellen platziert wurden, schufen ein Gefühl der Ordnung in der Szene. Ein schwarzer Hintergrund hob den Text und die Bilder vor dem weißen Hintergrund hervor. Um die japanische Flagge darzustellen, wurde ein weißer Hintergrund mit einem roten Kreis in der Mitte verwendet. Das minimalistische Farbschema machte deutlich, dass der rote Kreis das Ziel und ein Portal ist, das zur nächsten Seite führt, obwohl die Umsetzung dieser Funktion aufgrund technischer Schwierigkeiten nicht abgeschlossen werden konnte.

Die zweite Szene sollte das Gefühl des Fliegens und der Wurfsequenz vermitteln. Anhand von Fotos, die aus verschiedenen Blickwinkeln aufgenommen wurden, wurden die Emotionen in den verschiedenen Momenten des Wurfs dargestellt. Der Text aus dem Wikipedia-Artikel, der die einzelnen Momente beschreibt, wurde verwendet, und die beiden Kämpfer wurden in großen Größen dargestellt, um das Ausmaß der Szene und der Aktion zu unterstreichen. Es wurden minimale Farben verwendet, da Minimalismus in der asiatischen Kultur willkommen ist. Die Wände wurden mit einem Gittermuster gestaltet, das Teil der asiatischen Kultur ist, aber transparenter und offener für die Welt gestaltet wurde.

Die dritte Szene wurde von einem Orchesterplakat von Josef Müller-Brockmann inspiriert. Die Positionierung der Balken und die Blickwinkel wurden verändert, um ein grafisch aufregenderes Ergebnis zu erzielen.

Beschreibung English: The goal of the project was to create a virtual reality experience of Judo as a graphic representation. The typography and layout reflect the movement of the sport without adding too much chaos to the scene. The concept draws inspiration from the designs of Josef Müller-Brockmann, Otl Aicher, and Ladislav Sutnar. The views transport 2D layouts into the 3D space using the parallax effect as the primary means of expression. The use of a single typeface, Sofia Sans, and minimal colors with strong contrasts was essential in achieving a clean and minimalist look.

Initially, various ideas were explored for the scene setup. One idea involved building a 3D planetary system in the scene where the user could navigate with a glove through the scene and planets. However, scalability issues and the need to focus more on text and typography led to a minimalist approach using images and surfaces to highlight the text. Text experimentation in the scene led to the creation of structures and images that fit into the spaces.

A thorough analysis was conducted, from color compositions in Asian culture to the emotions conveyed by different sports, typography, symbols, etc. The text's integration, choice of article, scaling, readability, and creating spatial effects without a floor were also addressed. Research on designs by Josef Müller-Brockmann, Ladislav Sutnar, and Otl Aicher inspired the project. The scenes' layout and color choices were similar to the posters by these designers, with added movement in the 3D space.

The first scene focused on the Judo rules and different belt grades. A minimalist color scheme and short text placed in the same points created a sense of order in the scene. A black background highlighted the text and images against the white background. To represent the Japanese flag, a white background with a red circle in the middle was used. The minimalist color scheme made it clear that the red circle was the goal and a portal leading to the next page, although the implementation of this function was not completed due to technical difficulties.

The second scene aimed to convey the feeling of flying and the throw sequence. Using photos taken from different angles, the emotions at different moments of the throw were portrayed. The text from the Wikipedia article describing each moment was used, and both fighters were displayed in large sizes to emphasize the scale of the scene and action. Minimal colors were used, as minimalism is welcomed in Asian culture. The walls were designed with a grid pattern, a part of Asian culture, but made more transparent and open to the world.

The third scene was inspired by an orchestra poster of Josef Müller-Brockmann. The positioning of the beams and viewing angles were changed to create a more interesting result.

Unseren  lvls:

https://spurious-prickly-pepper.glitch.me

https://ancient-heavenly-vault.glitch.me

https://climbing-translucent-shirt.glitch.me

https://fork-adaptive-geography.glitch.me

https://best-hulking-clave.glitch.me

Anfangs hatten wir viele verschiedene und unterschiedliche Ideen für den Aufbau der Szenen.

Die erste Idee bestand darin, ein 3D-Planetensystem in der Szene aufzubauen, in dem man sich mit einem Handschuh durch die Szene und Planeten bewegen würde. Dieser Plan wurde jedoch schnell von uns verworfen, da der Fokus dieses Projekts nicht auf der Textgestaltung und Anordnung dessen gelegen hätte.

So haben wir uns entschieden, unsere Szenen minimalistisch zu halten und in erster Linie mit Bildern und Flächen zu arbeiten, um den Text hervorzuheben. Wir fingen also noch einmal neu an, zum Thema Judo zu brainstormen und betrieben Recherche.

Analyse

Zusammen setzten wir uns mit dem Thema Judo auseinander und überlegten, wie wir die Thematik am besten Inszenieren könnten. Dabei setzten wir uns mit Farbkompositionen der asiatischen Kultur hinaus und diskutierten darüber, ob wir traditionelle oder moderne Ansätze verfolgen wollten. Wir entschieden uns schließlich zu der modernen Variante und analysierten die Emotionen des modernen Judosports. Nach dieser Analyse sahen wir uns an, welche Typografien und Symbole passen könnten.

Wir stellten uns dabei die folgenden Fragen: 

- Wie können wir den Text integrieren, welchen Artikel möchten wir wählen und warum?

- Wie es möglich wäre, den Text zu skalieren und zu animieren, wie macht man den Text lesbar?

- Wie vermittelt man die Raumwirkung , ohne einen Boden zu haben?

Die Suche nach Referenzen und die Analyse all dessen führte uns zu einigen interessanten Ergebnissen.

Inspiration

Die Werke von Josef Müller-Brockmann, Ladislav Sutnar und Otl Aicher zeichnen sich durch ihre klaren, minimalistischen Designs aus. Sie verwenden eine begrenzte Farbpalette und typografische Elemente, um eine visuelle Hierarchie zu schaffen und Informationen schnell und präzise zu vermitteln. Diese Designer waren Pioniere im Bereich der Gestaltung von Informationsgrafiken und Plakaten und haben einen großen Einfluss auf die moderne Grafik- und Webdesign-Industrie gehabt. Ihre Arbeiten sind auch bekannt für ihre präzise Ausrichtung und geometrische Gestaltung, die dazu beitragen, eine visuelle Ordnung und Klarheit zu schaffen. Insgesamt haben diese Designer einen wichtigen Beitrag zur Entwicklung einer zeitlosen und funktionalen Ästhetik in der Grafik-Design-Geschichte geleistet.

Besonders die Platzierung im Raum und die einfache Farbauswahl hat uns sehr gut gefallen. Deshalb haben unsere Szenen eine ähnliche Struktur wie diese Plakate. Besonders die Inhaltsszene haben wir sehr ähnlich wie das Original aufgebaut, aber mit dem Twist, dass sie hin und her durch den Raum bewegt.

Herausforderung

In unserer ersten Szene ging es um die Judo-Regeln und die verschiedenen Gürtelgrade. Angesichts dessen war die Farbwahl minimalistisch und der Text kurz und an denselben Punkten hintereinander platziert. Um in erster Linie Ordnung in der Szene darzustellen.

Wir haben uns für eine schwarze Umgebung entschieden, um die Schrift und die Bilder mit dem weißen Hintergrund mehr hervorzuheben. Um die japanische Flagge darzustellen, haben wir und für einen weißen Hintergrund entschieden, mit einem roten Kreis in der Mitte platziert.

Durch diesen minimalistischen Farbaufbau sollte es klar sein, dass der rote Punkt das Ziel ist in der Szene, am Ende des Horizonts. 

Gleichzeitig sollte der Punkt ein Portal darstellen. Wenn man durch diesen roten Punkt läuft, sollte man auf die nächste Seite weitergeleitet werden. Leider hatten wir einige Probleme mit dem Einbau dieser Funktion und haben es dann zeitlich nicht mehr geschafft es umzusetzen.

Es war von Bedeutung, das Gefühl des Fliegens in unserer virtuellen Judo-Welt zu vermitteln, da wir die Wurffolge darstellen. Foto für Foto aus verschiedenen Perspektiven haben wir unterschiedliche Emotionen beobachtet. Es war uns wichtig, den Text aus dem Wikipedia-Artikel zu verwenden, der jeden Moment des Wurfs vom Erfassen des Gegners bis zum Wurf beschreibt. Beide Kämpfer werden in unglaublich großen Größen in der virtuellen Welt dargestellt, um den Maßstab der Szene, Aktion und Geschichte widerzuspiegeln.

Auch die Farbauswahl spielte eine wichtige Rolle. Wir verwendeten ein Minimum an Farben, da Minimalismus in der asiatischen Kultur sehr geschätzt wird. Die Wände sind in einem Gitterdesign gestaltet, das ein Teil der asiatischen Kultur ist. Wir haben uns jedoch entschieden, sie transparenter und offener für die ganze Welt zu gestalten.

Da das Level die Blechbläser thematisiert, war es uns wichtig, dem Benutzer die Möglichkeit zu geben, die Farbpalette im Level zu ändern und zu sehen, was aus verschiedenen Perspektiven passiert.

Mit Inspiration von Ladislav Sutnar haben wir ein wunderbares Ergebnis in Bezug auf Typografie und Fotografie erzielt. Wir haben die Positionierung und Betrachtungswinkel verändert, um ein ansprechendes Ergebnis zu erzielen.

Die Inspiration für die dritte Szene stammt von einem Plakat des Orchesters von Josef Müller-Brockmann. Um ein visuell aufregenderes Ergebnis zu erzielen, wurden die Positionierung der Balken und die Betrachtungswinkel verändert. Die Wirkung des Designs wird durch die Darstellung in 3D noch verstärkt. Wir haben uns entschieden, die gesamte Struktur durch den Raum hin und her zu bewegen, was wir auch umgesetzt haben. Dadurch erscheint die gesamte Szene interaktiver, lebendiger und tiefer als auf den ersten Blick.

Zusätzlich bietet die Szene nicht nur ein ästhetisch ansprechendes Design, sondern auch praktischen Nutzen. Aufgrund der Positionierung der Balken und der Beweglichkeit der Struktur könnte die Szene als Inhaltsverzeichnis und Navigation für den Betrachter dienen. Des Weiteren zeigt die Vereinigung von grafischen Elementen und Typografie das Potenzial, dieses Konzept weiterzuentwickeln und sogar Konzepte für die Navigation über Typografie im 3D-Raum zu erproben.

Wir starten unsere Pedagogy-Szene mit einem starken Kontrast zwischen zwei Kindern, Text und einer roten Fläche. Der Text ist so ausgerichtet, dass der Betrachter durch die Szene schwebt und zu verschiedenen Textanordnungen gelangt, bei denen wir unterschiedliche Blickwinkel ausprobiert haben. Inspiriert von den oben genannten Grafikern haben wir mit der Flächigkeit des Textes gespielt. Die „Kurvigkeit“ des Textes ändert sich je nach Position des Betrachters, was beim Lesen einen völlig neuen Effekt erzeugt. Durch diese Gestaltung soll die Szene dynamischer wirken und mehr Interesse beim Leser auslösen. Beim Design und der Farbauswahl haben wir uns erneut für einen schlichten Stil entschieden, der dem der Judo-Szene ähnelt. Rot, Schwarz und Weiß sind die drei Hauptfarben, die sich durch alle Szenen und das gesamte Projekt ziehen. Diese Gestaltung soll dem Projekt eine einheitliche und durchgängige Ästhetik verleihen. Die Bilder sind vom UJKC Potsdam (dem Judoteam in Potsdam )

Fazit

Es war oft eine Herausforderung, sich auf die Gestaltung des Textes zu konzentrieren und nicht von den technischen Aspekten und der Verlockung herkömmlicher VR-Welten abgelenkt zu werden. Dennoch sind wir als Team mit unserem Prozess und unserer Zusammenarbeit zufrieden, obwohl es nicht immer einfach war. Wir haben ständig neue Konzepte und Levels erstellt und versucht, einen gemeinsamen Kompromiss zu finden, während wir uns an das gleiche Thema hielten. Nach vielen Herausforderungen und Prüfungen sind wir ein wunderbar freundliches Team geblieben und haben dabei viel Erfahrung in der Zusammenarbeit beim Programmieren gesammelt. Wir wurden öfter aus unserer Komfortzone geholt, was einerseits frustrierend war, aber uns auch ermöglicht hat, anders zu denken und Entdecker zu werden. Es war teilweise eine unglaubliche Herausforderung, etwas zu tun, bei dem uns die Arbeitsschritte nicht vertraut waren und wir viel über Experimente gehen mussten, um herauszufinden, was funktioniert und was nicht. 

Eine unserer wichtigsten Schlussfolgerungen war: Man muss man sich bei der Arbeit in VR an 3 Wörter erinnern: „Testen, Teste, Testen“.

Screenshots