1. LA WEB EN CAOS VISUAL Y EL DISEÑO EN SU RESCATE
AUTORES
CESAR IVÁN VILLADA CANTOR
JORGE HERNÁN VARGAS ROJAS
PROFESOR
JESÚS MARÍA PINEDA PATRÓN
DIPLOMADO DE RETÓRICA Y SEMIÓTICA DE LA IMAGEN
BOGOTÁ D.C. 19 DE JUNIO DE 2012
1

2. ÍNDICE
INTRODUCCIÓN 3
3. OBJETIVOS 6
3.1 OBJETIVO GENERAL 6
3.2 ESPECÍFICOS 6
4. MARCO CONCEPTUAL 7
4.1. PROBLEMÁTICA 7
4.2. CONCEPTO 11
5. MARCO TEÓRICO 13
6. METODOLOGÍA 24
7. PROPUESTA INVESTIGACIÓN 31
8. CONCLUSIONES 45
9. BIBLIOGRAFÍA 46
10. REFERENCIAS ELECTRÓNICAS 47
2

3. INTRODUCCIÓN
El diseño gráfico es una disciplina que en las últimas décadas ha
demostrado que cada vez tiene mayor influencia dentro de la sociedad. Esta
se enmarca dentro del área del lenguaje y la comunicación visual, las cuales
son herramientas que permiten transmitir mensajes de forma no verbal. Hoy
en día la utilización de la comunicación gráfica muestra un masificación
importante que permite desarrollar la expresión de ideas para cualquier área
temática como son las ciencias sociales, naturales, humanidades entre otra
infinidad de posibilidades que permiten la utilización de mensajes visuales
para su propagación.
El uso de mensajes de comunicación gráficos como medio de
información comercial es la herramienta principal mediante la cual las
personas o empresas tratan de persuadir a otras que lleguen a consumir
determinados productos o servicios y el correcto uso de estos mensajes hace
que dicha comunicación tenga mayor impacto entre los consumidores. Esto se
hace visible en una gran cantidad de casos, principalmente en las empresas
grandes en las cuales se realiza o contratan un diseñador para que realice las
comunicaciones de manera más efectiva y contundente.
3

4. Pero visualizando este caso en sectores más populares en los cuales los
pequeños negocios hacen su propia comunicación, encontramos que existen
carencias de conceptos o excesos de elementos decorativos que llegan a
saturar esos mismos mensajes que pretenden persuadir a los clientes con un
“diseño” llamativo y colorido. Al realizar un recorrido por una determinada
zona de la ciudad en un ejercicio de exploración aleatorio el cual buscaba
identificar elementos en común referentes al diseño de avisos como forma de
homologación física a un problema consultado inicialmente en internet, fue
recurrente el hecho de encontrar publicidades impresas que no utilizaran
normas básicas de diseño y que por su saturación en color o diseño lograban
tener una característica particular en su comunicación con el ánimo de
convencer o informar acerca de productos o servicios.
Luego de identificar estos lugares y establecimientos que intentaban
generar con su propio estilo sus publicidades informativas incumpliendo con
elementos mínimos del diseño básico, todo esto por medio del ejercicio
aleatorio de la deriva urbana, procedimos a cuestionarnos las principales
causas de cometer ciertos errores de diseño en la producción gráfica de estas
publicidades, identificando la transgresión de normas básicas para comunicar
visualmente mensajes.
4

5. El comportamiento de este fenómeno principalmente se visualiza en
medios impresos exteriores pero también se presenta en la web, de hecho el
encontrar este tipo de errores o elementos carentes de diseño en internet ha sido
el motivador principal para realizar esta monografía ya que la explosión de la
web 2.0 ha permitido el acceso a herramientas de diseño para los anuncios
publicitarios que recurrentemente aparecen en las páginas web que
frecuentamos.
Como propósito final esta monografía propone la realización de un
manual básico de diseño de anuncios web enfocando el resultado de lo
investigado como propuesta de solución a la problemática del diseño en
anuncios, con el cual se evidencie la necesidad de brindar mensajes con
“mejor” comunicación y desarrollados con fundamentos y teorías de diseño.
5

6. 3 OBJETIVOS
3.1 OBJETIVO GENERAL
Formular una solución a la problemática de la intervención de avisos
publicitarios en la web, los cuales aparecen desarrollados por personas sin
conocimientos de diseño, y como consecuencia se propone un manual básico
para desarrollo de avisos publicitarios para web.
3.2 OBJETIVOS ESPECÍFICOS
1. Seleccionar los errores más comunes en diseño que cometen las personas al
realizar un arte publicitario propio.
2. Desarrollar un manual con conceptos básicos para el diseño de avisos
publicitarios para web.
3. Realizar aplicaciones de ejemplo que permitan visualizar algunos casos en
los cuales se ha dado solución a la problemática.
6

