PG02 – Diseño y Prototipos de Micrositio y App Móvil.


PROYECTO 02     |   GRUPAL   |    15%  


PROCESO DE DISEÑO Y GENERACIÓN DE PROTOTIPOS PARA MICROSITIO Y APP MOVIL.

 

 

Temática: El mismo de la Actividad 01.

Concepto: El mismo de la Actividad 01. Solamente se debe generar uno nuevo si es necesario.

Proceso: Investigación, bocetería, análisis de flujo de navegación entre pestañas, definir estructura y retícula (grid), recolección del contenido, aplicación de principios del diseño para diseño del micrositio y la app móvil.

Descripción General: Realizar el proceso completo para el diseño de micrositio y de su aplicación móvil (conceptualizada en la actividad anterior).

Cada uno (micrositio y app) debe contener: 1 página principal y 4 páginas internas, un flujo de navegación, información (previamente clasificada), correcciones aplicadas a la propuesta gráfica y un proceso de diseño completo para todas las pantallas nuevas (incuyendo bocetería inicial y final, ademas de maquetas o wireframes). 

Debe cumplir con un objetivo de comunicación (también definido por el grupo tomando en cuenta la navegación del usuario).

Contendido: Textos (información), fotografía(s), línea gráfica, iconografía, tipografía, logotipos.

Criterios: Claridad en el objetivo del micrositio y app, funcionalidad del micrositio y de la App, creatividad e innovación en el diseño, excelente ortografía y redacción.

Condiciones: Actividad grupal.

  • Puntualidad con el horario de entrega 
  • Elementos multimedia interactivos 
  • Diseño competitivo 
  • Calidad en la entrega

Documento de soporte: Reunir todo el proceso de diseño, incluyendo bocetería, maquetas y propuesta gráfica final, además colocar enlaces para visualizar los prototipos. Entrega en formato PDF, diseñado con la línea gráfica definida previamente.

Importante: El documento y presentación digital deben ser diseñadas por el grupo. No se permite el uso de plataformas como Canva para solucionar ninguna parte del proyecto.

Puntos a realizar para Micrositio y App: 

  1. Proceso de diseño (bocetería y desarrollo completo).
  2. Flujos de Navegación (5 páginas).
  3. Sistema de Diseño (propio).
  4.  Wireframes o Maquetas.
  5. Prototipos interactivos.

 

Cronograma de la actividad:

 

Detalles preliminares. Retroalimentación Proyectos. Taller de Clase.

Detalles completos de la Actividad 02. Taller y Revisión.

Diseño de Micrositio + S.D.D. para Micrositio y App Móvil. Taller y Revisión.

Semana 07 
(del 11 al 16 de agosto)

Semana 08 
(del 18 al 23 de agosto).

Semana 09 
(del 25  al 30 de agosto).

 

Diseño de App Móvil + Flujos de Navegación. Taller y Revisión.

Wireframes, desarrollo de prototipos en XD o Figma. Documento. Revisión.

Entrega y Defensa de Proyecto.

Semana 10 
(del 01 al 06 de septiembre)

Semana 11 
(del 08 al 13 de septiembre).

Semana 12 
(del 16  al 20 de septiembre).

 

S07 – Detalles Preliminares y Taller de Clase.

Respuesta a preguntas:

¿Qué partes contendrá su sistema de diseño?
¿Que cambios hay que aplicar a elementos existentes?
¿Se mantendrán las mismas retículas o se cambiarán?
¿Es el micrositio un complemento para la app? ¿Cómo lo complementa?
Información y contenido para 4 pantallas internas de micrositio y app.

 


 

S08 – Detalles completos Actividad 02. Revisión y taller de clase.

01. Detalles completos actividad: Explicación de actividad. Revisar detalles para aclarar de dudas y consultas. 

02. Revisión: en salas grupales se realizará una revisión del taller de la semana anterior para verificar los avances del proyecto y el aporte de integrantes de grupo a la actividad.

03. Taller de Clase: Contenido completo para las paginas internas del micrositio. Informacion final: revisada y aprobada por el grupo. Asignación de actividades y fechas en cronograma.

 


 

S09 – Wireframes y Diseño de Estructuras de Micrositio.

  1. Diseño de Micrositio: Aplicar cambios y sugerencias de la retroalimentacion de clase y rúbrica.
  2. Bocetería: 4 Páginas internas considerando la información final definida por el grupo en la semana 08.
  3. Retículas: Seleccionar las retículas a utilizar para las paginas internas y definir parámetros para estandarizar la propuesta: márgenes, distancias, jerarquía, etc.
  4. Taller de clase: Contenido completo para las paginas internas de la app. Información final: revisada y aprobada por el grupo. Confirmar cumplimiento de cronograma de actividades.
  5. Revisión: en salas grupales se realizará una revisión del taller de la semana anterior para verificar los avances del proyecto y el aporte de integrantes de grupo a la actividad.

 


 

