Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la...

39
Capítulo 2 Desarrollo

Transcript of Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la...

Page 1: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

Capítulo 2

Desarrollo

Page 2: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

10

CAPITULO ll

DESARROLLO

1. BASES TEORICAS

Se explicarán a continuación diferentes términos a tratar y cuyas

definiciones son necesarias para el desarrollo eficiente del trabajo especial

de grado, ya que todas y cada una de estas variables abarcan, ya sea en

lo más mínimo o en los más amplio, algún punto a desarrollar dentro de la

investigación.

1.1. DISEÑO DIGITAL

M. Gordon (2007) define el Diseño Digital como “un campo originado no

por el desarrollo del ordenador en sí mismo, sino de la interfaz gráfica del

usuario, el medio a través del cual el usuario puede interactuar con

símbolos gráficos en una pantalla”. En su libro, `Manual de Diseño Gráfico

Digital`, Gordon explica que el diseño digital cumple un papel fundamental

en las formas de comunicación modernas, se ha visto revolucionado por el

proceso de digitalización que ha atravesado el sector de la comunicación.

La digitalización de audio, vídeo, texto e imagen ha elevado el nivel de

Page 3: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

11

interactividad mediática y permite a los profesionales colaborar en un

amplio campo de actividades.

Por otra parte, según Ramos (2012), el Diseño Digital es una forma de

Informar o expresar algo a través de un lenguaje visual. Es decir, que un

diseñador en esta categoría posee las habilidades o competencias para

poder desempeñarse en el medio profesional de la animación, producción

de digitales o incluso combinar el medio fotográfico con el diseño digital.

1.2. MULTIMEDIA

Según Ramos (2012), la multimedia constituyen un conjunto de varios

elementos propiciadores de la comunicación (textos, imagen fija o animada,

videos, audio) en pos de transmitir una idea. Según Belmonte en el libro

"Aprenda Multimedia", (2001): Multimedia serian muchos medios para la

realización o presentación de una obra: Se utiliza este término para

nombrar cualquier producto elaborado para ser reproducido en una

computadora, en el cual intervienen principalmente: ilustraciones,

animaciones, o videos, sonidos (música, voces, u otros efectos especiales

de sonido) y texto de apoyo.

1.2.1. DISEÑO WEB

Según Belmonte (2001) El diseño web consiste en la planificación,

diseño e implementación de elementos visuales para pantalla de

computador, que organiza información en base a una estructura jerárquica,

valiéndose de los recursos propios del diseño gráfico, diseños que se

Page 4: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

12

consideran comúnmente como "páginas" y que se organizan en "sitios" vía

"web".

Se le considera dentro del diseño multimedia se fundamenta en la

aplicación de los principios o directrices básicas del diseño a un nuevo

espacio, conocido como el ciberespacio que tiene características que lo

hacen único, ya que reúne la posibilidad de la interactividad con la

multimedia.

1.2.1.1. ELEMENTOS DEL DISEÑO WEB

Según Galán, Martin y Ruiz (2012), dentro de los aspectos importantes

para el desarrollo de páginas web, existen elementos básicos del diseño

gráfico que se deben aplicar de la forma más idónea para poder tener una

coherencia en el balance de todos los elementos visuales que proponen el

diseño gráfico, teniendo en cuenta el contenido de lo que se quiere o debe

trabajar como las imágenes a utilizar.

(A) CONTENIDO

Dentro del contenido, analizamos no solamente la relevancia del

mensaje que se desea proyectar, también todas aquellas cuestiones que lo

hacen visiblemente estético es lo que nos propone el diseño gráfico, como

los diagramas, los recuadros y por supuesto el uso adecuado y la legibilidad

de la tipografía. Galán, Martin y Ruiz (2012).

Page 5: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

13

(B) DISEÑO DE INTERFASE

En este apartado se hace la propuesta visual más importante y es donde

se vincula con más fuerza el diseño web y el diseño gráfico. El diseñador

gráfico en conjunto con la disciplina del diseño web, tienen el control de la

apariencia de un sitio, hoy en día poder proyectar alguna estrategia visual,

resulta ser una tendencia que se encamina hacia los medios digitales en

los que se postula el desarrollo organizacional. Galán, Martin y Ruiz (2012).

1.2.2. VIDEO

Un video digital es una secuencia de imágenes que, ejecutadas en

secuencia, simulan movimiento. Se almacenan en un determinado formato

digital de video como ser AVI, MPG, RealVideo, o WMV. Galán, Martin y

Ruiz (2012).

1.2.2.1. AVI

El formato avi tiene un funcionamiento muy simple, pues almacena la

información por capas, guardando una capa de video seguida por una de

audio. Galán, Martin y Ruiz (2012).

1.2.2.2. MP4.