7. 4. MARCO CONCEPTUAL
4.1. Problemática
Con un desarrollo continuo de aparatos tecnológicos sin cesar,
actualizaciones de software, y cada nueva innovación, influye culturalmente
y altera los procesos digitales y de por si de diseño, sin embargo se debe
encontrar la forma de adaptarse y brindar soluciones prácticas y funcionales a
los usuarios con nuevas herramientas que puedan entender, dominen en
corto tiempo y que las puedan compartir, es ahí en donde entra el papel del
diseño como estructurador de la comunicación entre el usuario y la nueva
tecnología que llega a sus manos, ¿Cómo se está realizando esta forma de
comunicar?, ¿Cómo se genera la imagen? y ¿Esta cumple con la
funcionalidad?
En muchos casos se están generando comunicaciones erróneas,
aplicaciones que no tienen ningún sentido y que no transmiten idea alguna,
se está dejando el diseño de lado y se centra en vender, no se tienen en cuenta
valoraciones estéticas, no se respeta el tiempo del usuario en la internet y se le
llena de mensajes, se invade su privacidad con cientos de avisos publicitarios,
se le engaña, solo para que se dirija a una página sin contenido, es por estos y
otros casos en donde podemos evidenciar que algunos pseudo-diseñadores
7

8. están perjudicando la idea de diseño y a los diseñadores profesionales y su
oficio.
Como dice Frascara, (2007), en su ensayo El diseño para la gente, es
importante al momento de generar o construir comunicaciones eficaces, tener
en cuenta múltiples aspectos, para que el mensaje afecte de manera cognitiva,
este tiene que ser entendible, atraer la atención del usuario, y también
convincente.
Como estructurador de comunicaciones en diferentes áreas socio-
culturales, el diseñador gráfico debe poseer en su saber un conjunto de
conocimientos fundamentales, que dictaminen correctamente el desarrollo de
varias tareas, entender el contexto en el que habita, comprender conceptos de
psicología del conocimiento y la conducta, percepción visual, patrones de
conducta, usabilidad y un conjunto de valores que se encuentran en la
sociedad a la que quiere llegar.
Los “No Diseñadores”
Para entender qué puede llegar a ser un No diseñador, debemos tener
un concepto claro de lo que realmente es un diseñador gráfico, qué funciones,
qué habilidades, qué puede desarrollar, cómo se desempeña en ámbitos
8

9. sociales o privados, cómo se proyecta y qué beneficios para la comunidad
puede aportar.
El diseñador gráfico como un profesional dedicado a la producción de
comunicaciones visuales dirigidas a afectar el conocimiento, las actitudes y el
comportamiento de la gente. En esta definición la gente asume un rol central,
y las decisiones visuales involucradas en la construcción de mensajes no
provienen ya de supuestos principios estéticos universales o de caprichos
personales del diseñador, sino que se localizan en un campo creado entre la
realidad actual de la gente y la realidad a la cual se desea arribar después de
que la gente se encare con los mensajes. (Frascara, 2000).
Teniendo en cuenta que la actualmente la comunicación se está
utilizando en la mayoría del tiempo para vender algo y se sabe que si el
público no ha captado el mensaje o no ha hecho lo que se pretende con la
estrategia de mercadeo, puede darse a entender que el medio de
comunicación no es el considerado o la estructura formal del mensaje no
fue planteada correctamente.
El diseñador gráfico gestor de elementos que componen la
comunicación tiene como objetivo representar a través de mecanismos
icónicos, factores que afecten la cotidianidad de la sociedad ya sea
mejorando su vida, informándola o vendiéndole algo, por ejemplo la
9

10. propaganda política está dirigida a afectar la opinión y las acciones de la
gente; las señales viales, a organizar el flujo de vehículos; los materiales
didácticos, a optimizar la tarea educativa; y los símbolos de seguridad
industrial, a reducir los accidentes de trabajo.
Sin embargo, con el auge de nuevas herramientas tecnológicas, los
recursos técnicos están relativamente más cerca de cualquier persona,
video blogs, tutoriales, foros, redes sociales, que en principio, se basan el
compartir, conocimientos o experiencias; se aprende como elaborar una
página web, un banner publicitario, una campaña en redes sociales, y un
sin número de cosas, que dejan de lado la academia. Con este
conocimiento, las personas hacen uso de software especializados, con los
que están creando comunicaciones caóticas, faltas de estética, que generan
un nuevo tipo de lenguaje de diseño, que dejan a un lado los conceptos
teóricos tradicionales, que se adquieren con años de educación.
Como consecuencia a la problemática se plantea desarrollar una
manual de prácticas básicas, para personas que tengan pocos conocimientos
en diseño, puedan realizar piezas o avisos publicitarios para web, con
algunos conceptos de funcionalidad y estética.
10

11. 4.2. Concepto
El diseño gráfico es una disciplina nueva y reciente la cual está
fundamentada en la resolución, por medio de imágenes y formas visuales, de
problemas de comunicación específicos con base en requerimientos
particulares. Esta área del conocimiento es relativamente nueva en el
momento de ser comparada con otros tipos de disciplinas que llevan muchos
años en proceso de mejoramiento y delimitación como por ejemplo las
ciencias exactas.
Una de las grandes falencias del diseño como área del conocimiento es
la escasa alimentación que tiene desde el lado de la investigación, de hecho el
diseño ha tenido que pedir prestadas teorías de otras disciplinas para
fundamentar sus propias teorías y de esta manera ir construyendo un recurso
teórico para que se vaya ampliando mucho más. Áreas principalmente del
arte y las ciencias humanas han de llegar a converger en el campo del diseño
gráfico, de ahí que existan muchos teóricos de la materia que han llegado a
preguntarse acerca del diseño desde sus especialidades humanísticas o
artísticas sin tener muy claro hacia dónde va la función del diseño.
Y esta característica es muy clave para el logro de un fundamento claro
que permita generar herramientas ganadoras que puedan garantizar en cierto
nivel el uso de la gráfica como medio de comunicación, persuasión o
11

