# Diseño de casos de estudio: el problema, el trabajo y el resultado [Canonical HTML page](https://gradiently.design/es/guide/case-study-design) La mayoría de los casos de estudio son una galería con un párrafo encima. Los que consiguen clientes cuentan una historia que un desconocido sigue en un minuto. Eso exige una estructura clara, visuales que la sostengan y un formato para cada canal. ## The short version - Un buen caso de estudio cuenta una historia en tres partes: el problema, el trabajo y el resultado. - El resultado debe aparecer en la primera pantalla o en la primera diapositiva, porque muchos lectores nunca llegan al final. - Cada sección de un caso de estudio debe tener su propio visual, desde una imagen del antes hasta los bocetos del proceso y el trabajo terminado en uso. - Afirma solo los resultados que puedas mostrar, y pide permiso al cliente antes de nombrarlo o compartir cifras. - Un mismo caso de estudio puede publicarse como página web, PDF, diapositiva de una presentación comercial y carrusel para redes si comparte un aspecto coherente. Un buen **diseño de casos de estudio** sigue tres actos: el problema, el trabajo y el resultado. Abre con un titular que diga el resultado, muestra lo que fallaba antes, recorre las decisiones que lo cambiaron y demuestra que funcionó con la pieza terminada en uso real. Da a cada acto su propio visual y mantén los textos breves. Un posible cliente debería entender qué hiciste y por qué importó en el tiempo que tarda en recorrer una pantalla. ## La estructura de un buen caso de estudio Diseñadores, agencias, consultores y empresas de software escriben casos de estudio, y la forma que funciona es la misma para todos. Se lee como un relato breve con un punto de giro claro, y pone el final tanto al principio como al final. 1. **Titular: el resultado** «Una carta que redujo a la mitad las preguntas al pedir» gana a «Rediseño de restaurante». Nombra al cliente y el trabajo en una línea debajo. 2. **El problema** Qué fallaba, para quién y por qué importaba al negocio. Dos o tres frases y una imagen del antes. 3. **El enfoque** Las dos o tres decisiones que marcaron la diferencia, y por qué. No cada paso que diste. 4. **El trabajo** Las piezas terminadas, en grande y en contexto: en un móvil, en una estantería, en la calle. 5. **El resultado** Qué cambió, con palabras del cliente o con cifras que tengas permiso para compartir. 6. **El siguiente paso** Una línea que invite a contactarte a quien tenga un problema parecido. > **Pregunta antes de compartir** Revisa tu contrato y pregunta al cliente antes de nombrarlo, mostrar trabajo no publicado o publicar cualquier cifra. Si no puedes compartir números, describe el cambio con palabras que el cliente apruebe. Elige con el mismo cuidado qué proyectos contar. Tres casos de estudio que encajen con los clientes que quieres a continuación valen más que diez que cubran todo lo que has hecho. Si quieres más trabajo con restaurantes, empieza por el restaurante; si quieres clientes de software, empieza por el panel de control, aunque fuera un encargo más pequeño. ## Visuales para cada parte de la historia Un muro de mockups terminados le dice al lector que sabes hacer cosas bonitas. No le dice que sabes resolver su problema. Asigna a cada sección un visual que demuestre lo que esa sección afirma. | Sección | Visual que lo demuestra | Evita | | --- | --- | --- | | Problema | La versión antigua, una pantalla confusa, una estantería abarrotada | Burlarte del trabajo anterior del cliente | | Enfoque | Bocetos, un moodboard, dos opciones lado a lado, el brief | Decenas de fotos del proceso | | Trabajo | La pieza terminada en uso real, y luego los detalles clave | Solo mockups flotando sobre gris | | Resultado | Una cita breve del cliente, una cifra aprobada en grande, el trabajo en la calle | Afirmaciones vagas sin fuente | Basta un visual que lo demuestre por sección. Con más de tres imágenes seguidas, la historia se atasca. Una diapositiva panorámica de caso de estudio titulada El problema, que explica que los comensales no encontraban los platos veganos en una carta Una diapositiva de problema: el asunto dicho con claridad, desde el lado del cliente, en una línea. Una diapositiva panorámica a juego titulada El resultado, con el titular Preguntas al pedir: la mitad sobre el mismo degradado La diapositiva de resultado con el mismo estilo. El resultado es el titular, con su fuente indicada debajo. El ejemplo de arriba es inventado para mostrar la forma, pero fíjate en la línea de fuente bajo el resultado. Una cifra con su atribución se lee como prueba; una cifra sola se lee como marketing. [La jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy) ayuda a decidir qué poner en grande. ## Maquetación de un caso de estudio en una página web En un portafolio o en la web de una empresa, un caso de estudio es una página larga. La mayoría de los visitantes lee la primera pantalla, ojea los encabezados y mira las imágenes. Diseña justo para eso. ### Evita - Una imagen principal a pantalla completa sin palabras - El resultado escondido al final del todo - Párrafos largos entre imágenes - Todas las imágenes del mismo tamaño - Ninguna forma de contactarte al final ### Haz - Titular, cliente y resultado en la primera pantalla - Un recuadro de resumen: cliente, rol, plazos, resultado - Encabezados que cuenten la historia leídos solos - Imágenes principales grandes, imágenes de detalle más pequeñas - Un siguiente paso claro y un enlace al siguiente caso de estudio Un fondo constante para separadores de sección, citas y paneles de resultados hace que una página larga se sienta como una sola pieza y da a la vista un sitio donde descansar entre imágenes. [Consejos para el portafolio de un diseñador](https://gradiently.design/es/guide/designer-portfolio-tips) y [portafolio de desarrollador](https://gradiently.design/es/guide/developer-portfolio-design) tratan el resto de la web que lo rodea. ## Un caso de estudio en varios formatos Un caso de estudio da demasiado trabajo para publicarlo una sola vez. La misma historia puede vivir como una página en tu web, un PDF para adjuntar a propuestas, dos diapositivas en una presentación comercial y un carrusel en LinkedIn o Instagram. Cada uno necesita su propio tamaño. - Diapositiva 1920×1080: 1920 × 1080 - PDF A4 2480×3508: 2480 × 3508 - Carrusel 1080×1350: 1080 × 1350 - Portada de Behance 1616×1264: 1616 × 1264 Cuatro hogares para un caso de estudio, a escala. La historia es la misma; cambian el encuadre y el número de palabras. - **Carrusel:** una diapositiva por acto, más una portada y una diapositiva de contacto. [Carruseles de LinkedIn](https://gradiently.design/es/guide/linkedin-thought-leader-content) muestra el formato. - **Presentación comercial:** una diapositiva de problema y otra de resultado, como la pareja de arriba. - **PDF:** de dos a cuatro páginas A4 o Carta; mira [diseño de one pager](https://gradiently.design/es/guide/one-pager-design) para resúmenes en una sola hoja. - **Webs de portafolio:** una portada al tamaño de la plataforma, como el [tamaño de portada de Behance](https://gradiently.design/es/guide/behance-cover-size). Gradiently ayuda aquí porque un Mark se renderiza de nuevo a cada tamaño: diseña el caso de estudio una vez y Pro lo adapta a todos los formatos en un paso, con el mismo fondo y la misma tipografía en la diapositiva, el PDF y las páginas del carrusel. ## FAQ ### ¿Qué debe incluir un caso de estudio? Un titular con el resultado, el problema, tu enfoque, el trabajo terminado en contexto, el resultado y un siguiente paso para el lector. ### ¿Qué extensión debe tener un caso de estudio de diseño? La suficiente para mostrar el punto de giro y nada más. Los buenos se pueden ojear en un minuto y leer enteros en cinco. ### ¿Puedo escribir un caso de estudio sin datos de resultados? Sí. Usa una cita del cliente o una descripción de lo que cambió que el cliente apruebe. Nunca inventes cifras. ### ¿Dónde va el resultado en un caso de estudio? En el titular o en la primera pantalla, y otra vez con más detalle al final. Muchos lectores nunca llegan abajo. ### ¿Qué formato debe tener un caso de estudio? Una página web es su casa principal, con un PDF para propuestas, diapositivas para presentaciones y un carrusel para redes, todo con el mismo estilo.