Creado para disponer de vídeo altamente comprimido con la mínima

pérdida de calidad posible, facilitando con ello la transmisión a través de

Page 6: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

14

Internet de contenido HD (Alta Definición, por sus siglas en inglés) y

resoluciones superiores comprometiendo lo mínimo posible el ancho de

banda. Galán, Martin y Ruiz (2012).

1.2.2.3. DivX

Basado originalmente en el MPEG-4, ofrece una alta compresión sin

gran sacrificio de calidad, lo que lo hace ideal para la distribución de

contenidos a través de Internet. Galán, Martin y Ruiz (2012).

1.2.2.4. MOV

Basado en MPEG-4, es un formato contenedor -y no un códec- utilizado

por Apple inicialmente para su reproductor multimedia QuickTime que, a

posteriori se ha popularizado y puede ser leído también por otros

programas y dispositivos. Galán, Martin y Ruiz (2012).

1.3. ILUSTRACION

Según Romero (2004), la ilustración es la interpretación grafica de una

idea, y el campo que abarca puede ser dividió en tres partes; la primera se

trata de ilustraciones independientes que buscan narrar por si solas una

historia, sin que exista la necesidad de agregarles títulos o texto para su

comprensión. La segunda son las ilustraciones que buscan fortalecer un

mensaje escrito, ya sea un título, un slogan o un mensaje informativo. La

tercera se refiera a las ilustraciones que buscan despertar la curiosidad

Page 7: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

15

transmitiendo mensajes poco claros o confusos, que obligan al lector a

buscar la respuesta en el texto el cual la acompaña.

1.3.1. ILUSTRACION DIGITAL

Galán, Martin y Ruiz (2012) la describen como aquella ilustración

realizada a través de una computadora. Existen programas que emulan

técnicas reales de medios como el óleo, la pintura o la acuarela. Caplin y

Banks (2003) señalan que la ilustración digital es más que un medio o

herramienta, defienden que la ilustración digital corrige problemas comunes

de la ilustración tradicional, al hacer uso de las ventajas de las aplicaciones

y programas computacionales, además de combinar con su sofisticada y

rápida ejecución.

1.3.1.1. ILUSTRACION VECTORIAL

Galán, Martin y Ruiz (2012) definen que en la ilustración vectorial los

programas utilizan métodos lenguajes gráficos matemáticos para definir

formas individuales.

1.3.1.2. ILUSTRACION DE MAPA DE BITS

Según Galán, Martin y Ruiz (2012), a diferencia de la ilustración

vectorial que trabaja con vectores, la ilustración de mapa de bits trabaja con

pixeles, los cuales son pequeños cuadrados ubicados en una cuadricula

Page 8: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

16

que se extiende en toda la superficie. Los pixeles son normalmente tan

pequeños que no pueden ser observados por el ojo.

1.4. ANIMACION

Saénz afirma que “Si bien la animación es movimiento, el movimiento

en si no es necesariamente animación”. (2006). En su libro `arte y tecnica

de la animación` define la animación como un proceso utilizado para dar la

sensación de movimiento a imágenes o dibujos. La animación también

puede generar imágenes para obtener datos científicos;

Por otra parte, para Deitch, (2001) la animación es el registro de una

acción, pero la misma está registrada en fases individuales e imaginada de

una forma tal que si se reproduce este registro a una velocidad determinada

y constante, siempre y cuando esta velocidad exceda la persistencia de la

imagen en el ojo, se produce la ilusión de movimiento en el observador.

Siendo de este modo la animación un proceso para generar dinamismo y

crear la ilusión de movimiento a imágenes y/o elementos visuales estáticos.

1.4.1. ANIMACION DIGITAL

Debido a la naturaleza de la animación digital, Saénz (2006), explica que

esta disciplina puede basarse tanto en la ilustración vectorial como en el

mapa de bits, ya que el propósito de la animación es colocar en una línea

de tiempo variados elementos, los cuales podrán cambiar su tamaño, y

posición en la medida que corre el tiempo.

Page 9: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

17

1.4.1.1. 3D STUDIO MAX

Es un completo programa de animación en 3D, que permite realizar

animación para videos, multimedia, y juegos. Tiene aplicaciones muy

variadas, desde el campo de la arquitectura, la publicidad, el video, cine,

artes escénicas, televisión, juegos, ingeniería. Saénz (2006).

1.4.1.2. TOON BOOM

Es un programa de animación en 2D, es utilizado comúnmente para la

realización de dibujos animados y la realización de efectos especiales.

Saénz (2006).

1.4.1.3. ADOBE AFTER EFFECT

Este es un programa de animación comúnmente usado para la

realización de efectos especiales en el campo del cine y la televisión. Saénz

(2006).

