El momento real
Una productora abre entre 5 y 15 portfolios en pestañas y descarta la mayoría en menos de 30 segundos. El sitio no compite contra el vacío: compite contra otras catorce pestañas abiertas al mismo tiempo.
convención
Trabajo / Producto UX/UI / Kacho Cano · Auditoría y diseño UX/UI
Cinco competidores y cinco portadas quietas
Proyecto 03 de 28 del archivo 03 de 09 en Diseño de producto UX/UI Ver la disciplina completa ↗
El proyecto, en dos partes
Parte 01
Auditoría de la web
(00) — La tesis
Tus cinco competidores son directores de fotografía que se presentan con imágenes quietas. Ninguno pregunta cuándo se rueda. Y ninguno se recuerda al día siguiente.
5 / 5
Competidores con la portada estática, sin imagen en movimiento
Profesionales del movimiento presentándose quietos
3 / 5
Van sobre plantilla, y dos de ellos usan exactamente la misma
Diego y Brendan comparten Adobe Portfolio y se anulan
0
Competidores que preguntan las fechas de rodaje en su formulario
La ventaja de proceso más barata del proyecto
0
Competidores con el sitio en dos idiomas
El rival más directo es español y está sólo en inglésEl momento real que hay que ganar
Una productora abre entre 5 y 15 portfolios en pestañas y descarta la mayoría en menos de 30 segundos. De ahí salen los dos únicos trabajos del sitio: sobrevivir al descarte y facilitar el correo. Todo lo demás es adorno. La pregunta de diseño no fue «¿cómo enseño el trabajo?», sino «¿qué hace que cierren las otras nueve pestañas?».
- medido Obtenido de una medición real sobre el material
- convención Patrón consolidado del sector y comprobable
- hipótesis Criterio de diseño pendiente de validar con usuarios
(01) — El encargo
Un portfolio de DF no es una galería
Es una herramienta de contratación. Kacho no vende imágenes: vende disponibilidad y criterio, y compite contra otros diez profesionales en la bandeja de entrada de la misma productora.
Reformular el encargo cambió el resto del proyecto. Si el sitio es una galería, el éxito es que se vea bonito. Si es una herramienta de contratación, el éxito es que llegue un correo con fechas.
Los dos únicos trabajos
Sobrevivir al descarte y facilitar el correo. Cualquier elemento que no sirva a uno de los dos es adorno, y el adorno en un portfolio de contratación cuesta segundos que no hay.
convención
La pregunta de diseño
No «¿cómo enseño el trabajo?», sino «¿qué hace que cierren las otras nueve pestañas?». Es la pregunta que ordena todas las decisiones que vienen después.
hipótesis
(02) — Método
Qué es dato y qué es criterio
Un informe que mezcla mediciones con opiniones no se puede discutir. Cada afirmación de esta auditoría va etiquetada con su origen, y las que no se han podido comprobar aparecen como lo que son.
Medido
Obtenido de una medición real sobre el material: pesos de archivo, contrastes, luminancias, geometría del disco.
medido
Convención
Patrón consolidado del sector y comprobable: el reel va primero, el CV se descarga en PDF.
convención
Hipótesis
Criterio de diseño pendiente de validar con usuarios reales. Declarado como tal, no disfrazado de hallazgo.
hipótesis
Lo que falta, dicho ahora
Cuatro entrevistas y un test de pasillo siguen pendientes. Los cinco competidores están auditados en estructura, contenido y tecnología, pero no cronometrados con red limitada: eso necesita un navegador y una persona delante.
(03) — Benchmark
Los cinco competidores, auditados uno a uno
Cinco directores de fotografía que compiten por el mismo encargo, cada uno elegido porque hace bien una cosa distinta: el CV, la construcción, la contención, el SEO y el modelo de negocio.
Diego Cabezas · rival directo
Madrid. El mejor CV del conjunto: agencia, AEC, créditos con productora y plataforma. Sólo en inglés y sobre plantilla.
diegocabezasdop.com
Tim Flower · mejor construido
Nueva Zelanda. Desarrollo a medida. Lista su equipo en propiedad y 14 premios con contexto. Tres elementos de navegación.
timflower.co.nz
Mia Cioffi Henry · contención
Una sola película ocupa la portada, con Sundance y Cannes. Funciona por el respaldo; no se puede copiar sin él.
miacioffihenry.com
Brendan Barnes · SEO
Sídney. «Showreel» es navegación propia y su descripción declara dos mercados. Misma plantilla que Diego.
brendanbarnes.com
Brett Stanley · negocio
Nicho submarino. Copias, talleres y pódcast: no depende de la tarifa por jornada. Nueve elementos de navegación.
brettstanley.com
Cuadro comparado
| Criterio | Diego | Tim | Mia | Brendan | Brett | Kacho v4 |
|---|---|---|---|---|---|---|
| Imagen en movimiento en portada | No | No | No | No | No | Sí |
| Rol visible sin clic | Sí | No | Sí | No | — | Sí |
| Duración antes de abrir | No | No | No | No | No | Sí |
| Equipo en propiedad | No | Sí | No | No | No | Sí |
| Pregunta por fechas de rodaje | No | No | No | No | No | Sí |
| Dos idiomas | No | No | No | No | No | Sí |
| Desarrollo a medida | No | Sí | No | No | No | Sí |
| Interacción memorable | No | No | No | No | No | Sí |
Cinco directores de fotografía. Cinco portadas estáticas.
Es el hallazgo que ordena todo el rediseño: profesionales del movimiento presentándose con imágenes quietas. Las plantillas de portfolio están pensadas para fotógrafos y el vídeo pesa, así que nadie lo hace. La distintividad está barata y no la ocupa nadie.
(04) — Insights
Diez cosas que el benchmark deja claras
No son opiniones sobre gustos: cada una sale de comparar los cinco sitios en el mismo criterio y anotar quién lo hace y quién no.
Ninguno arranca con imagen en movimiento
Las plantillas están pensadas para fotógrafos y el vídeo pesa. La portada de Kacho es el reel, a sangre, con año, título y rol superpuestos.
El crédito es la moneda
Diego declara «Diego Cabezas AEC (2)»: firmó 2 de 6 episodios. Esa honestidad genera más confianza que exagerar. Tim y Brendan no acreditan a nadie en el índice.
El equipo propio es presupuesto, no vanidad
Sólo Tim lo lista. Una productora que contrata a alguien con cámara y ópticas propias se ahorra el alquiler. Cambia «cuánto cobras» por «cuánto cuesta el paquete».
Un premio sin contexto no es un premio
«Mejor Fotografía» a secas no dice si el festival tenía tres asistentes o tres mil. Tim lista 14 con año, certamen, categoría y título.
Tres de cinco van sobre plantilla
Diego y Brendan usan exactamente la misma (Adobe Portfolio) y se anulan mutuamente. La distintividad está barata: nadie la ocupa.
Ninguno pregunta cuándo se rueda
Cero campos de fechas en cinco competidores. La ventaja de proceso más barata y más grande del proyecto.
Diego es español y su web está sólo en inglés
El rival más directo ha elegido un idioma, y no es el de su mercado principal. Kacho detecta el navegador: Madrid lee castellano, Londres lee inglés.
Brendan gana en buscadores sin esforzarse
Su descripción dice qué es y dónde está. La de Tim es literalmente la palabra «Cinematographer.» y punto.
Brett no vende horas, vende un negocio
Copias, talleres, mentoría, pódcast. Vía de crecimiento, no acción inmediata: su coste son nueve elementos de navegación y ninguna ruta clara.
Mia demuestra que la contención gana… cuando puedes permitírtela
No copiar todavía. La versión aplicable es la jerarquía: que la mejor pieza mande de verdad, en lugar de 27 trabajos pesando lo mismo.
(05) — Pain points
Lo que todavía nos hace perder
Autocrítica con el benchmark delante, no autobombo. El mismo cuadro que señala lo que hacen mal los rivales señala lo que le falta a este portfolio.
| Pain point | Quién lo hace mejor | Gravedad |
|---|---|---|
| Sólo 6 trabajos. Brendan enseña 27, Diego 21 | Diego, Brendan | Alta |
| Sin granularidad de crédito compartido | Diego | Alta |
| Sin representación ni agencia | Diego | Alta |
| Sin sección de prensa | Diego | Media |
| «Showreel» no está en la navegación | Brendan | Media |
| Sin membresía de asociación (AEC) | Diego | Media |
Las tres primeras son contenido, no código
Dependen de Kacho, no del diseño. Son bloqueantes antes de publicar: una rejilla de seis piezas se lee como poca experiencia, y un crédito sin granularidad deja la duda de si firmó la fotografía o sólo operó.
(06) — Punto de partida
Qué había roto
La versión anterior tenía una idea buena y una ejecución que no llegaba. Estos seis puntos son los que había que resolver antes de poder discutir nada de diseño.
La rueda quedaba fuera del teléfono
El PNG se colocaba con left:3vw; height:95vh y la rueda con left:10.2vw; top:30.2vh: dos sistemas de coordenadas anclados al viewport, no entre sí.
medido
El giro no comunicaba nada
La rueda giraba sin decir qué elemento estaba elegido: el movimiento existía pero no era información.
147 MB de recursos
Una foto de 13,7 MB (7067 × 4714 px) para mostrarse a menos de 1000 px. Un portfolio que no carga no se ve.
medido
El contenido bajo el pliegue era inalcanzable
overflow:hidden con height:100vh en el cuerpo: existía, pero no había forma de llegar.
medido
Las fuentes no cargaban
format('ttf') no es válido, es truetype. Y además Impact no se puede incrustar por licencia — de ahí que el sistema use Anton.
medido
Accesibilidad de partida
<html lang="en"> con contenido en español, sin textos alternativos y sin foco visible.
medido
Lo que se conservó
La idea del control circular, la paleta naranja sobre negro y la ambición de tener un gesto propio. Merecía que funcionase: el problema no era el concepto, era que ninguna de las tres cosas estaba resuelta.
(07) — Resultados
Medido, no estimado
Las cifras de abajo salen de medir el resultado, no de estimarlo. Y el diseño incluye su propia refutación: si el gesto no se usa, hay que replantearlo.
−94 %
Peso de los recursos
147 MB → 8,7 MB0,01 px
Desviación del disco en los siete anchos
Antes no encajaba en ninguno16,5:1
Contraste del texto principal
El mínimo son 4,5:158 px
Objetivo táctil donde hay dedos
WCAG 2.5.8 pide 24 pxCómo sabremos si funciona
| Indicador | Referencia |
|---|---|
| Contactos cualificados al mes | El único que importa de verdad |
| Profundidad del reel | ≥ 2 piezas por sesión |
| Finalización de vídeo | ≥ 40 % |
| Uso del disco | ≥ 60 % |
| Campo de fechas relleno | ≥ 70 % de los envíos |
| Abandono del formulario | ≤ 40 % |
| Reparto por idioma | Decide si compensa prerenderizar |
El diseño incluye su propia refutación
Si menos del 60 % de las visitas a la sección de fotografía usan el disco, el gesto es bonito pero no funciona, y hay que replantearlo. Se mide con el evento photo_select, que además registra el método: así sabremos si la gente toca, arrastra, usa la rueda del ratón o el teclado.
Lo que aún no cumple
Faltan los subtítulos WebVTT (criterio 1.2.2), un recorrido con lector de pantalla real y los textos alternativos reales de las diez fotografías: los actuales son aproximaciones marcadas como provisionales. Está declarado en la propia web, no escondido.
Parte 02
Diseño UX/UI
(00) — La interfaz
La auditoría dice contra qué se compite. Esta parte es el sistema que se dibujó para ganar, y las pantallas que salen de él.
3
Anchos dibujados de cada pantalla, no adaptados sobre la marcha
Escritorio 1440 · Tableta 768 · Móvil 390
2
Idiomas completos, con el mismo juego de pantallas
Screens · ES y Screens · EN, páginas hermanas en el archivo
13
Tokens de color, nombrados por función y no por tono
Superficie · línea · tinta · acento
±2,73
Dispersión de luminancia con la que se fijó el centro del disco
Sobre 255 · por ajuste de circunferencia, no a ojoCómo leer esta parte
Las diez láminas van en el orden en que se hicieron: primero el esqueleto y los flujos, luego los Foundations que fijan el sistema, luego los componentes, y por último las pantallas montadas en los dos idiomas y en los tres dispositivos. Todas son capturas del archivo de Figma y de los entregables tal y como están hoy.
Lámina 01
El esqueleto, antes que el estilo
Las siete páginas en gris, con el reel a sangre en la portada y la ficha de proyecto resuelta como una tabla de datos de cámara. Dibujar esto primero obliga a decidir qué información existe antes de decidir cómo se ve.
La decisión que se ve aquí y que no se ve en los competidores: la duración de cada pieza va en la tarjeta, antes de abrir. Nadie abre un vídeo a ciegas.
Entregable · WireframesEscritorio 1440
Lámina 02
Y el mismo esqueleto donde hay dedos
El móvil no es el escritorio encogido. La información de la fotografía elegida pasa debajo del disco en lugar de al lado, y el disco pasa a primer plano recortando el resto del aparato.
Los dos puntos de corte son distintos a propósito: la maqueta a dos columnas entra en 1024 y el aparato entero sólo a partir de 1280.
Entregable · WireframesMóvil 390
Lámina 03
Arquitectura y flujos de interacción
El mapa del sitio y, sobre todo, qué ocurre al marcar una fotografía: gira el disco por el camino angular más corto, la foto viaja al centro con la técnica FLIP, su hueco queda vacío —que es lo que hace legible el movimiento— y aparece la información.
Y una quinta cosa que no se ve: el cambio se anuncia por aria-live en el idioma activo y se registra el evento photo_select con el método usado.
Entregable · FlujosArquitectura de la información
Lámina 04 · Foundations
La paleta no se eligió por gusto
Reproduce las dos temperaturas con las que un director de fotografía trabaja todos los días: tungsteno 3200 K #C46B05 como color de marca, y luz día 5600 K #7FB2E0 reservada al anillo de foco y a los datos de sistema.
No compiten porque no comparten función: el azul nunca decora. Y se explica en una frase a cualquiera del gremio, que es la prueba de que el criterio es bueno.
Los trece tokens están nombrados por función —superficie, línea, tinta, acento— y cada uno lleva su contraste comprobado: la tinta principal da 16,5:1 sobre negro.
Figma · 01 · FoundationsColor
Lámina 05 · Foundations
Tres familias con tres trabajos
Anton para los titulares —el sustituto libre de Impact, que no se puede incrustar por licencia—, Inter para el texto y IBM Plex Mono para los metadatos, el timecode y las etiquetas: la monoespaciada lee como informe de cámara.
Once estilos, de display/mega a mono/data, cada uno con su definición al lado de su muestra.
Figma · 01 · FoundationsTipografía
Lámina 06 · Foundations
El disco, medido por ajuste de circunferencia
El aparato de la portada no es un teléfono móvil: es un teléfono de pared con disco de marcar, y en esta versión llega con el disco liso —una placa de latón sin agujeros y sin números—. Eso mejora el concepto: las fotografías ya no imitan unos agujeros que existían, los crean.
La posición no se ajustó a ojo. Se detectó el borde del tambor con votación circular sobre el gradiente de la imagen, y el centro se fijó eligiendo el que deja las diez posiciones con menos dispersión de luminancia: ±2,73 sobre 255. La desviación en pantalla queda entre 0,01 y 0,03 px, verificada en siete anchos.
Figma · 01 · FoundationsGeometría del disco
Lámina 07 · Components
Cada control, con todos sus estados
La página de componentes del archivo: botón sólido y de contorno con sus ocho estados, campo de texto, área y selección con nueve, tarjeta de trabajo en reposo, hover y foco, y la cabecera en versión amplia y móvil.
Los estados no son decoración: el foco va siempre en luz día 5600 K, que es el único sitio donde aparece el azul. Si un elemento está en azul, es que el teclado está encima.
Figma · 02 · ComponentsVariantes y propiedades
Lámina 08 · Components
El disco es un componente con diez variantes
Una variante por fotografía elegida. Al marcar, el disco gira hasta llevar esa fotografía al tope de dedo por el camino angular más corto, y el hueco del que salió queda vacío: es lo que hace legible el movimiento.
El umbral que separa «he pulsado» de «estoy girando» es distinto según el dedo o el ratón — 10 px con dedo y 4 px con ratón—, porque al tocar el dedo se desplaza unos píxeles y si no cada toque se leería como un microarrastre.
Figma · 02 · ComponentsDisco · foto elegida 1–10
Lámina 09 · Screens
El archivo lleva las pantallas en los dos idiomas
No es una página con el texto cambiado: son dos juegos completos de pantallas, 03 · Screens · ES y 04 · Screens · EN, para que las diferencias de longitud de texto se vean en la maqueta y no aparezcan al maquetar.
El idioma se resuelve en cascada: ?lang= en la URL, después la elección guardada, después el idioma del navegador y por último español. Verificado: es-ES y es-AR dan español; en-GB, fr-FR y de-DE dan inglés.
El compromiso, dicho abiertamente: se usa ?lang=en en lugar de rutas /en/. A favor, una sola fuente de contenido e imposible que las versiones divergan. En contra, el SEO en inglés es más débil; si el trabajo internacional pasa a ser prioritario, hay que migrar a rutas prerenderizadas.
Figma · 03 y 04 · ScreensES y EN
Lámina 10 · Screens
Tres anchos dibujados, no adaptados sobre la marcha
Cada pantalla existe en el archivo en 1440, 768 y 390. Abajo, el mismo bloque de reel en los tres: el titular baja de cuerpo y el índice de piezas se parte en dos líneas en cuanto no cabe.
La decisión responsive no es estética. Con el aparato entero a 1024 px la fotografía del disco quedaba en 29,8 px, que es justo donde hay más dedos; por eso por debajo de 1280 el sitio hace primer plano del disco y recorta el resto del teléfono. El área táctil sube a 58 px —WCAG 2.5.8 pide 24— sin cambiar el dibujo.
Figma · Screens1440 · 768 · 390
De aquí sale el front-end
Todo lo anterior está construido y funcionando. El sitio se puede abrir y usar entero —el reel, el disco, el CV y el formulario— en la ficha de desarrollo front-end, y la marca que lo firma está en la ficha de identidad.
Siguiente en Diseño de producto UX/UI
GAME · Propuesta de rediseño web y app
