Cómo diseñar casos de estudio en tu portfolio que ganan clientes

Hay una conversación que se repite en el estudio cada pocas semanas. Alguien nos llama porque ha visto un proyecto concreto en nuestra web, no la home ni la página de servicios, sino un caso en particular. Y casi siempre lo que le ha convencido no es la imagen de portada, sino un párrafo: el que explica qué problema tenía aquel cliente y por qué tomamos tal decisión. Se reconoció en él.

Ese es el poder de un buen caso de estudio. Una galería de trabajos dice «sé hacer cosas bonitas», y eso, en un sector lleno de cosas bonitas, distingue poco. Un caso de estudio dice «entiendo problemas como el tuyo y sé cómo resolverlos», que es lo que de verdad compra alguien cuando contrata a un estudio, a una consultora o a un profesional independiente.

Esta guía va de cómo convertir proyectos terminados en páginas que trabajan para ti: qué estructura seguir, cuánto escribir, qué imágenes elegir y cómo diseñar la página para que se lea entera. Sirve igual para un estudio de diseño, un arquitecto, un fotógrafo o una empresa de reformas.

01Qué es un caso de estudio y en qué se diferencia de una galería

Un caso de estudio (o case study) es una página dedicada a un proyecto que cuenta una historia con principio, nudo y desenlace: había una situación, alguien tomó decisiones y el resultado cambió algo. La galería, en cambio, muestra el resultado y deja que el visitante adivine el resto.

Las dos tienen su sitio. La galería funciona para dar sensación de volumen y de estilo, y para trabajos donde la imagen lo explica casi todo, como una sesión de fotografía. El caso de estudio funciona para vender trabajos complejos, caros o de largo plazo, donde el cliente necesita confiar en tu manera de pensar antes de firmar.

En nuestra experiencia, la combinación que mejor funciona es un índice de proyectos visual y ágil, del que cuelgan tres o cuatro casos desarrollados a fondo. El índice seduce; el caso convence.

02La estructura de un caso de estudio que se lee entero

Cualquier buen caso sigue, con variaciones, el mismo arco narrativo. Es la estructura clásica de una historia aplicada a un proyecto, y si te interesa el fondo teórico lo tienes en la guía de storytelling de marca. Aquí va la versión práctica, en el orden en que suele aparecer en pantalla.

1. 01Cabecera con una frase de resultado. Nombre del cliente, sector, ubicación, servicios prestados y año. Encima, un titular que resuma lo que cambió, no lo que hiciste: «Una clínica que ahora llena la agenda desde la web» dice más que «Diseño web para Clínica X».
2. 02El punto de partida. Dos o tres párrafos sobre la situación inicial: qué tenía el cliente, qué le preocupaba, qué había intentado antes. Es la parte donde el lector se identifica.
3. 03El reto, en una frase. La pregunta que el proyecto tenía que responder. Obliga a ser concreto y ordena todo lo que viene después.
4. 04El proceso y las decisiones. No un diario de tareas, sino las dos o tres decisiones importantes y por qué se tomaron. Aquí se ven bocetos, alternativas descartadas, investigación.
5. 05La solución. El trabajo final, mostrado en contexto y con detalle.
6. 06Los resultados. Lo que cambió, con cifras si las hay y con palabras del cliente si no.
7. 07Ficha y siguiente paso. Equipo, créditos, enlace al proyecto vivo y una invitación a ver otro caso o a escribir.

Cuánto escribir

Un caso completo suele moverse entre 600 y 1.200 palabras, repartidas en bloques cortos entre imágenes. Menos de 300 se queda en pie de foto; más de 1.500 empieza a parecer un informe interno. Lo que funciona es escribir largo en el borrador y recortar hasta que cada párrafo responda a una pregunta que el lector tendría.

Para quién escribes

Piensa en la persona que va a contratar, no en otros diseñadores. Un director de hotel quiere saber si entendiste su problema de reservas, no qué tipografía de palo seco elegiste. La tipografía puede salir, claro, pero explicada en su idioma: «elegimos una letra muy legible en pantallas pequeñas porque el 70 % de sus reservas llegaban desde el móvil», y solo si ese dato es real y te lo dio el cliente.

