by Sophie Lautischer -

9. Auswertung der Umfrage

Hintergrund der Umfrage

Die Umfrage wurde durchgeführt, um Feedback zur Website der Ausstellung „Oh, Shift!“ zu sammeln. Ziel war es, die Meinungen der Nutzer hinsichtlich des visuellen Designs, der Navigation und der allgemeinen Benutzererfahrung zu verstehen. Insgesamt nahmen 16 Personen an der Umfrage teil.

Demografie der Teilnehmer

  • Alter:
    • 18-25 Jahre: 10 Teilnehmer:innen
    • 26-35 Jahre: 4 Teilnehmer:innen
    • 55-60 Jahre: 1 Teilnehmer:in
    • 61-70 Jahre: 1 Teilnehmer:in
  • Tätigkeit in der Designbranche:
    • Ja: 8 Teilnehmer:innen
    • Nein: 8 Teilnehmer:innen

Visuelles Design der Website

Zielgruppe

Navigation der Website

Unterstützung durch Animationen und Scroll-Effekte (5= Sehr gut, 1= Schlecht)

Lieblingspart der Website – Top 3

  • Das unendliche Scrollen
  • Die automatisch abspielenden Videos
  • Cusom Cursor
  • Animationen

Verbesserungsvorschläge

  • Größere Darstellung der Poster auf der Website.
  • Einige technische Probleme beim Zurückkommen auf die vorherige Seite, speziell auf Mac-Geräten.

Fazit

Die Umfrage zeigt, dass die Mehrheit der Teilnehmer sehr zufrieden mit dem visuellen Design und der Navigation der Website der Ausstellung „Oh, Shift!“ ist. Die Animationen und Scroll-Effekte wurden ebenfalls positiv bewertet. Die wichtigsten Verbesserungsvorschläge betreffen technische Aspekte und die Darstellung von Inhalten. Insgesamt scheint die Website bei den Nutzern gut anzukommen. Ich habe gelernt, bei der Umfrage auf die Reihenfolge zu achten, in welcher mit gut bis schlecht bewertet wird. Diese sollte immer gleich sein und sich so wenig wie möglich ändern.

Link: http://www.oh-shift.art

by anna-katharina.hammerer -

SEMESTERPROJEKT – SOUND DESIGN FÜR ANIMATION

Im produzieren einer Animation sollte man nie die Macht des Sound Designs aus den Augen lassen. Die auditive Ebene ist genauso wichtig, wie die visuelle Ebene.

  • Sie verstärkt die Atmosphäre und Stimmung der Szenen. Mit Hilfe von Musik und Geräuschkulissen können Gefühlsregungen wie Spannung, Freude, Angst oder Trauer noch intensiver beim Publikum ausgelöst werden.
  • Auch helfen sie dabei Dinge glaubwürdiger erscheinen zu lassen. So kann man auch in Welten voller Fantasie oder abstrakten Welten durch den Einsatz von passenden Sounds eine stimmige und überzeugende Umgebung schaffen.
  • Auch kann eine bestimmte Geräuschkulisse als Charakterisierung einer Figur herangezogen werden.
  • Der Erzählfluss kann auch mit Sound Design gelenkt werden. So können Übergänge erleichtert werden oder wichtige Momente in den Vordergrund gerückt werden.
  • Wie der vorherige Punkt schon anschneidet: Klang kann visuelle Elemente/ Aktionen unterstreichen bzw. ergänzen. Zum Beispiel können Geräusche wie das Öffnen von Schubladen, das Krabbeln von Insekten oder das Hecheln eines Hundes die visuellen Effekte verstärken und dem Zuschauer ein vollständigeres Erlebnis bieten.
  • Wenn man mehr den Fokus auf Motion Graphics legt, kann das Sound Design auch zur Markenbildung beitragen. Dazu werden einzigartige Audio-Elemente komponiert, welche dann mit der Firma in Verbindung gebracht werden.

Prozess für Animations-Sound Design

