Boceto Interfaz Grafica

Angie Lorena Bautista Monroy

Emely Sherinsse Molina Olaya
 Dayana Lizeth Gonzalez Romero
Producción De Multimedia Titulada Virtual
Ficha - 1667834

Servicio Nacional De Aprendizaje SENA

Storyboard
Docente: Errol Mow Rodriguez
12 de Diciembre del 2018
Bogotá D.C. – Colombia
CONTENIDO

1. Introducción.

2. Desarrollo
Video Comercial
App
Pagina Web

3. Conclusión.

4. Bibliografía.
 INTRODUCCION
En este Trabajo se realizo el boceto inicial para el video comercial, App y la pagina web,

los cuales se crearon en Adobe Ilustrator, la finalidad es darle un diseño proporcional con

los colores definidos por el cliente, siendo muy simplificada y coherente, para determinar

que el usuario se sienta satisfecho y desee regresar al sitio.

 DESARROLLO

VIDEO COMERCIAL

 Inicio Comercial: se muestra el logo tipo de Sobre ruedas y información de

contacto.

Botón 

 Durante la reproducción de el video, pulse este botón para avanzar rápidamente

Botón 

 Pulse este Botón para iniciar la reproducción de una canción o video

 Durante la Reproducción, pulse este botón para realizar una pausa

Botón 
  Durante la reproducción mantenga pulsado este botón para retroceder

rápidamente

Para la APP

 El objetivo de esta pantalla es presentar

el logo de la aplicación mientras esta

carga y se comunica con el servidor para

descargar todos los datos necesarios.

Esquema de Pantalla de Inicio de Sesión

En esta pantalla se dispone al usuario preregistrado del inicio de sesión en la

aplicación y al usuario no registrado la posibilidad de registrarse pulsando sobre el

texto Registrate.

Esquema de Pagina de Presentación

Mediante el uso de esta pantalla se

pretende presentar una serie de

imágenes que muestren capturas de

pantalla de la aplicación y sirvan de

presentación para nuevos usuarios.

Pantalla de inicial de carga: Se muestra una animación del logo diseñado mientras se

cargan los datos necesarios y actualizaciones de información del servidor.

Inicio de Sesión: Pantalla de inicio de sesión para usuarios registrados

Recordarme: Recordar la información de usuario

Registrarse en la aplicación: Campos para registrarse en la App

Carrusel de Pantallas: Solo aparece una vez completado el registro o al seleccionar

ayuda en el menú de la aplicación:

Pantalla Principal: Muestra múltiples opciones como perfil, estadísticas, nuevas

solicitudes.

Esquema Pagina Principal

Mediante el uso de la página principal se

pretende mostrarle a usuario los accesos

directos para realizar (Nueva Solicitud, Cotizar

Envió) y demás.

Perfil: Sección en la cual el usuario puede modificar sus datos y preferencias.

Estadísticas: Sección que muestra información de la participación del usuario.

Alertas: menú que ofrece una serie de alertas al usuario sobre avisos de la aplicación.

Nueva Solicitud: Solicitud de recogida de la mensajería

Bici-Mensajeros Registrados: Bici mensajeros de confianza registrados

Información del Bici-Mensajero: Información de la persona que hará el servicio

Ruta Estimada: Ruta Trazada para llegar al lugar destino

Hora Estimada de entrega: Hora Estimada en la cual se entregará el envió.

Botón Pago Electrónico: Para pagos electrónicos.

Solicitar Recogida: Solicitud de recogida de la mensajería

Ingresar Dirección Recogida: Dirección de recogida de la mensajería

Ingresar Dirección Destino: Dirección para llevar la mensajería

Cotizar Envió: Información del valor Aproximado

Peso: Peso en Kg Estimado del Envió

Contáctanos: Números de teléfono para comunicarse con un consultor y correo

electrónico.

Chat: Chatea con un Asesor para cualquier inquietud

Toda Pantalla de la aplicación tiene dos versiones, una para cada vista, vertical u

horizontal, con las mismas funciones.

Página WEB.

Conózcanos: Información de la empresa Misión, Visión, Metas.

Bici-Mensajeros: Fotos y Nombres de los Bici-Mensajeros

Usa Tu APP: Información Uso de La APP

Cotiza Tu Envió: Valor Aproximado De él Envió

Nueva Solicitud: Solicitud de recogida de la mensajería

Peso: Peso en Kg Estimado del Envió

Contáctanos: Números de teléfono para comunicarse con un consultor y correo

electrónico.

Chat: Chatea con un Asesor para cualquier inquietud

 CONCLUSIONES

 Para crear confianza con el usuario, debemos crear una pagina ordenada que el

usuario no tenga problemas para usarla

 Para realizar un diseño adecuado, debemos tener presente el comportamiento de

los usuarios, frente al entorno Tecnológico, donde debemos tener una interfaz

Funcional, Usable y Navegable, donde no hagamos pensar a los usuarios y

eliminar barreras, Mostrar claramente lo principal, y el texto breve y claro,

utilizando los estándares, estética y un lenguaje visual.

BIBLIOGRAFÍA

file:///C:/Users/familia%20lopez%20Gonzal/Documents/SENA/material-formacion-

sistemas-de-navegacion.pdf

file:///C:/Users/familia%20lopez

%20Gonzal/Documents/SENA/interactividad_aplicaciones.pdf
 DESARROLLO

Explicación del Storyboard: