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

Lumisense

Manche Lebewesen können mittels chemischer Reaktionen ihr eigenes Licht erzeugen. In „Lumisense“ können die Nutzenden in die leuchtende Welt dieses Phänomens eintauchen. Die interaktive Website lädt dazu ein, die verschiedenen Ausprägungen der Biolumineszenz eigenständig aufzuspüren und Details zu den individuellen Nutzungsweisen und dem evolutionären Vorteil in der Natur zu erfahren.

Präsentationsvideo

Website Link

Screencast Webflow

Scroll-Through: dieser Screencast zeigt alle Stellen, an denen Tiere entdeckt werden können.

Click-Through: dieser Screencast umfasst alle Tiere mit Unterseiten, die entdeckt werden können.

Ausstellungssituation

1000103233_bearbeitet.jpg1000103233_bearbeitet.jpg

1000103230_bearbeitet.jpg1000103230_bearbeitet.jpg
1000103236_bearbeitet.jpg1000103236_bearbeitet.jpg
1000103234_bearbeitet.jpg1000103234_bearbeitet.jpg

_______________________

_chronologischer Entstehungsprozess

25.03.2026 _ Ideenfindung

260325_erste_ideen.jpg260325_erste_ideen.jpg
260325_erste_ideen_notion.jpg260325_erste_ideen_notion.jpg

27.03.2026 _ Exkursion Bionicum

Exponat_Analyse.jpgExponat_Analyse.jpg

01.04.2026 _ Workshop

1000092971_bearbeitet.jpg1000092971_bearbeitet.jpg
1000092971_bearbeitet_2.jpg1000092971_bearbeitet_2.jpg
1000092971_bearbeitet_1.jpg1000092971_bearbeitet_1.jpg
1000092971.png1000092971.png

08.04.2026 _ Pitch-Deck

Pitchdeck.pdf PDF Pitchdeck.pdf

Pitchdeck.pngPitchdeck.png

15.04.2026

Nachdem ich im Pitchdeck bereits eine erste Idee für ein mögliches Exponat hatte, habe ich diese und noch alternative Umsetzungen in dieser Woche ausgearbeitet (siehe Bild).

Ich war thematisch noch sehr offen und habe sowohl in Richtung rein spekulatives Design in Bezug auf die bionischen Potentiale der Biolumineszenz gedacht als auch in Richtung evolutionärer Vorteile für bestimmte Tierarten.

260415 (1).png260415 (1).png
260415 (3).png260415 (3).png
260415 (2).png260415 (2).png
260415 (7).png260415 (7).png
260415 (6).png260415 (6).png
260415 (4).png260415 (4).png
260415 (5).png260415 (5).png

22.04.2026

In dieser Woche habe ich mich für den thematischen Umfang meines Exponats festgelegt. Ich habe mir überlegt, dass ich in der Umsetzung sowohl den evolutionären Aspekt als auch die bionischen Potentiale der Biolumineszenz verarbeiten möchte. Dabei sollte die menschliche Faszination für das natürliche Leuchten die beiden Aspekte auf interaktive Weise verbinden und nahbar für die Besuchenden machen (siehe Bild).

Frame 21.pngFrame 21.png
Frame 22.pngFrame 22.png
Frame 23.pngFrame 23.png
Frame 24.pngFrame 24.png

Ende April habe ich außerdem begonnen meine Recherche für die Bionik zusammenzustellen, um zu sehen, wie viel dieses Themengebiet im Bereich Biolumineszenz überhaupt hergibt. 

Dabei bin ich auf sechs verschiedene Disziplinen gekommen (siehe Bild).

260422_b.jpg260422_b.jpg

29.04.2026 _ Konzeptskizze

Konzeptskizze.pdf PDF Konzeptskizze.pdf

06.05.2026

In dieser Woche habe ich Recherche betrieben für die einzelnen Tierarten, an deren Beispiel ich den evolutionären Nutzen der Biolumineszenz aufzeigen möchte, sowie für bionische Umsetzungen für den Menschen.

Screenshot 2026-07-22 150142.jpgScreenshot 2026-07-22 150142.jpg

13.05.2026

Im Mai habe ich begonnen einen Prototypen meiner Website bei Figma zu visualisieren. 

Ich habe zunächst eine Unterseite ausgearbeitet und mit Inhalten befüllt, um zu sehen, wie ich die Informationen spannend aufbereiten kann.

Da viele der zur Verfügung stehenden Fotografien der Lebewesen sehr unterschiedliche Qualitäten hatten, habe ich mir überlegt diese einheitlich in einer Bitmap-Optik zu verfremden. Bei Mouse-Hover sollte der User aufgrund der Informationsvermittlung dennoch das unbearbeitete Bild sehen. Die Bitmap-Optik habe ich gewählt, da ich mir diese gut in futuristischen Science-Fiction Kontexten vorstellen konnte.

260513_Prototyp_Unterseite.jpg260513_Prototyp_Unterseite.jpg

20.05.2026

In dieser Woche habe ich weiter prototypisch in Figma gearbeitet und mir erste Gedanken zu meiner Homepage gemacht, auf welcher man die Lebewesen am Ende aufspüren soll. Dort habe ich zum ersten Mal die Skala angedacht, welche die derzeitige Tiefe anzeigen sollte.

Nach Rücksprache habe ich bei den Unterseiten nun Videos als Starter-Section eingebaut, die das Interesse der User wecken sollen. Auch die Bitmap-Optik zur Bildverfremdung habe ich wieder verworfen, und habe Bearbeitungen ausprobiert, die besser mit den Videos harmonieren würden.

27.05.2026 _ Zwischenpräsentation

zwischenpraesi.pdf PDF zwischenpraesi.pdf

03.06.2026

In dieser Woche habe ich endlich meine Umsetzung in Webflow in Angriff genommen. Ich habe mit dem wichtigsten Aspekt begonnen, nämlich dem Custom Cursor in Form eines Lichtkegels, mit dem man die Home-Seite erkunden kann. Nach dem ich ein bisschen herumprobiert habe, hat mein Lichtkegel jetzt eher einen bläulichen Rand, der die Farben der Unterseiten wieder aufgreift. 

Ich habe zudem begonnen meine Webflow-Sections und Classes für die Home-Seite und die Unterseiten anzulegen.

Varianten Lichtkegel bei Webflow

lichtkegel_V1.jpglichtkegel_V1.jpg
lichtkegel_V2.jpglichtkegel_V2.jpg
lichtkegel_V4.jpglichtkegel_V4.jpg
lichtkegel_V3.jpglichtkegel_V3.jpg

10.06.2026

In dieser Woche habe ich vor Allem an meinen Texten gearbeitet. Für das User-Testing an diesem Tag habe ich meine Home-Seite und eine Unterseite weiter ausgearbeitet.

Mich hat beim Testing vor Allem die Home-Seite interessiert. Folgende Fragen hatte ich mir überlegt:

  • Ist das Hover-Signal zu stark/zu schwach, wenn man etwas gefunden hat?

Ich habe das Feedback bekommen, dass mein bisheriges Hover-Signal hilfreich ist, aber es ein bisschen abgewandelt werden muss. Ich habe zwei Effekte angewendet (der Lichtkegel verändert seine Größe und das  gefundene Tier flackert -> das Flackern war zu viel)

  • Ist der Hintergrund spannend oder zu überladen?

Der Hintergrund braucht mehr differenzierbare Elemente, damit man bei der Suche mit dem begrenzten Sichtfeld des Lichtkegels nicht die Orientierung verliert.

  • In welchen Größenrelationen sollen die Bilder der Tier zueinander stehen?

Ein 1:1 Maßstab ist nicht möglich, da die Tiere stark in der Körpergröße variieren. 

Eine Lösung, die wir diskutiert hatten, wäre die Proportionen der Tiere zueinander anzudeuten. Neben den realen Größen in cm bzw. m-Angabe, die bereits auf den Unterseiten existieren, könnte man noch Illustrationen ergänzen, die eine Person in Relation zu dem jeweiligen Tier zeigen. So können sich die Besucher mehr unter der wahren Größe der Tiere vorstellen.

weitere Erkenntnisse

Ich habe zudem gemerkt, dass es teilweise nicht sofort verständlich war, dass sich der Lichtkegel mit der Maus bewegt. Das werde ich in den kommenden Wochen berücksichtigen und evtl. eine Art Signal einbauen, damit der User das versteht. Vermutlich wird sich das jedoch in der Ausstellungssituation von alleine lösen, da die Besuchenden dort eine Computermaus vor sich liegen haben werden. Bei dem Testing an meinem Privat-PC war das Mousepad wahrscheinlich verwirrend.

17.06.2026

In der Woche habe ich alle benötigten Bilder, sowie Videos für meine Unterseiten zusammengetragen und mir die Quellen vorgemerkt.

Screenshot 2026-07-22 150038.jpgScreenshot 2026-07-22 150038.jpg

Außerdem habe ich mich für die Bildbearbeitung final festgelegt.

Für die Homepage wollte ich einen diffusen Look, welcher speziell die Leuchtorgane der Tiere hervorheben sollte.

