CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este...

23
CAPÍTULO IV CULMINACIÓN

Transcript of CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este...

Page 1: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

CAPÍTULO IV

CULMINACIÓN

Page 2: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

77

CAPITULO IV

CULMINACIÓN

1. DESARROLLO DEL PROYECTO.

A continuación, se mostrará el proceso de diseño realizado para la

elaboración del proyecto de acuerdo al método de diseño seleccionado,

respetando cada etapa que integre el mismo y considerando lo expuesto en

los criterios.

1.1. INFORMACIÓN - DOCUMENTACIÓN.

Para la elaboración del proyecto, se ha realizado una investigación

con el objetivo de recopilar la información que será utilizada en el producto;

para ello, ha sido necesaria la visita hasta el lugar realizando un tour dentro

de las casas de la zona colonial de coro, tomando fotografías, elaborando

preguntas y recibiendo la asesoría de personas de la localidad las cuales

poseen el conocimiento y experiencia en el campo.

Así mismo, con la información obtenida de cada casa seleccionada, se

analiza y define el contenido a utilizar, redactándolo y complementándolo

para luego organizarlo en cada uno de los cuentos, continuando así con la

ejecución del diseño interactivo.

Page 3: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

78

1.2. BOCETOS.

En esta fase se crea el concepto, el diseño y la aplicación de ideas al

proyecto, comenzando por la realización de los bocetos manuales en los

cuales se plantea todas las alternativas y propuestas que se encuentran

vinculadas al proyecto, para luego elaborar la digitalización de los diseños

seleccionados, concretando lo que caracterizará a la seria de cuentos

interactivos.

1.2.1. IDENTIFICADOR.

Figura 1. Propuesta de Logo N° 1.

Fuente: Imperato, A. (2015)

Figura 2. Propuesta de Logo N° 2.

Fuente: Imperato, A. (2015)

Page 4: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

79

Figura 3. Propuesta de Logo N° 3.

Fuente: Solarte, Y. (2015)

Figura 4. Propuesta de Logo N° 4. Fuente: Solarte, Y. (2015)

Figura 5. Propuesta de Logo N° 5. Fuente: Solarte, Y. (2015)

Page 5: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

80

Figura 6. Propuesta de Logo N° 6. Fuente: Solarte, Y. (2015)

Figura 7. Propuesta de Logo N° 7. Fuente: Solarte, Y. (2015)

Figura 8. Propuesta de Logo N° 8. Fuente: Solarte, Y. (2015)

Page 6: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

81

Figura 9. Propuesta de Logo N° 9. Fuente: Peña, E. (2015)

Figura 10. Propuesta de Logo N° 10.

Fuente: Peña, E. (2015)

Figura 11. Propuesta de Logo N° 11. Fuente: Peña, E. (2015)

Page 7: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

82

Figura 12. Propuesta de Logo N° 12. Fuente: Imperato, A. (2015)

1.2.2. BOTONES.

Figura 13. Botón Pasar Páginas.

Fuente: Imperato, A. (2015)

Figura 14. Botón Ir al Inicio. Fuente: Imperato, A. (2015)

Page 8: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

83

Figura 15. Botón de Comienzo. Fuente: Imperato, A. (2015)

Figura 16. Botón para reproducir el Audio. Fuente: Imperato, A. (2015)

Figura 17. Botón para detener el Audio. Fuente: Imperato, A. (2015)

1.3. TECNOLOGÍA.

Para continuar con la creación del producto, se realiza la digitalización

de cada uno de los elementos ya realizados a lápiz; para ello, se dará uso de

computadores que contengan los programas de la suite de Adobe: Illusrator

versión CS6 para la creación de las ilustraciones, InDesing versión CS6 para

la realización de maquetación y diagramación de los textos y vectores

Page 9: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

84

gráficos, y finalmente, Flash versión CS6 para la realización de las

animaciones 2D, la integración del audio e interactividad.

1.4. DESARROLLO CREATIVO.

A continuación, se muestran los criterios tomados para la realización

del producto final, la digitalización general, paleta de colores, aplicación de

retícula y diagramación antes planteados con los elementos gráficos,

terminando así con el diseño del producto.

Figura 18. Logotipo. Fuente: Imperato, Peña y Solarte (2015)

Figura 19. Botón para Pasar Páginas en reposo.

Fuente: Imperato, Peña y Solarte (2015)

Page 10: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

85

Figura 20. Botón para Pasar Páginas en Over. Fuente: Imperato, Peña y Solarte (2015)

Figura 21. Botón Ir al Inicio en Reposo. Fuente: Imperato, Peña y Solarte (2015)

Figura 22. Botón Ir al Inicio en Over. Fuente: Imperato, Peña y Solarte (2015)