03Cómo escribir el reto y los resultados sin inflarlos

Las dos partes más difíciles de un caso son el principio y el final. El principio porque tiende a ser vago y el final porque tiende a exagerar.

El reto: concreto y con tensión

Un reto bien escrito tiene un sujeto, un obstáculo y algo en juego. Compara:

• →Vago: «El cliente quería renovar su imagen para adaptarse a los nuevos tiempos».
• →Concreto: «Una bodega familiar con tres generaciones de historia vendía bien en tienda, pero en la web parecía una marca más del lineal. Necesitaba que su relato llegara también a quien no la visitaba».

El segundo ya da ganas de seguir leyendo, porque plantea una tensión que el resto de la página va a resolver.

Los resultados: atribuibles y honestos

Los resultados son lo que más pesa en la decisión del lector, y por eso es donde más se nota cuando alguien adorna. Lo que funciona es presentar solo lo que puedes atribuir razonablemente al proyecto y explicar de dónde sale el dato.

Si no hay cifras, una buena cita vale mucho. Pide al cliente que te cuente qué ha cambiado en su día a día y usa sus palabras, editadas solo para que se lean bien y siempre con su visto bueno. En la guía de testimonios y prueba social explicamos cómo pedirlos para que salgan frases útiles en lugar de elogios genéricos.

04Las imágenes que cuentan el proyecto

En un caso de estudio las imágenes no decoran el texto: lo demuestran. Cada bloque de texto debería apoyarse en una imagen que enseñe lo que dice.

Qué tipo de imágenes incluir

• →Contexto real. El rótulo en la calle, la web en el móvil de alguien, el stand con gente. Un mockup (simulación del diseño sobre un objeto o dispositivo) ayuda, pero una foto real siempre convence más.
• →Proceso. Bocetos, mapas de contenido, wireframes, paletas descartadas. Pocas y escogidas, porque muestran cómo piensas.
• →Detalle. Primeros planos de tipografía, texturas, microinteracciones grabadas en vídeo corto.
• →Antes y después. Muy potente cuando el cambio es evidente, siempre con respeto hacia el trabajo anterior.
• →Personas. El equipo del cliente usando lo que hicisteis. Humaniza el proyecto como pocas cosas.

Si puedes, invierte en fotografiar los proyectos terminados. Ya contamos en por qué la fotografía propia transforma una web la diferencia que marca frente a las imágenes de banco, y en un portfolio esa diferencia se multiplica.

Ritmo visual

Alterna imágenes a sangre (de borde a borde) con composiciones en dos o tres columnas y bloques de texto estrechos. Ese cambio de escala marca los capítulos de la historia y evita la sensación de scroll infinito. Una pauta que usamos a menudo: no más de dos imágenes seguidas del mismo tamaño, y nunca un bloque de texto de más de cuatro párrafos sin una imagen que lo rompa.

En vídeo, los clips cortos en bucle (de cinco a diez segundos, sin sonido) son ideales para mostrar animaciones o recorridos por una web. Conviene servirlos ligeros y con imagen de póster, como explicamos en la guía de vídeo en la web.

05El diseño de la página de proyecto

La página de caso tiene que hacer dos cosas a la vez: dejar que el trabajo brille y facilitar la lectura. Algunos criterios que aplicamos:

• →Una plantilla, muchas variaciones. Define una estructura común (cabecera, ficha, bloques de texto e imagen, resultados, siguiente proyecto) y deja que cada caso juegue con el color o la composición del propio cliente. La coherencia ayuda a comparar; la variación demuestra versatilidad.
• →Ficha escaneable arriba. Cliente, sector, ciudad, servicios, año y enlace al proyecto vivo, en una columna lateral o en una fila de datos. Hay quien solo lee eso, y está bien.
• →Medida de línea cómoda. Entre 60 y 75 caracteres por línea en el texto, aunque las imágenes ocupen todo el ancho.
• →Resultados destacados. Las cifras en un bloque visual propio, con número grande y etiqueta corta, para quien hace scroll rápido.
• →Siguiente caso al final. Un enlace grande al siguiente proyecto mantiene la visita viva. Si el lector ha llegado al final, está interesado.
• →Llamada a la acción contextual. «¿Tienes una clínica y te ves en esta historia?» funciona mejor que un genérico «Contacta».

