Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
CAPÍTULO IV
CULMINACIÓN
108
CAPÍTULO IV
CULMINACIÓN 1. DESARROLLO DEL PROYECTO
Para el desarrollo del proyecto se ejecutaron las etapas del método de
diseño seleccionado, el cual fue el sugerido por los autores Cuello y Vittone,
en donde cada una de las etapas cumplió un papel fundamental para permitir
llevar a cabo este proyecto.
1.1 . CONCEPTUALIZACIÓN
El resultado de esta etapa fue una idea de aplicación móvil, que ayudará
a enseñar al pueblo venezolano en general acerca de los personajes
históricos del Zulia.
1.1.1. IDEALIZACIÓN
En esta etapa se han recopilado todas las ideas para a realización de
la misma, en donde abarca lo que se quiere lograr con la aplicación. En esta
109
fase se desarrolló la idea de realizar una aplicación sobre los personajes
históricos del Zulia
1.1.2. INVESTIGACIÓN
En esta fase se recopilo toda la información pertinente para la
realización de la app, tanto como bases teóricas, objetivos generales y
específicos.
1.1.3. FORMALIZACIÓN DE LA IDEA
Con respecto a esta etapa, se concretó que aspectos se considerarían
para incluir en la aplicación móvil, seleccionando los personajes más
relevantes y con mayor participación de la historia zuliana con un diseño
minimalista.
Investigando sobre los personajes más relevantes de la historia, se
seleccionaron aquellos con mayor participación, los cuales fueron:
Tabla 1
Personajes Resaltantes Personajes Masculinos Personajes Femeninos
Rafael Urdaneta Rafael María Baralt
Jesús Enrique Lossada Julio Arraga
Ricardo Aguirre Luis Aparicio
Lía Bermúdez Lila Morillo
Princesa Zulia
Fuente: Los Investigadores. (2018)
110
Tabla 1 (cont…) Personajes Masculinos Personajes Femeninos
José Encarnación “Pachencho” Romero Cacique Mara
Humberto Fernández Moran Francisco Eugenio Bustamante
Fuente: Los Investigadores. (2018) En esta etapa del proyecto también se realizó la selección del nombre
del producto, “Zulia Quiz”, el cual fue elegido tras una tormeta de ideas de la
siguiente lista de nombres:
Tabla 2
Propuestas de nombre Chacín, E. Díaz, M. Valera, M.
¿Cuánto sabes de tu querida patria?
El misterio de los Patriotas
Trivia Patriota Reino Venezolano
Reino Patriota Preguntas Naval Guía Venezolana Territorio Patriotal
Ámbito Venezolano Dominio Patriota
Imperio Naval Pal Aprendizaje
Ilustres del Zulia El Zulia y sus héroes ¿Sabes quién fue..?
¿Me llamo...? Héroes del Zulia
¿Que tanto sabes de tus héroes?
Aprendiendo de mi Zulia
¿Que tanto sabes del Zulia?
Tu héroe zuliano
Zulia Quiz Patria Quiz
Quiz Zuliano El Zulia y yo
Trivia Zuliana Zulia Trivia
Iconos del Zulia
Fuente: Los Investigadores. (2018) 1.2. DEFINICIÓN
Se llevó a cabo un diseño de aplicación basándose en la elaboración
de los autores Cuello y Vittone, quienes fueron la idea principal para llegar a
111
estructurar y plasmar esta creación como se demuestra en su área gráfica; a
continuación, se explicarán a detalle todos los conceptos que fueron
necesarios para el desenvolvimiento de los presentes objetivos creando así
un lugar donde apoyarse.
1.2.1. DEFINICIÓN DE USUARIO
Esta app se basó para la creación de una enseñanza corta, fresca y
dinámica con la finalidad de que personas jóvenes o con fines de interés del
país venezolano puedan llegar a comprender mejor las raíces de lo que lo
componen; sea estudiante de promedio, universitario o con intereses de
singulares, la app es un campo abierto en cuanto a edad.
1.2.2. DEFINICIÓN FUNCIONAL
El manejo de la app se plasmó de una manera intuitiva para que sea
sencilla al instante, es decir, se trabajó para que el usuario o persona quien
esté en ella, intuitivamente con gráficos sepa que hacer sin estar minutos
descomponiendo el manejo de la misma; la elaboración de la app se manejó
con fines ilustrativos para ser sencillo a la compresión visual.
112
1.3. DISEÑO Durante la etapa diseño se dio inicio a la gestación de ideas gráficas
para el producto, siempre tras la consideración de los datos y la información
recolectada y analizada. Durante este proceso se plantearon diferentes
propuestas, en primera instancia como bocetos manuales, que atravesaron
un análisis para su posterior selección, modificación y digitalización. El primer
elemento que se desarrolló fue la selección del nombre del producto, el cual
fue “Zulia Quiz”; Como siguiente paso de esta etapa se desarrollaron
propuestas en borrador para el identificador del producto. A continuación, se
muestran los diferentes bocetos realizados:
Figura 1. Bocetos del identificador. Fuente: Díaz, M. (2018)
113
Figura 2. Bocetos del identificador. Fuente: Valera, M. (2018)
Figura 3. Bocetos del identificador. Fuente: Chacín, E. (2018)
114
Tras ser analizadas y evaluadas las propuestas presentadas, se hizo
una selección de aquellos identificadores que reflejaban efectivamente y de
forma gráfica la temática propuesta, reduciendo las propuestas a solo cuatro
identificadores para ser posteriormente digitalizados.
Figura 4. Propuestas seleccionadas en borrador Fuente: Elaboración propia (2018)
115
Figura 5. Propuestas seleccionadas vectorizadas
Fuente: Elaboración propia (2018)
Tras deliberar entre los miembros del grupo y el tutor, finalmente se
eligió el siguiente identificador para el producto final
Figura 6. Propuesta seleccionada vectorizada Fuente: Chacín, E (2018)
116
1.3.1. WIREFRAMES Tras la elección del identificador, se continuó con la elaboración de los
wireframes para las pantallas de la aplicación:
117
Figura 7. Bocetos de pantallas Fuente: Elaboración propia (2018)
Seguidamente, se procedió a vectorizar las pantallas para probar
colores, tamaños, iconografía, entre otros.
118
Figura 8. Primera prueba digital, wireframes
Fuente: Elaboración propia (2018)
119
Figura 9. Primera prueba digital, wireframes Fuente: Elaboración propia (2018)
Asimismo, se realizaron bocetos digitales para la iconografía dentro de
la aplicación.
Figura 10. Bocetos digitales, iconografía
Fuente: Elaboración propia (2018)
120
2. MEMORIA DESCRIPTIVA
Figura 11. Pantalla de inicio
Fuente: Elaboración propia (2018)
Imagen: Se usó un estilo minimalista, con una paleta de colores
limitada y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se manejó una tipografía sans serif en tamaño pequeño,
con bordes rectos para contrastar con los bordes redondeados que se
manejan en el resto de la pantalla.
Retícula: Se utilizó una retícula de una sola columna, que guía la
mirada del usuario de forma natural hacia los elementos en orden de
importancia: Logotipo y barra de carga.
121
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro, con púrpura en el fondo para
resaltar los colores cálidos del logo y la barra de carga.
Botones e íconos: En esta pantalla no se manejan botones, al tratarse
únicamente de la pantalla de carga, que avanza por sí sola a la pantalla de
niveles.
Figura 12. Pantalla Principal
Fuente: Elaboración propia (2018)
Imagen: Se usó un estilo minimalista, con una paleta de colores limitada
y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: En esta ocasión se manejaron dos tipografía sans serif
(Lemon/Milk y Geomanist), la primera para dar énfasis a los títulos de los
niveles, y la segunda para dar sencilla legibilidad a las descripciones de los
mismos.
122
Retícula: Se utilizó una retícula de una sola columna, que guía la
mirada del usuario de forma natural hacia los elementos en orden de
importancia.
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro. Se manejaron los cuadros de
selección de nivel en amarillo claro para contrastar con el fondo púrpura;
tipografía en anaranjado para resalte, y púrpura en las siluestas de los
personajes de niveles no desbloqueados, tanto para destacar en los cuadros
de selección, como para señalar al usuario que el nivel aún no ha sido
completado. Al ser completado, la silueta del personaje pasará a ser la
ilustración completa.
Botones e íconos: Se manejan diversos botones en esta pantalla: los
cuadros de selección de nivel, y los botones de la colección de personajes y
configuración.
Figura 13. Pantalla de configuraciones
Fuente: Elaboración propia (2018)
123
Imagen: Se usó un estilo minimalista, con una paleta de colores limitada
y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se manejó Lemon/Milk en el título de la pantalla
(Configuración) para destacarlo de entre el resto del texto, más pequeño y en
la fuente Geomanist.
Retícula: Se utilizó una retícula modular para distribuir el texto y los
botones en la pantalla.
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro, con naranja en el fondo y
ambos tonos de púrpura en los botones, para diferenciar cuando esté
seleccionado on u off.
Botones e íconos: En esta pantalla se maneja un par de botones para
activar o desactivar el sonido y/o las notificaciones.
Figura 14. Pantalla de recorrido
Fuente: Elaboración propia (2018)
124
Imagen: Se usó un estilo minimalista, con una paleta de colores limitada
y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se utilizó Lemon/Milk tanto para el texto del título de la
pantalla, como para los números presentes en los íconos del recorrido.
Retícula: Se utilizó una retícula jerárquica que guía en el recorrido
visual de los niveles a desbloquear al usuario.
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro. En esta pantalla se agregan
nuevos colores a la paleta únicos de esta pantalla, para destacar elementos
importantes tales como las medallas de los niveles desbloqueados, el
indicativo del siguiente nivel a desbloquear, y los niveles que todavía no
pueden ser jugados.
Botones e íconos: En esta pantalla, prácticamente la totalidad de los
gráficos presentes hacen a la vez de botones que llevan a las pantallas de
adivinar personaje.
Figura 15. Pantalla para adivinar personaje
Fuente: Elaboración propia (2018)
125
Imagen: Se usó un estilo minimalista, con una paleta de colores
limitada y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se manejó Lemon/Milk en las letras para formar el nombre
del personaje, ya que presentan mejor legibilidad y sus esquinas rectas
destacan de entre el resto de las esquinas redondeadas.
Retícula: Se utilizó una retícula jerárquica para realizar una correcta
distribución de los elementos a utilizar: Los botones de comodín, la
ilustración principal, la hilera de letras adivinadas, y la hilera de letras por
adivinar.
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro, con púrpura en el fondo,
púrpura oscuro debajo de la ilustración del personaje a adivinar para
resaltarle de entre el resto de los elementos de la pantalla; amarillo claro
para el fondo de los botones de comodín y letras; amarillo claro y púrpura
claro para los botones de comodín; y púrpura oscuro para indicar que la letra
que correspondía a ese espacio ha sido utilizada.
Botones e íconos: En esta pantalla básicamente todos los elementos
hacen a su vez el papel de botones; para elegir letras y comodines.
126
Figura 16. Pantalla de correcto
Fuente: Elaboración propia (2018)
Imagen: Se usó un estilo minimalista, con una paleta de colores
limitada y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se manejó Lemon/Milk para el texto de esta pantalla, con el
espaciado entre las letras aumentado para mayor impacto visual.
Retícula: Se utilizó una retícula de una sola columna, que guía la
mirada del usuario de forma natural hacia los elementos en orden de
importancia.
Color: En esta pantalla se empleó un degradado oscuro que oculta
levemente la pantalla anterior, de forma que destaquen los elementos
encima de este, con la cinta naranja y los brillos y estrellas en amarillo claro.
127
Botones e íconos: En esta pantalla no se manejan botones, pues la
pantalla desaparece sola.
Figura 17. Pantalla de comodin, revelar letra
Fuente: Elaboración propia (2018)
Imagen: Se usó un estilo minimalista, con una paleta de colores limitada
y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se manejó la tipografía Lemon/Milk en la totalidad de esta
pantalla, pues el texto que se maneja es corto y se buscó darle mayor
impacto.
Retícula: Se utilizó una retícula de una sola columna, que guía la
mirada del usuario de forma natural hacia los elementos de forma natural.
128
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro, con un degradado oscuro que
oculta la pantalla anterior, y un contraste entre naranja y púrpura oscuro para
resaltar la diferencia entre el fondo el botón de acción.
Botones e íconos: Se maneja un único botón que llama a la compra del
comodín seleccionado.
Figura 18. Pantalla de comodin, revelar pista
Fuente: Elaboración propia (2018)
Imagen: Se usó un estilo minimalista, con una paleta de colores limitada
y tipografía sans serif; estilo que se maneja en toda la aplicación.
Tipografía: Se manejó la tipografía Geomanist, pues el texto en esta
pantalla es abundante y esta fuente facilita la legibilidad de la información.
129
Retícula: Se utilizó una retícula de una sola columna, que guía la
mirada del usuario de forma natural.
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro, con un degradado oscuro que
oculta la pantalla anterior, y un contraste entre naranja y púrpura oscuro para
resaltar la diferencia entre el fondo el botón de acción.
Botones e íconos: Se maneja un único botón que devuelve al usuario a
la pantalla anterior.
Figura 19. Pantalla de colección
Fuente: Elaboración propia (2018)
Imagen: Se usó un estilo minimalista, con una paleta de colores limitada
y tipografía sans serif; estilo que se maneja en toda la aplicación.
130
Tipografía: Se manejó la tipografía Lemon/Milk para el título de la
pantalla.
Retícula: Se utilizó una retícula de doble columna, para una mejor
distribución de los personajes.
Color: Se manejó la paleta de colores estándar de la aplicación: dos
tonos de púrpura, anaranjado y amarillo claro. Se empleó púrpura claro para
el fondo, y púrpura oscuro para la silueta de los personajes que aún no han
sido desbloqueados, dando a entender al usuario que en ese espacio va la
etiqueta de un personaje que no haya sido utilizado.
Botones e íconos: Se maneja un botón que devuelve al usuario a la
pantalla anterior. Además, al tocar un personaje desbloqueado, lleva a otra
pantalla que abre la biografía del personaje seleccionado.