leuchtkalmar.pngleuchtkalmar.png
pilz.pngpilz.png
glühwürmchen.pngglühwürmchen.png
anglerfisch.pnganglerfisch.png
shrimp.pngshrimp.png
blitzlichfisch.pngblitzlichfisch.png
tausendfüßler.pngtausendfüßler.png
atolla-qualle.pngatolla-qualle.png
riesenkalmar.pngriesenkalmar.png

Für die Unterseiten hatte ich mir eine Bildbearbeitung überlegt, die wie die Ansicht auf einem alten Screen mit Rauscheffekt wirken sollte. Das sollte den geplanten SciFi-Charakter meiner Website betonen.

Im Gespräch hat sich herausgestellt, dass sich die Gestaltung der Fotografien auf der Homepage mit der auf den Unterseiten beißt, sodass ich mich für eine Art der Bearbeitung festlegen musste.

atolla_unterseite.jpgatolla_unterseite.jpg
Heterocarpus_ensifer_unterseite.jpgHeterocarpus_ensifer_unterseite.jpg
riesenkalmar_unterseite.jpgriesenkalmar_unterseite.jpg

24.06.2026

Ende Juni habe ich meine Recherche finalisiert und gleichzeitig an meiner Website weitergearbeitet.

Zudem habe ich mein Konzept in dem Prozess leicht abgewandelt. Zu Beginn wollte ich neben den biolumineszierenden Tierarten auch noch existierende und spekulative bionische Anwendungen als klickbare Elemente einbauen. Um Verwirrung für die Besuchenden zu vermeiden, habe ich mich entschieden die bionischen Anwendungen an passenden Stellen in den Unterseiten der Tiere einzubauen. 

Die Natur und Technik auf der Homepage zu trennen, hat sich stimmiger angefühlt, als diese Bereiche zu sehr zu vermischen. Diese Entscheidung hängt auch damit zusammen, dass im Bereich der Biolumineszenz-Bionik noch viele Projekte auf spekulativer Ebene ablaufen.

In dieser Woche habe ich außerdem die Tiefenzonen für die maritimen Organismen meiner Website recherchiert und festgelegt, und prototypisch bei Figma in einer sinnvollen Reihenfolge angeordnet.

Frame 42.jpgFrame 42.jpg
Frame 43.jpgFrame 43.jpg

01.07.2026

Anfang Juli habe ich bei Webflow weitere Features für die Homepage hinzugefügt:

  • Skala, die die derzeitige Meerestiefe und Position anzeigt
  • Horizontaler Scroll für den Bereich über der Erdoberfläche

Screenshot 2026-07-22 150714.jpgScreenshot 2026-07-22 150714.jpg

08.07.2026

In der Woche vor der Werkschau habe ich meine gesamten Inhalte in die Unterseiten eingepflegt und meine Sections noch einmal angepasst.

Außerdem musste ich die gesamte Website noch einmal für meinen finalen Ausstellungsscreen anpassen, da dieser erheblich größer ist, als der Bildschirm meines Privat-PCs auf welchem ich die Website bis dahin bearbeitet habe.

10.07.2026 _ Werkschau

1000103233_bearbeitet.jpg1000103233_bearbeitet.jpg

Für die Ausstellungssituation habe ich noch ein kleines Teaserplakat entworfen, auf welchem kurz das Exponat sowie das vereinfachte Prinzip der Biolumineszenz erklärt wird.

1000103230_bearbeitet.jpg1000103230_bearbeitet.jpg
poster_lumisense_a2.jpgposter_lumisense_a2.jpg

PDF Plakat (komprimiert für Incom)

plakat_werkschau.pdf PDF plakat_werkschau.pdf

Als Goodies für die Besuchenden habe ich zudem drei verschiedene Sticker- und zwei Postkartenmotive erstellt. Auf den Rückseiten der Postkarten lassen sich verschiedene Kurzinformationen zu Biolumineszenz finden.

1000103234_bearbeitet.jpg1000103234_bearbeitet.jpg

Postkarten:

  • Leuchtkalmar (Vorderseite) + Definition Biolumineszenz (Rückseite)
  • Dana-Oktopus-Tintenfisch (Vorderseite) + Evolution Biolumineszenz (Rückseite)

postkarte_leuchtkalmar.jpgpostkarte_leuchtkalmar.jpg
postkarte_dana-oktopus.jpgpostkarte_dana-oktopus.jpg

Stickermotive: 

  • Atolla-Qualle
  • Leuchtkalmar
  • Exponattitel Lumisense

sticker.jpgsticker.jpg

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Betreuer_in

foto: Anne-Christina Rudnick foto: Claudia Muth

Zugehöriger Workspace

Designprojekt Experience Learning (KD 6)

Entstehungszeitraum

Sommersemester 2026