12. información, ya que es el fin hacia el cual indiferentemente del diseñador ha
de tener una funcionalidad y propósito claro, aquí es donde se justifica el
diseño.
Sin embargo y particularmente desde la última década con la
explosión del internet, los diseñadores han visto un gran campo de acción
desde el cual pueden generar ideas y proyectos comunicativos de alto
impacto y mejor aún con una gran cantidad de audiencia que puede ver sus
trabajos.
Esta explosión de internet, especialmente desde que se presenta como
Web 2.0 la cual facilitó la interacción de los usuarios de internet permitió que
la información tomará una velocidad altísima en cuanto a su transporte, esto
ha hecho que los requerimientos de diseño se modifiquen y aumenten de una
manera considerable, donde se piensa mucho en la retroalimentación y se van
eliminando los límites de acceso a la información, esto para el diseñador es
importante ya que los targets o públicos objetivos tienden a ser muy
especializados en el tema, pero a su vez no cumplen necesariamente con unas
características específicas ya que cualquier tipo de persona va a lograr tener
acceso a la información aquí presentada. Esto obliga al diseñador a tener un
pensamiento mucho más global, un conocimiento más específico y acerca de
muchos más temas y un bagaje cultural importante que le permita
12

13. comprender y transformar todo tipo de información que utilizará como
insumo para su trabajo.
5. MARCO TEÓRICO
La comunicación como uno de los pilares de las relaciones humanas,
tiene un sin número de concepciones y problemáticas que le atañen mucho a
los diseñadores. En muchos casos el diseñador es el que genera, construye,
elige el canal de transmisión, envía y retroalimenta, en múltiples medios, esto
constituye una gran responsabilidad, como diseñadores llevamos ideas a la
comunidad, les presentamos productos o servicios, inducimos, persuadimos,
informamos, vendemos, manipulamos la imagen a nuestra conveniencia, y
muchas veces se olvida la ética, contribuimos a una sociedad consumista.
Como diseñadores también estamos en el deber de aportar nuevos
conocimientos mediante investigación que contribuya al mejoramiento de la
enseñanza del diseño y mejore el desarrollo de la comunicación en los
diferentes medios en los que un diseñador puede desenvolverse, tener en
cuenta que con nuestro trabajo podemos confundir o esclarecer; y enseñarle a
la sociedad que el diseñador ya no es el que se sienta frente a un computador
a hacer cosas bonitas, es capaz de estructurar un mensaje con contenido que
13

14. presente argumentos, puede ser estratégico y encontrar la mejor forma de
llevar la información a la sociedad.
Por consiguiente, podemos reflexionar y evaluar lo que se está
haciendo con los recursos tecnológicos que trae la web 2.0 y qué herramientas
nos permiten construir un mensaje de calidad con una estructura
comunicativa efectiva y funcional.
Particularmente, para abordar el tema de la utilización y el impacto de
la Web 2.0 en el diseño gráfico como disciplina y su relevancia dentro de la
problemática aquí presentada, primero se debe entender claramente a qué se
refiere el término web 2.0 y para este fin nos remitiremos a la definición
propuesta por el propio creador del concepto Tim O’Reilly que acotó el
término en 2004.
O’Reilly establece este concepto como una plataforma en la cual se
genera participación y protagonismo de usuario, donde se diferencia de la
Web 1.0 por ser una plataforma con código abierto, que permite un desarrollo
independiente y a su vez innovación. Considerando que la Web 2.0 es el
resultado de la transición y desarrollo que se ha dado a aplicaciones
tradicionales que funcionan a través de la Web, generando mayor interacción
y enfocándose en el usuario final. Este concepto involucra desde cambios en
la tecnología, hasta cambios sociales también, ya que resume una serie de
14

15. aplicaciones que utilizan cooperación para proporcionar servicios interactivos
en red, haciendo que los usuarios presenten opiniones sobre diversos temas
por medio de blogs, redes sociales virtuales, textos en línea, etc. Interpretando
las aplicaciones que brinda la Web 2.0 como aquellas que ofrecen nuevas
oportunidades para la generación y distribución de la información. En el
entorno Web 2.0 los usuarios intervienen de una manera intuitiva, navegando
a través de contenidos en forma activa, creando y aportando su propio
material.
Según Nafría, (2007), la definición de Web 2.0 abarca 3 grandes
transformaciones en internet: la primera hace referencia a la segunda fase de
internet donde se ha superado una crisis en el medio punto com, la segunda
clarifica a la internet no solo como un medio por el cual se ve información
consignada sino como una plataforma que puede llegar a homologar la
funcionalidad de un programa de ordenador y la tercera y más importante es
que en la Web 2.0 “el usuario es el rey“ describiendo esta etapa donde el
usuario adquiere protagonismo y deja de ser únicamente un espectador y
consumidor de lo que ofrece internet para convertirse en creador y generador
de contenidos y servicios participando de manera activa.
15