Essentiell im Sound Design für Animationen ist es sich Gedanken zu den Fragen: Wie soll es sich anhören? Was soll es vermitteln? zu machen. Deshalb sollte man wie in allen kreativen Bereichen mit einer Ideensammlung anfangen. Parameter, die man bei der Auseinandersetzung nicht aus den Augen verlieren sollte, sind folgende:

  1. „Inventar-Liste“: Was kommt überhaupt alles vor? Was wird alles benötigt?
  2. Genre und Kontext: Der Kontext sowie das Genre sind von enormer Bedeutung. So kann eine Animation mit jeweils einem anderen Genre, verschiedene Atmosphären und Bedeutungsebenen schaffen. Beispielsweise kann eine freundliche Szene von einem laufenden Hund mit Knochen mit einer grusligen Klanglandschaft vom Publikum nicht als freundlich wahrgenommen werden.
  3. Charakter und Umgebung: Wie bereits vorher erwähnt, nicht nur Figuren charakterisieren, sondern auch Umgebungen. So können Klänge genutzt werden um Persönlichkeiten oder Außergewöhnliches zu unterstreichen.
  4. Emotionale Intention: Was möchte man in der Szene emotional beim Publikum hervorrufen?

Bei der Arbeit selbst sollte man dann auch auf die Synchronisation und Timing, auf den Raum und die Perspektive, auf die allgemeine Kohärenz und Konsistenz und auf die Balance und Mischung achten. Auch das Fehlen von Geräuschen – in anderen Worten bewusste Pausen und Stille können eine enorme Wirkungen haben und darf nicht unterschätzt werden.

Sound Design für das Semesterprojekt

Das Sound Design am Semesterprojekt ist recht schlicht gehalten. Außerdem ist das Sounddesign recht realistisch geblieben. In erster Linie war es mir wichtig, dass der Kontext auch von der auditiven Ebene aufgegriffen wurde. Deshalb habe ich mich vor allem auf die visuellen Bestandteile konzentriert und denen eine Klangkulisse verliehen. Hätte ich mehr Zeit gehabt, hätte ich gerne noch andere Möglichkeiten ausgetestet. Als Abschluss gibt es mein Semesterprojekt zuerst ohne Ton und dann mit Ton.

by Alice D'Aiuto -

Survey

To finalise my research, I conducted a short interview with a person to get another perspective on the topic.

The interviewee, after telling me that she is familiar with images generated by artificial intelligence, said that it is mainly those involving nature or landscapes that are very realistic and that she is therefore often unable to distinguish them. 

As a designer she has mixed feelings because on the one hand, she thinks AI is a very useful tool that can speed up the work; on the other hand she thinks it is ethically wrong for designers and artists in general. 

When I showed her the images I generated using AI, she said that she thought it was normal to get these results because they are based on statistics. At the same time she also acknowledged that they were very stereotypical images.

In conclusion, she stated that she is not sure whether the images generated by artificial intelligence reproduce stereotypes because they are based on statistics and information that people give. However, she then reflected on the fact that society is biased and therefore these images are nothing but a consequence of society itself.

by Sophie Lautischer -

8. Erstellung einer Umfrage

Um die Wahrnehmung meiner Website durch verschiedene Zielgruppen besser zu verstehen und gezielte Verbesserungen vornehmen zu können, habe ich eine Umfrage entwickelt. Die Ergebnisse dieser Umfrage sollen aufzeigen, wie unterschiedliche Nutzergruppen die Website wahrnehmen, welche Bereiche besonders gut ankommen und wo Optimierungspotenzial besteht. Insbesondere interessiere ich mich dafür, wie die interaktiven Elemente und Scroll-Effekte auf die Teilnehmenden wirken.

Ziele der Umfrage

Die Hauptziele der Umfrage sind:

  • Zielgruppenanalyse: Ermitteln, wie verschiedene demografische Gruppen die Website wahrnehmen.
  • Visuelles Design: Feedback zum ästhetischen Erscheinungsbild der Website sammeln.
  • Usability: Verstehen, wie intuitiv die Navigation und Benutzerführung ist.
  • Funktionalität: Bewerten, wie gut die Animationen und Scroll-Effekte die Benutzererfahrung unterstützen.
  • Verbesserungspotenzial: Konkrete Vorschläge für Optimierungen identifizieren.

Fragen

  • Alter
  • Bist/warst du in der Designbranche tätig?
  • Wie ansprechend findest du das visuelle Design der Website?
  • Wie intuitiv war die Navigation auf der Website?
  • Wie gut passt das Design der Website zu ihrem Zweck und ihrer Zielgruppe?
  • Wie gut unterstützen die Animationen und Scroll-Effekte die Benutzererfahrung?
  • Was ist dein liebster Part der Website?
  • Was könnte man verbessern?

Durchführung und Auswertung der Umfrage

Die Umfrage wird online durchgeführt, um eine breite und diverse Teilnehmerbasis zu erreichen. Nach der Datenerhebung erfolgt die Auswertung, um Muster und Trends in den Antworten zu identifizieren. Besonderes Augenmerk liegt dabei auf den Unterschieden zwischen verschiedenen Altersgruppen und zwischen Fachleuten und Laien.