Page 11: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

86

Figura 23. Botón de Comienzo en Reposo. Fuente: Imperato, Peña y Solarte (2015)

Figura 24. Botón de Comienzo en Over. Fuente: Imperato, Peña y Solarte (2015)

Figura 25. Botón Reproducir el Audio. Fuente: Imperato, Peña y Solarte (2015)

Figura 26. Botón Detener el Audio. Fuente: Imperato, Peña y Solarte (2015)

Page 12: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

87

1.5. REVISIÓN.

En este punto del proyecto, se realizará una serie de pruebas del

producto, con el fin de evitar futuros errores, tanto en la interacción, los

gráficos, el audio del producto final, como en la producción del empaque.

1.6. PROYECTO.

En esta etapa, se concluye la realización del producto final, donde se

tomaron en cuenta todos los aspectos, pruebas y arreglos, en caso de haber

sido necesarios, y así cumplir los objetivos del proyecto de forma exitosa.

2. MEMORIA DESCRIPTIVA.

En este punto, se realiza una explicación del porqué de las decisiones

de diseño ya tomadas, para ello, se ha dividido en categorías para dejar en

claro cada aspecto.

Primero, las características que el diseño debe cumplir como

determinantes, son las siguientes:

Diseñar una serie de cuentos interactivos sobre las leyendas de las

casas coloniales de la Ciudad de Coro.

Poseer elementos característicos de las casas.

Capturar la atención del target comprendido entre los 14-45 años de

edad, sean residentes o visitantes de la ciudad de coro.

Page 13: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

88

Dar a conocer la información referente a las historias de las casas

coloniales e incentivar a los usuarios, a asistir a dichas casas.

Como Concepto Gráfico se planteó la idea donde los cuentos

muestren un manejo de ilustraciones que evocan cada uno de los aspectos y

aéreas principales de cada casa. Las mismas se desarrollan con un juego de

sombras, cromas vivos, y ciertos puntos planos para no sobrecargar el

producto final y no se hallen pesado a la vista del público interesado. En

cada una de sus páginas se puede visualizar el uso de una diagramación en

la cual se intercala imagen / texto, anexando a ellas con esto, dinamismo y

un mayor atractivo. Solo se maneja un pequeño cuadro de texto, que puede

ser leído con facilidad y no aburrir o permitir la distracción de la persona que

lo está leyendo. Las tipografías para los títulos y bloques de textos están

dentro de la familia de sans serif, con alineación a la izquierda para brindarle

al usuario una mayor fluidez y legibilidad en la lectura. Al mismo tiempo, se

utilizó una textura superficial para los elementos gráficos, connotando la

antigüedad que poseen las casas de la zona colonial de Coro, y mostrar una

tendencia actual y moderna.

2.1. PROCESO DE DISEÑO.

Para llevar a cabo este producto, se realizó una lluvia de ideas, donde

se definió el concepto gráfico, el target y la forma de distribución, donde

luego, se hizo una serie de bocetos de logotipo hasta escoger al que se

adaptara mejor al concepto antes planteado para los cuentos interactivos.

Page 14: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

89

Para continuar este proceso, se eligió el mapa de navegación lineal

con alternativas, para que el usuario posea una secuencia en la lectura;

también, se decidieron, por medio de muestras, los colores más adecuados

para utilizar en el fondo, para los textos, entre otros elementos, así también,

se determinó la ubicación y alineación de los bloques de textos, de los

gráficos, tanto las ilustraciones como los botones interactivos.

Se realizó una investigación para conseguir la mayor cantidad de

información útil para cada uno de los cuentos, por medio de entrevistas,

tomando fotografías, y visitando cada casa.

Para culminar, se prosiguió a la vectorización de cada página, se

ubicaron las animaciones por páginas para así realizarlas y culminar el

proyecto. Cabe destacar que se efectuaron correcciones a medida del

tiempo, para mejorar el aspecto gráfico del producto final.

2.1.1. RETÍCULA.

Figura 27. Retícula jerárquica para la portada. Fuente: Imperato, Peña y Solarte (2015)

Page 15: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

90

La retícula para la portada se utiliza para dar ubicación de los

elementos relevantes, cabe destacar que es utilizada para cada cuento.

Figura 28. Retícula a dos columnas para pantallas internas. Fuente: Imperato, Peña y Solarte (2015)

Figura 29. Retícula a dos columnas para pantallas internas. Fuente: Imperato, Peña y Solarte (2015)

Para las páginas internas, se utilizaron retículas que poseen las dos

columnas, cambiando las filas para ofrecer diversas formas de organizar los

elementos.

Page 16: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

91

2.1.2. DIAGRAMACIÓN.

Figura 30. Diagramación para la portada. Fuente: Imperato, Peña y Solarte (2015)