1.4.2. TIPOS DE ANIMACION DIGITAL

1.4.2.1. ANIMACION 2D

Según Saénz (2006), se trata de animación bidimensional generada en

computadoras, haciendo uso de softwares como Flash, ToonBoom o After

Effects. Este tipo de animación no sólo permite la animación fotograma por

Page 10: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

18

fotograma, sino que permite crear esqueletos de los personajes, que

pueden ser animados sin necesidad de ilustrarlos una y otra vez. El

animador puede definir las poses claves del personaje y el software

especializado calcula los cuadros intermedios.

1.4.2.2. ANIMACION 3D

Según Deitch (2008), Se trata de la forma de animación más común

actualmente. A diferencia de los tipos de animación mencionados

anteriormente, que se mueven en espacios bidimensionales, como lo dice

su nombre, la animación 3D es tridimensional. Se trabaja en programas

especializados como Maya o Blender, donde se crean modelos

tridimensionales de los personajes. Estos modelos poseen un esqueleto

que se controla para darle movimiento. Los animadores deben colocar al

modelo en poses claves en los fotogramas deseados, y el programa calcula

el movimiento del modelo en los fotogramas intermedios.

1.4.2.3. STOP MOTION

Para Belmonte (2001), se trata de una forma de animación similar a la

animación cuadro a cuadro, pero en vez de utilizar ilustraciones, hace uso

de materiales tangibles. Funciona colocando los elementos de la

composición en una posición específica, para luego ser fotografiados.

Luego, estos elementos se mueven un poco y nuevamente son

fotografiados. Al colocar la secuencia de imágenes una tras otra, se crea la

Page 11: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

19

ilusión de que dichos objetos cobran vida. Existen muchas formas de

realizar stop motion, entre ellas encontramos Claymation, que trabaja con

plastilina o algún material similar, el Cut-Out, que utiliza distintas formas de

papel dispuestos sobre un espacio bidimensional o el Pixelation, que utiliza

a personas, objetos y entornos de la vida real, trabajando bajo el mismo

esquema.

1.4.2.4. MOTION GRAPHIC

A diferencia de los 4 tipos de animación mencionados anteriormente, los

motion graphics se diferencian por no estar impulsados por una idea

narrativa. Según Belmonte (2001), se trata más bien de la búsqueda

creativa para animar gráficos o textos. Normalmente encontramos este tipo

de animación en comerciales, propagandas, videos musicales, videos

explicativos o incluso en títulos de películas o series de televisión.

1.5. AUDIO DIGITAL

Según Mohr (2009), el audio digital es toda aquella señal sonora,

normalmente analógica, que se reproduce, guarda y edita en términos

numéricos discretos. La señal analógica se codifica a través del sistema

binario.

Page 12: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

20

1.5.1. FORMATOS DE AUDIO

Los audios digitales se pueden guardar en distintos formatos. Cada uno

se corresponde con una extensión específica del archivo que lo contiene.

Mohr (2009).

(A) FORMATO WAV

El formato WAV (WaveForm Audio File) es un archivo que desarrolló

originalmente Microsoft para guardar audio. Los archivos tienen extensión:

wav. Es ideal para guardar audios originales a partir de los cuales se puede

comprimir y guardar en distintos tamaños de muestreo para publicar en la

web. Mohr (2009).

(B) FORMATO MP3

El formato MP3 (MPEG 1 Layer 3) fue creado por el Instituto Fraunhofer

y por su extraordinario grado de compresión y alta calidad está

prácticamente monopolizando el mundo del audio digital. Es ideal para

publicar audios en la web. Se puede escuchar desde la mayoría de

reproductores. Mohr (2009).

(C) FORMATO OGG

Es el formato más reciente y surgió como alternativa libre y de código

abierto (a diferencia del formato MP3). No todos los reproductores

Page 13: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

21

multimedia son capaces de leer por defecto este formato. En algunos casos

es necesario instalar los códecs o filtros oportunos. Mohr (2009).

(D) FORMATO MIDI

El formato MIDI (Musical Instrument Digital Interface = Interface Digital

para Instrumentos Digitales) en realidad no resulta de un proceso de

digitalización de un sonido analógico. Un archivo de extensión .mid

almacenas secuencias de dispositivos MIDI (sintetizadores) donde se

recoge qué instrumento interviene, en qué forma lo hace y cuándo. Este

formato es interpretado por los principales reproductores del mercado:

Windows Media Player, QuickTime. Mohr (2009)

1.6. INFOGRAFIA

Valero (2008), Define la infografía como una aportación informativa,

realizada con elementos icónicos y tipográficos, que permite o facilita la

comprensión de los acontecimientos, acciones o cosas de actualidad o

algunos de sus aspectos más significativos, y acompaña o sustituye al texto

