Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Kleine Ursache. Große Wirkung.

Kleine Ursache. Große Wirkung.

Der Schmetterlingseffekt zwischen Wissenschaft und Lebensgeschichten

01. Arbeitstitel

Kleine Ursache. Große Wirkung.

Der Schmetterlingseffekt zwischen Wissenschaft und Lebensgeschichten

02. Kurzbeschreibung

Das Designprojekt thematisiert den Schmetterlingseffekt und zeigt ihn sowohl aus wissenschaftlicher als auch aus emotionaler Perspektive. In einer interaktiven Webseite werden die theoretischen Grundlagen und die Entstehung des Effekts erklärt und durch persönliche Erzählungen ergänzt. So wird sichtbar, wie kleine Entscheidungen im Alltag große Auswirkungen haben können.

03. Projektmanagement

Ju's & Ni's BachelorTRIP - Timeline (1).jpgJu's & Ni's BachelorTRIP - Timeline (1).jpg

04. Zielformulierung WHY HOW WHAT

Ju's & Ni's BachelorTRIP - Basis (1).jpgJu's & Ni's BachelorTRIP - Basis (1).jpg

Ju's & Ni's BachelorTRIP - Basis (2).jpgJu's & Ni's BachelorTRIP - Basis (2).jpg

05. Recherche, Inhalte, Daten, Quellen

Umfrage

Zu Beginn des Projektes wurde eine Umfrage zum Schmetterlingseffekt durchgeführt. Due Umfrage lief vom 24. Oktober bis zum 08. November. Es wurde der Wissensstand zu der Thematik geprüft und wie sich Personen eine interaktive Webseite über den Effekt vorstellen würden. Insgesamt haben 40 Personen dran teilgenommen.

Link zu der Umfrage: https://forms.gle/xkAdvKVTUeK8kEUu9

Der-Schmetterlingseffekt-Google-Forms-01-28-2026_03_50_PM1.pngDer-Schmetterlingseffekt-Google-Forms-01-28-2026_03_50_PM1.png
Der-Schmetterlingseffekt-Google-Forms-01-28-d2026_03_50_PM.pngDer-Schmetterlingseffekt-Google-Forms-01-28-d2026_03_50_PM.png
Der-Schmetterlingseffekt-Google-Formds-01-28-2026_03_50_PM.pngDer-Schmetterlingseffekt-Google-Formds-01-28-2026_03_50_PM.png
Der-Schmetterlingseffekt-Google-Forms-01-28-20d26_03_50_PM.pngDer-Schmetterlingseffekt-Google-Forms-01-28-20d26_03_50_PM.png

Ju's & Ni's BachelorTRIP - Umfrage Auswertung.jpgJu's & Ni's BachelorTRIP - Umfrage Auswertung.jpg

Interviews

Um persönliche Geschichten von Menschen erzählen zu können wurden Interviews geführt. Mir war es wichtig, dass ich keine Erzählungen erfinde, sondern echte Geschehnisse auf meiner Webseite behandle.

Interview_1.pdf PDF Interview_1.pdf

Interview_2.pdf PDF Interview_2.pdf

Literaturrecherche

Für mein Projekt wurde eine tiefe Literaturrecherche durchgeführt. Hierbei habe ich mir die originalen Bücher, die den Effekt zum ersten mal behandelten angeschaut, sowie auch neue Literatur zu dem Themenbereich.

Ju's & Ni's BachelorTRIP - Recherche.jpgJu's & Ni's BachelorTRIP - Recherche.jpg

Referenzprojekt

Ich habe mir ein Referenzprojekt angeschaut, um abzustimmen und zu vergleichen, was mein Projekt für eine Richtung einschlagen könnte. Das Projekt https://durch-die-galaxie.webflow.io/ wurde als ein passendes Projekt gewählt. Ich habe die Wirkung dieser Arbeit analysiert, sowie persönlich bewertet.

Ju's & Ni's BachelorTRIP - Frame 1 (1).jpgJu's & Ni's BachelorTRIP - Frame 1 (1).jpg
Ju's & Ni's BachelorTRIP - Frame 6.jpgJu's & Ni's BachelorTRIP - Frame 6.jpg

06. Zielgruppenanalyse

Es wurde eine Zielgruppenanalyse durchgeführt, wodurch sich zwei zentrale Zielgruppen etablierten. Zusätzlich wurde das Sinus-Milieu genutzt, um zu schauen, welche Bürgergruppen bei meinem Projekt infrage kommen könnten.

Ju's & Ni's BachelorTRIP - Zielgruppe (1).jpgJu's & Ni's BachelorTRIP - Zielgruppe (1).jpg

07. Ansätze & Storylines

