Studio
Un flujo RAW no destructivo en el navegador: el reto era el color.
- Año
- 2026
- Diseño
- 12 semanas
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Diseño de producto
- Diseño de interfaz
- Desarrollo
- Procesamiento de imagen
Producto editado por Kayzen Web, servido en una dirección de previsualización de Vercel a la espera de su dominio definitivo.
- cadena de color de principio a fin
- ICC
- accesibilidad Lighthouse
- 97/100
- buenas prácticas LighthouseNuestra puntuación más baja en este criterio: el procesamiento RAW en el navegador se apoya en API que Lighthouse señala; la mostramos tal cual en lugar de retirar la funcionalidad, y la revisión está planificada.
- 73/100
Lo que había que resolver.
El contexto
Studio es una aplicación de revelado fotográfico en línea: importación RAW, correcciones no destructivas, gestión del color ICC de principio a fin y exportación en varios formatos.
La limitación
Los fotógrafos no cambian de herramienta por comodidad. Dos puntos bloqueantes: la fidelidad del color (un archivo que sale con una deriva de tono es inservible) y el carácter no destructivo, es decir, la posibilidad de volver sobre cualquier ajuste seis meses después.
La respuesta
El color se abordó antes que la interfaz. Perfil de entrada de la cámara, espacio de trabajo lineal, perfil de salida elegido al exportar: la cadena es explícita y se muestra al usuario. Los ajustes se guardan como una lista de operaciones, nunca se aplican al archivo original.
Las puntuaciones registradas en la entrega.
Puntuaciones Lighthouse del sitio en producción. Las publicamos tal cual: cuando una es baja, su causa y su plan de corrección se explican más abajo en lugar de silenciarse.
Cada decisión de diseño, y su porqué.
Interfaz oscura neutra
Gris neutro estricto alrededor de la imagen, sin ninguna dominante. Una interfaz teñida falsea la percepción del balance de blancos: es la primera regla del software de retoque, y prevalece sobre cualquier consideración estética.
Histograma siempre visible
Fijo en la parte superior del panel de ajustes, con aviso de recorte. Es el instrumento de medida del fotógrafo; esconderlo tras una pestaña sería como guardar el nivel de burbuja en la caja de herramientas.
Atajos de teclado del oficio
Los atajos retoman los del software de referencia. Imponer una gramática nueva a un usuario experto es pedirle que desaprenda: el coste del cambio supera la ganancia.
Paleta del proyecto
Gris neutro 900
#18181B
Fondo del espacio de trabajo
Gris neutro 700
#3F3F46
Paneles
Malva
#A78BFA
Acento, selección
Rojo recorte
#EF4444
Aviso de altas luces
Sistema tipográfico
Titulares
Inter 600
Texto de lectura
Inter 400
Valores numéricos en anchura fija: un control cuyo valor cambia de ancho se percibe como impreciso.
Lo que hay bajo el capó.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Decodificación RAW en WebAssembly
La decodificación de los formatos propietarios (CR3, NEF, ARW) se ejecuta en WebAssembly dentro de un worker. El hilo principal sigue disponible: los controles deslizantes responden mientras se decodifica un archivo de 60 megapíxeles.
Renderizado en GPU con WebGL
Las correcciones se aplican con shaders en la tarjeta gráfica. Una pasada en CPU habría hecho inutilizable la vista previa a esta resolución.
Historial de operaciones, no de píxeles
Cada ajuste es una entrada en una pila de operaciones serializable. Deshacer, duplicar un revelado en una serie, exportar un preajuste: todo se deriva de esa estructura.
Cómo se hace encontrar la web.
SEO de captación, no de producto
La aplicación en sí no es indexable, ni tiene por qué serlo. El posicionamiento se centra en las páginas de presentación y en las comparativas, que es donde se produce el descubrimiento.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
97/100 pese a ser una interfaz para expertos
Cada control deslizante es un input nativo con etiqueta, valor anunciado y paso ajustable con teclado. Casi todas las interfaces de retoque prescinden de ello; no había ninguna razón técnica para hacerlo.
Lo que se entregó.
- Presentación
- Aplicación de retoque
- Formatos y compatibilidad
- Tarifas
El desarrollo del proyecto.
Cadena de color
Perfiles de entrada, espacio de trabajo, perfiles de salida.
Decodificación
WebAssembly, workers, vista previa rápida.
Renderizado
Shaders WebGL, histograma, recorte.
Interfaz
Paneles, atajos, historial.
Lo que nos preguntan a menudo.
Otros proyectos
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
Ciberseguridad ofensiva y SaaSSentinel by Kayzen
Vender un producto de seguridad a ingenieros: cada afirmación tenía que poder demostrarse.
Datos y servicio meteorológicoMétéo Climat France
358 páginas indexables, un mapa animado sobre 72 horizontes de previsión y ni una sola línea de framework.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.