i
REPÚBLICA BOLIVARIANA DE VENEZUELA
UNIVERSIDAD PRIVADA DR. RAFAEL BELLOSO CHACÍN FACULTAD DE CIENCIAS DE LA INFORMÁTICA
ESCUELA DE DISEÑO GRÁFICO
DISEÑO DE INTERFAZ GRÁFICA PARA EL DESARROLLO DE UNA APLICACIÓN MOVIL SOBRE ACTIVIDADES RECREATIVAS Y SOCIALES
DEL ESTADO ZULIA, DIRIGIDO A LA POBLACIÓN EN GENERAL
TRABAJO ESPECIAL DE GRADO PARA OPTAR AL TÍTULO DE LICENCIADOS EN DISEÑO GRÁFICO
PRESENTADO POR RAMIREZ, RICARDO REYES, EMMANUEL
ASESORADO POR LCDA. SARA ALCÁNTARA
MSC. MARCOS ROSADO
MARACAIBO, NOVIEMBRE DE 2018
ii
DISEÑO DE INTERFAZ GRÁFICA PARA EL DESARROLLO DE UNA APLICACIÓN MOVIL SOBRE ACTIVIDADES RECREATIVAS Y
SOCIALES DEL ESTADO ZULIA, DIRIGIDO A LA POBLACIÓN EN GENERAL
iii VEREDICTO
iv VEREDICTO
v
DEDICATORIA
Ha sido un camino largo con altas y bajas, muchas personas han sido participes de quien profesionalmente me he convertido, muchos familiares, amigos y profesores que hoy ya no veo, que cerca o lejos se han manifestado y han deseado lo mejor para mí y mi futuro, mis padres Gloria Rivas y Fidias Reyes y tía Francis Reyes quien hoy no tengo palabras para agradecerles mi educación y valores, por enseñarme eso que solo los padres saben cómo heredar; a quien en este camino me ha acompañado los últimos dos años una persona muy importante en mi vida, mi mejor amigo, mi compañero de tesis y habitación a ti Ricardo va dedicado a ti especialmente a ti, a Ángel Olaria, Angelberth Camejo, Antonio Nava colegas desde casi inicio de carrera están guerreando y disfrutando cada etapa de esta aventura a mi lado, y a quien en estos escritos me he olvidado por que son demasiadas personas que han dejado su granito de arena, gracias totales.
EMMANUEL REYES
Dedico este trabajo especial de grado a mis padres Yaneth Sepúlveda y Argenis Ramírez por el esfuerzo sobrehumano que han tenido desde mis inicios, por creer siempre en mí aunque no lo demuestren, a mis hermanos y familiares, no podría faltar a mi compañero de toda esta experiencia, a Emmanuel Reyes, gracias por tanto, tú sabrás a lo que me refiero.
RICARDO RAMÍREZ.
vi
AGRADECIMIENTOS
Gracias, de corazón, a nuestros tutores MSc. Janett Pírela, MSc. Marcos Rosado y a nuestra querida Sara Alcántara que más que una tutora se ha vuelto parte importante en nuestra vida y este final de etapa. Gracias por su amistad, paciencia, dedicación, motivación, criterio y aliento. Han hecho fácil lo difícil. Ha sido un privilegio poder contar con su guía y ayuda.
A la Universidad Dr. Belloso Chacín protagonista principal de nuestra formación académica y que gracias a sus tecnologías y herramientas nos facilitaron la creación de nuestros proyectos. Gracias a Todas las personas de la Universidad por su atención y amabilidad en todo lo referente a nuestro crecimiento como alumnos de pregrado.
Gracias a las personas que, de una manera u otra, han sido clave en nuestra vida profesional y no menos importante a nuestra familia y amigos que han estado a nuestro lado en cada momento levantándonos cuan fracasos se han impuesto y festejando nuestros logros.
RICARDO R. EMMANUELR.
vii
Ramírez Ricardo, Reyes Emmanuel. Diseño de Interfaz Gráfica para el Desarrollo de una Aplicación Móvil sobre Actividades Recreativas y Sociales del Estado Zulia, dirigido a la población en general, Universidad Privada Dr. Rafael Belloso Chacín. Facultad Ciencias de la Informática. Escuela de Diseño Gráfico. Maracaibo, 2018.
RESUMEN
Actualmente, resulta inconcebible un día a día sin teléfono móvil, y más en concreto sin Smartphone. Debido al auge de estos dispositivos, cada vez más personas utilizan los múltiples servicios que ofrecen. Android es el sistema operativo para dispositivos móviles que ha experimentado mayor crecimiento en los últimos años. Por ello aunar estas fuerzas, internet y Smartphone en las aplicaciones que aporten facilidad a la vida cotidiana cobra cada vez más sentido. En esta dirección, este proyecto puede realizar una pequeña aportación. El presente proyecto tiene como objetivo diseñar una interfaz gráfica para el desarrollo de una aplicación móvil sobre actividades recreativas y sociales en la entidad zuliana.
El tipo de investigación empleado fue la teórica-practica abarcando el área del Diseño Digital en su temática de interfaz gráfica. Se utilizó como método diseño un hibrido entre Ricardo Lince y Bruno Munari con el objetivo de seleccionar aquellas fases que resulten más adecuadas para el correcto desarrollo del objeto de estudio, teniendo así como principal propósito diseñar un método propio a ejecutar en la elaboración del proyecto final.
La validez de esta investigación estuvo a cargo del Comité Académico de la Coordinación de Trabajo Especial de Grado de Diseño de la Universidad Privada “Dr. Rafael Belloso Chacín.
Palabras Clave: Interfaz Gráfica, App Móvil, Actividades Recreativas y Sociales, Diseño Digital, Experiencia Usuario.
viii
Ramirez Ricardo, Reyes Emmanuel. Graphic Interface Design for the Development of a Mobile Application on Recreational and Social Activities of the State of Zulia aimed at the general population, Universidad Privada Dr. Rafael Belloso Chacín. Faculty of Computer Science. School of Graphic Design. Maracaibo, 2018.
ABSTRACT
Nowadays, it is inconceivable a day to day without a mobile phone, and more specifically without a Smartphone. Due to the growth of these devices, more and more people use the multiple services they offer. Android is the fastest growing operating system for mobile devices in recent years. That's why joining these forces, internet and Smartphone in the applications that bring ease to daily life makes more and more sense. In this direction, this project can make a small contribution. The aim of this project is to design a graphic interface for the development of a mobile application for recreational and social activities in the Zulian entity.
The type of research used was theoretical-practical, covering the area of Digital Design in its theme of graphic interface. It was used as a design method a hybrid between Ricardo Lince and Bruno Munari with the aim of selecting those phases that are more appropriate for the proper development of the object of study, having as main purpose to design a method to execute itself in the development of the final project.
The validity of this investigation was in charge of the Academic Committee of the Coordination of Special Work of Degree of Design of the Private University "Dr. Rafael Belloso Chacín.
Key Words: Graphic Interface, Mobile App, Recreational and Social Activities, Digital Design, User Experience
ix
ÍNDICE GENERAL
Pág.
VEREDICTO………...iii
DEDICATORIA………...v
AGRADECIMIENTO………...vi
RESUMEN………...vii
ABSTRACT………...viii
ÍNDICE GENERAL………...ix
ÍNDICE DE FIGURAS………...xv
ÍNDICE DE CUADROS………...xvii
ÍNDICE DE GRÁFICOS………...xviii
INTRODUCCIÓN………...1
CAPITULO I. DEFINICIÓN……….…..3
1. DESCRIPCIÓN SITUACIÓN OBJETO DE ESTUDIO……….………4
2. OBJETIVOS DE LA INVESTIGACIÓN………...8
2.1. OBJETIVO GENERAL………8
2.2. OBJETIVOS ESPECÍFICOS………..8
3. JUSTIFICACIÓN………...8
4. DELIMITACION……….10
5. PLAN DE LA PATRIA……..………...11
CAPITULO II. DESARROLLO………...12
1. BASES TEORICAS………...13
1.1. DISEÑO GRÁFICO………..………...14
1.1.1. COLOR………...15
1.1.1.1. SÍNTESIS ADITIVA RGB….………...16
1.1.2. PSICOLOGIA DEL COLOR………...16
x
1.1.3. GRILLA O RETICULA………...17
1.1.4. TIPOGRAFIA………...………...18
1.1.4.1. TRATAMIENTO TIPOGRAFICO PARA APLICACIONES MO- VILES………..………...19
1.1.5. CONCEPTO GRAFICO………... 20
1.1.6. IMAGEN……….…………...21
1.2. PANTALLA………..………...22
1.2.1. RESOLUCION DE PANTALLA………..………22
1.2.2. PIXEL……….………...23
1.3. PROCESO DE DISEÑO Y DESARROLLO DE APLICACIÓN MOVIL...23
1.3.1. DISPOSITIVO MOVIL………...24
1.3.1.1 TIPOS DE DISPOSITIVOS MOVILES………...25
1.3.2 APLICACIÓN MOVIL………... 28
1.3.3. SISTEMA OPERATIVO………...29
1.3.3.1 ANDROID……….……….30
1.4. ACTIVIDADES……….………...30
1.4.1. ACTIVIDADES RECREATIVAS………...31
1.4.1.1. TIPOS DE ACTIVIDADES RECREATIVAS……….……...33
1.4.2. ACTIVIDAD SOCIAL DE CARÁCTER RECREATIVO………...35
1.4.3. CATEGORIAS DE LAS APLICACIONES SEGÚN SU ACTIVIDAD… ………..………..………..35
1.4.3.1 ENTRETENIMIENTO……….………...35
1.4.3.2 SOCIALES………..……….………...36
1.4.3.3 UTILITARIAS Y DE PRODUCTIVIDAD………..…...37
1.4.3.4 EDUCATIVAS E INFORMATICA………...37
2. BASES LEGALES………..38
2.1 CONSTITUCION DE LA REPUBLICA BOLIVARIANA DE VNZLA…38 2.2 LEY SOBRE LOS DERECHOS DE AUTOR………...39 2.3 DECRETO SOBRE INTERNET COMO PRIORIDAD, N°825 DEL 10
DE MAYO DE 2000 PUBLICADO EN LA GACETA OFICIAL DE LA
xi
REPÚBLICA BOLIVARIANA DE VENEZUELA N°36.955, DE FECHA 22
DE MAYO DE 2000……….……….41
3. ESTUDIO DE CASOS………..………...43
3.1. ESTUDIO DE CASO POR VIRAL MAS (NOVIEMBRE 2017), APP CUADRALO……….………44
3.2. ESTUDIO DE CASO POR FOURSQUARE LABS. EE.UU, DENNIS CROWLEY Y NAVEEN SELVADURAI (2009), APP FOURSQUARE..45
3.3. ESTUDIO DE CASO POR BEE CONCEPT (2004), APP PLAYAS DE VENEZUELA……….…...46
3.4. ESTUDIO DE CASO POR EDUTAINMENT VENTURES - MAKING GAMES PEOPLE PLAY, APP VENEZUELAN TRAVEL & EXPLORE..47
3.5. ESTUDIO DE CASO POR MI NUBE COMP (2016), APP MI NUBE, MIS VIAJES………...……….48
3.6. CUADRO DE CONCLUCIÓN DE CASOS DE ESTUDIO………...49
4. MÉTODOS DE DISEÑO………... 50
4.1. MODELO BRUNARI (METODOLOGÍA PARA EL DISEÑO BRUNO MUNARI)……….50
4.2. MODELO JONES (METODOLOGÍA DE DISEÑO POR CHRISTOPHER JONES).………..…...51
4.3. MODELO LINCE (METODOLOGÍA DE DISEÑO RICARDO A. LINCE)………52
4.4. MODELO ASIMOW (METODOLOGÍA DE DISEÑO SEGÚN MORRIS ASIMOW)………54
CAPITULO III. ORGANIZACIÓN………... 55
1. DETERMINANTES DEL PROYECTO………... 56
1.1. CONCEPTO GRÁFICO………. 56
1.2. PALETA DE COLORES………...……...57
1.3. TIPOGRAFIA………...57
xii
1.4. ESTRUCTURA DE NAVEGACION………....58
1.5. BOTONES………..…58
1.6 IMÁGENES…..………....59
1.7. INTERFAZ GRAFICA DE USUARIO………..….60
1.8. EXPERIENCIA USUARIO……….………...60
2. CRITERIOS DE DISEÑO…….………...61
2.1. CONCEPTO GRÁFICO……….61
2.2. PALETA DE COLORES……….………...61
2.3. TIPOGRAFIA…….………...62
2.4. ESTRUCTURA DE NAVEGACION….………...62
2.5. BOTONES………..….63
2.6. IMÁGENES………...63
2.7. INTERFAZ GRAFICO DE USUARIO...………...64
2.8. EXPERIENCIA USUARIO………...64
3. METODO DE DISEÑO SELECCIONADO……….…………...65
3.1. DEFINICION DEL PROBLEMA………65
3.2. RECOPILACION DE DATOS….……….….65
3.3. FASE CONCEPTUAL………….………..….66
3.4. CREATIVIDAD Y DISEÑO………....66
3.5. MATERIALES / TECNICAS………...…………...66
3.6. FASE NAVEGACIONAL……….…...67
4. SOPORTE Y FORMATO DEL PROYECTO……….68
CAPITULO IV. CULMINACIÓN………...70
1. DESARROLLO DEL PROYECTO………...71
1.1. DEFINICIÓN DEL PROBLEMA………...71
1.2. RECOPILACION DE DATOS………...72
1.2.1. PANTALLA INICIAL………...72
1.2.1.1 BOCETOS A LAPIZ DE LA PANTALLA INICIAL………..72
xiii
1.2.2. PANTALLA DE INICIO DE SESION…………...74
1.2.2.1. BOCETOS A LAPIZ DE INICIO DE SESION………...74
1.2.3 PANTALLA DE REGISTRO DE USUARIO……….76
1.2.3.1 BOCETOS A LAPIZ DE REGISTRO DE USUARIO………76
1.2.4. PANTALLA PERFIL – MENU (FILTROS)………77
1.2.4.1. BOCETOS A LAPIZ PANTALLA PERFIL-MENU (FILTROS)……77
1.2.5. PANTALLA GPS……….…..78
1.2.5.1. BOCETOS A LAPIZ PANTALLA GPS……….…..78
1.2.6. PANTALLA FEED……….79
1.2.6.1. BOCETOS A LAPIZ PANTALLA FEED……….79
1.2.7. MENU……….80
1.2.7.1. BOTONES………..80
1.2.7.2. BARRA DE ESTADO………81
1.2.7.3. BARRA DE NAVEGACION……….82
1.3. FASE CONCEPTUAL……….……….82
1.3.1. IDENTIFICADOR………..83
1.3.1.1. IDENTIFICADOR………..83
1.3.1.2. IDENTIFICADOR VERSION FLAT………....84
1.3.1.3. CODIGO CROMATICO……….…..84
1.3.1.4. TIPOGRAFIA……….…....85
1.4. CREATIVIDAD Y DISEÑO……….…….85
1.5. MATERIALES Y TECNICAS………...86
1.6. FASE NAVEGACIONAL………...87
1.6.1. MAPA DE NAVEGACION………...88
1.6.1.1. BOCETOS DE MAPA NAVEGACION………...88
2. MEMORIA DESCRIPTIVA DEL PROYECTO……….89
2.1. PANTALLA DE INICIO DE SESION……….90
2.2. PANTALLA DE REGISTRO DE NUEVO USUARIO………..91
2.3. PANTALLA FEED………92
2.4. PANTALLA PERFIL Y MENU (FILTROS)………94
xiv
2.4.1. PANTALLA DE SUBMENU (FILTROS)………...95
2.5. PANTALLA GPS O NAVEGADOR………..96
2.6. PANTALLA DE CATEGORIAS……….97
CONCLUCIONES………...99
RECOMENDACIONES………...100
REFERENCIAS BIBLIOGRÁFICAS………...102
xv ÍNDICE DE FIGURAS
N°1. BOCETO PANTALLA INICIAL……….………...73
N°2. BOCETO PANTALLA INICIAL……….………....73
N°3. BOCETO PANTALLA INICIAL……….………....74
N°4. BOCETO PANTALLA INICIO DE SESION……….………...74
N°5. BOCETO PANTALLA INICIO DE SESION……….………...75
N°6. BOCETO PANTALLA INICIO DE SESION……….………...75
N°7. BOCETO PANTALLA REGISTRO DE USUARIO…….………...76
N°8. BOCETO PANTALLA REGISTRO DE USUARIO…….………...76
N°9. BOCETO PANTALLA PERFIL-MENU (FILTROS)…….………...77
N°10. BOCETO PANTALLA PERFIL-MENU (FILTROS)…….…………...77
N°11. BOCETO PANTALLA GPS……….…………...78
N°12. BOCETO PANTALLA GPS……….…………...78
N°13. BOCETO PANTALLA FEED……….…….…………...79
N°14. BOCETO DIGITAL MENU Y SUB MENU……….…….…………...80
N°15. BOCETO DIGITAL BOTONES…………..……….…….…………...80
N°16. BOCETO DIGITAL BARRA DE ESTADOS….….…….…………...81
N°17. BOCETO DIGITAL BARRA DE HERRAMIENTAS…...…………...81
N°18. BOCETO IDENTIFICADOR………..………..83
N°19. IDENTIFICADOR SELECCIONADO DIGITAL……….83
N°20. IDENTIFICADOR SELECCIONADO VERSION FLAT………….……..84
N°21.CODIGO CROMATICO……….………….……..84
N°22. FAMILIA TIPOGRAFICA SELECCIONADA………….………….……..85
N°23. BOCETO MAPA NAVEGACION…………..………….………….……..88
N°24. MAPA DE NAVEGACION DIGITALIZADO………...88
N°25. PANTALLA INICIO DE SESION………91
N°26. PANTALLA REGISTRO DE NUEVOS USUARIOS………92
N°27. PANTALLA FEED………..………..93
N°28. PANTALLA PERFIL Y MENU (FILTROS)…………..………..94
xvi
N°29. PANTALLA SUB MENU (FILTROS)…….…………..………..95
N°30. PANTALLA GPS O NAVEGADOR….….…………..………..……..96
N°31. PANTALLA DE CATEGORIAS……….….…………..………..97
N°32. PANTALLA GALERIAS Y VIDEOS….….…………..………..98
xvii ÍNDICE DE CUADROS
N°1. CUADRALO………...45
N°2. FOURSQUARE……….……46
N°3. PLAYAS DE VENEZUELA………..47
N°4. VENEZUELAN TRAVEL & EXPLORE………...48
N°5. MI NUBE, MIS VIAJES…….………. 49
N°6. CUADRO COMPARATIVO……….……...50
xviii ÍNDICE DE GRÁFICOS
N°1. METODOLOGÍA DE BRUNO MUNARI………...51
N°2. METODOLOGÍA DE CHRISTOPHER JONES………52
N°3. METODOLOGÍA DE LINCE R………...……….53
N°4. METODOLOGÍA DE MORRIS ASIMOW..………...54
N°5. METODO DE DISEÑO SELECCIONADO……….…..68
N°6. RECURSO ECONOMICO..………..………..….69
N°7. RECURSO HUMANO……..………..………..….70
N°7. RECURSO TECNOLOGICO.…………..……….…...70
xix
INTRODUCCIÓN
El avance de la tecnología para dispositivos móviles ha sido tal, que un gran número de acciones han sido absorbidas completamente por el uso de teléfono inteligentes e internet. Desde la comunicación instantánea entre dos personas, hasta la compra de algún producto por internet. A diario salen a la luz nuevas aplicaciones, cada vez más fáciles y cómodas, que nos hacen posible la realización de tareas cotidianas desde la palma de nuestra mano.
Es indudable que las ventajas superan los inconvenientes. Este tipo de tecnología ha ayudado a mejorar muchos aspectos de la vida diaria, tal es el ejemplo de, el acceso a la información, el almacenamiento de datos personales de forma segura o la compra de manera inmediata, sencilla y desde cualquier lugar; es por estos motivos que el implemento de este proyecto en el mercado supondrá un beneficio para la sociedad y sus desarrolladores, en líneas generales, lanzar una aplicación que ofrece todo tipos de locaciones de actividades recreativas y sociales en la entidad zuliana.
Por último, la estructura de este proyecto contara con cuatro (4) capítulos, distribuidos de la siguiente manera: Capítulo I en el cual incluye la descripción objeto estudio, los objetivos de la investigación, la justificación y la delimitación, seguidos a ello el capítulo II establece las bases teóricas y legales, los casos de estudio y por último los métodos de diseño. En el capítulo III se desarrolló la organización donde se señalan las determinantes
xx
y criterios del proyecto finalmente los aspectos del capítulo IV enmarca la culminación y memoria descriptiva del producto.
2
