Un buen portafolio no es una galería de pantallas bonitas, sino evidencia de cómo resuelves problemas. Para eso, cada proyecto debe contar una historia clara: objetivo, proceso, decisiones y resultados medibles. Aquí tienes ideas concretas de proyectos para cursos de diseño web y una guía para documentarlos como casos de estudio.
1) Landing accesible AA. Para una ONG ficticia, diseña y construye una landing mobile-first con contraste correcto, estados de foco visibles y navegación por teclado. Métrica: Lighthouse Accessiblity ≥ 95, sin errores críticos de Axe. Demuestra tokens de color y tipografía, e incluye justificación de decisiones.
2) Blog multipágina. Estructura un sitio con portada, listados, artículos y formulario de contacto. Usa HTML semántico, metadatos OG/Twitter, y componentes reutilizables. Métrica: estructura H1–H3 coherente, CLS bajo y tiempo de interacción aceptable en móviles.
3) Componente modal accesible. Implementa un modal con gestión estricta del foco, cerrando con Escape y click en overlay, y manteniendo aria-hidden en el contenido de fondo. Documenta por qué elegiste ciertos roles y atributos. Métrica: pruebas por teclado y lector de pantalla superadas.
4) Tabla con filtros. Diseña y construye una tabla de comparación con filtros y ordenación sin framework. Usa aria-sort y etiquetas de encabezados. Métrica: sin errores de contraste, buena usabilidad en móvil y escritorio.
5) Figma a código. Convierte una página de un sistema de diseño (con componentes, variantes y estados) en HTML/CSS/JS. Explica cómo creaste tokens (espaciado, tipografía, colores) y cómo resolviste los puntos de ruptura con container queries. Métrica: similitud visual alta y tamaño total de recursos controlado.
6) Micrositio de evento. Incluye agenda, ponentes y registro. Trabaja un calendario accesible y tarjetas de ponentes con microinteracciones suaves. Métrica: tasa de conversión del formulario en una prueba con amigos; optimización de imágenes y fuentes.
7) Documentación de sistema de diseño. Crea una docu simple con guidelines de uso, ejemplos de código, pautas de accesibilidad y componentes. Métrica: claridad, consistencia y ejemplos funcionales.
8) Rediseño con benchmark. Elige una web pública con problemas (rendimiento, accesibilidad, jerarquía) y plantea una versión mejorada con argumentos y mediciones. Métrica: comparativa antes/después y mejoras cuantificadas.
Cómo escribir el caso de estudio. 1) Contexto. En 3–4 líneas, cuenta de qué trata el proyecto, para quién y con qué restricciones. 2) Problema y objetivo. Define qué querías lograr (ej. “mejorar legibilidad y conversión”). 3) Proceso. Muestra wireframes, prototipos y decisiones clave; incluye descartes y por qué. 4) Ejecución técnica. Resalta semántica, patrones accesibles, arquitectura CSS y mejoras de performance. 5) Resultados. Comparte métricas (Lighthouse, peso de página, tiempos) y qué harías diferente en una segunda iteración. 6) Enlaces. Demo pública y repositorio con README.
Presentación y narrativa. Usa titulares claros y comparativas visuales (antes/después). Evita muros de texto: alterna párrafos breves con imágenes y tablas cuando aporten claridad. Señala decisiones difíciles: eso muestra criterio. Cierra con aprendizajes y próximos pasos.
Errores comunes. 1) Portafolios sin contexto, solo capturas. 2) Copiar componentes sin entender accesibilidad. 3) Olvidar estados (hover, focus, deshabilitado, error). 4) Demasiadas fuentes o colores sin sistema. 5) Demos pesadas por imágenes gigantes o fuentes sin subset. Corrige con una checklist simple antes de publicar.
Tu ventaja competitiva. La mayoría publica “lo terminado”. Destaca mostrando proceso y medición. Los equipos de producto valoran a quien puede justificar decisiones, medir impacto y escribir documentación clara. Si estás en un curso de diseño web, pide que al menos dos proyectos se evalúen con rúbricas de accesibilidad y performance; te obligará a subir el listón.