S10 –  Entrega y Presentación.

  1. Diseño de App: Aplicar cambios y sugerencias de la retroalimentación de clase y rúbrica.
  2. Bocetería: 4 Páginas internas considerando la información final definida por el grupo en la semana 09.
  3. Retículas: Seleccionar las retículas a utilizar para las páginas internas y definir parámetros para estandarizar la propuesta: márgenes, distancias, jerarquía, etc.
  4. Taller de clase: Definir dos flujos de navegación (1 de proceso y 1 de estructura) para micrositio y app.
  5. Revisión: en salas grupales se realizará una revisión del taller de la semana anterior para verificar los avances del proyecto y el aporte de integrantes de grupo a la actividad.
  6. Proceso de Diseño: Bocetería de páginas (indicadas anteriormente), maquetas manuales y digitales, iconografía, pruebas de composición y diagramación de todas las pestañas del micrositio.

 


 

S11 – Wireframes, desarrollo de prototipos en XD o Figma. Documento. Revisión. 

  1. Propuesta de Diseño: Realizar el proceso de diseño digital de todas las estructuras definidas en el proceso de bocetería, colocando los elementos de diseño finales (reales) y con la información que será publicada.
  2. Wireframes: Digitalizar una maqueta final por cada pestaña colocando la retícula y aplicando todos los aspectos aprendidos en clase.
  3. Opcional – Bocetos, esquemas, diagramas: Por si se necesita presentar o explicar algo que se comprendería mejor por medio de alguno de estos recursos de representación.
  4. Prototipos de App y Microstio elaborados en Adobe XD o en Figma. Funcionamiento de todos los elementos que requieren interacción y crear la navegación del usuario.
  5. Taller de clase: Diseño y estructura de documento. Análisis de Flujos de Navegacion  para prototipos.
  6. Propuesta final para entrega: Diseño de documento que contendrá todo el proceso y propuesta final. Reunir lo realizado en semanas anteriores.

 


 

S12 –  Entrega y Defensa de Proyecto.

  1. En la presentación digital incluir: Wireframes, flujos de navegacion, proceso de de diseño y propuesta de diseño final de micrositio y app (5 páginas de cada uno). 
  2. Documento de soporte con todos los puntos del proyecto. El documento debe estar diseñado con la línea gráfica del proyecto y unificada con la propuesta de diseño de micrositio y app. Se entregará en formato PDF y con las siguientes indicaciones: 

a. Entrega de documento en formato PDF que contenga los siguientes puntos:

  1. Portada.
  2. Proceso de Diseño (bocetería completa).
  3. Sistema de Diseño.
  4. Sistema de Retículas.
  5. Wireframes o Maquetas.
  6. Flujos de Navegación.
  7. Propuesta de Diseño Final de Micrositio y App.
  8. Enlace a Prototipos de Micrositio y App.

Portada de documento PDF

  1. Nombre asignatura.
  2. # Grupo de clase.
  3. # Grupo de trabajo.
  4. Listado de integrantes + Porcentaje de colaboración.
  5. Fecha de entrega.

Ejemplo listado de integrantes:

Apellidos, Nombres | Estudiante 01 – 100%
Apellidos, Nombres | Estudiante 02 – 100%
Apellidos, Nombres | Estudiante 03 – 60%
Apellidos, Nombres | Estudiante 04 – 80%
Apellidos, Nombres | Estudiante 05 – 0%

Porcentaje es la base de evaluación de cada integrante. No hay cambios de porcentaje después de la entrega.


Enviar en Aula Digital | Proyecto 02 Diseño y Prototipos de Micrositio y App - Documento en formato PDF ( 1 representante de grupo únicamente. No olvidar incluir portada con porcentajes de colaboración)

SEMANA 12: A más tardar 5 minutos antes de la hora de inicio de su clase (sesión sincrónica). 

No se permiten entregas tardías ni por ningún otro medio que no sea Aula Digital en el apartado correspondiente.

 


Video de referencia para Flujogramas.

 

 


Clase de la Semana sobre Micrositios y Sistemas de Diseño.

 

 


Ejemplos de flujos de navegación

 

Ejemplos de clase:

 


Ejemplos de Micrositios

 

 

 

 

 


Video-clases Adobe XD (Prototipado).

 

Ver lista completa >>

Video-clases FIGMA (Prototipado).

Ver lista completa >>

 


<< Regresar a principal


Enlaces adicionales.

Sitio Web | Blog
Podcast | Newsletter
Grupo de Facebook
Paletas cromáticas
Comunidad Creativa
Wikis | Roadmap


© TITO CAMPOS  |  titocampos.com  | Todos los derechos reservados. El Salvador.c