GRID / SIGNAL01 / STRATEGIE · DESIGN · WEB
Kommunikation
Marken, Kampagnen, Grafik und digitale Auftritte, die etwas auslösen.
dasMedienWerk öffnen ↗Parallel Experience · Klagenfurt · AT
Ein Kopf.Viele Welten.Keine Grenzen.
Ich verbinde Kommunikation, Film, Hundetraining und Musik. In dieser Version meiner Seite kommt noch eine Ebene dazu: Das Medium selbst wird Teil der Geschichte.
SCROLL TO EXPLORE
REALTIME GRAPHICS✦GPU SHADERS✦WEB AUDIO✦PHYSICS FIELD✦KINETIC TYPE✦FLOW FIELD✦IMAGE WARP✦CINEMATIC SCROLL✦DATA VISUALIZATION✦INTERACTIVE DASHBOARDS✦SPOTLIGHT UI✦CAMERA API✦DEVICE ORIENTATION✦LOCAL PROCESSING✦WEB WORKERS✦VOICE INTERFACE✦PWA✦REALTIME GRAPHICS✦GPU SHADERS✦WEB AUDIO✦PHYSICS FIELD✦KINETIC TYPE✦FLOW FIELD✦IMAGE WARP✦CINEMATIC SCROLL✦DATA VISUALIZATION✦INTERACTIVE DASHBOARDS✦SPOTLIGHT UI✦CAMERA API✦DEVICE ORIENTATION✦LOCAL PROCESSING✦WEB WORKERS✦VOICE INTERFACE✦PWA✦
01 / IDEA
Das Medium mitdenken
Das Web ist kein Blatt Papier.
Also behandle ich es auch nicht so.
Eine Website kann erzählen, reagieren, hören, sehen, berechnen, simulieren und sich an das Gerät anpassen. Genau das macht dieses Lab sichtbar. Die Inhalte sind dieselben Welten wie auf meiner normalen Website – die Inszenierung ist eine andere.
0Welten
0Live-Demos
0Browser
01
Meine vier Welten
Gleicher Mensch.
Vier Zugänge.
Vier Disziplinen, vier unterschiedliche Interaktionsprinzipien. Bewege den Pointer über die Karten: Jede Welt reagiert anders – nicht viermal derselbe Effekt.
GRID / SIGNAL
SHUTTER / PLAYHEAD02 / FILM · MOTION · 3D · VFX
Film
Kamera, Schnitt, Motion Design, 3D und visuelle Effekte als bewegte Erzählung.
Filmwelt öffnen ↗
RELATION / RESPONSE03 / HUND · MENSCH · VERSTEHEN
Hunde
Tierschutzqualifiziertes Hundetraining, Wissen, Beziehung und verständliche Kommunikation.
dieHunde.schule öffnen ↗WAVE / FREQUENCY
04 / TEXT · SOUND · EMOTION
Musik
Songwriting, Produktion und Geschichten, bei denen Technologie Instrument bleibt.
HeartVibe Collective öffnen ↗02
Nicht Mockup. Echt.
Browser
Laboratories.
Die Module darunter laufen tatsächlich im Browser. Kein gerendertes Demo-Video – Interaktion in Echtzeit.
LAB 01 · PARTICLE MORPHTausende Punkte.
Tausende Punkte.
Eine Form.
Die Partikel werden aus Textpixeln berechnet und morphingfähig gemacht. Bewege den Cursor durch das Feld oder ändere das Ziel.
Live particles0
MOVE POINTER
ENGINE CHECK—
MOVE POINTER · REALTIME MATERIAL
LAB 02 · IMPOSSIBLE MATERIAL / GPUMaterial, das es
Material, das es
gar nicht gibt.
Kein Video und kein Bild: Licht, Oberfläche, Brechung und Farbe entstehen in Echtzeit aus einem Fragment-Shader. Bewege den Cursor über das Material und wechsle die Materialphysik.
WebGL wird beim Öffnen des Moduls live geprüft. Bei einem GPU-Fehler übernimmt automatisch ein visueller Fallback.
LAB 03 · WEB AUDIOEine Website
Eine Website
kann klingen.
Der Klang wird live im Browser synthetisiert. Kein MP3-Player. Der Visualizer analysiert das Audiosignal während der Wiedergabe.
SYNTH ENGINEOFFLINE
Bewege das Gerät.
Auf unterstützten Smartphones reagiert das Objekt auf Neigung und Orientierung. Am Desktop dient der Pointer als Fallback.
CPORIENTATIONβ 0° · γ 0°
Sprich mit der Seite.
Sag zum Beispiel „Film“, „Hunde“, „Musik“, „Projekte“ oder „Kontakt“. Wichtig: Mit „Zurück“ kommst Du jederzeit wieder zu dieser Sprachsteuerung zurück.
FILMHUNDEMUSIKPROJEKTEKONTAKTZURÜCK
Bereit. Sage einen Befehl.
LAB 06 · CAMERA / MEDIADie Kamera wird
Die Kamera wird
Teil des Interfaces.
Nach Deiner ausdrücklichen Freigabe kann der Browser das Kamerabild lokal verarbeiten. In dieser Demo wird ein Echtzeit-Filter berechnet. Es wird nichts hochgeladen oder gespeichert.
Kamera benötigt HTTPS/localhost und Deine Browserfreigabe.
CAMERAOFFOPT-IN ONLY
DROP IMAGEoder klickenVerarbeitung bleibt lokal im Browser
LAB 07 · LOCAL FILE PROCESSINGDateien bearbeiten.
Dateien bearbeiten.
Ohne Upload.
Zieh ein Bild in die Fläche. Der Browser liest und verändert die Pixel lokal. Die Datei verlässt Dein Gerät in dieser Demo nicht.
LAB 08 · BROWSER CAPABILITIES
Was kann Dein Browser?
Diese Matrix wird auf Deinem Gerät live ermittelt. Jede Fähigkeit hat eine kleine Demo oder einen direkten Test, damit sichtbar wird, wofür sie auf einer Website gebraucht werden kann.
WORKER BENCHMARKNOT RUNParallel thread ready
LAB 09 · PHYSICS FIELDDie Oberfläche
Die Oberfläche
hat Masse.
Mehr als 100 Körper reagieren auf Gravitation, Kollisionen, Wände und Deinen Pointer. Zieh durch das Feld oder löse einen Impuls aus.
POINTER = FORCE FIELD
Schrift wird Material.
Bewege den Pointer durch die Wörter. Jeder Buchstabe reagiert eigenständig auf Distanz und Geschwindigkeit.
MOVE
FEEL
CREATE
Unsichtbare Kräfte.
Ein generatives Vektorfeld erzeugt aus Bewegung Linien, Wirbel und lokale Störungen.
Wofür?Ideal als heroischer Hintergrund, Datenstrom, Energie-/Netzwerkvisualisierung, Musikreaktion, Tech-Branding oder dezentes interaktives Ambient-System.
Bild ist nicht flach.
Das Motiv wird in horizontale Segmente zerlegt. Pointer und Zeit verschieben die Pixel wie eine elastische Oberfläche.
SCROLL TIMELINE000%
WEB
IS NOT
A PAGE.
LAB 13 · CINEMATIC SCROLL
Der Scrollweg steuert Kamera, Raum, Typografie und Licht – nicht nur die Position einer Seite.
14–18
Business · Zahlen · Entscheidungen
Daten müssen nicht
nach Excel aussehen.
Diese Labs zeigen, wie Zahlen, Kennzahlen und Statistiken interaktiv, verständlich und verkaufsstark inszeniert werden können. Die Werte sind Demo-Daten.
Vom Lead zum Umsatz.
Beispiel: Monats-Funnel eines Dienstleistungsbetriebs. Du veränderst qualifizierte Anfragen und durchschnittlichen Auftragswert. Conversion, Aufträge, Umsatz und Ergebnis reagieren als zusammenhängendes Modell.
AUFTRÄGE / MONAT0
UMSATZ€ 0
DECKUNGSBEITRAG€ 0
CONVERSION0,0%
BASELINEDEINE SIMULATION
Je höher der Preis, desto höher der Auftragswert – gleichzeitig sinkt modellhaft die Abschlussquote. Mehr qualifizierte Leads erhöhen Volumen und Wachstum.
Wo bleibt der Umsatz?
Beispiel: Monats-Ergebnisrechnung. Vom Umsatz gehen Marketing, Personal und Betrieb ab; ein Upsell kommt hinzu. Die letzte Säule zeigt das tatsächliche Betriebsergebnis.
UMSATZ€ 0
ERGEBNIS€ 0
MARGE0%
Was wäre, wenn?
SAFE, BASE und GROWTH verwenden unterschiedliche Preiselastizität und Nachfrageannahmen. Dadurch ändern sich nicht nur Eurobeträge, sondern auch Mengen, Profit und das Verhältnis der Szenarien zueinander.
Bei einem höheren Preis reagieren die drei Szenarien unterschiedlich stark. GROWTH ist chancenreicher, aber preissensibler; SAFE ist konservativer.
Wann passiert wirklich etwas?
Konkretes Beispiel: Die Heatmap zeigt, an welchen Wochentagen und Uhrzeiten eine Website besonders viele Anfragen, Besucher oder Umsatz erzeugt. Helle Felder = hohe Aktivität. Fahre über ein Feld, um den exakten Wert zu sehen.
Daten in Echtzeit.
Ein Live-Chart simuliert eintreffende Mess-, Traffic- oder Verkaufsdaten und hebt Anomalien hervor.
19–23
Design · sinnvoll einsetzbar
Effekt ist gut.
Funktion ist besser.
Fünf Design-Effekte, die nicht nur Show sind, sondern Navigation, Hierarchie, Fokus oder Produktpräsentation verbessern können.
Leistungen ohne Kartenfriedhof.
Beispiel: Eine Agentur zeigt ein Website-Relaunch-Paket. Der Pointer setzt den Bereich in den Vordergrund, den der Besucher gerade prüft – die Inhalte bleiben dabei echte, verständliche Leistungen.
BEISPIEL · WEBSITE RELAUNCH
01 · STRATEGIEPositionierung & UXZiele, Zielgruppen, Informationsarchitektur und Conversion-Pfade.
02 · CONTENTFilm & BildEigene visuelle Sprache statt Stock-Material.
03 · PERFORMANCE95+Core-Web-Vitals als technisches Ziel.
04 · WEBSITEDesign + CodeResponsive, barrierearm, schnell und visuell eigenständig.
05 · GROWTHSEO / SEAMessbare Sichtbarkeit nach dem Launch.
Pointer über eine Leistung bewegen.
Ein Vergleich. Drei Werkzeuge.
Wechsle zwischen Lupe, vertikalem und horizontalem Ausschnitt. Bei den beiden Schnitt-Modi verschiebst Du die Trennlinie direkt mit Pointer oder Touch.
ORIGINALVARIANTEInteraktion führt.
Ein Call-to-Action zieht Pointer und Mikroelemente subtil an. Sinnvoll für wichtige Conversion-Ziele.
Mit der Maus zeigen. Mit Klick auswählen.
Die Mausspitze zeigt nur, welche Karte Du gerade triffst. Erst ein Klick holt diese Karte bewusst nach vorne und fixiert sie dort. So springt der Stapel nicht mehr unter dem Mauszeiger weg.
01 · ANALYSEVerstehenZiel, Nutzer und Problem sauber erfassen.
02 · KONZEPTOrdnenStruktur, Story und Interaktion definieren.
03 · DESIGNErlebenVisuelles System und Motion entwickeln.
04 · LAUNCHWirkenTesten, optimieren, veröffentlichen.
Markengrafik, die sich wirklich verändert.
Die Linien entstehen automatisch. Relief verändert die Höhe der Formen, Dichte die Zahl der Konturen und Flow ihre Bewegung. Der Pointer setzt nur einen zusätzlichen lokalen Impuls – er ist nicht mehr Voraussetzung für den Effekt.
03
Infinite Canvas · No Exit
Arbeit hinterlässt
Verbindungen.
Zieh die Fläche, zoome fein und frei und untersuche die Projektwelt. Die Knoten öffnen bewusst keine externe Seite – die Experience bleibt geschlossen und zusammenhängend.
04
Reactive Media Surface
Nicht alles braucht
einen Effekt.
Aber wenn eine Oberfläche reagieren soll, dann wirklich. Bewege den Pointer durch das Feld: Tiefe, Licht, Perspektive, Verbindungen und Bildstimmung werden in Echtzeit berechnet.
FILM01
DESIGN02
HUNDE03
MUSIK04
MOVE POINTER · CHANGE THE PORTRAIT
05Christian Pohler.
Der Mensch hinter den Projekten
Christian Pohler.
Nicht eine Rolle. Ein System.
Werbung, Film, Grafik, Hundetraining, Musik, Technik, Fotografie, 3D und Audio sind keine getrennten Schubladen. Sie greifen ineinander.
Das Porträt bleibt vollständig sichtbar und wird bewusst kleiner dargestellt. Wähle einen Modus und bewege die Maus: Lupe, chromatische Trennung, Glasbrechung, Bild-Slices und Ghost-Trails greifen auf dasselbe vollständige Motiv zu.
BASEKlagenfurt
am Wörthersee
am Wörthersee
ARBEITSWEISEpersönlich
direkt
direkt
ANSPRUCHIdee → Wirkung
statt Oberfläche
statt Oberfläche
Und jetzt das Entscheidende
Alles, was Du gerade erlebt hast,
lief in Deinem Browser.
No app.No plugin.Just the web.
Die Frage ist nicht mehr, was eine Website grundsätzlich kann. Die bessere Frage lautet: Was soll sie für Deinen Besucher erlebbar machen?
06Was soll Deine
Deine Idee muss nicht aussehen wie alles andere.
Was soll Deine
Website können?
Du musst noch nicht wissen, welche Technologie dafür notwendig ist. Beschreib mir, was beim Menschen ankommen oder passieren soll. Daraus lässt sich die passende digitale Erfahrung entwickeln.