informativo. Por su parte, Joan Costa, en su libro Diseñar para Los Ojos

(2009, p135) dice que la infografía es el encuentro técnico de la informática

y el grafismo.

Page 14: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

22

1.6.1. INFOGRAFIA ESTATICA

Valero (2008), define las infografías estáticas como aquellas que están

formadas por imágenes fijas complementadas por texto. Estas infografías

suelen ser útiles para representar estadísticas, información numérica, del

tiempo, estadística y muchas otras serán más efectivas siendo ilustradas

que mediante el puro uso de texto.

1.6.2. INFOGRAFIA ANIMADA

Según Valero (2008), las infografías animadas son videos informativos

que muestran datos de diversos temas. Las infografías animadas son muy

atractivas, claras y fáciles de entender. Son idóneas para su web, revista

digital, app o para hacer presentaciones comerciales.

1.6.2.1. RESOLUCION DE INFOGRAFIAS ANIMADAS

Mohr (2009), define la resolución estándar de las infografías animadas

es 1280x720px 720p, es motivo es que en este convergen aspectos

relacionados con su creación, difusión y viralidad. Este formato es también

óptimo para su inserción y visualización en redes sociales de vídeo como

Youtube o Vimeo entre las más conocidas, y en la subida de los archivos

para su reproducción; Sus dimensiones son más adecuadas para

mostrarse de forma fluida y reproducirse con calidad en ordenadores de

sobremesa, portátiles, tablets, smartphones.

Page 15: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

23

1.7. TIPOGRAFIA

“La tipografía es el conjunto de características visuales de las letras y

números de un texto, tales como su diseño, su forma y su tamaño.” La letra:

Manual de Tipografía, Buitrón (2009, p6).

El Tipógrafo Stanley Morison, (2009) define la tipografía como el oficio

que trata el tema de las letras, símbolos, números que están en un texto

impreso que puede ser físico o electromagnético, la tipografía estudia el

tamaño, la forma, el diseño y como se relacionas unos tipos con los otros,

como se relacionan visualmente entre ellos, como influye la tipografía en la

sociedad.

(A) TRADICIONALES

Entre las características que distinguen a una tipografía tradicional de las

demás clases, se encuentra el uso del serif, que básicamente es un resalte

ornamental para el tipo. Las tipografías tradicionales son las más usadas en

la redacción de texto, ya que son fáciles de leer en grandes cantidades de

texto. La mayoría son parecidas y son difíciles de distinguir una de otra.

Stanley Morison, (2009).

(B) DECORATIVAS

Son efectivas para captar la atención de un título o nombre, sin

embargo, su utilización no es recomendable en grandes volúmenes de

Page 16: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

24

texto, ya que están compuestas de elementos decorativos que la hacen

difíciles de leer. Stanley Morison, (2009).

(C) MANUSCRITAS

Las tipografías manuscritas son las que simulan la escritura a mano, o

la escritura hecha con pluma. Stanley Morison, (2009).

(D) PALOSECO

Son también llamadas tipografías “san serif” ya que estas no cuentan con

el uso de serif. A demás de esto, los grosores de sus líneas son

consistentes, sin cambios dramáticos o innecesarios. Son fáciles de leer y

su utilización es adecuada en la redacción de grandes volúmenes de texto.

Stanley Morison, (2009).

1.7.1. TIPOGRAFIA DIGITAL

Para Chauca y Huallpa (2009), la informática ha revolucionado la

tipografía, cambiándola según las necesidades de cada ilustración y uso.

La informática se está en el proceso de la impresión, diseño gráfico y el

diseño de páginas web. Por un lado, la gran cantidad de aplicaciones

informáticas relacionadas con el diseño gráfico y la editorial han hecho

posible el diseño y la creación de nuevas fuentes tipográficas, de forma

cómoda y fácil.

Page 17: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

25

Por otra parte, ha sido necesario rediseñar muchas de las fuentes ya

creadas para su correcta aplicación en el proceso digital, para mejorar la

visualización y lectura en pantalla. Varios estudios han demostrado que

sobre papel impreso las fuentes “serif” son más legibles, ya que esos

pequeños remates en los extremos dan más información sobre los

caracteres y facilitan la lectura.

Fig. 1: Tipografía serif y no serif

Fuente: CHAUCA Y HUALLPA (2009)

1.8. COMUNICACIÓN VISUAL

La comunicación visual es un tipo de comunicación que se enfoca en el

uso de imágenes para transmitir un mensaje que pueda ser leído o

observado por las personas. Este busca generar impresiones memorables

que las personas graben en sus mentes y puedan disponer de la

información más adelante. Lester (2006)

Page 18: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

26

Para Smith, Moriaty, Kenny, y Barbatsis (2004) es desconocida la razón

