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.