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
_______________________
_chronologischer Entstehungsprozess
25.03.2026 _ Ideenfindung
27.03.2026 _ Exkursion Bionicum
01.04.2026 _ Workshop
08.04.2026 _ Pitch-Deck
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.
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).
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).
29.04.2026 _ Konzeptskizze
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.
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.
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
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
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.
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.
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.
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.
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
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
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.
PDF Plakat (komprimiert für Incom)
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.
Postkarten:
- Leuchtkalmar (Vorderseite) + Definition Biolumineszenz (Rückseite)
- Dana-Oktopus-Tintenfisch (Vorderseite) + Evolution Biolumineszenz (Rückseite)
Stickermotive:
- Atolla-Qualle
- Leuchtkalmar
- Exponattitel Lumisense