16. Una de las grandes diferencias que tiene claramente marcada la Web
2.0 es que en internet el usuario puede trabajar con aplicaciones en línea sin
necesidad de tener instalado ningún software en especial, ya que ahora se
puede trabajar, con aplicaciones similares a las que se instalan en un
ordenador común, con aplicaciones en línea lo que le da la facilidad al
usuario de tener acceso a la edición de sus archivos desde cualquier lugar
donde tenga acceso a la Web.
Mencionando lo anterior, la web 2.0 ha traído nuevas herramientas con
las cuales las personas, incluyendo los usuarios, tienen la facilidad de realizar
publicidades propias que les permiten proponer de manera libre y en algunos
casos sin fundamento, piezas de diseño que puede que no sean funcionales en
su pensamiento ya que no tuvieron una concepción previa. Por ejemplo en el
caso de los banners, estos ya no son los mismos banners de hace 10 años, para
realizarlos hay que pensar primero en las nuevas herramientas que actuarán
en el desarrollo de los mismos, para esto nos remitimos al artículo de Dante
Claudio Reynoso a su vez refiriéndose a Gianluca Diegoli, que “afirma que la
solución no vendrá desde el lenguaje, desde la gráfica o de la calidad
interactiva del banner”, para imaginar el paso a dar debemos antes apreciar
algunos cambios que la Web 2.0 ha impuesto al modelo comunicativo:
16

17. • las redes sociales: formar parte de una comunidad y respetar
sus códigos,
• el compartir genera interés,
• la calidad (creciente) de espacios de opinión,
• la interacción: la diferencia entre observar y participar,
• la memoria: cada paso dado en la red puede ser almacenado.
Se considera Internet como un medio de comunicación social, es
pertinente para el diseño gráfico valorar aspectos de lenguaje y comunicación
visual que intervienen en estos procesos, multimediales e interactivos.
Al encontrar así tanto diseño de no diseñadores en la web es prudente
resaltar la visión que plantea Martha Melgarejo (2008), quien resalta de una
manera amplia la forma como las personas cada vez mas por medio de la
tecnología tratan de hacer comunicaciones con su propio concepto de diseño,
en esta se plantea que llegada de las herramientas tecnológicas al soportar el
diseño pueden, además de ayudar al diseñador en su labor, llegar a personas
que se hacen muy hábiles en el manejo de las tecnologías y cada vez son más.
Este hecho hace que los diseñadores tengan en cuenta algunas cosas
del medio a lo que Melgarejo llama colectividad, que son los diseños
realizados por personas que manejan la tecnología y no necesariamente son
17

18. diseñadores, como una tendencia para el mundo. En este punto es donde el
diseñador debe tener la forma de influenciar a aquellos que en la web tratan
de realizar sus diseños y publicidades por propia cuenta de forma que se
resalten como siempre los elementos que componen las bases del diseño en
los cuales puedan soportarse y generar comunicaciones mas efectivas y con
mayor funcionalidad.
El gráfico que interviene como gestor en el proceso comunicativo,
tienen en su saber, diferentes conocimientos que debe valorar al momento de
crear mensajes, entender el lenguaje por el que quiere expresarse, evaluar la
forma más conveniente y funcional, que impacte e informe.
En cuanto al diseño web específicamente se han desarrollado
diferentes investigaciones que van desde características netamente
funcionales como el Eye tracking, que se define como una herramienta de
evaluación objetiva de usabilidad. También todo lo que le concierne a la
retórica y sus afectaciones a la imagen, y como esta puede transformar el
imaginario de los usuarios en la red.
La retórica, el “arte de la palabra eficaz” López Eire, (1998), Internet
como un medio de comunicación abierto y público, en donde interactúan
todas las clases sociales, y comparten particularidades a través de la palabra y
la imagen; como objetivo de la retórica está el persuadir, a través de la
18

19. palabra, de la imagen, de un discurso, para llevar al usuario a una acción,
hablar, utilizar, informarse, compartir, comprar, vender , ver, escuchar, leer,
jugar, crear, exponer, y una gran cantidad de intereses con muchas
intenciones.
Una empresa equis que tiene su página web en donde expone todos
sus productos y servicios, quienes son y que quieren llegar a ser, montan una
estructura formal, en donde distribuyen jerárquicamente lo que quieren que
el usuario que entre a su página sepa primero, utilizan aspectos retóricos para
persuadir a través de color, forma, posición, o alguna otra figura, que
direccione su atención, y se obtenga una respuesta directa del usuario.
Una característica importante que debe tener una página web, para
que su intención se considere persuasiva y funcional, debe estar directamente
relacionada a la “usabilidad” o “facilidad de uso” Nielsen (2000), si cumple
con esta propiedad los usuarios que la utilicen, permanecerán mucho más
tiempo en ella, y conocerán de lo que les quiere ofrecer.
Sin embargo, no solo la usabilidad hace a una página web exitosa, se
debe ser constante en la actualización de información, que demuestre que se
adapta a los continuos cambios tecnológicos, que está presente y tiene
participación en otras redes, es decir que, el usuario siente que la empresa
quiere estar pendiente de sus necesidades, y valora su opinión, con la que
19

