Trabajo / Producto UX/UI / Portfolio 2026 · Auditoría de mi propio sitio
Proyecto 07 de 28 del archivo 07 de 09 en Diseño de producto UX/UI Ver la disciplina completa ↗
El proyecto, en dos mitades
Parte 01
(00) — La tesis
Nota media de las dimensiones de diseño, sistema y ejecución técnica
Primer impacto, visual, arquitectura y móvilNota del flujo de contacto el día de la auditoría: el formulario acababa en un mailto:
Testimonios y métricas de resultado en todo el sitio
Con el slider de citas ya programado y sin usarMedición: ni analítica, ni eventos, ni mapas de calor
Nada de lo anterior se puede contrastar hoy con datosUn portfolio enseña resultados; una auditoría enseña criterio. Este documento aplica a mi propia web exactamente la misma metodología que aplico a un cliente —análisis de código, recorrido cognitivo, heurísticas, contrastes calculados y benchmarking— y publica el resultado sin filtrar los suspensos. Los hallazgos están verificados en el código fuente o en el navegador; lo que no he podido medir sin datos de tráfico aparece marcado como verificar en lugar de presentarse como certeza.
Este informe se publica con fecha y no se reescribe: las notas y los diecisiete hallazgos son los del día de la auditoría, tal y como salieron. Lo que sí cambia es el estado de cada hallazgo según se va arreglando, marcado en la tabla del bloque 10 y en el bloque al que pertenece.
mailto: — Resuelto. El formulario envía por POST a un relé (Web3Forms) que reenvía el mensaje a la bandeja de entrada; el mailto: se conserva como alternativa visible para cuando el envío falla, el mensaje de éxito ya es veraz y hay campo trampa antispam. Funciona también sin JavaScript.Como escaparate de oficio, el sitio compite en la liga alta: tipografía cuidada, sistema de tokens limpio, tema claro y oscuro, dos idiomas completos, cero dependencias y un motion sofisticado que respeta prefers-reduced-motion.
Como canal de captación, el día de la auditoría no funcionaba. Los enlaces sociales apuntan a las portadas genéricas de las plataformas, el formulario dependía de un mailto: que fallaba en silencio —Resuelto—, no hay ni un testimonio ni una métrica de resultado en los casos, y no existe analítica: sigue siendo imposible saber cuánta gente entra, hasta dónde llega y dónde abandona.
| Dimensión | Nota | Lectura |
|---|---|---|
| Diseño visual y coherencia | 8,5 | Sistema real, no maquetación: tokens, escala fluida y color por disciplina |
| Primer impacto / above the fold | 8,0 | Pasa el blink test: rol, triple disciplina y ubicación sin scroll |
| Arquitectura de la información | 7,0 | Dos niveles, archivo filtrable y URLs compartibles; etiquetas discutibles |
| Experiencia móvil | 7,0 | Optimizada de verdad, no reducida; pierde la señal de disponibilidad |
| Accesibilidad | 6,5 | Muy por encima del portfolio medio, con huecos concretos y baratos |
| Copywriting y propuesta de valor | 6,5 | Voz propia y memorable, cero cifras que la respalden |
| Velocidad y rendimiento | 5,0 | Código ligero, imágenes pesadas: 23 MB sin srcset |
| Llamadas a la acción | 4,5 | Correctas donde existen, ausentes donde más pagan |
| Confianza y prueba social | 3,5 | Enlaces sociales de relleno y ni un testimonio |
| Flujo de conversión | 3,0 | El formulario no enviaba nada y el sitio decía que sí · Resuelto |
| Datos y analítica | 0,5 | Cero medición: ninguna afirmación se puede contrastar |
Verificado en menú y pie: href="https://www.linkedin.com/in/edgfree/" a secas. El clic más probable de un recruiter aterriza en la portada de LinkedIn. Además de perder el contacto, delata un sitio sin terminar —lo contrario del mensaje «código que aguanta»—.
mailto:En un equipo con cliente de correo configurado funciona. En webmail o en un móvil corporativo sin cuenta por defecto no abre nada, y el sitio muestra igualmente «tu cliente de correo está abierto». El usuario cree que ha contactado.
La plantilla —brief, solución, imágenes, siguiente— se lee bien pero no tiene bloque de resultado ni cierre hacia contacto. Las métricas del caso de GAME existen: están enterradas dentro de un JPG en lugar de escritas en texto.
Ni GA4, ni Plausible, ni Clarity, ni un píxel en todo el árbol de archivos. Sin línea base no hay forma de saber si un cambio mejora algo, ni de justificar el siguiente.
Ninguna imagen usa srcset ni formatos modernos. Con tarjetas renderizadas a unos 420 px, servir JPG de 1.200 px es tres o cuatro veces más de lo necesario, y en móvil se nota.
Los cinco arreglos anteriores suman menos de dos jornadas de trabajo real y convierten un escaparate en un canal medible. La segunda ola —resultados en los casos y tres testimonios— es la de mayor impacto persuasivo y la que más tarda, porque depende de terceros. Ese orden no es casual: primero se tapa la fuga, después se llena el depósito.
Auditar el trabajo propio tiene un sesgo evidente, y la única defensa contra él es el método: comprobar en el código lo que se afirma, calcular lo que se puede calcular y declarar lo que no se ha podido medir.
Ninguna de las conclusiones de este informe depende de una impresión estética.
| Bloque | Material analizado | Método |
|---|---|---|
| Auditoría de código | HTML de las 40 páginas de los dos árboles de idioma, 4.090 líneas de CSS y JavaScript, 23 MB de assets | Lectura línea a línea, inventario de recursos |
| Inspección en navegador | Escritorio a 1366 px y móvil a 375 px: menú, formulario, validación, temas y navegación | Verificación funcional en vivo |
| Evaluación heurística | Las diez heurísticas de Nielsen sobre home, archivo, caso y contacto | Revisión estructurada con severidad asignada |
| Recorrido cognitivo | Las dos tareas núcleo: «evaluar para contratar» y «contactar» | Paso a paso, marcando cada punto de fuga |
| Accesibilidad | Semántica, foco, ARIA, movimiento reducido y contrastes | WCAG 2.2, luminancia relativa calculada |
| Benchmarking | Seis portfolios internacionales de referencia | Comparación de patrones de conversión, no de estética |
| No verificado | Cómo se comprobaría |
|---|---|
| Comportamiento real de los visitantes | GA4 + Microsoft Clarity durante 4 semanas |
Cuántos contactos se pierden hoy por el mailto: | Imposible por definición: el fallo es silencioso para ambas partes |
| Métricas de campo (LCP, INP, CLS) | PageSpeed Insights e informe CrUX con tráfico real |
| Navegación completa con lector de pantalla | Protocolo manual con NVDA y VoiceOver |
| Si el claim comunica lo que pretende | Test de cinco segundos con 25 participantes |
Lo que ve el usuario al entrar: cuatro etiquetas de rol, el titular «Design that ships & code that holds», el chip «Disponible para 2026» y la navegación. En tres segundos queda claro quién firma y qué hace, muy por encima de la media del sector.
Lo que no ve: trabajo, y ninguna acción que tomar. El primer viewport es cien por cien tipografía.
#ux, #front, #graphic).index.html#contact, con cortina, carga y scroll de por medio.Es la primera impresión de alguien que llega desde LinkedIn con cuarenta y cinco segundos de atención y quince portfolios más en la pestaña de al lado. Un contador de 000 a 100 sobre un sitio que estaría listo casi al instante es espera pura. La recomendación no es eliminarlo —forma parte del lenguaje del sitio— sino bajarlo a 700 ms o menos, o atarlo a la carga real de la portada.
El copy es de lo mejor del sitio. «Design that ships & code that holds», «Three jobs, one head», «Skipping a step is where budgets die»: tiene voz propia y el diferencial real —diseña, programa y hace la gráfica, sin traspaso entre manos— está bien articulado.
El problema es que esa promesa nunca se apoya en un resultado verificable, y que está escrita para un design lead, no para quien firma la factura.
| Hallazgo | Descripción | Severidad |
|---|---|---|
| Ni una cifra de negocio en todo el sitio | Las métricas del caso de GAME —81,9 %, 38 %, +20/+45 %— existen, pero viven dentro de un JPG. Un buscador no las lee y un lector rápido tampoco | Alta |
| Habla a diseñadores, no a quien contrata | «Tokens», «Figma governance» o «empty states» conquistan a un design lead; el comprador pyme necesita plazos, proceso y qué recibe | Media |
| La pregunta del formulario filtra de más | «¿Qué estás construyendo?» excluye retóricamente a quien busca marca o editorial, y ocho de los dieciocho proyectos son gráficos | Baja |
| Ubicación | CTA actual | Diagnóstico | Recomendación |
|---|---|---|---|
| Portada, primer viewport | «Scroll ↓» | Señal pasiva, no llamada a la acción | «Ver trabajo seleccionado» + «Empezar un proyecto» |
| Cabecera | «Disponible para 2026», no clicable | Señal de urgencia desaprovechada | Convertirla en enlace a contacto y mantenerla en móvil |
| Bloque de trabajo | «Ver los 17 proyectos» | Claro y con número: bien resuelto | — |
| Contacto | «Enviar mensaje» + email visible | Fuerte visualmente, roto funcionalmente | Endpoint real y botón de copiar el email |
| Final de caso | «Siguiente proyecto» | Bucle de exploración sin salida a contacto | Bloque de contacto al pie de cada caso |
| Archivo y sobre mí | «Empezar un proyecto» / «Hablemos» | Bien escritos, pero saltan a otra página | Repetir el bloque de contacto o crear página propia |
La regla aplicada es sencilla: cada pantalla de scroll debería dejar una acción a mano. Hoy hay huecos de dos y tres viewports —proceso y cifras— sin ninguna acción posible.
El formulario estaba bien diseñado —tres campos, etiquetas flotantes, validación en línea escrita en los dos idiomas, autocomplete— y terminaba en un mailto:.
Para quien tenga un cliente de correo configurado, funciona. Para la mayoría —webmail en escritorio, móvil corporativo sin cuenta por defecto— no abría nada, y el sitio confirmaba el envío igualmente. Éste era el hallazgo crítico del informe y es el primero que se ha arreglado.
«El usuario cree que ha contactado; no ha contactado. Es el peor tipo de fallo de conversión: invisible para las dos partes.»
El mensaje se envía por POST a Web3Forms, que lo reenvía a la bandeja de entrada; el method y el action van en el propio <form>, así que la consulta se entrega aunque el JavaScript no llegue a cargar. Con JavaScript se intercepta y se manda por fetch(), lo que permite no sacar al visitante de la página y contarle qué ha pasado: una línea de estado con role="status" anuncia «enviando», «enviado» o el error.
La regla de diseño fue que ninguna consulta se pierda en silencio nunca más: si el relé falla, se cae la red o tarda más de quince segundos, el texto se queda intacto en los campos y aparece un enlace de correo ya redactado. Los robots se filtran con un campo trampa fuera de pantalla y descartando los envíos de menos de dos segundos.
Comprobado en navegador en los nueve caminos posibles, incluido el que Web3Forms responde con200 y success:false
mailto: por un endpoint realFormspree, Basin o Web3Forms mantienen la filosofía de sitio estático sin backend propio. El mailto: se conserva como alternativa visible, el mensaje de éxito pasa a ser veraz y se añade un campo trampa antispam.
Junto al email grande falta el botón «copiar» con confirmación, patrón estándar en los portfolios de referencia. Es la vía de contacto favorita de quien no quiere rellenar un formulario.
Un desplegable opcional —tipo de proyecto y rango de presupuesto— filtra curiosos y prioriza. Un enlace a una agenda («reserva veinte minutos») añade una conversión alternativa de menor fricción.
LinkedIn, Dribbble y GitHub apuntan a las portadas de las plataformas. Si un perfil no está presentable, es preferible quitar el enlace a dejar el marcador de posición: delata un sitio a medio terminar.
El JavaScript incluye un slider de citas completamente funcional que ningún HTML utiliza: la infraestructura está lista y vacía. Con veinte años de carrera, reunir tres citas es una semana de correos.
Innecesarios mientras no haya formulario con backend ni analítica; obligatorios en cuanto los haya. Además dan señal de seriedad al cliente corporativo.
Teléfono y correo reales, Madrid con reloj local, CV descargable, la promesa de «respuesta en un día laborable» y un JSON-LD de persona correcto. La urgencia de «Disponible para 2026» es creíble y no intrusiva. El agujero de confianza no es de tono: es de prueba. Falta que alguien que no sea yo diga que el trabajo funciona.
La accesibilidad está por encima del portfolio medio: enlace de salto real, :focus-visible global, ARIA correcto en menú, acordeón y formulario, y una implementación completa —no cosmética— de prefers-reduced-motion. Sin JavaScript, el sitio sigue siendo legible al cien por cien.
Los contrastes están calculados, no estimados: texto principal ≈ 16,8:1 (AAA), secundario ≈ 5,8:1 y acento sobre fondo oscuro ≈ 17:1.
| Hallazgo | Dato medido | Acción | Severidad |
|---|---|---|---|
| Texto monoespaciado de 9,9 px en móvil | 9,92 px reales a 375 px de viewport | Subir el mínimo del clamp de 0.62rem a 0.72rem | Media |
| Texto secundario del tema claro al límite | #6b675f sobre #eeeae3 ≈ 4,6:1; sobre superficie elevada baja de 4,5:1 | Oscurecer a #5d5951 | Media |
| Textos alternativos correctos pero planos | Describen el proyecto, no el contenido de la imagen | Reescribir los alt de los casos | Baja |
| «Disponible para 2026» desaparece en móvil | Solo existe en escritorio ancho; ni en cabecera ni en menú | Añadirla al menú y al bloque de contacto | Media |
Ninguna imagen usa srcset | 23 MB de assets; una tarjeta de 420 px descarga un JPG de 1.200 px | <picture> con AVIF/WebP y JPG de reserva | Alta |
| Imágenes individuales muy pesadas | 946 KB la más grande; el retrato en PNG, 772 KB | Reencodar a WebP calidad 75-80 y redimensionar | Alta |
| Tres familias tipográficas desde Google Fonts | Tres peticiones más CSS bloqueante | Autoalojar con subsetting; ui-monospace puede sustituir a una familia | Media |
| Imagen social vertical | El retrato, 698 × 1109, se recorta mal en LinkedIn | Crear una imagen 1200 × 630 con nombre, claim y trabajo | Baja |
| Bug tipográfico: «? LET'S TALK» | El separador de palabras aísla el signo y permite que salte de línea | Unir la puntuación huérfana a la palabra anterior | Baja |
El scroll virtual da sensación de agencia y está bien implementado: respeta el sticky, el teclado, el táctil y el movimiento reducido. Pero introduce un retardo perceptible con rueda y trackpad. Es una apuesta estética con coste de usabilidad, y como tal debería someterse a prueba en lugar de defenderse por gusto: bajar la intensidad y medir rage-scrolls y tiempo en página.
No hay GA4, ni Plausible, ni Clarity, ni píxel alguno: verificado en todo el árbol de archivos. Sin línea base, cualquier promesa de mejora sería inventada.
Stack propuesto para un sitio estático y compatible con el RGPD: GA4 —o Plausible si se prefiere evitar el banner de cookies— más Microsoft Clarity para mapas de calor, grabaciones y clics de frustración. Hotjar sería redundante; Mixpanel, sobredimensionado.
| Evento | Disparador | Qué responde |
|---|---|---|
form_start · form_submit | Primer campo rellenado · envío correcto | Conversión primaria y abandono del formulario |
email_click · email_copy · phone_click | Clic en el email, en copiar o en el teléfono | Conversiones secundarias, hoy completamente invisibles |
cv_download | Descarga del CV | Señal fuerte de intención de contratación |
case_open | Entrada a un caso, con nombre y disciplina | Qué trabajo vende y qué disciplina interesa a cada fuente |
filter_use · view_toggle | Filtros y cambio de vista del archivo | Validación de la arquitectura del archivo |
outbound_social | Salida a LinkedIn, GitHub o Dribbble | La ruta real de quien viene a verificar credenciales |
scroll_depth 25/50/75/90 | Inicio y casos | ¿Se llega al formulario? ¿El preloader espanta? |
theme_toggle · lang_switch | Interfaz | Uso real del tema claro y de los dos idiomas |
Indicadores de cabecera: tasa de contacto —formulario, email y teléfono sobre sesiones—, descargas de CV, porcentaje de sesiones con al menos un caso abierto y profundidad media en los casos estrella.
La auditoría define dos arquetipos con necesidades opuestas y una sola web para los dos. Uno viene a verificar seniority en sesenta segundos; el otro, a saber si esto le sirve y cuánto cuesta.
Los porcentajes de valor son estimaciones de trabajo, no mediciones: hoy no hay datos propios que permitan calcularlos.
Revisa quince portfolios en una tarde y dedica entre cuarenta y cinco y noventa segundos a cada uno en el primer filtro. Alta cultura de diseño: detecta el oficio y los marcadores de posición al instante. Quiere ver proceso, decisiones y resultado.
Negocio de servicios, navega en móvil y «design systems» no le dice nada. Necesita saber si hago «lo suyo» —web, logo, tarjetas—, cuánto cuesta aproximadamente y cómo hablar conmigo ya.
| Paso | Qué ocurre hoy | Estado |
|---|---|---|
| Entrada | Clic desde LinkedIn o desde una recomendación | Correcto |
| Preloader | Contador de 000 a 100 durante 2,3 s sin carga real detrás | Fuga |
| Portada | Roles y claim. Sin acción posible: solo «Scroll» | Fricción |
| Dos pantallas de scroll | Intro y retrato, tres tarjetas de disciplina, archivo | Correcto |
| Caso | Brief y solución, sin resultados ni testimonio; «siguiente proyecto» devuelve al bucle | Fuga |
| Verificación de credenciales | El clic en LinkedIn aterriza en la portada de LinkedIn | Fuga |
| Contacto | Vuelta a index.html#contact: cortina, carga y scroll | Fricción |
| Formulario | El mailto: no abría nada y el sitio confirmaba el envío igualmente | Resuelto |
Portada en menos de 0,7 s con doble acción · tres casos destacados con métrica visible en la tarjeta · caso con bloque de resultado, testimonio y cierre hacia contacto · credenciales reales, con el repositorio de este mismo sitio como prueba de «cero dependencias» · contacto con backend, copiar email, agenda y disponibilidad visible. Dos clics de la portada al caso, todo camino desemboca en contacto y cada paso deja traza medible.
| Semana | Método | Muestra | Pregunta que responde |
|---|---|---|---|
| 1 | Test de cinco segundos | 25 participantes | ¿Qué se entiende de la portada? ¿«Index» confunde? |
| 1-2 | Entrevistas cortas de veinte minutos | 4 recruiters + 3 clientes pyme | ¿Qué buscan en sesenta segundos? ¿Qué les falta para escribir? |
| 2 | Test de usabilidad no moderado, en móvil | 5 usuarios | Tarea: «averigua qué haría por ti y contáctala» |
| 3 | Tree test del archivo | 15 participantes | ¿Las tres disciplinas agrupan como la gente espera? |
| 3-4 | Mapas de calor y grabaciones | Tráfico real, 2+ semanas | Scroll real, uso de filtros y abandono del formulario |
Con el tráfico típico de un portfolio —menos de mil sesiones al mes— muy pocos tests alcanzan significancia clásica. Lo honesto es plantear los tres primeros como medición antes y después en ventanas de tres o cuatro semanas, y el resto como tests de percepción con veinte o treinta participantes. Cualquier propuesta de programa de A/B testing con este volumen debe mirarse con escepticismo, empezando por la mía.
| # | Hipótesis | Variante B | Métrica de éxito |
|---|---|---|---|
| 1 | El preloader aumenta el rebote del tráfico frío | 700 ms o sin preloader | Rebote y scroll al 25 % en sesiones nuevas |
| 2 | Una acción en portada acorta el camino al trabajo | «Ver trabajo» + «Empezar un proyecto» | % de sesiones que llegan a un caso |
| 3 | El formulario real multiplica los contactos | Endpoint, éxito veraz y copiar email | form_submit y email_copy por sesión |
| 4 | Las métricas visibles suben el interés por los casos | Tarjeta con distintivo de resultado | Clics de tarjeta a caso, en inicio y archivo |
| 5 | El claim comunica menos que uno orientado a beneficio | Claim alternativo centrado en el encargo | Test de cinco segundos: recuerdo de qué hago |
| 6 | El scroll nativo reduce la fricción percibida | Scroll nativo o suavizado mínimo | Clics de frustración y tiempo en página |
Selección que cubre los tres perfiles del posicionamiento: producto, front-end y gráfica. La comparación es de patrones de conversión, no de estética: en ejecución visual este sitio ya compite en la liga alta.
Los seis le sacan ventaja exactamente en lo mismo: trabajo antes, prueba verificable y contacto sin fricción.
| Portfolio | Perfil | Qué hace mejor | Qué adoptar |
|---|---|---|---|
| Dennis Snellenberg | Creative developer | Tras su portada muestra trabajo destacado de inmediato y su email se copia en un clic | Trabajo destacado tras la portada; botón de copiar email |
| Adham Dannaway | UX/UI que programa | El mismo posicionamiento dual, resuelto con casos que documentan proceso y resultado con cifras | Estructura de caso: problema → proceso → resultado medible |
| Brittany Chiang | Front-end engineer | Cero fricción: enlaces reales, proyectos vivos y el código del propio sitio como credencial pública | GitHub real con el repositorio de este portfolio |
| Sean Halpin | Product designer | Calidez y confianza: disponibilidad siempre visible, testimonios integrados, contacto en cada scroll | Disponibilidad persistente, también en móvil; testimonios cortos con nombre |
| Malika Favre | Gráfica e ilustración | El trabajo es la portada: rejilla inmediata, cero preámbulo | Tarjetas más visuales y vista de cuadrícula por defecto en gráfica |
| Jessica Hische | Lettering y gráfica | Condiciones de contratación explícitas: qué encarga acepta, cómo trabaja y en qué plazos | Bloque «cómo es trabajar conmigo»: tipos de encargo, plazos y rango orientativo |
Cada hallazgo lleva impacto, esfuerzo real estimado y una acción concreta. El orden no es por gravedad teórica: es por relación entre lo que recupera y lo que cuesta.
No hay ni un porcentaje de mejora prometido. Sin línea base —hoy el sitio no mide nada— cualquier cifra sería inventada.
| # | Hallazgo | Impacto | Esfuerzo | Acción concreta | Estado |
|---|---|---|---|---|---|
| 1 | Enlaces sociales de relleno | Alto | 10 min | URLs reales de LinkedIn, GitHub y Dribbble, o eliminarlas | Abierto |
| 2 | Formulario mailto: con éxito engañoso | Alto | 1-2 h | Endpoint real, mensaje veraz y campo trampa antispam | Resuelto |
| 3 | Casos sin resultados ni métricas | Alto | 1-2 d | Bloque «resultado» en la plantilla; sacar las cifras del JPG a texto | Abierto |
| 4 | Sin analítica | Alto (indirecto) | ½ d | GA4 y Clarity con el plan de eventos del bloque 07 | Abierto |
| 5 | 23 MB de imágenes, sin srcset | Medio-alto | ½ d | AVIF/WebP con srcset; retrato por debajo de 120 KB | Abierto |
| 6 | Preloader de 2,3 s artificiales | Medio-alto | 1 h | Reducir a 700 ms o atarlo a la carga real | Abierto |
| 7 | Cero testimonios, con el slider ya programado | Alto | 1 sem | Tres citas con nombre y empresa en el componente existente | Abierto |
| 8 | Portada sin llamada a la acción | Medio | 1 h | «Ver trabajo seleccionado» y «Empezar un proyecto» | Abierto |
| 9 | Disponibilidad invisible en móvil | Medio | 1 h | Chip clicable en el menú y en el bloque de contacto | Abierto |
| 10 | Contacto depende de index#contact | Medio | 2-3 h | Bloque de contacto en archivo y sobre mí, o página propia | Abierto |
| 11 | Sin calificación de contacto ni agenda | Medio | 2 h | Desplegable de tipo y presupuesto; enlace a agenda | Abierto |
| 12 | Texto mono de 9,9 px en móvil | Bajo | 5 min | Mínimo del clamp a 0.72rem | Abierto |
| 13 | Contraste del secundario en tema claro | Bajo | 5 min | --fg-dim: #5d5951 | Abierto |
| 14 | «Index» ambiguo en la navegación | Bajo | 10 min | Renombrar a «Inicio» o eliminar la etiqueta | Abierto |
| 15 | Bug tipográfico del signo huérfano | Bajo | 30 min | Unir la puntuación a la palabra anterior al separar | Resuelto |
| 16 | Imagen social vertical | Bajo | 1 h | Crear una de 1200 × 630 con claim y trabajo | Abierto |
| 17 | Sin aviso legal ni privacidad | Bajo | 2 h | Páginas legales y consentimiento en cuanto haya analítica | Abierto |
Endpoint de formulario Hecho · enlaces sociales reales · analítica y eventos · imágenes en formatos modernos · preloader a 700 ms · tamaño mínimo del mono · contraste del tema claro.
Una jornada de trabajo real: con eso el sitio pasa de escaparate a canal medible. El primer punto ya está; el resto sigue pendiente.
Bloque de resultado en la plantilla de caso · métricas sacadas del JPG a texto · tres testimonios en el componente que ya existe · acciones en portada y al final de cada caso · disponibilidad visible en móvil.
La ola de mayor impacto persuasivo, y la que depende de terceros.
Plan de research —test de cinco segundos, entrevistas, tree test— y primera lectura de mapas de calor y grabaciones con tráfico real.
A partir de aquí las decisiones dejan de ser opiniones, incluidas las mías.
Programa de experimentos por orden de impacto, medidos antes y después, más las pruebas de percepción con panel.
Mejora iterativa documentada, con el escepticismo estadístico que impone este volumen de tráfico.
Este documento se elaboró en agosto de 2026 sobre la versión 11 de lemonadefactory.eu, a partir del análisis directo del código y de la verificación en navegador a 1366 y 375 px, con contrastes calculados según WCAG. Publicarlo entero, con los suspensos incluidos, es parte del argumento: el criterio se demuestra aplicándolo al trabajo propio, no solo al ajeno.
Parte 02
(00) — La interfaz
Anchos dibujados de cada pantalla, no adaptados sobre la marcha
Escritorio 1440 · Tablet 834 · Móvil 390Temas completos, construidos con las mismas variables intercambiadas
Dark y light, en español y en inglésPantallas por juego, del preloader a la página de error
Preloader · Inicio · Trabajo · Sobre mí · Ficha · Menú · 404Biblioteca publicada de la que se arrastra todo lo demás
Componentes con variantes, consumidos desde RecursosLas ocho láminas van en el orden en que se hicieron, no en el orden en que quedan bonitas: primero el flujo, luego las pantallas, luego el sistema que las sostiene y por último el prototipo que las pone a prueba. Todas son capturas del archivo de Figma y del board de FigJam tal y como están hoy, con sus paneles y su ruido de herramienta a la vista.
Antes de abrir Figma dibujé el sitio entero en FigJam: por dónde entra el visitante, qué decide el gate de idioma y cuántos pasos hay desde una portada hasta un correo enviado. El flujo arranca en la detección de idioma —si ya está guardado, redirección automática; si no, elección ES/EN— y desde ahí se abre en tres ramas: navegación global, páginas principales y las fichas de caso con su filtro de disciplina.
Dibujarlo así dejó a la vista lo que la auditoría diría después con números: todos los caminos terminan en la misma casilla de contacto, y esa casilla era el eslabón débil. El 404 y la descarga del CV cuelgan del flujo como salidas laterales, no como callejones sin retorno.
FigJam · User flowPortfolio 2026
La versión oscura montada en Figma como tres tandas paralelas de la misma página: escritorio 1440, tablet 834 y móvil 390. Cada tanda lleva el juego completo —preloader, inicio, trabajo, sobre mí, ficha de caso, menú overlay y 404— para poder comparar en vertical cómo se reordena cada bloque en vez de suponerlo.
Aquí se decide lo que luego el CSS se limita a ejecutar: cuándo la navegación se convierte en burger, cuándo la rejilla de tres columnas pasa a una y qué columna de la fila de archivo desaparece al estrechar.
Figma · Screens · DarkPrototipado responsive
El tema claro no es el oscuro con los colores invertidos: cambian el peso del texto, la fuerza de las sombras y el propio acento, que pasa del verde al azul para mantener el contraste sobre fondo hueso. Estas son las pantallas en español y en versión light, en sus tres anchos, montadas con exactamente los mismos componentes que la versión oscura.
Tener el modo claro dibujado antes de escribir el CSS es lo que permite que el conmutador de tema del sitio sea un intercambio de variables y no una hoja de estilos paralela que mantener por duplicado.
Figma · Screens · LightEscritorio, tablet y móvil
Las fundaciones del archivo en una sola lámina: las dos paletas —oscura y clara— con cada color nombrado por su función y no por su tono (color/bg, color/fg-dim, color/accent, color/discipline/ux), la escala tipográfica desde Giant hasta el mono de las etiquetas, la escala de espaciado y los radios con sus puntos de corte.
Nombrar por función es lo que hace que el tema claro salga gratis: color/accent es verde o azul según el modo, pero el componente que lo usa no se entera. Los estilos de texto del panel derecho —Giant, H1, H2, Wordmark, Menu, Number— son los mismos que después viven en tokens.css.
Figma · FoundationsPaletas · Type ramp · Spacing · Radius
La página de componentes: cabecera, fila y tarjeta de archivo, marquesina, barra de trabajo, botón, cabecera de grupo, ítem de acordeón, fila de trayectoria, tarjeta de disciplina, pie, formulario, bloque de siguiente proyecto y el marcador de imagen pendiente. Cada uno construido como componente con sus propias variables —estado, tamaño, disciplina, tema— en lugar de como cinco copias parecidas.
La ganancia real llegó al maquetar: cuando la fila de archivo cambió de altura, cambió en las cuarenta pantallas a la vez, y el front-end solo tuvo que copiar esa decisión una vez.
Figma · ComponentsVariantes y propiedades
Los mismos componentes, ya publicados como biblioteca y consumidos desde el panel de recursos: accordion item, archive card, archive row, arrow circle, brand, brand mark, burger, button, case meta cell, discipline card, discipline tag, eyebrow… Al lado, las pantallas montadas enteras a base de instancias de esa biblioteca.
Es la comprobación de que el sistema es un sistema y no un tablero de inspiración: si una pantalla se puede armar entera arrastrando piezas de la librería, la librería está completa.
Figma · BibliotecaAssets y pantallas montadas
La capa de prototipo sobre las pantallas: cada línea azul es una conexión real entre un elemento y su destino —la cabecera hacia inicio, trabajo, sobre mí y contacto; la tarjeta de disciplina hacia su sección del archivo; la fila de archivo hacia su ficha; el burger hacia el menú overlay y de vuelta—.
Con esto el prototipo se recorre como se recorrería el sitio, que es la única forma de encontrar los callejones sin salida antes de programarlos: en el primer pase, la ficha de caso no tenía retorno al archivo filtrado y había que tirar del botón atrás del navegador.
Figma · PrototipoConexiones e interacciones · Flow 1
El resultado en la mano: el archivo de trabajo desplazándose en un teléfono real, con las filas de desarrollo front-end dando paso a la sección de diseño gráfico y las etiquetas de disciplina cambiando de color al hacerlo.
Es la última comprobación del ciclo —lo dibujado en Figma frente a lo que devuelve el navegador en un móvil de verdad— y la pieza que cierra la mitad de interfaz de este proyecto.
Mockup · Captura del sitioEl archivo, en scroll sobre móvil
Todo lo anterior está construido y funcionando: el sistema que se diseñó en este archivo de Figma existe en código, con 37 componentes y 57 tokens, y se puede abrir, buscar y copiar entero en la ficha de desarrollo front-end. Esta web está hecha con él — y también la tarjeta de visita, que imprime esos mismos tokens en 55 × 85 mm.
Siguiente en Diseño de producto UX/UI
