Ejercicio práctico: Diseñar un prototipo funcional con IA
Objetivo
Diseñar un prototipo funcional y navegable de una aplicación o página web empleando herramientas de Inteligencia Artificial para acelerar las fases de ideación, wireframing, diseño visual e interactividad.
Competencias a desarrollar
• Comprender el flujo de diseño UX/UI asistido por IA.
• Utilizar herramientas IA para generar prototipos, interfaces y contenido visual.
• Aplicar criterios de accesibilidad y coherencia estética.
• Presentar un prototipo navegable con documentación clara del proceso.
Herramientas recomendadas
- Galileo AI / Uizard
- Framer AI / Relume AI
- Runway ML / Canva Magic Animate / Pika Labs
- Maze AI / Hotter + IA / ChatGPT UX Analyzer
Instrucciones paso a paso
1. Definir el propósito del proyecto
Crea un brief de diseño UX con los siguientes puntos:
• Nombre del proyecto:• Tipo de aplicación o web: (ej. app de reservas, landing page educativa, dashboard de gestión).
• Objetivo principal: (informar, vender, conectar, educar).
• Público objetivo: (jóvenes, empresas, usuarios técnicos…).
• Valor diferencial: (simplicidad, estética, personalización, innovación IA).
Ejemplo:
Nombre: “EduFlow”
Tipo: Plataforma web para cursos online interactivos.
Objetivo: Mejorar la experiencia de aprendizaje con IA.
Público: Jóvenes profesionales entre 25 y 40 años.
Valor: Interfaz clara, intuitiva y adaptativa según el progreso del usuario.
2. Generar el wireframe inicial (estructura básica)
Herramienta sugerida: Uizard o Galileo AI.
Prompt ejemplo:
“Crea el wireframe de una app para aprender diseño con IA. Debe incluir pantalla de inicio, menú lateral, sección de cursos, progreso del usuario y botón de chat.”
Exporta el resultado en formato imagen o enlace editable (Figma o PDF).
Ajusta la jerarquía de navegación: menú principal, CTA, zonas de contenido.
3. Diseñar el prototipo visual
Herramienta sugerida: Framer AI o Relume AI.
Prompt ejemplo:
“Diseña una interfaz moderna y accesible para EduFlow, estilo minimalista, fondo blanco con acentos azules y dorados, tipografía Sans Serif, estructura hero + tres secciones + footer.”
El sistema generará:
• Paleta de color coherente.
• Tipografía automática.
• Elementos visuales (botones, íconos, cards).
Personaliza los colores, bordes y tipografía según la identidad de marca.
4. Incorporar microinteracciones y animaciones
Herramientas sugeridas: Runway ML, Kaiber o Canva Magic Animate.
Acciones recomendadas:
• Transición suave entre pantallas.
• Animación de aparición del logo.
• Movimiento del CTA principal (hover, fade-in).
Mantén la naturalidad: el movimiento debe apoyar la atención del usuario.
5. Test de accesibilidad y experiencia
Usa IA para verificar la accesibilidad:
• Contrast Checker IA → comprueba legibilidad.
• ChatGPT UX Analyzer → evalúa flujo de navegación (“Describe posibles mejoras de usabilidad”).
• EqualWeb AI / axe DevTools → analiza etiquetas alt, roles y tamaños de texto.
6. Entrega del prototipo final
Incluye en el documento de entrega:
1. Enlace navegable (Framer, Uizard o Figma).
2. Capturas de las pantallas principales.
3. Descripción de herramientas y prompts utilizados.
4. Análisis UX + accesibilidad.
5. Video corto o GIF (opcional) mostrando animaciones o navegación.
Ejemplo de prototipo resuelto
Proyecto: EduFlow – App para cursos interactivos
• 4 pantallas: Inicio, Cursos, Progreso, Chat.
• Paleta: Azul #0B1B33, Dorado #CBA135, Blanco #FFFFFF.
• Animaciones: aparición de tarjetas con efecto “slide in”.
• Prueba de accesibilidad: contraste 5.1:1, tipografía Inter 16 pt.• Herramientas: Galileo AI → wireframe | Framer AI → diseño final | Canva
Animate → motion.
Resultado: visual.
Interfaz limpia, intuitiva, accesible, con flujo lógico de navegación y consistencia
Recursos y lecturas recomendadas
• Norman, D. (2023). The Design of Everyday Things (IA Edition).
• Krug, S. (2020). No me hagas pensar: Usabilidad en la web.
• Nielsen, J. (2022). UX Metrics & AI Automation.
• https://framer.com/ai
• https://uizard.io
• https://galileo.ai
• https://relume.io
• https://runwayml.com