por la cual la belleza de aquello que rodea al hombre lo afecta de la forma

tan profunda en lo que hace, de como algo tan subjetivo y elusivo puede

llegar a ser tan impactante de una forma tan sutil. Efectivamente, debido a

su naturaleza subjetiva, es señalado que aquello que se descifra

verbalmente de la belleza estética solo puede ser considerado una

especulación de la verdad, mas no parte de la misma.

Cada aspecto de la comunicación visual se encuentra visible y

estructurado en la naturaleza, ya que esta ha existido incluso antes de que

el hombre la estudiara. Cada aspecto de la comunicación visual posee un

significado implícito, el cual no puede ser traducido con exactitud en el

lenguaje verbal.

1.9. LENGUAJE VISUAL

Según Wong (1979) la base de todo diseño debe ser el lenguaje visual,

ya que incluso al apartar los elementos funcionales del diseño, se pueden

encontrar una gran cantidad de principios, reglas y conceptos que definen

la organización visual, que son relevantes para la creación del diseño, y

una amplia comprensión de estos ha aumentado su capacidad para

componer visualmente la idea.

Fernandez (1982) se refiere, al lenguaje visual como un lenguaje

universal que transciende a cualquier otro en cuanto a su habilidad para

comunicar mensajes, ya que supera las diferencias de idiomas,

vocabularios y gramática, además su capacidad de ser percibido tanto por

Page 19: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

27

una analfabeta, como por un hombre culto. El lenguaje visual otorga más

profundidad al mensaje, que casi cualquier otro medio de comunicación al

reforzar su concepto verbal mediante el uso de imágenes dinámicas que

den significado al mismo.

1.9.1. ELEMENTOS CONCEPTUALES DEL LENGUAJE VISUAL

Estos elementos son todos aquellos elementos gráficos ligados a la

forma de percibir la composición, más que la realidad en la que está

definida, son los elementos que, aunque no estén definidos dentro de la

composición, si están supuestos dentro de la misma, y existen gracias a la

psicología de la percepción.

(A) EL PUNTO

Según Kandinsky (1926) el punto probablemente sea el elemento más

abstracto y significativo de los elementos conceptuales, representa tanto el

inicio como el fin de un concepto, y su lectura dentro de lo abstracto está

sumamente ligada a la tensión creada por este y la disposición de los

elementos que lo rodean. Wong (1979).

(B) LA LINEA

“La línea es la absoluta antítesis del elemento pictonico primario: el

punto. Es un elemento derivado o secundario” (Kandinsky, 1926).

Page 20: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

28

(C) EL PLANO

Para Wong (1979) el plano es el recorrido de una línea en movimiento,

y está limitado por líneas. Posee un largo y un ancho, pero no grosor, y este

define los limites externos de un volumen.

(D) EL VOLUMEN

Wong (1979) define el volumen como el trazo de un plano en

movimiento, y a su vez, posee posición en el espacio y se encuentra

limitado por planos.

1.9.2. ELEMENTOS VISUALES DEL LENGUAJE VISUAL

Los elementos visuales son los elementos más preponderantes dentro

de una composición, ya que son aquellos elementos que se pueden definir

de forma clara y concisa en una composición, son los elementos que

realmente podemos ver, y estos marcan los limites necesarios para dar vida

a los elementos conceptuales.

(A) LA FORMA

Para Wong (1979) la forma es la estructura que define los limites

externos de una figura, y esta puede exponerse como líneas, espacios

Page 21: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

29

planos o puntos. La forma puede definirse como el borde exterior de un

cuerpo que limita su aspecto externo.

(B) LA MEDIDA

Se refiere al plano como el tamaño físico relativo de las formas, en

relación con su magnitud o pequeñez, comparada con las de las demás

formas. Wong (1979).

(C) EL COLOR

En una de las percepciones sensoriales que despiertan en el ser

humano al entrar en contacto con los rayos de luz que han sido previamente

reflejados, o refractados por un cuerpo. Wong (1979).

(D) LA TEXTURA

La textura es un elemento visual que posee cualidades tanto visuales

como táctiles, dando una apariencia física o la sensación de una apariencia

física a un cuerpo. Wong (1979).

1.9.3. ELEMENTOS DE RELACION DEL LENGUAJE VISUAL

Este es el grupo de elementos que definen la interrelación de las formas

en una composición, y entre estos algunos pueden ser percibidos, como la

Page 22: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

30

dirección y la posición, y otro pueden ser sentidos, como la gravedad y el

espacio.

(A) DIRECCION

Es un elemento que se encuentra fuertemente ligado a la perspectiva

del observador, depende de su relación con los limetes definidos por la

composición, y con las otras formas cercanas. Posición, la posición de una