Filtros y orden en el índice

Si tienes más de diez proyectos, añade filtros por servicio o sector. El orden importa: coloca primero los casos que mejor representan el trabajo que quieres hacer en los próximos años, no los más antiguos ni los más grandes. Un portfolio es una declaración de intenciones tanto como un archivo.

06SEO y rendimiento: que tus casos también se encuentren

Un caso de estudio bien escrito es una de las páginas con más posibilidades de posicionar en una web de servicios, porque combina de forma natural sector, ciudad y servicio. Unas pautas:

1. 01URL descriptiva. /proyectos/clinica-dental-marbella mejor que /proyectos/proyecto-14.
2. 02Title y H1 con contexto. Cliente o sector, servicio y lugar: «Diseño web para una clínica dental en Marbella».
3. 03Texto alternativo útil. Describe lo que se ve y por qué importa: «Página de reservas de la clínica en un móvil, con el calendario de citas abierto».
4. 04Enlaces internos de ida y vuelta. Del caso a la página del servicio prestado, y de la página de servicio a sus mejores casos.
5. 05Imágenes optimizadas. Los portfolios suelen ser las páginas más pesadas de una web. Formatos modernos, tamaños responsive y carga diferida por debajo del primer pantallazo, como detallamos en la guía de imágenes AVIF y WebP.
6. 06Datos estructurados. Un marcado CreativeWork sencillo, con autor, fecha y descripción, ayuda a que los buscadores entiendan qué es la página.

{
  "@context": "https://schema.org",
  "@type": "CreativeWork",
  "name": "Diseño web para una clínica dental en Marbella",
  "creator": { "@type": "Organization", "name": "Tu estudio" },
  "dateCreated": "2025-11",
  "about": "Rediseño web con sistema de reserva de citas",
  "image": "https://tudominio.es/proyectos/clinica-dental-marbella/portada.jpg"
}

07Un método para producir casos sin que se acumulen

El motivo más habitual por el que un portfolio está desactualizado no es la falta de ganas, sino que escribir un caso se deja para «cuando haya tiempo». Lo que funciona en el estudio es documentar mientras se trabaja.

1. 01Al empezar el proyecto, crea una carpeta «caso» con el brief, el estado inicial (capturas, fotos del local, analítica de partida) y las métricas acordadas.
2. 02Durante el proyecto, guarda en esa carpeta los bocetos y las alternativas que expliquen decisiones. Un minuto al cerrar cada fase.
3. 03En la entrega, pide permiso para publicar y agenda la sesión de fotos del resultado real.
4. 04A los tres meses, recoge resultados y la cita del cliente.
5. 05Escribe el caso con la plantilla de siete bloques. Con el material ya reunido, es cuestión de una mañana.
6. 06Revisa con el cliente antes de publicar. Además de cortesía, a menudo aporta matices valiosos.

Así cada proyecto cerrado se convierte, en pocas semanas, en una página que sigue trabajando durante años.

08Tu trabajo, contado con la misma calidad con la que lo hiciste

Muchos estudios y profesionales hacen un trabajo excelente que luego se presenta en una cuadrícula de miniaturas sin contexto. Contarlo bien es la forma más honesta y eficaz de captar a los clientes que de verdad encajan contigo. Puedes ver cómo lo resolvemos nosotros en nuestros proyectos, y si quieres que diseñemos la página de portfolio de tu negocio dentro de un proyecto de diseño web y experiencia digital, escríbenos y vemos juntos qué historias merece la pena contar primero.