20. hace una retroalimentación que beneficia a las dos partes, en busca de un
mejoramiento continuo.
El diseñador gráfico que hace uso de recursos como el Eye Tracking,
puede determinar la forma en que un usuario registra la mirada en una parte
específica de una imagen, que tanto tiempo permanece en ellas y cuál es su
recorrido visual en el espacio dispuesto.
Aprovechando esa información el gráfico puede establecer en la
composición y diseño de la estructura de una página web, donde es más
conveniente colocar el logotipo de la empresa, donde colocará los productos y
servicios, si es necesario hacer lo que todo el mundo hace, o si en cambio,
puede proponer una disposición diferente que atraiga, sin olvidar la
usabilidad; que sea novedosa y que sea fuerte en contenido.
Actualmente existen programas que permiten facilitar la aplicación y el
estudio de estos métodos de obtención de datos por medio del Eye Tracking, los
resultados son animaciones o gráficas en donde se muestra una ruta de
observación, en donde se analiza el tiempo de permanencia y la trayectoria,
(imagen 1) así que el gráfico debe saber aplicar los resultados obtenidos, para
evaluar su trabajo y determinar factores de usabilidad y estructura formal de los
elementos gráficos.
20

21. Imagen 1
Tomado de: http://www.simpleusability.com/services/usability/eye-tracking/gaze-plot, 19:00 23 mayo de 2012.
También podemos encontrar gráficas, las que expresan por medio de
zonas calientes y frías (de mayor o menor intensidad visual) que pueden
ilustrar en qué parte los usuarios han fijado su mirada. (Imagen 2)
21

22. Imagen 2
Tomado de: http://www.nosolousabilidad.com/articulos/eye-tracking.htm#poynter, 20:00 23 mayo de 2012.
Uno de los componentes investigativos que se establecen en este
proyecto monográfico hacen referencia a la selección de una pieza urbana
sobre la cual se basará la consecución de la información es el algoritmo
urbano. A continuación referenciamos el concepto propuesto por el
Diseñador Industrial Roberto Cuervo de la Universidad Javeriana quien
22

23. plantea el algoritmo urbano como una forma de encontrar soluciones a
problemas de diseño en este caso particular.
Para esto primero se debe tener en cuenta que un algoritmo es una
lista bien definida, ordenada y finita que permite hallar soluciones a un
problema específico donde radica su importancia en mostrar la manera de
llevar a cabo procesos y no debe ser confundido con el concepto de programa
el cual es una serie de pasos en un lenguaje de programación específico y
para un computador concreto, susceptible de ser ejecutado o interpretado.
Un algoritmo no puede ser ejecutado hasta que llega a su
implementación. El mismo algoritmo urbano viene acompañado del
procedimiento de deriva urbana, el cual es, a partir de un algoritmo, una
exploración de la ciudad siendo esta un campo de intervención para el diseño
ya que hace parte de la creación del ser humano.
La deriva representa un factor de construcción aleatorio que permite
visualizar de manera no premeditada diferentes aspectos que puede tener la
ciudad desde lo visual, esta aleatoriedad se da desde la concepción del
algoritmo planteando factores de decisión que afectarán de una u otra
manera el recorrido que se terminará realizando en la deriva.
23

24. Al decidir en qué zona o lugares se desarrollará la deriva se ejecuta la
primera parte para la selección de la pieza urbana. La cual será finalmente el
resultado del recorrido realizado de manera aleatoria habiendo marcado ya
un recorrido con todos los componentes de información que se adquirió
durante el recorrido.
6. METODOLOGÍA.
La investigación se realizará en Corporación Universitaria Unitec
ubicada en la Ciudad de Bogotá, del departamento de Cundinamarca,
Colombia. Tomando como muestra de la problemática una zona de
evaluación en el sur-oriente de la ciudad, en la localidad de San Cristóbal en
el barrio 20 de Julio.
El proceso mediante el cual se sustenta esta investigación la encasilla
claramente en la categoría de cualitativa ya que se hace con base en una
muestra real de elementos de “diseño” en publicidades urbanas que son
evaluados y analizados con el fin de identificar falencias en la práctica y
proponer una solución acorde a satisfacer esas necesidades que la
problemática nos muestra.
24

25. Algunas características principales de la investigación cualitativa son:
● El investigador interactúa con el objeto
● Maneja una realidad subjetiva y múltiple
● Hace uso de un lenguaje informal y personal
● Es inductivo
● Aplicación del análisis
● Estudio de larga duración
● Investigación exploratoria
● Se descubren particularidades de un elemento
● Sus categorías proviene del contexto
● Estudio de casos específicos
Inicialmente conocimos acerca de los conceptos de cartografía,
aplicada a la ciudad y el diseño, y de deriva urbana las cuales nos planteaban
elementos similares en lo que concierne a encontrar relaciones de
composición y no perder detalle de los elementos que caracterizan de forma
gráfica la identidad de una zona determinada llamada en el ejercicio como
una pieza urbana, siendo esta una zona en la cual se lleva a cabo la toma de la
muestra a partir de una planeación previa en la cual se definen los factores
25