forma dentro de la composición es definida por la ubicación respecto a la

estructura de la composición. Wong (1979).

(B) ESPACIO

Wong (1979) se refiere al espacio como la dimensión en donde habitan

o pueden hablar de formas, indiferentemente de su tamaño. El espacio en

una composición es la capacidad de la misma para contener formas de

distintos tamaños. Wong (1979).

(C) GRAVEDAD

La gravedad es una sensación psicológica en la que los cuerpos sienten

la tendencia a ser atraídos a la tierra, atribuyendo apariencias de pensantes

o livianidad, estabilidad o inestabilidad. La gravedad se puede definir como

uno de los elementos psicológicos que pueden ser estimulados en una

Page 23: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

31

composición para otorgar distintos atributos a las formas que componen un

diseño. Wong (1979).

1.9.4. ELEMENTOS PRACTICOS DEL LENGUAJE VISUAL

Los elementos prácticos son todos aquellos elementos que sostienen

un significado aparte que afecta de forma relevante la idea general que se

desea transmitir en una composición. Según Wong, estos elementos

subyacen el contenido y el alcance de un diseño.

(A) REPRESENTACION

Es el significado que sostiene una forma que deriva del mundo donde

vive el ser humano, sea de la naturaleza o del creado por el hombre, y esta

representación puede ser realista, estilizada o semiabstracta. Wong (1979).

(B) SIGNIFICADO

Se refiere al significado como el mensaje que se encuentra en un

diseño. El significado es la cualidad del diseño para poder dar razón o

motivación a un público respecto a un tema. Wong (1979).

(C) FUNCION

Se refiere a la función como el propósito que da razón a un diseño.

Cuando el propósito del diseño vaya más allá de los objetivos estéticos

Page 24: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

32

puede incluso alcanzar una función en la vida cotidiana, como la de educar

o informar a un público de las instrucciones para realizar una tarea. Wong

(1979).

1.10. CONCEPTO GRAFICO

El concepto gráfico es explicado por Paredro (2013) como la idea que

encierra el mensaje, ese código que hace que el receptor se sienta

identificado y genere la acción por saber más, por comprar, por ir.

Por otro lado, León T. (2014) habla del concepto gráfico como un conjunto

de información recogida para sintetizar todos los elementos que permiten

trasmitir la información necesaria y comunicar al público objetivo el mensaje

elegido para una campaña.

El concepto gráfico es entonces aquella idea que surge de una

investigación, de una recopilación de información la cual permite nutrir y

perfeccionar todos los aspectos gráficos del mensaje que facilitarán la

transmisión del mismo, y que al mismo tiempo le proporcionará una imagen

más atrayente para el público.

1.11. CONCEPTO CREATIVO

Paredro (2013) explica que el concepto creativo es la idea base, que

nace a partir de una idea en su estado abstracto, se desarrolla en la

mente y explica o resume experiencias, conocimiento, razonamientos e

Page 25: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

33

imaginación. En la mente se almacena una gran cantidad de información,

cuando esta cobra sentido nace un nuevo concepto creativo.

1.12. COLOR

García (2016), el color es uno de los elementos más capaces de generar

dinamismo y personalidad en el diseño, por lo que es una gran forma de

traer personalidad al proyecto. Es recomendable limitar la paleta de colores

a una gama acorde al mensaje y al público con el que se está trabajando.

1.12.1. PSICOLOGIA DEL COLOR

Según García (2016) la psicología del color es un campo de estudio

dirigido a analizar cómo las personas perciben y se comportan ante

distintos colores, así como las emociones que suscitan en ellas dichos

tonos. Hay ciertos aspectos subjetivos en la psicología del color, por lo que

pueden existir ciertas variaciones en la interpretación y el significado de los

colores entre culturas.

Según la Escola d’Art I Superior de Disseny de Vic (EARTVIC) (2013),

el color es sensorial e individual, subjetivo, por tanto. La psicología clasifica

sus percepciones adjudicándole significados, atendiendo a las funciones

que en él se aprecian, que serían de adaptación y de oposición. Las

funciones de adaptación desarrollarían respuestas activas, vivaces,

animadas e intensas.

Page 26: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

34

Según la EARTVIC (2013), se han realizado estudios sobre el

simbolismo cromático en diferentes culturas, sociedades y civilizaciones,

así mismo sobre su lectura e influencia en campos como la religión, la

ciencia, la ética, el trabajo, etc. El color influye sobre el ser humano, y

también la humanidad le ha conferido significados que trascienden de su

propia apariencia. Sus efectos son de carácter fisiológico - psicológico,

pudiendo producir impresiones, sensaciones de gran importancia, pues

cada uno tiene una vibración determinada en la visión del individuo y por

tanto en su percepción.

