Studio
Um pipeline RAW não destrutivo num navegador: o desafio era a cor.
- Ano
- 2026
- Conceção
- 12 semanas
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Product design
- Design de interface
- Desenvolvimento
- Processamento de imagem
Produto editado pela Kayzen Web, disponível num endereço de pré-visualização Vercel enquanto aguarda o seu domínio definitivo.
- cadeia de cor de ponta a ponta
- ICC
- acessibilidade Lighthouse
- 97/100
- boas práticas LighthouseA nossa pontuação mais baixa neste critério: o processamento RAW no navegador assenta em APIs que o Lighthouse assinala; mostramo-la tal como está em vez de retirar a funcionalidade, e a revisão está planeada.
- 73/100
O que era preciso resolver.
O contexto
O Studio é uma aplicação de revelação fotográfica online: importação RAW, correções não destrutivas, gestão de cor ICC de ponta a ponta e exportação em vários formatos.
A restrição
Os fotógrafos não mudam de ferramenta por conforto. Dois pontos são decisivos: a fidelidade da cor — um ficheiro que sai com um desvio de tonalidade é inutilizável — e o caráter não destrutivo, ou seja, a possibilidade de voltar atrás em qualquer ajuste seis meses depois.
A resposta
A cor foi tratada antes da interface. Perfil de entrada da câmara, espaço de trabalho linear, perfil de saída escolhido na exportação: a cadeia é explícita e mostrada ao utilizador. Os ajustes são guardados como uma lista de operações, nunca aplicados ao ficheiro original.
As pontuações registadas na entrega.
Pontuações Lighthouse do site em produção. Publicamo-las tal como estão: quando uma delas é baixa, a causa e o plano de correção estão descritos mais abaixo, em vez de serem omitidos.
Cada opção, e a sua razão.
Interface escura neutra
Cinzento rigorosamente neutro à volta da imagem, sem qualquer dominante. Uma interface tingida falseia a perceção do equilíbrio de brancos: é a primeira regra do software de edição de imagem, e sobrepõe-se a qualquer consideração estética.
Histograma sempre visível
Fixo no topo do painel de ajustes, com alerta de recorte. É o instrumento de medida do fotógrafo; escondê-lo atrás de um separador seria como guardar o nível de bolha na caixa de ferramentas.
Atalhos de teclado da profissão
Os atalhos retomam os do software de referência. Impor uma nova gramática a um utilizador especialista é pedir-lhe que desaprenda — o custo da mudança passa a ser superior ao ganho.
Paleta do projeto
Cinzento neutro 900
#18181B
Fundo do espaço de trabalho
Cinzento neutro 700
#3F3F46
Painéis
Malva
#A78BFA
Destaque, seleção
Vermelho de recorte
#EF4444
Alerta de altas luzes
Sistema tipográfico
Títulos
Inter 600
Texto corrido
Inter 400
Valores numéricos em largura fixa: um cursor cujo valor muda de largura é percebido como impreciso.
O que está por baixo do capô.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Descodificação RAW em WebAssembly
A descodificação dos formatos proprietários (CR3, NEF, ARW) corre em WebAssembly num worker. A thread principal continua disponível: os cursores respondem durante a descodificação de um ficheiro de 60 megapíxeis.
Renderização na GPU via WebGL
As correções são aplicadas em shaders na placa gráfica. Uma passagem na CPU teria tornado a pré-visualização inutilizável a esta resolução.
Histórico de operações, não de píxeis
Cada ajuste é uma entrada numa pilha de operações serializável. Voltar atrás, aplicar o mesmo tratamento a uma série, exportar uma predefinição: tudo decorre desta estrutura.
Como o site se torna encontrável.
SEO de aquisição, não de produto
A aplicação em si não é indexável, nem tem de ser. O SEO incide sobre as páginas de apresentação e sobre as comparações, onde se dá a descoberta.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
97/100 apesar de uma interface para especialistas
Cada cursor é um input nativo com rótulo, valor anunciado e incremento por teclado. As interfaces de edição de imagem dispensam-no quase todas; não havia qualquer razão técnica para o fazer.
O que foi entregue.
- Apresentação
- Aplicação de edição
- Formatos e compatibilidade
- Preços
As etapas do projeto.
Cadeia de cor
Perfis de entrada, espaço de trabalho, perfis de saída.
Descodificação
WebAssembly, workers, pré-visualização rápida.
Renderização
Shaders WebGL, histograma, recorte.
Interface
Painéis, atalhos, histórico.
O que nos perguntam com frequência.
Outros projetos
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
Cibersegurança ofensiva & SaaSSentinel by Kayzen
Vender um produto de segurança a engenheiros: cada afirmação tinha de ser demonstrável.
Dados & Serviço meteorológicoMétéo Climat France
358 páginas indexáveis, um mapa animado em 72 horizontes — e nem uma linha de framework.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.