Post on 17-Jul-2022
BOLIVARIANA DE VENEZUELA UNIVERSIDAD DR. RAFAEL BELLOSO CHACÍN FACULTAD DE CIENCIAS DE LA INFORMÁTICA
ESCUELA DE DISEÑO GRÁFICO
DISEÑO DE UNA APLICACIÓN PARA DISPOSITIVOS MÓVILES ORIENTADA A PROMOVER EL TRABAJO DE LOS DISEÑADORES GRÁFICOS DE
MARACAIBO
TRABAJO ESPECIAL DE GRADO PARA OPTAR AL TÍTULO DE LICENCIADOS EN DISEÑO GRÁFICO
PRESENTADO POR:
Lcda. FERNÁNDEZ, JENNY Bch. REVEROL, HUMBERTO Bch. RODRÍGUEZ, JOSEPH
ASESORADO POR: Msg. ERNESTO VARGAS
Msg. JANETT PIRELA
MARACAIBO, JULIO 2012
DISEÑO DE UNA APLICACIÓN PARA DISPOSITIVOS MÓVILES ORIENTADA
A PROMOVER EL TRABAJO DE LOS DISEÑADORES GRÁFICOS DE
MARACAIBO
iii
iv
v
vi
A Dios en primera instancia, por permitirnos llegar al final de nuestra
carrera universitaria. Anuestras familias y seres más queridos, quienes nos
acompañaron a lo largo de toda la carrera, brindándonos la fuerza necesaria para
continuar en los momentos más difíciles. Y a nosotros mismos, por nunca perder el norte en este trabajo especial de grado.
vii
AGRADECIMIENTO
Es nuestro deseo hacer público un sincero reconocimiento a nuestro tutor académico, Msg. Ernesto Vargas, y nuestra tutora metodológica, Msg. Janett Pirela, quienes creyeron en nuestro proyecto a pesar de las vicisitudes que pudieron presentarse. Gracias por su constante orientación,paciencia y temple en aquellos momentos donde requeríamos de su determinación; les estaremos siempre agradecidos por contribuir en nuestra formación integral como hombres y mujeres profesionales del ahora y mañana.
viii
Fernández Pantoja, Jenny Stefanía. Reverol Calabria, Humberto Darío, Rodríguez Angulo, Joseph Manuel. Diseño de una aplicación para dispositivos móviles orientada a promover el trabajo de los diseñadores gráficos de Maracaibo. Universidad Dr. Rafael Belloso Chacín. Facultad de Ciencias de la Informática. Escuela de Diseño Gráfico. Maracaibo, 2012.
RESUMEN
El presente trabajo especial de grado se basa en el diseño de una aplicación para dispositivos móviles, orientada a promover el trabajo de los diseñadores gráficos de Maracaibo, a modo de generar la publicación de críticas culturales y profesionales en un colectivo gráfico digital. Se toma en cuenta el estudio de Christopher Alexander (1964) para el enfoque teórico en el cual se basa esta investigación, en donde a través de sus seis etapas (definición del problema, lista de exigencias, determinación de soluciones, análisis y descomposición, diagrama de resoluciones y síntesis formal) se plantea la creación, diseño y estructuración de una aplicación de dispositivos móviles para diseñadores marabinos. En el capítulo 1, denominado “Definición” se plantea el problema y las razones por las cuales surge la necesidad de crear una aplicación para diseñadores marabinos. En el capítulo 2, “Desarrollo”, se establecen las bases teóricas requeridas para preparar los contenidos del tema a profundidad. Para el capítulo 3, “Organización”, se selecciona el método de estudio y se determinan los criterios de diseño , como paleta de colores, texturas, hipervínculos, diagramación, fondos, trama, entre otros. Y finalmente en el capítulo 4, “Culminación”, se describe detalladamente el producto finalizado en la memoria descriptiva, mostrando por primera vez el diseño en un dispositivo móvil. Las plataformas de desarrollo utilizadas en el proyecto son los programas de diseño Adobe Illustrator y Photoshop, con los cuales se crea el concepto gráfico de la aplicación, prometiendo una calidad excelente en resultados finales, los cuales se destacan en las recomendaciones al final de este trabajo. Palabras Claves: aplicación web, red social, diseño gráfico, portafolio, mensajería , fotografía.
ix
Fernández Pantoja, Jenny Stefanía. Reverol Calabria, Humberto Darío, Rodríguez Angulo, Joseph Manuel. Designof an application for mobile devices oriented to promote the work of graphic designers of Maracaibo. Dr. Rafael Belloso Chacín University. Faculty of Computer Science. School of Graphic Design. Maracaibo, 2012.
ABSTRACT
This thesis degree is based on the design of an application for mobile devices, designed to promote the work of graphic designers from Maracaibo, Venezuela, with the purpose of generate cultural and professionals critics published in a digital graphiccollective. It takes into matter the study of Christopher Alexander (1964) for the theoretical approach in which is based this research, where through the six stages (problem definition, list of requirements, identifying solutions, analysis and decomposition, diagram of resolutions and formal synthesis) is represented the creation, design and structure of a mobile application for designers of Maracaibo. In Chapter 1, entitled "Definition", the problem is specified, as well as the reasons why there is a need to create an application for designers Maracaibo. Chapter 2, "Development", provides the theoretical basis required to prepare the contents of the subject in depth. For Chapter 3, "Organization", the method of study is selected and the design concept is determined, like the palette of colors, textures, hyperlinks, layouts, backgrounds, diagramming, among others. And finally Chapter 4, "Culmination", it describes in detail the finished product specifications, showing the design for the first time on a mobile device. The development platforms used in the project are the design programs Adobe Illustrator and Photoshop, which create the graphic concept of the application, promising an excellent quality for final results. Keywords: web application, social network, graphic design, portfolio, messaging, photography.
x
ÍNDICE GENERAL
Pág.
CONSTANCIA DE APROBACIÓN iii
DEDICATORIA vi
AGRADECIMIENTO vii
RESUMEN viii
ABSTRACT ix
ÍNDICE GENERAL x
ÍNDICE DE GRÁFICOS xviii
INTRODUCCIÓN 1
CAPÍTULO I. DEFINICIÓN 5
1. DESCRIPCIÓN SITUACIÓN OBJETO DE ESTUDIO 5
2. OBJETIVOS DE LA INVESTIGACIÓN 12
2.1 OBJETIVO GENERAL 12
2.2 OBJETIVOS ESPECÍFICOS 12
3. JUSTIFICACIÓN 13
4. DELIMITACIÓN 15
CAPÍTULO II. DESARROLLO 16
1. BASES TEÓRICAS 16
xi
1.1DISEÑO GRÁFICO 16
1.2 CONCEPTO GRÁFICO 17
1.3 COMPOSICIÓN 19
1.4 ELEMENTOS DE DISEÑO 20
1.4.1 PUNTO 20
1.4.2 LÍNEA 21
1.4.3 PLANO 21
1.4.4 ESPACIO 21
1.4.5 FIGURA 21
1.4.6 TAMAÑO 21
1.4.7 COLOR 22
1.4.8 TEXTURA 22
1.4.9 DIRECCIÓN 22
1.4.10 POSICIÓN 22
1.4.11 VOLUMEN 22
1.4.12 GRAVEDAD 23
1.5 LÍNEA 23
1.6 TIPOGRAFÍA 24
1.7 FUENTE 25
1.8 COLOR 26
1.8.1 PALETA DE COLORES 27
1.8.2 SISTEMAS DE COLORES EN COMPUTADORA 28
xii
1.8.2.1 RGB (RED, GREEN, BLUE) 28
1.8.2.2 CMYK (CYAN, MAGENTA, YELLOW, BLACK) 29
1.8.2.3 PANTONE 30
1.8.3 RUEDA CROMÁTICA 31
1.9 PERCEPCIÓN 32
1.10 CONTRASTE 33
1.11 SOFTWARE 34
1.12 HARDWARE 35
1.13 MULTIMEDIA 36
1.13.1 TIPOS DE MULTIMEDIA 38
1.13.1.1 MULTIMEDIA OFF-LINE 38
1.13.1.2 MULTIMEDIA ON-LINE 38
1.13.2 ELEMENTOS DEL MULTIMEDIA 39
1.13.2.1 TEXTO 39
1.13.2.2 IMAGEN 40
(A) TIPOS DE IMAGEN 41
(a) MAPA DE BITS 41
(b) VECTORES 42
(B) FORMATOS DE IMAGEN 44
(a) GIF 44
(b) JPEG (JOINT PHOTOGRAPHIC
EXPERTS GROUP)
45
xiii
(c) PNG (PORTABLE NETWORK GRAPHICS
SPECIFICATION)
46
1.13.2.3 SONIDO 48
(A)FORMATOS DE AUDIO 48
(a) WAV (WAVEFORM AUDIO FORMAT) 49
(b) MIDI (MUSICAL INSTRUMENT DIGITAL
INTERFACE)
49
(c) MP3 (MPEG-1 AUDIO LAYER 3) 51
1.13.2.4 VIDEO 52
(A) FORMATOS DE VIDEO 53
(a) AVI (WINDOWS AUDIO VIDEO
INTERLEAVED FORMAT)
53
(b) DVD (DIGITAL VERSATILE DISC) 54
(c) QUICKTIME 55
(d) MPEG (MOVING PICTURE EXPERTS
GROUP)
56
1.13.2.5 ANIMACIÓN 57
1.14 INTERFAZ 58
1.15 HIPERMEDIA 59
1.16 INTERNET 60
1.17 WWW (WORLD WIDE WEB) 61
1.18 SITIO WEB 62
xiv
1.19 HTML (HYPER TEXT MARK UP LANGUAGE) 64
1.20 NAVEGADOR 65
1.21 MAPA DE NAVEGACIÓN 66
1.21.1 JERÁRQUICA 67
1.21.2 LINEAL 68
1.21.3 LINEAL JERÁRQUICA 68
1.21.4 RED 69
1.22 HIPERTEXTO 69
1.23 ENLACE 71
1.24 APLICACIÓN 72
1.25 WEB 2.0 73
1.26 RED SOCIAL 75
1.27 DISPOSITIVO MÓVIL 77
1.28 CHAT 78
1.29 BLOG 81
2. BASES LEGALES 83
3. CASOS DE ESTUDIO 87
3.1. CASO DE ESTUDIO 1 87
3.2. CASO DE ESTUDIO 2 92
3.3. CASO DE ESTUDIO 3 96
3.4. CASO DE ESTUDIO 4 101
3.5. CASO DE ESTUDIO 5 106
xv
4. MÉTODOS DE DISEÑO 111
4.1 MÉTODO ARCHER 111
4.1.1 FASE ANALÍTICA 111
4.1.2 FASE CREATIVA 111
4.1.3 FASE EJECUTIVA 112
4.2 MÉTODO ASIMOW 112
4.3 MÉTODO MUNARI 113
4.4 MÉTODO ALEXANDER 114
4.5 MÉTODO FRASCARA 116
CAPÍTULO III. ORGANIZACIÓN 117
1. DETERMINANTES DEL PROYECTO 117
1.1 CROMA 117
1.2 PALETA DE COLORES 118
1.3 HIPERVÍNCULOS 119
1.4 TEXTO 120
1.5 FUENTES 120
1.6 IMÁGENES 121
1.7 RESOLUCIÓN 122
1.8 FORMATO DE IMÁGENES 123
1.9 SONIDO 123
1.9.1 TAMAÑO DEL CLIP DE SONIDO 123
xvi
1.9.2 NÚMERO DE CANALES 123
1.9.3 PROFUNDIDAD DE BIT 124
1.9.4 TASA DE MUESTREO 124
1.10 FORMATO DE SONIDOS 124
1.11 VIDEO 125
1.11.1 DURACIÓN 125
1.11.2 TAMAÑO DE FOTOGRAMA 125
1.11.3 TASA DE FOTOGRAMAS 125
1.11.4 CALIDAD 125
1.11.5 PROFUNDIDAD DE BIT DE COLOR 125
1.12 FORMATO DE VIDEO 126
1.13 RITMO 126
1.14 NAVEGACIÓN 127
2. CRITERIOS DEL PROYECTO 128
2.1 CROMA 128
2.2 PALETA DE COLORES 128
2.3 HIPERVÍNCULOS 129
2.4 TEXTO 130
2.5 FUENTES 130
2.6 IMÁGENES 131
2.7 RESOLUCIÓN 131
2.8 FORMATO DE IMÁGENES 132
xvii
2.9 SONIDO 132
2.10 FORMATO DE SONIDOS 132
2.11 VIDEO 133
2.12 FORMATO DE VIDEO 133
2.13 RITMO 134
2.14 NAVEGACIÓN 134
3. MÉTODO DE DISEÑO SELECCIONADO 137
4. SOPORTE Y FORMATO DEL PROYECTO 138
CAPÍTULO IV. CULMINACIÓN 139
1. DESARROLLO DEL PROYECTO 139
2. MEMORIA DESCRIPTIVA 148
CONCLUSIONES 154
RECOMENDACIONES 156
BIBLIOGRAFÍA 158
xviii
ÍNDICE DE GRÁFICOS
Pág.
Gráfico N°1, Estructura Jerárquica 67
Gráfico N°2, Estructura Lineal 68
Gráfico N°3, Estructura Lineal Jerárquica 68
Gráfico N°4, Estructura Tipo Red 69
Gráfico N°5. Artículo Qué es web 2.0. (O’Reilly) 75
Gráfico N°6, Caso de Estudio 1 (Gráfico 1) 88
Gráfico N°7, Caso de Estudio 1 (Gráfico 2) 89
Gráfico N°8, Caso de Estudio 1 (Gráfico 3) 90
Gráfico N°9, Caso de Estudio 1 (Gráfico 4) 91
Gráfico N°10, Caso de Estudio 2 (Gráfico 1) 93
Gráfico N°11, Caso de Estudio 2 (Gráfico 2) 94
Gráfico N°12, Caso de Estudio 2 (Gráfico 3) 95
Gráfico N°13, Caso de Estudio 3 (Gráfico 1) 97
Gráfico N°14, Caso de Estudio 3 (Gráfico 2) 98
Gráfico N°15, Caso de Estudio 3 (Gráfico 3) 99
Gráfico N°16, Caso de Estudio 3 (Gráfico 4) 100
Gráfico N°17, Caso de Estudio 4 (Gráfico 1) 102
Gráfico N°18, Caso de Estudio 4 (Gráfico 2) 103
Gráfico N°19, Caso de Estudio 4 (Gráfico 3) 104
xix
Gráfico N°20, Caso de Estudio 4 (Gráfico 4) 105
Gráfico N°21, Caso de Estudio 5 (Gráfico 1) 107
Gráfico N°22, Caso de Estudio 5 (Gráfico 2) 108
Gráfico N°23, Caso de Estudio 5 (Gráfico 3) 109
Gráfico N°24, Caso de Estudio 5 (Gráfico 4) 110
Gráfico N°25, Métodos de Diseño (Archer) 112
Gráfico N°26, Métodos de Diseño (Asimow) 113
Gráfico N°27, Métodos de Diseño (Munari) 114
Gráfico N°28, Métodos de Diseño (Alexander) 115
Gráfico N°29, Métodos de Diseño (Frascara) 116
Gráfico N°30, Fuentes Utilizadas: Myriad Pro y Arial Black 130
Gráfico N°31, Método de Diseño Seleccionado (Alexander) 137
Gráfico N°32, Prototipos de identificadores para aplicación 142
Gráfico N°33, Bocetos para isologo de Cubículo 13 142
Gráfico N°34, Bocetos para isologo de Cubículo 13 143
Gráfico N°35, Bocetos para isologo de Cubículo 13 144
Gráfico N°36, Isologo de Cubículo 13 145
Gráfico N°37, Mapa de Navegación de Cubículo 13 146
Gráfico N°38, Evolución de Concepto Gráfico 147
Gráfico N°39, Características de Diagramación 149
Gráfico N°40, Mi Cubículo 150
Gráfico N°41, Retículas de Diagramación 151
xx
Gráfico N°42, Empleo de la tipografía 152
Gráfico N°43, Botones 152
Gráfico N°44, Imágenes en Interfaz 153
INTRODUCCIÓN
Actualmente, la necesidad de publicar y leer información en línea es
ineludible. Siendo el internet uno de los más grandes medios de
comunicación con los que dispone la sociedad, hoy en día resulta casi
imposible no encontrar algún tema en común que no se ofrezca en una
aplicación para los dispositivos móviles; ya sean teléfonos inteligentes,
laptops o tabletas digitales, todas permiten navegar en web mediante el
explorador establecido en su sistema.
Las aplicaciones web son medios multidisciplinarios por excelencia;
cualquiera puede ingresar en ellas desde cualquier sitio con conexión a red,
posibilitando en buena medida la integración de las comunicaciones a nivel
mundial, en cualquier ámbito, permitiendo que cada información llegue
correctamente al usuario, independientemente del dispositivo desde el cual
se transmita o las características del usuario que la consulte.
Estas razones suponen una gran responsabilidad para diseñadores
gráficos, quienes se encuentran en una lucha por la supervivencia dentro del
mercado laboral en cuanto a la creación de conceptos innovadores dentro
del diseño, con lo que se llega la elección del tema de esta investigación.
2
Se tiene pues, como finalidad principal, el promover el trabajo de los
diseñadores gráficos marabinos, y facilitarles el camino a la incursión del
gremio profesional a través de un sistema organizado en línea que le permita
exponer sus habilidades, sus proyectos realizados y otros aspectos de su
perfil personal y profesional.
Es así como se planteará el objetivo general de diseñar una aplicación
para dispositivos móviles orientada a promover el trabajo de los diseñadores
gráficos de Maracaibo.
Para ello se establecerán entre los objetivos específicos: identificar los
elementos técnicos y de interacción que debe poseer una aplicación,
establecer el concepto creativo para el diseño de una aplicación que
promueva el trabajo de diseñadores marabinos, establecer posteriormente el
concepto gráfico, y finalmente desarrollar el diseño del producto como tal.
Ahora bien, para obtener los resultados deseados con la creación e
implementación de esta investigación, se dividirán sus contenidos teóricos en
4 capítulos: definición, desarrollo, organización y culminación, dentro de los
cuales se explicará el paso a paso del diseño de la aplicación y cómo se
construirá en una plataforma especialmente para dispositivos móviles.
3
Para el capítulo 1, Definición, se describirá la situación del objeto de
estudio, y se establecerá como objetivo principal la creación y desarrollo de
una aplicación para dispositivos móviles orientada a promover el trabajo de
los diseñadores gráficos de Maracaibo. Posterior a ello se justificarán las
razones por las cuales se considera necesario el desarrollo de esta
investigación y los beneficios significativos que podría aportar a la comunidad
marabina en su desarrollo como medio de exposición profesional.
En el capítulo 2, se comenzarán a desarrollar las bases teóricas y
legales que se deberán considerar para empezar a idear el concepto de la
aplicación. Adicionalmente, se estudiarán diversos casos como antecedentes
a este trabajo, para tener una referencia del funcionamiento de aplicaciones
web. Se propondrán varios métodos de diseño para desenvolver el concepto
gráfico, la diagramación y los contenidos de la aplicación.
En el capítulo 3, denominado "Organización", se plantearán las
determinantes del proyecto en función a las bases teóricas descritas en el
capítulo 2, tales como tipografía, imágenes, patrones de fondo, paleta de
colores, contenidos informativos, entre otros. Asimismo se establecerán los
criterios de dichas determinantes y se seleccionará uno de los métodos de
diseño propuestos. Por último se describirá breve pero detalladamente el
formato y soporte del proyecto.
4
En el cuarto y último capítulo se describirá el desarrollo del proyecto
como tal; cada uno de los pasos que llevarán a la culminación de la
aplicación. De igual manera, se explicará el concepto gráfico final en una
memoria descriptiva que englobará todos los aspectos que van a conformar
el diseño establecido.
Finalmente, se llegará a ciertas conclusiones de acuerdo a los
resultados obtenidos en base a los objetivos propuestos para esta
investigación, y se establecerán ciertas recomendaciones para el mejor
provecho en la utilización de una aplicación de dispositivos móviles dirigida a
diseñadores gráficos de la ciudad de Maracaibo.
Este proyecto se enmarcará dentro de una investigación de carácter
descriptivo y gráfico, con el propósito general de analizar parámetros de
funcionamientos en los diferentes componentes del sistema Web, utilizando
componentes de aplicaciones.
El diseño de esta investigación permitirá desarrollar una aplicación en
línea que agrupe en una red social a un colectivo de profesionales del área
de diseño, lo cual les permitirá compartir recursos, información y proyectos
en común.