1.12.2. COLOR EN MEDIOS DIGITALES

La información del color de una imagen digital está contenida en sus

diferentes canales y son diferentes dependiendo del canal de color usado,

Es posible fraccionar una imagen digital y así poder editar y modificar cada

uno de sus canales por separado. García (2016).

1.12.2.1. MODO DE COLOR

Los modos de color describen las características de visualización y

reproducción de los colores de las imágenes. Existen distintos modelos y

entro los más conocidos se encuentran e modo RGB y el CMYK. García

(2016).

Page 27: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

35

1.13. NEUROPSICOLOGIA

La neuropsicología se refiere al estudio de las bases neuronales y cómo

influye esto en el desarrollo y comportamiento del individuo. Hécaen (1978)

la define como la disciplina que trata de las funciones mentales superiores

en sus relaciones con las estructuras cerebrales.

“El objeto de estudio de la neuropsicología son las relaciones entre la

organización cerebral y el comportamiento en su sentido más amplio:

acciones, emociones, motivaciones, relaciones sociales, etc. El nivel de

análisis de la neuropsicología es el individuo: su historia personal, su

entorno social y cultural”. Frederiks (1985)

2. BASES LEGALES

Se presentan a continuación una serie de Artículos de la Constitución

de la República Bolivariana de Venezuela necesarios para el progreso del

trabajo especial de grado ya que fomentan la realización del mismo.

2.1. LEY DE RESPONSABILIDAD SOCIAL EN RADIO,

TELEVISIÓN Y MEDIOS ELECTRÓNICOS

ARTICULO 1. OBJETIVO Y AMBITO DE APLICACIÓN.

Esta Ley tiene por objeto establecer, en la difusión y recepción de

mensajes, la responsabilidad social de los prestadores de los servicios de

radio y televisión, proveedores de medios electrónicos, los anunciantes, los

Page 28: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

36

productores y productoras nacionales independientes y los usuarios y

usuarias, para fomentar el equilibrio democrático entre sus deberes,

derechos e intereses a los fines de promover la justicia social y de contribuir

con la formación de la ciudadanía, la democracia, la paz, los derechos

humanos, la cultura, la educación, la salud y el desarrollo social y

económico de la Nación, de conformidad con las normas y principios

constitucionales de la legislación para la protección integral de los niños,

niñas y adolescentes, la cultura, la educación, la seguridad social, la libre

competencia y la Ley Orgánica de Telecomunicaciones.

Quedan sujetos a esta Ley todas las modalidades de servicios de

difusión audiovisual, sonoro y electrónico que surjan como consecuencia

del desarrollo de las telecomunicaciones a través de los instrumentos

jurídicos que se estimen pertinentes.

ARTÍCULO 3. OBJETIVOS GENERALES.

Objetivo 4. Procurar la difusión de información y materiales dirigidos a

los niños, niñas y adolescentes que sean de interés social y cultural,

encaminados al desarrollo progresivo y pleno de su personalidad, aptitudes

y capacidad mental y física, el respeto a los derechos humanos, a sus

padres, a su identidad cultural, a la de las civilizaciones distintas a las

suyas, a asumir una vida responsable en libertad, y a formar de manera

adecuada conciencia de comprensión humana y social, paz, tolerancia,

igualdad de los sexos y amistad entre los pueblos, grupos étnicos, y

Page 29: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

37

personas de origen indígena y, en general, que contribuyan a la formación

de la conciencia social de los niños, niñas, adolescentes y sus familias.

El Objetivos 4 del Artículo 3 de la Ley de Responsabilidad Social en

Radio, Televisión y Medios Electrónicos explica la protección y priorización

de la difusión de toda información o material educativo de carácter social

y/o cultural dirigido a niños, niñas y jóvenes a través de cualquier medio

(Radio, televisión o medios electrónicos).

Esta sección del articulo hace referencia a la difusión del producto del

trabajo especial de grado, que será difundido de manera digital, al público

al que va dirigido a estudiantes de psicología, y a la justificación social del

mismo que es dar a conocer sobre los procesos neuronales que se dan en

el aprendizaje.

2.2. LEY DE PROPIEDAD INDUSTRIA

Artículo 1. La presente Ley regirá los derechos de los inventores,

descubridores e introductores sobre las creaciones, inventos o

descubrimientos relacionados con la industria; y los de los productores,

fabricantes o comerciantes sobre las frases o signos especiales que

adopten para distinguir de los similares los resultados de su trabajo o

actividad.

Artículo 5. Las patentes de invención, de mejora, de modelo o dibujo

industriales y las de introducción de invento o mejora, confieren a sus

titulares el privilegio de aprovechar exclusivamente la producción o

Page 30: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

38

procedimiento industrial objeto de la patente, en los términos y condiciones