La diagramación para la portada se estableció de manera que el

elemento importante se encuentre en el centro y abarque un área mayor,

debajo se ubica el título, y luego el botón; el logotipo se encuentra en la parte

posterior, a la izquierda, para no interrumpir los gráficos.

Figura 31. Diagramación para las pantallas internas. Fuente: Imperato, Peña y Solarte (2015)

Page 17: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

92

Figura 32. Diagramación para las pantallas internas. Fuente: Imperato, Peña y Solarte (2015)

Para las páginas internas, la diagramación cumple con la función de

dar mayor relevancia a la ilustración, los botones se encuentran en la parte

superior, luego se encuentra el bloque de texto, abarcando un tercio del

espacio.

2.1.3. TIPOGRAFÍA.

Figura 33. Fuente Tipográfica para la Portada.

Fuente: Imperato, Peña y Solarte (2015)

Page 18: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

93

La tipografía utilizada para la portada ha sido BLANCH en su versión

caps, es una fuente sans serif, gruesa, capitular, legible, con terminales

redondeados, connotando firmeza y modernidad.

Figura 34. Fuente Tipográfica para el texto interno.

Fuente: Imperato, Peña y Solarte (2015)

Para las páginas internas, la tipografía que se aplicó es HELVÉTICA

NEUE en su versión 55 ROMAN, es una fuente sans serif, gruesa, legible, se

utilizaron los caracteres en caja alta y caja baja.

2.1.4. PALETA DE COLORES.

Figura 35. Paleta de Colores. Fuente: Imperato, Peña y Solarte (2015)

Page 19: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

94

La paleta de colores utilizada se encuentran entre la gama de los fríos

y los cálidos, de esta forma se crea contraste entre elementos y dar la

impresión de modernidad; así mismo, se asemeja a las casas.

2.1.5. EMPAQUE.

Para presentar los cuentos interactivos, se presentarán en dos formas:

empaques individuales y una versión coleccionable donde estarán los tres

cds en un mismo empaque, de esta forma, se incentiva a conocer las tres

casas.

Figura 36. Empaque Versión Individual. Fuente: Imperato, Peña y Solarte (2015)

El empaque individual consta de un sobre en papel craft, identificado

con la versión outline de la casa respectiva del cuento y el cd impreso a

color.

Page 20: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

95

Figura 37. Empaque Versión Coleccionable.

Fuente: Imperato, Peña y Solarte (2015)

El empaque coleccionable consta de una funda en papel craft,

identificado con el logo de la serie de cuentos; contiene tres empaques con

sus respectivos cds.

Figura 38. Empaque del CD en la Versión Coleccionable.

Fuente: Imperato, Peña y Solarte (2015)

Los empaques para la versión coleccionable, identifica cada cuento

con la casa que le corresponda.

Page 21: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

96

2.2. PORTADAS.

Figura 39. Portadas de cada cuento. Fuente: Imperato, Peña y Solarte (2015)

Se utilizó la misma diagramación para las portadas de los cuentos,

con el motivo de crear una secuencia, similitud entre ellos, con colores de

fondo que destacan la fachada frontal de la casa, siendo este el elemento

principal en las portadas.

2.3. PÁGINAS INTERNAS.

Figura 40. Primera página de cada cuento. Fuente: Imperato, Peña y Solarte (2015)

Para la primera página, se determinó el uso de sangrado, con retícula

a dos columnas, se ubican los botones en la parte superior con sus

respectivas acciones (avanzar, retroceder, stop, play), para no interrumpir el

área de animación.

Page 22: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

97

Figura 41. Páginas internas de cada cuento. Fuente: Imperato, Peña y Solarte (2015)

A partir de la segunda página, se tomaron diferentes diagramaciones

que se encuentran dentro de los parámetros anteriormente establecidos, de

esta forma cada cuento se caracteriza individualmente; así también, se evita

la monotonía visual para el usuario.

2.4. ÚLTIMAS PÁGINAS.

Figura 42. Página final.

Fuente: Imperato, Peña y Solarte (2015)

La última página posee la ubicación de las casas, incentivando al

usuario a asistir y conocer la zona colonial de Coro.

Page 23: CULMINACIÓNvirtual.urbe.edu/tesispub/0102560/cap04.pdf · 2016. 10. 3. · Para llevar a cabo este producto, se realizó una lluvia de ideas, donde se definió el concepto gráfico,

98

Figura 43. Hoja de créditos.

Fuente: Imperato, Peña y Solarte (2015)

Para finalizar el cuento, se anexa una página con los créditos, dando

lugar a las personas que intervinieron en este producto. Se incluye un botón

de ir al inicio, de esta forma el usuario puede volver a hacer el recorrido si lo

desea.