Studio
Eine nicht-destruktive RAW-Pipeline im Browser: Die Herausforderung war die Farbe.
- Jahr
- 2026
- Umsetzung
- 12 Wochen
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Product Design
- Interface-Design
- Entwicklung
- Bildverarbeitung
Ein Produkt von Kayzen Web, bis zur endgültigen Domain unter einer Vercel-Vorschauadresse erreichbar.
- durchgängige Farbmanagement-Kette
- ICC
- Lighthouse-Barrierefreiheit
- 97/100
- Lighthouse-Best-PracticesUnser niedrigster Wert in diesem Kriterium: Die RAW-Verarbeitung im Browser nutzt APIs, die Lighthouse bemängelt; wir zeigen ihn so, wie er ist, statt die Funktion zu entfernen, und die Überprüfung ist eingeplant.
- 73/100
Was gelöst werden musste.
Der Kontext
Studio ist eine Online-Anwendung zur Fotoentwicklung: RAW-Import, nicht destruktive Korrekturen, durchgängiges ICC-Farbmanagement und Export in mehreren Formaten.
Die Einschränkung
Fotografen wechseln ihr Werkzeug nicht aus Bequemlichkeit. Zwei Knackpunkte: die Farbtreue – eine Datei, die mit Farbstich herauskommt, ist unbrauchbar – und die Nicht-Destruktivität, also die Möglichkeit, jede Einstellung auch sechs Monate später noch zu ändern.
Die Antwort
Die Farbe wurde vor der Oberfläche behandelt. Eingangsprofil der Kamera, linearer Arbeitsfarbraum, beim Export gewähltes Ausgabeprofil: Die Kette ist explizit und wird dem Nutzer angezeigt. Die Einstellungen werden als Liste von Operationen gespeichert und nie auf die Quelldatei angewendet.
Die Werte bei der Auslieferung.
Lighthouse-Werte der Live-Website. Wir veröffentlichen sie unverändert: Ist einer niedrig, stehen Ursache und Korrekturplan weiter unten, statt verschwiegen zu werden.
Jede gestalterische Entscheidung – und ihr Grund.
Neutrale dunkle Oberfläche
Strikt neutrales Grau rund um das Bild, ohne jeden Farbstich. Eine getönte Oberfläche verfälscht die Wahrnehmung des Weißabgleichs: Das ist die erste Regel jeder Bildbearbeitungssoftware, und sie hat Vorrang vor jeder ästhetischen Überlegung.
Histogramm immer sichtbar
Oben im Einstellungsbereich fixiert, mit Clipping-Warnung. Es ist das Messinstrument des Fotografen; es hinter einem Tab zu verstecken, hieße die Wasserwaage in den Werkzeugkasten zu packen.
Tastenkürzel aus der Praxis
Die Tastenkürzel übernehmen die der Referenzprogramme. Einem Expertennutzer eine neue Grammatik aufzuzwingen, heißt von ihm zu verlangen, umzulernen – die Wechselkosten übersteigen dann den Nutzen.
Farbpalette des Projekts
Neutralgrau 900
#18181B
Hintergrund des Arbeitsbereichs
Neutralgrau 700
#3F3F46
Bedienfelder
Mauve
#A78BFA
Akzent, Auswahl
Clipping-Rot
#EF4444
Warnung Lichter
Typografisches System
Überschriften
Inter 600
Fließtext
Inter 400
Zahlenwerte in fester Breite: Ein Regler, dessen Wert in der Breite springt, wirkt ungenau.
Was unter der Haube steckt.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
RAW-Dekodierung in WebAssembly
Die Dekodierung der proprietären Formate (CR3, NEF, ARW) läuft per WebAssembly in einem Worker. Der Hauptthread bleibt frei: Die Regler reagieren, während eine 60-Megapixel-Datei dekodiert wird.
GPU-Rendering per WebGL
Die Korrekturen werden als Shader auf der Grafikkarte angewendet. Ein CPU-Durchgang hätte die Vorschau bei dieser Auflösung unbrauchbar gemacht.
Verlauf aus Operationen, nicht aus Pixeln
Jede Einstellung ist ein Eintrag in einem serialisierbaren Operationsstapel. Rückgängig machen, eine Bearbeitung auf eine Serie übertragen, ein Preset exportieren: Alles folgt aus dieser Struktur.
Wie die Website gefunden wird.
Akquise-SEO, kein Produkt-SEO
Die Anwendung selbst ist nicht indexierbar und muss es auch nicht sein. Das SEO konzentriert sich auf die Präsentationsseiten und die Vergleiche, wo die Entdeckung stattfindet.
Für alle nutzbar.
Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.
97/100 trotz Expertenoberfläche
Jeder Regler ist ein natives Input-Element mit Beschriftung, angekündigtem Wert und Tastaturschritten. Fast alle Bildbearbeitungsoberflächen verzichten darauf; es gab keinen technischen Grund dafür.
Was ausgeliefert wurde.
- Präsentation
- Bearbeitungsanwendung
- Formate und Kompatibilität
- Preise
Der Projektablauf.
Farbmanagement-Kette
Eingangsprofile, Arbeitsfarbraum, Ausgabeprofile.
Dekodierung
WebAssembly, Worker, schnelle Vorschau.
Rendering
WebGL-Shader, Histogramm, Clipping.
Oberfläche
Bedienfelder, Tastenkürzel, Verlauf.
Was man uns oft fragt.
Weitere Referenzen
DSGVO-Compliance & SaaSKonsent by Kayzen
Ein Banner-Anbieter, der Banner prüft, ist Richter in eigener Sache: Unabhängigkeit war das Produkt.
Offensive Cybersicherheit & SaaSSentinel by Kayzen
Ein Sicherheitsprodukt an Ingenieure verkaufen: Jede Aussage musste nachweisbar sein.
Daten & WetterdienstMétéo Climat France
358 indexierbare Seiten, eine animierte Karte über 72 Zeitpunkte – und keine einzige Zeile Framework.
Derselbe Anspruch, für Ihre Website.
Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.