Diseño de aplicaciones centrado en interfaz
PROBLEMA 1
Diseño de interfaz, prototipo y aplicación web
Una de las problemáticas más comunes de las empresas es hacer conocer sus productos o servicios. Los grandes corporativos gastan cifras millonarias en publicidad que pueda dar a conocer aquello que ofrece. Desde la década de los noventa del siglo XX el desarrollo de la World Wide Web promovió que las compañías se den a conocer de forma digital y masiva.
La problemática que debes resolver es la creación de un sitio que distinga tu empresa de otras para lo cual deberás realizar la propuesta de diseño del sitio, presentarla por medio de un prototipo para finalmente crear el portal con los datos de tu empresa de desarrollo multimedia.
Las empresas de diseño multimedia realizarán su sitio de internet con las siguientes secciones:
- Inicio
- Quiénes somos
- Servicios
- Integrantes
- Portafolio
- Contacto
Escoge la fase que quieras leer
Fase 3
Maquetación de sitio
Para la conclusión del problema 1 los alumnos deberán de realizar el sitio que se prototipó con inVision. Para lo cual se les comparten los siguientes materiales que los ayudarán a realizar el sitio por medio de WordPress y el tema DIVI.
Recuerda que al trabaja con esta metodología de resolución de problemas, ustedes como equipo deben encontrar la solución a la generación del sitio. El único mandatorio para esta actividad será que se desarrolle con WordPress y se use el tema DIVI.
Revisar el siguiente vínculo para entender lo que es WordPress:
Atención: para instalar correctamente el tema no dberas descomprimir el archivo .zip
En los videos que se comparten en la sección, se explica como hacer un proyecto de sitio web (con el tema de un pintor) desde cero. Incluyendo la explicación del proceso de instalación de WordPress en un servidor y el tema DIVI. Los equipos pueden ver los videos y adaptar a su proyecto ya que se explican desde la creación de una página hasta la configuración del menú y el footer así implementación de elementos multimedia.
NO ES NECESARIO HACER EL SITIO DEL PINTOR.
En la clase, se le asignará un espacio e instalación de WordPress. Al líder de equipo se le darán los accesos pertinentes y el equipo de programación deberá realizar la instalación del tema DIVI para poder comenzar a trabajar.
Evaluaciones a cargo del líder:
Deberás entregar tus archivos de evaluación:
Lista de cotejo: cotejo_problema1_p3.pdf
Evaluación de equipo: Equipo_listaTareas_03.xls
Para la lista de tareas agrega la pestaña correspondiente a las tareas de la etapa 3 (WordPress) del problema 1.
Vínculo de para entrega de la lista de tareas:
https://myuvmedu-my.sharepoint.com/:f:/g/personal/victorhugo_martinez_my_uvm_edu_mx/Esa3TNVJaglDjdI9D5mQIpsBNyRkeyq9SkkGEWCQZ6MyWQ?e=h4eU2z
Fecha de entrega:
20 de septiembre antes de las 16:00 horas.
Edición de sitios por medio de wordpress y el tema DIVI
Fase 2
Prototipo en inVision
Para la ejecución de esta parte, los equipos deberán haber concluido sus seis diseños de interfaz de la etapa previa.
En esta parte los equipos deberán de generar por medio de la plataforma inVision un prototipo que permita simular como sería la experiencia de navegación dentro del sitio que se planea crear. InVision permite con sencillez y eficiencia mostrar a clientes como sería la navegación aproximada y normalmente sirve para hacer ajustes finos en el diseño a petición del cliente y del mismo equipo de producción
Para comenzar el proyecto se sugiere ver el video complementario sobre el inVisión.
Deberás revisar si la calidad de compresión de tus JPG fue la correcta. Recuerda exportar del archivo PSD al JPG por medio de la opción de Save for web legacy (guardar para web heredado).
Si tus imágenes no presentan píxeles que demeriten la calidad, puedes utilizar los archivos de la etapa anterior. De lo contrario, tendrás que volver a exportarlos (esos archivos no se subirán a Teams se subirán a tu cuenta de inVision).
Realiza toda la interacción de las secciones de tu sitio. Tanto de los botones que se encuentran en la zona de menú como en alguna otra zona que tenga un botón para ir a otra de las secciones del sitio. Además, coloca en el logo de tu empresa el vínculo que lleva a la página de inicio.
Comparte con el profesor por medio de la opción pública tu vínculo al proyecto. Lo realizarás por medio de dos opciones:
1) Archivo PDF en Teams (asignación creada para la entrega):
Nombre del archivo: equipo_inVision.pdf
2) Manda por correo electrónico (victor@plastik.com.mx) con el subject: equipo_inVision
Indentificate en el correo como el líder de equipo y coloca el vínculo a tu proyecto de inVision.
Evaluaciones a cargo del líder:
Deberás entregar tus archivos de evaluación:
Lista de cotejo: cotejo_problema1_p2.pdf
Evaluación de equipo: Equipo_listaTareas_02.xls
Para la lista de tareas agrega la pestaña correspondiente a las tareas de la etapa 2 (inVision) del problema 1.
Vínculo de para entrega de la lista de tareas:
https://myuvmedu-my.sharepoint.com/:f:/g/personal/victorhugo_martinez_my_uvm_edu_mx/Esa3TNVJaglDjdI9D5mQIpsBNyRkeyq9SkkGEWCQZ6MyWQ?e=h4eU2z
Fecha de entrega:
7 de septiembre antes de las 23:59 horas.
Video de apoyo para la fase 2
Diseño de un prototipo con invision
Aprende a realizar un prototipo de una página web por medio de inVision. Sube varios bocetos en formato .jpg y conéctalos entre sí por medio de zonas activas.
Fase 1
Diseño de interfaz
Las empresas realizarán por medio de Photoshop el diseño de la interfaz principal y las interiores considerando lo siguiente:
Construir utilizando el grid 960 (1020 px de ancho).
Contemplar con base en la imagen de anatomía de un sitio web colocar en la página de sitio:
- Marca con menú de navegación
- Banner o slider
- Servicios principales
- Llamada a la acción
- Información de la empresa
- Portafolio
- Redes sociales
- Pie de página
Las páginas interiores (generales) deben mantener en su estructura:
- Marca con menú de navegación
- Banner identificador de la sección
- Dos bloques de información acompañados de imágenes.
- Llamada a la acción
- Redes sociales
- Pie de página
La página de portafolio deberá contar con:
- Marca con menú de navegación
- Banner identificador de la sección
- Tres categorías de portafolio
- Una galería por categoría (para el boceto sólo se simula 1)
- Redes sociales
- Pie de página
La página de contacto deberá contar con:
- Marca con menú de navegación
- Banner identificador de la sección
- Un formulario para el usuario y la ubicación de la empresa por medio de mapas de google.
- Redes sociales
- Pie de página
Para la entrega los equipos subirán a Teams (con respaldo a OneDrive) una carpeta con las imágenes en formato JPG.
Nombre de carpeta: Equipo_interfaz
Adentro de la carpeta archivos:
- inicio.jpg
- somos.jpg
- servicios.jpg
- integrantes.jpg
- portafolio.jpg
- contacto.jpg
Fecha de entrega de la actividad:
Viernes 27 de agosto antes de las 19:00 horas.
Video y recursos útiles para el ejercicio
Páginas para ideas de sitios:
https://html5up.net/
https://themewagon.com/themes/
https://es.wix.com/website/templates
https://themeforest.net/category/site-templates
De WordPress DIVI:
https://www.elegantthemes.com/layouts/
Pinterest: ideas para creación de marca de su empresa
https://pin.it/36twtdv
Diseño de interfaz con Photoshop
Instrucciones de ejercicio:
En este tutorial contarás con los siguientes elementos o recursos:
1) ZIP: recursos de imágenes llamadas ElementosInterfaz
2) Video1: introducción al diseño de interfaz web
3) Video 2: realizar el header del sitio y una sección de contenido
4) Video 3: realizar segunda sección de contenido y footer
Video con introducción a diseño de interfaz
Video con explicación de diseño de header y contenido
Video con explicación de sección 2 y footer.