Surface
Background
Fondo principal de la interfaz
Light value
oklch(1 0 0)
Punto de partida
Problema
Aprender Vue no siempre significa saber aplicarlo. Una persona puede leer documentación, seguir tutoriales y copiar ejemplos, pero aun así necesitar una forma rápida de comprobar si realmente entiende conceptos como directivas, rutas, estado, computed properties o watchers.
Vue Training responde a esa necesidad con una experiencia de práctica directa: quizzes para evaluar conceptos, challenges para aplicar lógica y tips breves para reforzar buenas prácticas del ecosistema Vue.
Para quién
User Persona 1
Biografía
Carla es una diseñadora digital con experiencia en herramientas visuales, pero recientemente ha sentido la necesidad de aprender desarrollo frontend para colaborar mejor con ingenieros y poder prototipar sus propias ideas.
Ha intentado cursos en video, pero siente que hay un salto muy grande entre "ver a alguien codear" y hacerlo ella misma. Busca una forma de practicar conceptos técnicos de Vue de manera aislada y segura antes de aplicarlos en proyectos grandes.
“Entiendo cómo debe verse la interfaz, pero me frustra no saber cómo darle vida con código sin sentir que voy a romper algo”
Metas
- Practicar Vue por tema y dificultad.
- Reconocer conceptos antes de llevarlos a código.
- Resolver ejercicios pequeños que simulen decisiones reales de interfaz.
- Encontrar tips rápidos con fuente hacia documentación.
Frustaciones
- Los tutoriales dan una sensación de avance, pero no siempre miden comprensión.
- La práctica suele estar dispersa entre videos, documentación y ejercicios sueltos.
- Es fácil olvidar buenas prácticas cuando no aparecen dentro del flujo de aprendizaje.
Marcas conocidas
Para quién
User Persona 2
Biografía
Lucas lleva años trabajando en el servidor. Es un experto en lógica, bases de datos y seguridad. Sin embargo, en sus proyectos personales o en su startup, siempre depende de alguien más para la interfaz.
Ha decidido aprender Vue 3 porque escuchó que la Composition API es más lógica y cercana a la programación funcional que ya conoce. No tiene tiempo para tutoriales de 10 horas; necesita "romper" cosas y ver el código en acción.
“No necesito que me enseñen a programar, necesito entender la sintaxis de Vue y cómo maneja el estado para poder montar el front de mis APIs rápido.”
Metas
- Aprender lo justo y necesario para ser productivo en 48 horas.
- Entender profundamente la diferencia entre ref() y reactive() para evitar errores de memoria.
- Traducir su lógica de Back-end a patrones de Front-end (como el manejo de estado con Pinia).
Frustaciones
- Le molestan las plataformas que pierden tiempo con animaciones largas o explicaciones básicas.
- Se frustra cuando una respuesta correcta no explica qué pasa por debajo del framework.
- Odia tener que configurar un entorno local solo para probar un pequeño concepto de código.
Marcas conocidas
Decisión central
Solución
La solución fue organizar el aprendizaje en rutas simples y repetibles. La home presenta la propuesta principal, mientras que las secciones Quizzes, Challenges y Random tip separan tres formas distintas de practicar: comprobar conocimiento, aplicar lógica y descubrir recomendaciones puntuales.
La decisión central fue tratar el aprendizaje como pequeñas comprobaciones de comprensión, no como una secuencia larga de lecciones. Por eso la interfaz se apoya en tarjetas, filtros por categoría y dificultad, badges de nivel y llamadas a la acción directas.
Proceso
Cómo lo abordé
- 01
Separar modos de práctica
Dividí la experiencia entre quizzes para evaluar conceptos, challenges para aplicar lógica y random tips para reforzar buenas prácticas.
- 02
Diseñar filtros útiles
En quizzes, el contenido se puede filtrar por categoría como Pinia, Vue Router o Vue, y por dificultad Basic o Intermediate.
- 03
Usar tarjetas como unidad de contenido
Cada quiz o challenge se presenta como una tarjeta con tema, nivel, título y descripción breve para ayudar a decidir rápidamente qué practicar.
- 04
Sostener una experiencia flexible
La interfaz contempla modo claro/oscuro, navegación móvil y selector de idioma para que la práctica no dependa de un único contexto de uso.
Sistema visual
Tipografía
Aa
Font family
Poppins
Poppins fue elegida como tipografía principal por su apariencia limpia, moderna y accesible. Su estructura geométrica permite construir una interfaz clara, especialmente en tarjetas, filtros, navegación y contenidos de lectura breve.
La escala prioriza el escaneo rápido: títulos con buen peso visual, textos descriptivos cómodos y etiquetas funcionales para acompañar la navegación del usuario.
Display
Poppins Bold · 40/48
Aprende a tu ritmo
Heading
Poppins SemiBold · 24/32
Cursos recomendados
Body
Poppins Regular · 16/24
Contenido claro para explorar módulos, niveles y actividades.
Caption
Poppins Medium · 12/16
Nivel intermedio · 8 lecciones
Sistema visual
Paleta cromática
La paleta se organiza con tokens semánticos basados en shadcn-vue. Cada color tiene una función dentro de la interfaz: superficies, texto, acciones, estados, estructura e interacción.
El sistema contempla modo claro y modo oscuro desde los mismos roles visuales, manteniendo consistencia entre componentes, tarjetas, formularios y estados de navegación.
Light mode
Text
Foreground
Texto principal
Light value
oklch(0.1511 0.0178 224.4773)
Surface
Card
Tarjetas y contenedores
Light value
oklch(0.9751 0.0055 183.0314)
Surface
Popover
Menús flotantes y elementos superpuestos
Light value
oklch(0.9807 0.0084 225.0796)
Action
Primary
Acciones principales y elementos de marca
Light value
oklch(0.815 0.1706 151.2684)
Action
Secondary
Acciones secundarias
Light value
oklch(0.0577 0.0313 296.8468)
Neutral
Muted
Fondos suaves y contenido secundario
Light value
oklch(0.9396 0.0202 229.0448)
Accent
Accent
Estados activos, hover y destacados suaves
Light value
oklch(0.9192 0.0162 187.3124)
Feedback
Destructive
Errores y acciones destructivas
Light value
oklch(0.5502 0.22 25.0385)
Structure
Border
Bordes y divisores
Light value
oklch(0.9477 0.0085 225.084)
Structure
Input
Campos de formulario
Light value
oklch(0.8794 0.0196 230.727)
Interaction
Ring
Focus visible e interacción
Light value
oklch(0.6126 0.1866 252.6519)
Dark mode
Surface
Background
Fondo principal de la interfaz
Dark value
oklch(0.2077 0.0398 265.7549)
Text
Foreground
Texto principal
Dark value
oklch(0.9205 0.0086 225.0879)
Surface
Card
Tarjetas y contenedores
Dark value
oklch(0.2513 0.0395 268.7473)
Surface
Popover
Menús flotantes y elementos superpuestos
Dark value
oklch(0.1802 0.0325 266.6248)
Action
Primary
Acciones principales y elementos de marca
Dark value
oklch(0.815 0.1706 151.2684)
Action
Secondary
Acciones secundarias
Dark value
oklch(0.9067 0 0)
Neutral
Muted
Fondos suaves y contenido secundario
Dark value
oklch(0.1394 0.0106 220.3811)
Accent
Accent
Estados activos, hover y destacados suaves
Dark value
oklch(0.2552 0.0415 267.5355)
Feedback
Destructive
Errores y acciones destructivas
Dark value
oklch(0.5679 0.2323 28.2503)
Structure
Border
Bordes y divisores
Dark value
oklch(0.2824 0.0229 224.7083)
Structure
Input
Campos de formulario
Dark value
oklch(0.3338 0.0293 220.7787)
Interaction
Ring
Focus visible e interacción
Dark value
oklch(0.6126 0.1866 252.6519)
Interfaz
Pantallas
Inicio
Vista inicial del proyecto.
Inicio de cuestionario
Vista para comenzar un cuestionario
Pantalla de carga
Vista que se muestra mientras se cargan los datos del cuestionario.
Cuestionario en progreso
Vista de un cuestionario en progreso
Explicación de respuesta correcta
Modal que ofrece una explicación detallada de la respuesta correcta después de responder una pregunta.
Resultados del cuestionario
Vista que muestra los resultados después de completar un cuestionario.
Descripción Desafío
Vista que muestra la descripción y requisitos de un desafío específico.
Desafío editor
Vista del editor de código para resolver un desafío específico.
Tip random
Vista que muestra un tip aleatorio relacionado con Vue para reforzar buenas prácticas.
Reflexiones finales
Aprendizajes
Vue Training fue un proyecto de aprendizaje y experimentación que me permitió profundizar en el diseño de experiencias educativas para desarrolladores y en la organización práctica de contenido técnico.
También me ayudó a comprender mejor el ecosistema de Vue a través de la investigación para la creación de quizzes y challenges, y de su posterior implementación en una experiencia interactiva enfocada en la práctica.
Aunque el proyecto sigue en desarrollo, ya me ha entregado aprendizajes valiosos sobre cómo estructurar el aprendizaje de frameworks frontend y diseñar interfaces que faciliten la práctica directa.