26. que buscan componer y alimentar de información en cierto modo aleatorio y
con una parte de premeditación.
Con la zona elegida se dispuso a elaborar un guion que orientaría la
búsqueda de la pieza urbana, los pasos que se plantearon a desarrollar fueron
los siguientes:
Paso 1: Ubicarse en la plaza de la iglesia del barrio 20 de Julio.
Paso 2: Caminar todo lo que sea necesario hacia el norte hasta
encontrar un aviso pintado.
Paso 3: Condicional: Si el aviso encontrado en el Paso 2, está pintado
explícitamente de color rojo, caminar hacia el occidente hasta encontrar un
aviso realizado sobre cartulina con texto escrito a mano. Si no se cumple el
condicional, caminar hacia el oriente hasta encontrar un aviso realizado en
impresión digital, y como sustrato debe estar impreso en banner.
Paso 4: Al encontrar cualquiera de los dos avisos del anterior paso,
caminar hacia el occidente hasta encontrar un aviso en posición
vertical.
Paso 5: Caminar hacia el sur hasta encontrar un error ortográfico en
cualquier aviso.
Paso 6: Caminar 10 minutos hacia el oriente, hasta encontrar un
vendedor ambulante o informal, que utilice un aviso.
26

27. Paso 7: Registre fotográficamente 5 avisos diferentes de rutas de
transporte de la zona.
Paso 8: Regresar a la plaza de la iglesia del barrio 20 de Julio y en el
trayecto registrar 7 piezas gráficas de contenido religioso.
El resultado del seguimiento de los pasos indicados dio como
resultado un recorrido (imagen1) que indicaría el espacio local, y del que se
escogería la pieza urbana, para seguir con el desarrollo de la propuesta de
investigación.
27

28. Imagen 1
Tomado de Google Maps, H 20:00, 26 de Mayo de 2012
Al realizar el ejercicio los eventos o elementos que se consideraron
como variables en el procedimiento de deriva urbana fueron los que
determinaron el orden y las características de la muestra gráfica la cual se
confirma en un registro fotográfico que funciona como material de apoyo
28

29. para encontrar e identificar los puntos importantes que definirán la
problemática y el objeto de estudio de la investigación.
La siguiente parte del proceso es la particularización de determinadas
piezas gráficas encontradas en el recorrido y realizar la búsqueda en internet
en la cual se puedan homologar o identificar los mismos tipos de problemas
de diseño de las piezas en páginas web que hagan parte a empresas o
instituciones públicas privadas que pertenezcan al mismo sector del cual se
tomó la pieza urbana.
Relación fotografías deriva urbana – Internet
29

30. 30

31. En el proceso de encontrar la pieza urbana a intervenir, teniendo en
cuenta el enfoque digital de la problemática, con las relaciones anteriormente
expuestas se busca una página web local que esté cerca o dentro del recorrido
resultante de la deriva, que evidencie los problemas que se quieren corregir
con la propuesta de investigación.
Finalmente al ser individualizados cada uno de los problemas de
funcionalidad gráfica en estas páginas se realizará un manual básico en
diseño que permita asesorar de forma clara y rápida a quienes intentan
promocionar sus productos o servicios.
7. Propuesta de Investigación
Los Banners publicitarios que se encuentran en las páginas web son
herramientas que ayudan a las empresas a anunciar sus productos o
servicios, en sitios de gran concurrencia de usuarios, como uno de los
recursos más explotados de la web para direccionar a los navegadores,
mediante intereses generales o específicos.
Sin embargo algunas veces se crean Banners con cualquier tipo de
contenido, extraordinario, curioso, irreal, sin sentido, solo para llamar la
atención de los usuarios y obtener un clic en el aviso para direccionar a
31

32. páginas web que muchas veces no tienen ninguna relación con aviso, o son
de productos totalmente falsos.
Los errores más comunes que cometen las personas o los pseudo-
diseñadores al realizar este tipo de avisos son:
● Descuidar u olvidar la relación desde donde se vinculan las
páginas mediante los banners.
● Olvidan o ignoran colocar información explícita de la principal
actividad de la página que se quiere publicitar.
● No conservan algún tipo de identidad corporativa entre los
avisos publicitarios y la imagen de la página que se quiere
anunciar.
● No tienen en cuenta los mínimos requerimientos técnicos que
debe tener el usuario para recibir la información correctamente.
● Invadir cuanto espacio halla en la página web para colocar
avisos, saturando y generando molestia, que por consecuencia
generará cansancio visual y abandono de la página.
● Creer que el usuario carece de inteligencia y caerá en cualquier
cosa que se le diga, ofreciéndole gratis los productos o poniendo
a prueba su conocimiento.
32

33. Este proyecto investigativo tiene como finalidad ofrecer una solución
práctica para la creación de publicidades en internet que cumplan con el
objetivo del diseño y eviten el mal uso de estos espacios con elementos que
pueden no estar concebidos bajo un proceso de conceptualización y
cumpliendo con unas normas básicas que permitan asegurar una
comunicación efectiva.
Para esto, se propone tener en cuenta dos perspectivas, una general de
diseño y otra específica aplicada al diseño de publicidades en internet. En la
primera enunciaremos los principales componentes y su importancia
funcional que deben tener los diseños para una efectiva comunicación:
• Línea
Es una marca entre dos puntos. Existen varios tipos de líneas
desde rectas hasta onduladas y curvas entre otras. Las líneas
pueden ser usadas en un amplio rango de aplicaciones y
propósitos: desde resaltar una palabra o frase, conectar un
contenido a otro, crear patrones y mucho más.
33