Ergebnisse und Maßnahmen

Die Ergebnisse der Umfrage werden zeigen, welche Aspekte der Website besonders gut ankommen und welche Bereiche Verbesserungspotenzial haben. Auf Basis dieser Erkenntnisse können gezielte Maßnahmen ergriffen werden, um die Website weiter zu optimieren. Insbesondere die Bewertung der interaktiven Elemente und Scroll-Effekte wird wertvolle Hinweise liefern, wie diese Elemente die Benutzererfahrung verbessern oder stören.

by Sophie Lautischer -

7. Befragungen im näheren Umfeld, Änderungen

Ich besitze ein iPhone 14 pro, meine Mutter ein iPhone SE. Nachdem ich sie die Website testen lies, hatte sie, sowie andere Menschen mit einem iPhone mit Homebutton ein paar Dinge zu kritisieren, welche ich wie folgt der Usability wegen veränderte.

Vorher – Nachher iPhone SE

Screenshot

Vorher – Nachher iPhone 14 Pro

Screenshot

Durch die Anordnung von Logo und Buttons (ich habe mich aufgrund der limitierten Inhalte der Seite bewusst gegen ein Burger Menu entschieden) war es vor allem auf kleineren Displays nicht so einfach zu scrollen. Auch die Plakate wurden am kleineren Display immer teilweise verdeckt, sowie die Informationen oben im Eck, sodass die Seite sehr überladen und unangenehm zu bedienen war. Mit dem kleineren Logo und den Buttons können diese trotzdem noch ausreichend gut bedient werden und die Section nimmt weniger Platz am Display ein. Außerdem habe ich die Abstände der Poster angepasst, sodass sie nun mehr Platz für die Infos freigeben und auf allen Displaygrößen gut zu sehen sind.

by Sophie Lautischer -

6. Learnings bei der Umsetzung

Die Gestaltung einer Website ist eine komplexe Aufgabe, die weit über visuelles Design und Benutzerfreundlichkeit hinausgeht. Ein zentrales Element, das oft übersehen wird, ist die technische Machbarkeit. Meine Arbeit an diesem Thema hat mir verdeutlicht, wie wichtig es ist, die Grenzen und Möglichkeiten der Webentwicklung zu verstehen und zu berücksichtigen.

Grenzen des Webdesigns

Die technischen Grenzen des Webdesigns werden durch verschiedene Faktoren bestimmt:

  • Browser-Kompatibilität: Nicht alle Browser unterstützen die neuesten Webtechnologien, was Einschränkungen bei der Umsetzung moderner Designs mit sich bringen kann.
  • Performance: Aufwändige Animationen und Grafiken können die Ladezeiten einer Website negativ beeinflussen, was die Benutzererfahrung verschlechtert.
  • Sicherheit: Komplexe Funktionalitäten erfordern zusätzliche Sicherheitsmaßnahmen, die den Entwicklungsaufwand erhöhen.

Möglichkeiten des Webdesigns

Trotz dieser Grenzen bietet die moderne Webentwicklung zahlreiche Möglichkeiten:

  • Responsive Design: Websites können so gestaltet werden, dass sie auf allen Geräten gut aussehen und funktionieren.
  • Interaktive Elemente: Animationen, Übergänge und dynamische Inhalte können die Benutzererfahrung verbessern und die Website ansprechender gestalten.
  • Personalisierung: Mithilfe von Datenanalyse und KI können Inhalte individuell auf die Nutzer zugeschnitten werden.

Herausforderungen und Lösungsansätze

Technische Umsetzung: Einige Designideen erwiesen sich als schwer umsetzbar, was zu Anpassungen und Kompromissen führt Um diese Herausforderungen zu meistern, ist es für zukünftige Projekte mit diesem Thema sinnvoll, zunächst auf Prototypenbasis zu arbeiten. Tools wie Figma ermöglichen es, Designs zu erstellen und zu testen, bevor sie in die Entwicklung gehen. So habe ich trotzdem die Möglichkeit zu testen, stoße jedoch nicht an meine Grenzen in Webflow o.Ä.

Zusammenarbeit mit technischen Experten

Ich könnte eventuell auch mit einer studierenden Person mit dem richtigen Hintergrund zusammenarbeiten und so die technische Komponente miteinbeziehen. “Ist die Umsetzung realistisch”

Fazit

