Lección 9 de 12 · Lectura y práctica
Caso de portfolio: mini design system
Caso de portfolio: mini design system Un mini design system es una pieza fuerte de portfolio porque muestra criterio visual, orden, documentación y conexión con desarrollo. No necesitás un sistema enorme: necesitás demostrar cómo.
Del concepto a la práctica
Taller de esta lección
Un caso de estudio útil muestra una cadena de decisiones, no una galería de pantallas bonitas. La persona lectora debe poder seguir el problema, la evidencia, la solución y la comprobación sin depender de explicaciones orales.
Ejemplo resuelto
El caso de reservas se organiza en seis secciones: contexto, auditoría, tokens, componentes, pantalla revisada y aprendizaje. En la auditoría se muestra que dos tarjetas expresaban disponibilidad de manera distinta. La solución documenta un estado común y conserva una variante para ejemplares no reservables.
Pruébalo
Selecciona un problema con evidencia antes y después.
Explica una decisión de token y una de componente.
Muestra un caso correcto y otro que el sistema rechaza.
Añade una medición y una limitación del trabajo.
Error frecuente: ocultar decisiones difíciles para que el caso parezca perfecto. Corrige mostrando qué no se normalizó y por qué.
Ejercicio: redacta seis bloques de un caso de estudio usando una pantalla de ocho resultados.
Comprueba tu resultado
cada bloque responde una pregunta distinta y el lector puede identificar al menos un cambio medible entre antes y después.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗Caso de portfolio: mini design system
Un mini design system es una pieza fuerte de portfolio porque muestra criterio visual, orden, documentación y conexión con desarrollo. No necesitás un sistema enorme: necesitás demostrar cómo reducís inconsistencias y acelerás decisiones.
Qué debe incluir el caso
- Problema: pantallas inconsistentes, componentes duplicados o falta de reglas.
- Auditoría: evidencia visual de los problemas detectados.
- Tokens: color, tipografía, espaciado, radios y sombras.
- Componentes: botón, input, card, badge, modal o tabla.
- Documentación: uso correcto, variantes, estados y accesibilidad.
- Aplicación: una pantalla antes/después usando el sistema.
Estructura recomendada
- Contexto del producto y usuario.
- Capturas del problema.
- Decisiones de tokens y componentes.
- Ejemplos de uso correcto e incorrecto.
- Pantalla rediseñada con el mini sistema.
- Aprendizajes y próximos pasos.
Proyecto práctico: publicá tu caso
Convertí una pantalla desordenada en un caso de estudio de 6 secciones. El foco no es decorar: es explicar cómo una decisión de sistema mejora consistencia, velocidad y accesibilidad.
Mini-rúbrica
- El caso muestra antes y después.
- Los tokens tienen nombres y usos claros.
- Los componentes incluyen estados y variantes.
- La documentación es breve y accionable.
- El resultado puede explicarse en una entrevista laboral.
Entregable: una página pública de portfolio o Notion con screenshots, decisiones y componentes documentados.
Sigue con Diseño UI y Sistemas de Diseño
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.