34. • Forma
Alto + Ancho = Forma. Formas que son aprendidas desde el
colegio: triángulos, rectángulos, círculos. Ya sean formas
complejas o sencillas, siempre pueden servir para atraer la
atención.
• Valor
Se refiere a que tan claro o tan oscuro se muestra un área.
Una gradación de blanco a negro es una buena forma de
visualizar una gradación. y todas sus etapas en este tienen un
valor. Usa el valor para crear profundidad o iluminación, crear
un patrón, dirigir la vista o enfatizar.
• Color
El color es utilizado para generar emociones, definir
importancia, crear interés visual y mucho más. Algunos colores
son cálidos y activos como el naranja y el rojo, y otros son fríos
y pasivos como el azul o el púrpura. Existen varios tipos de
colores y relaciones que son dignos de profundizar y aprender
más.
34

35. • Textura
La textura se relaciona con superficie de un objeto, la forma
visual del mismo, ya sea una apariencia de pared, madera, oro;
siendo lisa o rugosa. Funciona muy bien para agregarle
profundidad o interés visual. Las texturas permiten ver formas
de materiales simulados.
• Espacio
Es el área alrededor o entre los elementos en un diseño.
Pueden ser usados separados o en grupos de información.
Usarlo efectivamente le da al ojo un descanso, define
importancia, guía al ojo a través del diseño y más.
• Tamaño
Es que tan largo o corto es algún objeto, por ejemplo una
camiseta pequeña a comparación de una extragrande. Se usa
para definir importancia, crea interés visual en un diseño.
35

36. La en la segunda parte enunciamos los parámetros que son
importantes y relevantes a la hora de diseñar una publicidad enfocada hacia
la web. Para esto nos apoyamos en el artículo de Christian Van Der Henst,
quien es especialista en marketing y diseño en la web, donde hace una
propuesta de diseño para realizar un banner en internet.
1. Un banner solo nos da unos cuantos segundos para
capturar la atención del usuario, por lo que es vital que nuestros
banners tengan un mensaje que implique "MIRAME A MI".
Para esto, es necesario el uso adecuado de texto, colores y
gráficas, tomando en cuenta el orden mencionado. Es bueno
practicar con diferentes combinaciones de texto, hasta que se
sienta que tiene un buen mensaje.
2. Buen porcentaje de navegantes automáticamente ignoran
los banners en sitios web a menos que mencionen un tema de su
agrado. No podemos capturar la atención de todos los usuarios,
pero sí de visitantes que podrían familiarizarse con nuestros
contenidos. Por esta razón, enfatizar en el tema de nuestro sitio
es muy importante.
36

37. 3. Los banners animados tienen mayor facilidad para
capturar la atención sobre banners estáticos, además que son
casi el estándar impuesto debido a que los estáticos tienen muy
poca efectividad en el medio.
4. Siempre en la primera escena de nuestros banners se
debe enfatizar en una fase introductoria que haga énfasis en el
beneficio de nuestros sitios. ¿Qué tenemos que valga la pena
visitar? ¿Qué nos hace diferentes a los demás?
5. El uso de frases que impliquen curiosidad, humor, miedo
o preguntas es recomendado para la primera escena de nuestros
banners. Algunos ejemplos de lo anterior podrían ser. "Sabía
usted que...", "Es usted de las personas que...", "No se preocupe
nunca más por el uso de...", "Precaución, usted podría...", etc.
6. A continuación de la frase introductoria, tomando en
cuenta que de esta dependerá la atención del navegante en
37

38. nuestro banner, se deben incluir varias escenas que expandan la
información de nuestro sitio.
7. Es recomendable incluir algún logo, dirección web o
identificación gráfica de nuestro sitio en todas las escenas. Lo
anterior nos ayudará a mostrar una identificación de nuestro
sitio ante los navegantes aunque no lo pulsen. Podría ser que
eventualmente lo hagan luego de varias visualizaciones.
8. Aparte de los banners animados, existen otras formas de
crear banners como lo es la combinación de tablas y formularios
(Banners HTML), banners en Flash o de Java. Estos tienen
varios inconvenientes pues no pueden ser publicados en todos
lados y en el caso de Flash y Java, no todos los usuarios tienen
acceso. A pesar de esto se ha comprobado que son más efectivos
pues permiten más variedad de animaciones e interactividad
con el usuario.
9. En cuanto a tamaño, en pixeles los banners estándares
son de 468x60 pixeles, existiendo también minibanners y banners
38

39. de otras dimensiones, dependiendo del sitio que los exponga.
En Kb, los banners no deben tener más de 10 Kb de tamaño. A
pesar que la mayoría de límites es de 15 Kb, tenemos que tomar
muy cuenta que un banner demasiado grande tardará mucho en
cargarse y entonces no será visualizado por el visitante. Estar
por debajo de los 10 Kb podría ser beneficioso si queremos
mayores exposiciones efectivas. El uso de múltiples escenas con
diferentes contenidos en banners animados puede aumentar el
tamaño por lo que hay que considerar rehusar el contenido de
otras escenas.
10. El uso de colores brillantes es más apropiado que colores
oscuros como el negro que ha demostrado ser menos efectivo.
Entre los más efectivos puede mencionarse al Azul, amarillo,
naranja y verde. También hay que aplicar colores que contrasten
para que pueda leerse nuestro mensaje. El Amarillo en fondo
rojo por ejemplo es más efectivo que el verde sobre fondo azul.
Otro color que puede beneficiarnos es el blanco, debido a que la
mayoría de sitios de contenidos tienen este color de fondo.
39

