Studio
Een niet-destructieve RAW-pipeline in een browser: de uitdaging was de kleur.
- Jaar
- 2026
- Ontwerp
- 12 weken
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Productdesign
- Interfacedesign
- Ontwikkeling
- Beeldverwerking
Product van Kayzen Web, bereikbaar op een Vercel-previewadres in afwachting van het definitieve domein.
- kleurbeheer van begin tot eind
- ICC
- Lighthouse-toegankelijkheid
- 97/100
- Lighthouse-best practicesOnze laagste score op dit criterium: de RAW-verwerking in de browser steunt op API's die Lighthouse signaleert; we tonen de score zoals hij is in plaats van de functie te schrappen, en de herziening staat gepland.
- 73/100
Wat er opgelost moest worden.
De context
Studio is een online applicatie voor het ontwikkelen van foto's: RAW-import, niet-destructieve correcties, ICC-kleurbeheer van begin tot eind en export naar meerdere formaten.
De beperking
Fotografen stappen niet over op een andere tool voor het comfort. Twee knelpunten: kleurgetrouwheid — een bestand dat met een tintafwijking naar buiten komt, is onbruikbaar — en het niet-destructieve karakter, dat wil zeggen de mogelijkheid om zes maanden later op elke instelling terug te komen.
Het antwoord
De kleur werd vóór de interface aangepakt. Invoerprofiel van de camera, lineaire werkruimte, uitvoerprofiel gekozen bij de export: de keten is expliciet en wordt aan de gebruiker getoond. De instellingen worden opgeslagen als een lijst bewerkingen en nooit op het bronbestand toegepast.
De scores bij oplevering.
Lighthouse-scores van de website in productie. Wij publiceren ze zoals ze zijn: als een score laag is, staan de oorzaak en het verbeterplan hieronder beschreven in plaats van verzwegen.
Elke keuze, en de reden erachter.
Neutrale donkere interface
Strikt neutraal grijs rond het beeld, zonder enige zweem. Een gekleurde interface vertekent de waarneming van de witbalans: dat is de eerste regel van fotobewerkingssoftware, en die gaat vóór elke esthetische overweging.
Histogram altijd zichtbaar
Vastgezet bovenaan het instellingenpaneel, met een clippingwaarschuwing. Het is het meetinstrument van de fotograaf; het achter een tabblad verbergen zou neerkomen op de waterpas in de gereedschapskist opbergen.
Sneltoetsen uit het vak
De sneltoetsen zijn overgenomen van de referentiesoftware. Een deskundige gebruiker een nieuwe grammatica opleggen, betekent hem vragen af te leren — de overstapkosten worden dan hoger dan de winst.
Kleurenpalet van het project
Neutraal grijs 900
#18181B
Achtergrond van de werkruimte
Neutraal grijs 700
#3F3F46
Panelen
Mauve
#A78BFA
Accent, selectie
Clippingrood
#EF4444
Waarschuwing hoge lichten
Typografisch systeem
Koppen
Inter 600
Lopende tekst
Inter 400
Numerieke waarden in vaste breedte: een schuifregelaar waarvan de waarde in breedte verspringt, wordt als onnauwkeurig ervaren.
Wat er onder de motorkap zit.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
RAW-decodering in WebAssembly
Het decoderen van de eigen formaten van de fabrikanten (CR3, NEF, ARW) draait in WebAssembly in een worker. De hoofdthread blijft beschikbaar: de schuifregelaars reageren tijdens het decoderen van een bestand van 60 megapixel.
GPU-rendering via WebGL
De correcties worden in shaders op de grafische kaart toegepast. Een CPU-doorgang had de preview bij deze resolutie onbruikbaar gemaakt.
Een geschiedenis van bewerkingen, geen pixels
Elke instelling is een item in een serialiseerbare stapel bewerkingen. Teruggaan, een bewerking op een hele reeks dupliceren, een preset exporteren: alles volgt uit deze structuur.
Hoe de website vindbaar wordt.
SEO voor acquisitie, niet voor het product
De applicatie zelf is niet indexeerbaar, en hoeft dat ook niet te zijn. De vindbaarheid richt zich op de presentatiepagina's en de vergelijkingen, waar de ontdekking plaatsvindt.
Bruikbaar voor iedereen.
Sinds juni 2025 verplicht de Europese toegankelijkheidsrichtlijn (European Accessibility Act) digitale toegankelijkheid voor een groot deel van de onlinediensten. Wij regelen dat in het ontwerp, niet achteraf.
97/100 ondanks een expertinterface
Elke schuifregelaar is een native input met label, aangekondigde waarde en stapgrootte via het toetsenbord. Bijna alle bewerkingsinterfaces laten dat achterwege; er was geen enkele technische reden om dat te doen.
Wat er is opgeleverd.
- Presentatie
- Bewerkingsapplicatie
- Formaten en compatibiliteit
- Tarieven
Het verloop van het project.
Kleurketen
Invoerprofielen, werkruimte, uitvoerprofielen.
Decodering
WebAssembly, workers, snelle preview.
Rendering
WebGL-shaders, histogram, clipping.
Interface
Panelen, sneltoetsen, geschiedenis.
Wat ons vaak gevraagd wordt.
Andere projecten
AVG/GDPR-compliance & SaaSKonsent by Kayzen
Een bannerleverancier die banners audit, is rechter en partij: onafhankelijkheid wás het product.
Offensieve cybersecurity & SaaSSentinel by Kayzen
Een securityproduct verkopen aan engineers: elke bewering moest aantoonbaar zijn.
Data & WeerdienstMétéo Climat France
358 indexeerbare pagina's, een geanimeerde kaart over 72 tijdstappen — en geen enkele regel framework.
Hetzelfde niveau van zorg, voor uw website.
Gratis audit van uw huidige website, offerte binnen 24 uur en een schriftelijke onderbouwing — zoals die u net hebt gelezen. Betaling in drie termijnen zonder extra kosten; lokale subsidies gecontroleerd vóór ondertekening.