Módulo 2: Diseño de UI y Prototipado de Alta Fidelidad - JuanHerreraP/UX_Proyecto_Mejoramiento_Alarma GitHub Wiki

Módulo 2: Diseño de UI y Prototipado de Alta Fidelidad

4. Wireframes y Sistema de Diseño

Actividades

  • Wireframes:
    • Creación de wireframes en blanco y negro para:
      • App móvil: Flujo completo del Foto-Reto.
      • Dashboard web: Pantalla principal de estadísticas.
  • Sistema de Diseño (Design System):
    • Definición de paleta de colores:
      • Naranja (#FF8C42) → Energía y motivación.
      • Azul (#005F99) → Confianza y claridad.
      • Gris claro (#F5F5F5) → Fondo neutro.
    • Tipografía:
      • Titulares: Montserrat Bold.
      • Texto: Open Sans Regular.
    • Estilo de íconos: Líneas simples (outline), consistentes en grosor y proporción.
  • Style Tile: Documento visual con la guía de colores, tipografías, botones, íconos y ejemplos de uso.

Entregables

  1. Wireframes:

    • App móvil – Flujo del Foto-Reto:
      1. Pantalla de inicio con lista de alarmas.
      2. Pantalla de configuración de alarma.
      3. Pantalla de reto activo (tomar foto).
      4. Pantalla de confirmación.
    • Dashboard web – Estadísticas:
      1. Vista de gráficas de tiempo promedio.
      2. Listado de retos completados.
      3. Filtros por fecha y tipo de reto.

  2. Style Tile:

    • Paleta de colores.
    • Tipografías.
    • Estilo de íconos.
    • Botones y componentes principales.

  3. Design System (v1):

    • Guía completa con componentes reutilizables, espaciados, tamaños y comportamientos.

Wireframe (Incluir aquí los Wireframe)

Wireframe App Móvil Wireframe Dashboard Web

5 y 6: Mockups y Prototipo Interactivo

Actividades

  • Mockups de Alta Fidelidad:
    • Aplicar el Style Tile a los wireframes previamente definidos.
    • Crear las interfaces finales con colores, tipografías, íconos y estilos coherentes.
  • Prototipo Interactivo:
    • Utilizar Figma o Adobe XD para:
      • Conectar pantallas y simular interacciones.
      • Simular el flujo completo del Foto-Reto desde la configuración hasta la desactivación de la alarma.
      • Incluir animaciones y transiciones básicas para una experiencia más realista.

Entregables

  1. Mockups de Alta Fidelidad:
    • App móvil: Pantallas de inicio, configuración de alarma, reto activo y confirmación.
    • Dashboard web: Pantallas de estadísticas, configuración avanzada y reportes.
  2. Prototipo Interactivo Navegable:
    • Disponible en enlace compartido desde Figma/Adobe XD.
    • Flujo principal: Configuración y ejecución del Foto-Reto.
    • Compatibilidad para pruebas en escritorio y móvil.

Módulo 3: Desarrollo de UI (Maquetación)

7: Maquetación Web

Actividad:

  • Codificar la maqueta del dashboard web (máximo 6 pantallas).
  • Ejemplos de pantallas:
    • Pantalla de login.
    • Dashboard principal con estadísticas.
    • Página de detalle de alarma.
  • Tecnologías a usar: HTML, CSS y JavaScript.

Entregable:

  • Maqueta navegable de la aplicación web.

8: Maquetación Móvil

Actividad:

  • Codificar la maqueta de la aplicación móvil (máximo 6 pantallas).
  • Ejemplos de pantallas:
    • Pantalla principal con lista de alarmas.
    • Pantalla de configuración del Foto-Reto.
    • Pantalla de alarma sonando solicitando la foto para desactivarla.
  • Tecnologías posibles:
    • Kotlin/XML (Android).
    • SwiftUI (iOS).
    • Frameworks multiplataforma como React Native o Flutter.

Entregable:

  • Maqueta navegable de la aplicación móvil.