40. 11. Crear confusión en el banner anunciando algo que no
verán en nuestro sitio podrá ser efectivo para ganar
visualizaciones de nuestra página, pero no visitantes efectivos,
por lo que no se deben hacer falsas promesas en los banners,
pues al no encontrar lo anunciado, ganaremos un visitante
enojado que difícilmente recomendará nuestro sitio.
12. A pesar de que los banners son conocidos como un
medio publicitario, muchos navegantes no saben qué hacer al
ver un banner de su agrado. Se ha comprobado que incluir
algún texto que implique pulsar el banner aumenta su cantidad
de clicks, pues es una nota explicatoria: "Pulse Aquí", "Click
Aquí", "Pulse para continuar", etc. son opciones que debemos
tomar en cuenta para finalizar el banner.
13. La creación de varios banners con distintos conceptos nos
da mayores opciones para promocionarnos y además nos
permite evaluar su efectividad. Esto además nos permitirá tener
una galería de nuestros banners en nuestro sitio para los
visitantes que deseen tomarlos para sus sitios.
40

41. Para la intervención de la pieza urbana, se escogió la página web
“http://www.barriosdebogota.com” en la que se realiza una visualización de
la diferencia, entre tener conceptos y conocimientos previos de diseño, y
funcionalidad y desarrollo de piezas publicitarias para web “Banners”.
Página Original (sin cambios).
41

42. Página con intervención gráfica.
Opción 1
42

43. En esta se evidencia el uso de Banners con un nivel de diseño mayor,
más elaborados, y algunos de ellos con animaciones bastante efectivas, que
demuestran, el uso de los conceptos anteriormente expuestos (línea, forma,
valor, textura y color).
43

44. Página con intervención gráfica.
Opción 2
44

45. 8. CONCLUSIONES
Luego de realizar el ejercicio de deriva urbana combinándolo con el
proceso de la cartografía, encontramos que es una manera muy útil en la cual
se pueden encontrar elementos bastante interesantes con respecto al el estado
de un problema.
Este proceso que cuenta con un factor aleatorio que ayuda a conocer
elementos que no se esperan nos llega a dar una visualización particular de
las características presentadas en una ciudad, nos muestra que de un camino
desconocido permite llegar a tener todo un concepto por desarrollar y nos
abre la mirada a nuevas formas de ver el diseño y su papel dentro de la
sociedad en la que vivimos.
En lo que respecta al diseño en internet podemos identificar que como
pasa en la realidad en la red tenemos una gran cantidad de lugares por
explorar y siempre por mejorar, el tema de hacer más efectivos los elementos
de diseño en la publicidad es una necesidad para impactar y comunicar de
forma contundente.
45

46. 9. BIBLIOGRAFÍA
1. Nafría, Ismael (2007). Web 2.0. Barcelona, España, Gestión 2000.
2. Frascara Jorge (2000). Diseño Gráfico para la gente. Buenos Aires,
Argentina. Ediciones Infinito.
3. Melgarejo Martha Aideé (2008). El desorden y el caos visual como
constante en el diseño gráfico y su enseñanza: ¿Culpa de la tecnología?
Revista del centro de investigación, Distrito Federal, México,
Universidad de la Salle.
4. Rivera Díaz Luis Antonio (2008). La Retórica en el diseño gráfico.
México, Investigación y Ciencia, Universidad Autónoma de Aguas
Calientes.
5. Borja Navarro Colorado (2003). Aspectos-retórico Comunicativos del
desarrollo de sitios web. Madrid, España, Departamento de Lenguajes
y Sistemas Informáticos, Universidad de Alicante.
6. O´Reilly Tim (2006). Principles and best practices Web 2.0, O'Reilly,
Cambridge, Estados Unidos, Media and CMP.
46

47. 10. REFERENCIAS ELECTRÓNICAS
1. http://foroalfa.org/articulos/el-horizonte-de-la-web, 28-05-12/ 13 h
2. http://foroalfa.org/articulos/diez-principios-del-diseno-grafico 03-06-12
/ 11 h
3. http://foroalfa.org/articulos/retorica-visual-retorica-virtual 03-06-12/ 12 h
4. http://www.barriosdebogota.com/nuevo-supercade-en-san-cristobal-
al-sur-de-bogota/#axzz1xVzzVTYo 20-05-12/ 10 h
5. http://www.nfgraphics.com/top-100-blogs-de-diseno-en-espanol/
26-05-12/ 13 h
6. http://designm.ag/ 27-05-12/ 16 h
7. http://www.kabytes.com/publicidad/top-five-los-banners-mas-irritantes-de-
internet/ 27-05-12/ 20 h
8. http://banners-malos.blogspot.com/2012/03/banners-curiosos.html 30-05-12/
13 h
9. http://www.emezeta.com/articulos/11-tipos-de-banners-potencialmente-
odiables#axzz1uWj7ZWax 31-05-12/ 20 h
10. http://www.webtaller.com/promocion/articulos/bannersefec.php
03-06-12/ 20 h
47

48. 11. http://www.nosolousabilidad.com/articulos/eye-tracking.htm 03-06-12/
19 h
12. http://www.nosolousabilidad.com/articulos/dcu.htm 05-06-12/ 20 h
48