Ju's & Ni's BachelorTRIP - Frame 2.jpgJu's & Ni's BachelorTRIP - Frame 2.jpg
Ju's & Ni's BachelorTRIP - Mindmap Ansatz.jpgJu's & Ni's BachelorTRIP - Mindmap Ansatz.jpg
Ju's & Ni's BachelorTRIP - Storyline_Spannungsbogen (1).jpgJu's & Ni's BachelorTRIP - Storyline_Spannungsbogen (1).jpg

Im Verlauf des Projektes wurden verschiedene Ansätze, Storylines und Konzepte erstellt und verfolgt. Im Folgenden ist der Ansatz, der umgesetzt wurde, zu sehen.

Ju's & Ni's BachelorTRIP - Wissenschaftliche Storyline.jpgJu's & Ni's BachelorTRIP - Wissenschaftliche Storyline.jpg

08. Moodboards

Zusätzlich zu den verschiedenen Ansätzen und Storylines wurden verschiedene, jeweils passende Moodboards erstellt. Die relevantesten von diesen wurden ausgewählt und sind unten zu sehen.

Ju's & Ni's BachelorTRIP - Frame 5 (2).jpgJu's & Ni's BachelorTRIP - Frame 5 (2).jpg
Ju's & Ni's BachelorTRIP - Frame 5 (1).jpgJu's & Ni's BachelorTRIP - Frame 5 (1).jpg

09. Wireframes

Für die Wireframes wurden Module von anderen Webseiten abgeleitet und danach unterschiedlich und an den Inhalt angepasst zusammengesetzt.

Folgende Webseiten wurden unter anderem als Inspiration genutzt:

humanity.org

founderssa.com

Startsseixte.pngStartsseixte.png
Startsseitxe.pngStartsseitxe.png
Chaoss Theocrie.pngChaoss Theocrie.png
Chaoss Theorive.pngChaoss Theorive.png

10. Designvarianten

Frame 2l.pngFrame 2l.png
Frame jk1.pngFrame jk1.png

11. Finales Design

Frame f5.pngFrame f5.png

12. Prototyp in Figma

13. Testing

Es wurden vereinzelt kleine Testings durchgeführt, um zu schauen, wie die Webseite von anderen Menschen wahrgenommen wird. Ich bat die Testpersonen Auffälligkeiten, Unklarheiten und gestalterische Schwächen zu nennen.

  • Das Menü wurde als nicht eindeutig erkennbar wahrgenommen, somit gestaltete ich es zu einer klaren, direkt sichtbaren Navigation um
  • Die verwendete Schrift („JQKAs WILD“) erwies sich als schlecht lesbar, da sie ausschließlich Versalien besitzt -> Entscheidung für eine besser lesbare Alternative
  • Die rote Hintergrundfarbe wurde als zu dominant empfunden -> Anpassung auf einen angenehmeren, akzeptierten Rotton
  • Ich bekam außerdem eine Rückmeldung zur Struktur -> eine Startseite wurde als sinnvoll erachtet (mit Ergänzung eines einleitenden Textes zur Orientierung)
  • Inhalte und visuelle Beispiele wurden überwiegend als verständlich und passend bewertet
  • Hoher Theorieanteil wurde angemerkt, jedoch im Kontext des Themas akzeptiert

14. Finaler Prototyp in Webflow

Der finale Prototyp der Webseite ist über folgenden Link aufrufbar: https://der-schmetterlingseffekt.webflow.io/

Frame 8.pngFrame 8.png
Frame 9.pngFrame 9.png
Frame 61.pngFrame 61.png
Frame 7.pngFrame 7.png

15. Styleguide

Styleguide.pngStyleguide.png
Typo.pngTypo.png
Farben.pngFarben.png
Raster.pngRaster.png
Photos.pngPhotos.png
3D Stuff.png3D Stuff.png

Übersicht von allen Spielkarten:

red.pngred.png
gold.pnggold.png
blue.pngblue.png

16. Screencast

17. Präsentationsvideo

18. Ausstellungssituation

Untitled24_20260119235658.pngUntitled24_20260119235658.png
WhatsApp Image 2026-02-09 at 12.21.31.jpegWhatsApp Image 2026-02-09 at 12.21.31.jpeg

19. Thesis

Bachelorarbeit_Julia_Roth.pdf PDF Bachelorarbeit_Julia_Roth.pdf

------------------------

Exposé

Bachelorexposé_Julia_Roth.pdf PDF Bachelorexposé_Julia_Roth.pdf

Kick-off Präsentation

Kick-off Präsi Storytelling KD7.pdf PDF Kick-off Präsi Storytelling KD7.pdf

Bachelorpräsentation

Bachelor Präsentation 2026.pdf PDF Bachelor Präsentation 2026.pdf

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Bachelorarbeit

Betreuer_in

foto: Prof. Norbert Diedrich

Zugehöriger Workspace

BA Seminar (Norbert)

Entstehungszeitraum

Wintersemester 2025 / 2026