Die Gestaltung einer Website erfordert eine ganzheitliche Betrachtung, die Design, Usability und technische Machbarkeit gleichermaßen berücksichtigt. Die Zusammenarbeit mit technischen Experten und die Nutzung von Prototyping-Tools wie Figma können den Entwicklungsprozess erheblich verbessern. Diese Erfahrungen haben meine Sichtweise auf Webdesign erweitert und gezeigt, dass die besten Ergebnisse durch interdisziplinäre Zusammenarbeit und gegenseitiges Verständnis erzielt werden.

by katharina.mundigler -

Blender 10 | Finales Ergebnis & Fazit

Mein Fazit zu dieser Serie: Toll, um sich mit einem Programm/einem Skill auseinanderzusetzen. Ich habe definitiv viel über Blender gelernt. Ursprünglich hat mich ja das Thema Modelling und Sculpting in Blender interessiert und da wollte ich besser werden. Im Laufe des Prozess habe ich gemerkt, dass Rigging und Animation, insbesondere Kamera mir sehr Spaß macht. Da möchte ich mich definitiv noch weiter beschäftigen. Für den Sculpting Part muss ich feststellen, dass ich mir mit Zeichentablet und ZBrush trotzdem noch leichter tue, gerade bei Detailarbeiten, allerdings kommt man in Blender auch schnell zu Ergebnissen! 

Was ich mir unbedingt noch anschauen muss, ist das animieren im Raum, eventuell auch nach Pfad, da ich das in dieser Animation absolut nicht so hinbekommen habe, wie ursprünglich vorgestellt. 

All in all, richtig cooles Projekt, was ich in Zukunft auch weiterführen möchte. 

Final

by katharina.mundigler -

Blender 09 | Render

Für diese Animation verwende ich Cycles zum Rendern, weil ich die Transmission meines Charakters raufgesetzt habe und Cycles damit besser umgehen kann. Allerdings dauert dafür das Rendern um einiges länger. Gerändert habe ich mit einer Max. Sample Rate von 256 frames und einem Threshold von 0.01. Bei den Render Einstellungen habe ich mich auch an den Guide gehalten, den wir im Unterricht durchgesprochen haben zum Thema eevee vs cycle. In dem Testender unten, kann man auch die DoF sehr gut erkennen.

Zuvor habe ich einen kleinen Renderversuch mit eevee gestartet, um zu sehen, wie sich das Material auf die Figur im Render verhält und es war nicht sehr optimal. Hierbei war der Charakter nicht mehr leicht Transparent sondern wieder ein solid.

by katharina.mundigler -

Blender 08 | Kamera

Für die Kameras habe ich drei verschiedene angelegt, damit ich beim Loop wieder hin und her schalten kann. dieses Mal ist auch DoF eingeschaltet bei allen drei Einstellungen, damit der Hintergrund etwas unschärfer wird. Für diese Einstellung habe ich beim Focus Object meine Figur bei jeder Kamera ausgewählt.

Um die Kameras animieren habe ich erneut Keyframes gesetzt auf die Transform Handels (I) je nachdem was ich haben wollte. Auf jede Cam habe ich noch eine Shaky Cam gelegt und hier die Handheld Option ausgewählt, allerdings mit sehr wenig Impact, damit es nicht zu viel ist.

by katharina.mundigler -

Blender 07 | Material & Scene

Für den Charakter habe ich einen Farbverlauf von blau zu rot gemacht, damit die Flammen Ästhetik angedeutet wird. Für die Beschaffenheit der Sternflammen wollte ich eine Glas-Optik haben. Für den Gradient der Figur habe ich die Base Color modifiziert. Dafür kamen eine Color Ramp, Gradient Texture, Mapping und Texture Coordinate zum Einsatz. Mit der Color Ramp habe ich die Farben eingestellt und mit dem Mapping die Location des Verlaufes. Die Augen des Charakters habe ich schwarz gelassen. Damit meine Figur diese Glas ähnliche Optik hat, habe ich noch die Roughness auf 0 gesetzt und Transmission auf 0,5.

Für die Szene, hab ich mir etwas einfaches überlegt, da es hauptsächlich um den Charakter geht. Trotzdem wollte ich eine kleine Wohnzimmerszene bauen und habe diese mit Hilfe des Blenderkits zusammengebaut.Dazu habe ich ein HDRI von Polyheaven (blue sky) hergenommen und eine simple Scene gebaut. Fokus sind auch die drei verschiedenen Lichtpunkte die jeweils eine andere Farbe haben, um der Szenerie noch ein wenig Magie zu verleihen. Dazu habe ich Area Lights verwendet, da diese rundum eine schöne Atmosphere erzeugen.