que se establecen en esta Ley

Artículo 24. La protección que otorga el Estado para un dibujo o modelo

industrial se refiere al aspecto exterior del dibujo o modelo y no se extiende

al producto mismo ni a la utilidad del objeto fabricado.

Artículo 26. Sólo podrán registrarse modelos o dibujos industriales

destinados a productos que han de ser fabricados en el país.

3. ESTUDIOS DE CASOS

Es necesaria la realización del estudio de casos debido a que éste

permite comparar varios proyectos y propuestas realizadas anteriormente

por otros autores.

En este caso se tomaron en cuenta proyectos relacionados con las

áreas de diseño en el cual se está desarrollando el producto, el cual

consiste en el diseño de infografías animadas sobre procesos neurológicos

en el aprendizaje.

A continuación, se presentan los casos de estudio a evaluar a través de

cuadros que permiten comparar y analizar cada una de sus características

más relevantes.

Page 31: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

39

3.1. ESTUDIO DE CASI 1: “DON’T WORRY DRIVE ON: Fossil

Fools & Fracking Lies”

Cuadro 1: Estudio de Casos 1

Elaborado por: Barreto H. (2017)

Page 32: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

40

3.2. ESTUDIO DE CASO 2: “BBC Knowledge Explainer DNA”

Cuadro 2: Estudio de Casos 2

Elaborado por: Barreto H. (2017)

Page 33: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

41

3.3. ESTUDIO DE CASO 3: “Overweight World - Obesity Facts

and Statistics”

Cuadro 3: Estudio de Casos 3

Elaborado por: Barreto H. (2017)

Page 34: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

42

3.4. ESTUDIO DE CASO 4 “Cuidado del medio Ambiente”

Cuadro 4: Estudio de Casos 4

Elaborado por: Barreto H. (2017)

Page 35: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

43

3.5. ESTUDIO DE CASO 5 “HISTORIA DEL INTERNET”

Cuadro 5: Estudio de Casos 5

Elaborado por: Barreto H. (2017)

Page 36: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

44

3.6. CUADRO COMPARATIVO DE CASOS

Cuadro 6: Cuadro Comparativo de Casos

Elaborado por: Barreto H. (2017)

Page 37: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

45

4. METODOS DE DISEÑO

Un método es toda vía por tomar para llegar a un resultado final, por lo

que en este caso los métodos de diseño serían aquellos procesos

necesarios para la realización de un diseño y de un producto final

satisfactorio. Es necesario el analizar diferentes métodos de diseño para

evaluar cuál de éstos conviene más a la realización del proyecto final.

4.1. MÉTODO DE DISEÑO POR CHRISTOPHER JONES (1976)

Jones (1976) propone que los diseñadores llevan a cabo una serie de

predicciones y especificaciones en función de las exigencias y demandas

existentes, para así generar respuestas funcionales y satisfactorias. Éste

indica que el método de diseño es aquella repuesta al conflicto entre el

análisis racional y el pensamiento creativo, en donde Jones (1976) indica

dos posibles procesos que se llevan a cabo a la hora de diseñar:

4.1.1. CAJA NEGRA

Jones (1976) la describe como la teoría que representa el subconsciente

del diseñador. En este proceso el diseñador logra obtener el resultado a la

problemática guiándose por sus instintos creativos, sin embargo, no puede

explicar cómo llegó a éste.

Page 38: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

46

Grafico 1: Método de Diseño “Caja Negra” por Jones (1976)

Elaborado por: Barreto H. (2017)

4.1.2. CAJA DE CRISTAL

Jones (1976) lo define como el proceso donde el individuo identifica y

analiza la problemática, tomando en cuenta sus variables con el fin de

establecer estrategias que darán con la solución acertada a las exigencias

planteadas

Grafico 2: Método de Diseño “Caja de cristal” por Jones (1976)

Elaborado por: Barreto H. (2017)

Page 39: Capítulo 2 Desarrollovirtual.urbe.edu/tesispub/0106662/cap02.pdfhacen único, ya que reúne la posibilidad de la interactividad con la multimedia. 1.2.1.1. ELEMENTOS DEL DISEÑO WEB

47

4.2. MÉTODO DE DISEÑO POR JOAN COSTA (1994)

Costa (1994) basa su planteamiento en resaltar la capacidad humana

de abstracción y esquematización de la información como la ruta para

diferenciar entre los elementos fundamentales y lo secundarios para así

obtener resultados con la más mínima cantidad de recursos necesarios.

Costa (1994) explica que para esquematizar es necesaria la creatividad, de

modo que plantea cinco pasos en el proceso creativo que se presentan a

continuación.

Grafico 3: Método de Diseño según Costa (1994)

Elaborado por: Barreto H. (2017)