1

Aplicación De La Teoría Del Color Y Técnicas Responsive Web Design En El Desarrollo

De Aplicaciones Front-End

Diny Zulay Arias Arias & Hernando Jose Vela

Universidad Cooperativa De Colombia

Facultad De Ingenierías
Ingeniería De Sistemas
Arauca
2015
 2

Desarrollo De Una Aplicación Web Responsive Design Basada En La Teoria Del

Color

Diny Zulay Arias Arias & Hernando Jose Vela

Seminario De Profundización Como Opción De Grado Para Optar Al Título De

Ingeniero De Sistemas

Dirigido Por:

Carlos Eduardo Puentes

Universidad Cooperativa De Colombia

Facultad De Ingenierías
Ingeniería De Sistemas
Arauca
2015
 3

AGRADECIMIENTOS

Zulay:

En primer lugar doy gracias a Dios, por haberme brindado las capacidades
necesarias y por no dejarme desfallecer en el camino permitiendo culminar esta etapa
profesional tan importante para mi vida.

A mis padres ROSELINO ARIAS TORRES y MARTHA CECILIA ARIAS

MORALES que a pesar de la distancia siempre valore el apoyo y confianza incondicional que
tuvieron conmigo en el transcurso de la carrera, este logro es muy bien dedicado para ellos.

A mis hermanos JOHANA, JESIKA y EVER que de una u otra manera siempre están
presentes en mi vida unidos por el lazo familiar, y anhelando el logro tan esperado colmado de
triunfos y agradecimientos para lograr las metas propuestas.

A los docentes de la Universidad Cooperativa de Colombia que transmitieron lo mejor

de sí para formarme como profesional con importantes conocimientos para servir y dar lo mejor
de mí a lo largo de mi vida profesional como ingeniera de sistemas.
 4

Hernando:

Agradecimiento muy especial a Dios que siempre está presente en todos mis actos de
voluntad propia y que hoy puedo sumar otro logro más en mi vida.

A mi adorada y linda esposa LAURA por haberme proporcionado paciencia, sabiduría y

no dejarme caer en los laberintos del fracaso brindándome siempre todo su amor.

En especial a mi buen amigo FABIO, por su apoyo moral, ético y económico siempre, y
por haberme enseñado que con esfuerzo, trabajo y constancia todo se consigue.

En especial a mi hermano del alma ANDRES, por cada día hacerme ver la vida de una
forma diferente y confiar en mis decisiones.

A mis compañeros de clase, con los que he compartido buenos momentos y quedaran el
recuerdo inmensurable de mi corazón.

A los docentes de la Universidad Cooperativa de Colombia, que siempre estuvieron en

la mejor actitud de ensañar y guiarnos en el proceso de la carrera.
5
 6

CONTENIDO

LISTAS DE TABLAS

Pág.

Tabla 1, Propiedades y psicología de los colores ___________________________________ 49

 7

LISTAS DE FIGURAS

Pág.

Ilustración 1, Tabla de colores ................................................................................................................... 19

Ilustración 2, 7 contrastes cromáticos de J. Itten ....................................................................................... 20
Ilustración 3 Refracción de la luz (Isaac Newton) ..................................................................................... 24
Ilustración 4, Circulo cromtico .................................................................................................................. 25
Ilustración 5 Colores Primarios ................................................................................................................. 26
Ilustración 6 Colores Secundarios ............................................................................................................. 27
Ilustración 7 Colores Terciarios................................................................................................................. 28
Ilustración 8 Colores Complementarios ..................................................................................................... 29
Ilustración 9 Colores Análogos .................................................................................................................. 30
Ilustración 10 Triada de colores ................................................................................................................ 31
Ilustración 11Complementarios Divididos ................................................................................................. 32
Ilustración 12 Cuadro de Colores .............................................................................................................. 33
Ilustración 13 Tetradica Doble Complementaria ....................................................................................... 34
Ilustración 14 Contraste de colores ............................................................................................................ 34
Ilustración 15, Gama de colores................................................................................................................. 35
Ilustración 16 Colores Cálidos ................................................................................................................... 36
Ilustración 17 Colores Fríos....................................................................................................................... 37
Ilustración 18, Luminosidad ....................................................................................................................... 39
Ilustración 19, Saturacion .......................................................................................................................... 39
Ilustración 20, Ejemplo Interfaces con responsive web design .................................................................. 50
Ilustración 21, Factores que componen experiencia del usuario ............................................................... 58
Ilustración 22, Fases de la RAD ................................................................................................................. 62
Ilustración 23, Arbol de problemas ............................................................................................................ 68
Ilustración 24, Arbol de objetivos............................................................................................................... 69
Ilustración 25.Digrama Caso de uso, Theory color.co .............................................................................. 70
Ilustración 26. Página principal Theory color ........................................................................................... 71
Ilustración 27, Parte Historia del color .................................................................................................... 72
 8

LISTAS DE ANEXOS
 9

RESUMEN

Este proyecto tiene como objetivo aplicar la teoría del color y las técnicas responsive
web design en el desarrollo de aplicaciones front-end con el fin de mejorar la experiencia del
usuario, permitiendo de esta manera aplicar las bases de la teoría en todos los campos de la
tecnología, ya que en la actualidad nos comunicamos por medio de los dispositivos que salen al
mercado.

El estudio de la aplicación de la teoría del color ha permitido abordar otros campos

como la psicología del color que es campo de estudio que está dirigido a analizar la percepción
de los colores la cual genera sensaciones, percepciones y comportamiento diferentes para cada
ser humano, por otra parte también se abordara el tema de responsive design que es una
tendencia para que el diseño de la interfaz sea adaptativo a las pantallas de los diferentes
dispositivos que hay en el mercado.

Las empresas utilizan los sitios web como un medio para ser competitivos y ofrecer sus
productos y servicios en la red, de igual manera es indispensable tener dicho sitio web alta
calidad en colores y que sea agradable a la vista del usuario final.

Por ultimo La creación de sitios web acarrea bajo costos económicos para las empresas
y personas del común, ya que por medio de ella se dan a conocer en el mundo desde la
comodidad de sus hogares y trabajos, brindando agilidad en los procesos y beneficios
económicos para las empresas.
 10

ABSTRACT

This project aims to apply color theory and responsive web design techniques in the
development of front-end applications in order to improve the user experience, thereby enabling
the foundations to apply the theory in all fields technology, because today we communicate
through devices coming to market.

The study of the application of color theory has helped to address other areas such as
color psychology is a field of study that is aimed at analyzing the perception of colors which
generates feelings, perceptions and different behavior for each human being, Moreover
responsive design theme that is a tendency for the interface design is adaptive to the screens of
the different devices on the market are also addressed.

Companies use websites as a way to be competitive and offer their products and
services on the network, just as it is essential to have such high quality website color and is
pleasing to the eye of the end user.

Finally, the creation of websites entails low economic costs for businesses and ordinary
people, since by it are disclosed in the world from the comfort of their homes and jobs, offering
efficient processes and economic benefits the companies.
 11

INTRODUCCION

La globalización de los sistemas informáticos está en constante cambio, permitiendo así

que las personas estén más conectadas virtualmente entre sí por medio de diferentes dispositivos
tecnológicos que salen al mercado porque en la medida que esto sucede las empresas también se
dan a conocer en el mundo competitivo actual.

El presente proyecto de grado se refiere al tema de la aplicación de la teoría del color en

el diseño web y el uso de las tendencias Responsive Web Design, con el objetivo de lograr
aplicar una mejor apariencia estética, tanto en la colorimetría del contenido como en la
adaptabilidad de los diseños.

El objetivo del diseño de páginas web es aportar al buen desarrollo tecnológico de las
mismas, que consiste en estructurar adecuadamente los elementos gráficos de un sitio web,
mediante la creación de aplicaciones de carácter informativo para interfaces gráficas partiendo
desde la conceptualización establecida por la teoría del color.

De esta manera, el diseñador web no siempre hará la interfaz gráfica a su criterio

personal con la finalidad de lograr un desarrollo web a gusto del cliente, sino que tendrá una
herramienta informativa y argumentada para poder entregar un producto final idóneo, atractivo y
manteniendo la calidad del diseño.

La voluntad de los diseñadores puede ser libre, propia y original a la hora de realizar un
diseño web, pero es importante saber interpretar de manera acertada el significado que genera los
colores desde la experiencia del usuario final.

Como se mencionó anteriormente, existe también una nueva tendencia de adaptabilidad

en los diseños de páginas web, estas son las técnicas Responsive Web Design o diseño
adaptativo. Técnica del diseño web que busca la correcta visualización de una página en distintos
dispositivos, desde ordenadores de escritorio, tablets y móviles.
 12

Para analizar esta problemática es necesario identificar sus causas, para lo cual se ha
aplicado en este trabajo la Metodología del Marco Lógico (MML), la cual establece un método
para la resolución de problemas, con ella se construye un instrumento de trabajo, que es una
herramienta que sirve para facilitar el proceso de conceptualización, diseño, ejecución y
evaluación de proyectos. Estructurando los contenidos del proyecto, ayudando a sistematizar la
experiencia con base en los objetivos, los resultados y las actividades de la intervención y sus
relaciones causales, después de analizar los problemas, las posibilidades y/o alternativas.

En el marco teórico se realizó una investigación documental, en libros y artículos, para

poder entender los inicios, desarrollo y exponentes de la teoría del color. A medida que se
avanzó con el marco teórico del proyecto, se fueron sumando los siguientes temas: Fundadores
de la teoría del color, concepto de la teoría del color, Psicología del color, técnicas Responsive
Web Design y la metodología RAD (Desarrollo Rápido de Aplicaciones), con el fin de
comprender y tener herramientas para el desarrollo del proyecto.

Asimismo, la metodología RAD permitirá elaborar el diseño de una página web,

proporcionando agilidad en el proceso, por medio de sus 3 fases: Planeación de los
requerimientos, taller de diseño e implementación.

Por último se diseñará una página web que estará disponible en internet,
Theorycolor.co, para el uso de los diseñadores, donde podrán consultar la teoría del color,
basándose en el estudio realizado por la psicóloga Eva Heller, en cuanto en el cual aborda la
relación de los colores con los sentimientos de las personas demostrando como se combinan
ambos de manera accidental (Heller, 2008).
 13

1. DESCRIPCIÓN DEL PROBLEMA

A lo largo del tiempo los desarrollos de diseño web han sido cada vez más
notables en el tema de perfeccionamiento de interfaz gráfica, donde sin duda alguna las
interfaces de los sistemas se enfocan en el diseño ajustado a los dispositivos actuales, y
colores adecuados al tipo de páginas representando empresas que se manejen con el fin
de satisfacer las necesidades del cliente.

En la actualidad existen páginas web que presenta falencias a la hora del

manejo de la colorimetría en la misma. En especial por no ser llamativos ni impactar al
usuario (colores pocos sugerentes, atractivos y amigables), que llevaran consigo a que el
usuario final abandone la página, que no se interese en interactuar con ella, que no
compre el producto allí reflejado o finalmente se canse visualmente.

De la misma manera aplicar la tendencia Responsive Design facilitaría que

dichas páginas se ajusten a cualquier dispositivo móvil en donde se visualice, y permitan
la fluidez de sus contenidos como si se manejara desde un computador portátil o de
escritorio.

Entre las problemáticas que se pueden plantear, no se encuentra una

investigación documentada de la aplicación de la teoría del color en diseño web; para
dar solución a esta serie de inconvenientes vamos emplear el círculo cromático como
base para la aplicación de los colores adecuados y específicos en el desarrollo de las
páginas web, permitiendo que el sistema sea más amigable al usuario. Para ello es
necesario entonces contar con un documento que muestre el manejo óptimo de la teoría
del color en diseño web y dé a conocer los diferentes factores de incidencia con el
color, que finalmente generaría mejoras en el manejo de dichas interfaces.
 14

Teniendo en cuenta esta problemática, el desarrollo de este proyecto permitirá

la creación de páginas web agradables al usuario final articulando el buen uso de los
colores con la tendencia de Responsive Design la cual permite que las interfaces se
ajusten a cualquier dispositivo de donde se esté visualizando.

2. FORMULACIÓN DE LA PREGUNTA DE INVESTIGACION

¿De qué manera se puede aplicar la teoría del color, en combinación con
técnicas Responsive Web Design, en la creación de páginas web que contribuyan a
mejorar la experiencia de los usuarios?

3. JUSTIFICACIÓN

Dicen que la primera impresión lo es todo, “Cómo te ves y cómo te muestras

determinará cómo te perciben los demás”. Lo mismo es aplicable al diseño web. La
impresión que genera en los usuarios dependerá de muchos factores, y uno de los más
importantes es el color. (Ipixel Factory, 2013)

El color genera sensaciones y emociones, incluso recuerdos. Por tanto, es

importante conocer los fundamentos de la teoría del color la cual ayudará a transmitir el
mensaje que deseas en tu sitio web o bien generar nuevas ideas. Averiguar qué colores
funcionan bien con los demás no es sólo una cuestión de suerte. En realidad, existen
muchos estudios sobre los efectos que provocan los colores en las personas. (Ipixel
Factory, 2013)

En la teoría del color existen diversas combinaciones de colores que se agrupan

por categorías y que van muy bien para lograr un objetivo concreto en el diseño web.
(Ipixel Factory, 2013)
 15

Teniendo en cuenta que en Arauca (municipio) no hay desarrollada una página

web con tendencia Responsive Design, que permita identificar la correcta aplicación de
la teoría del color en sitios Web, por consiguiente es necesario crear para el público en
general un documento que ejemplifique la teoría del color bajo todo su contexto
científico, empleando los conocimientos adquiridos en la Universidad Cooperativa de
Colombia. Este proyecto será una guía para crear interfaces interesantes a la vista del
usuario final.

La teoría del color en diseño web puede variar de un contexto a otro, según las
situaciones que permiten la satisfacción de las necesidades de los usuarios, en donde
muchas veces no se tiene en cuenta la colorimetría o porque simplemente se desconoce
su reacciones en el cerebro humano. Las características antes mencionadas de alguna
manera han dado lugar a nuevas formas de diseño web aplicando los colores adecuados
en cada espacio y objeto del entorno gráfico.

4. DELIMITACIÓN
4.1 Conceptual: Esta investigación abarca aspectos fundamentales como la teoría del
color y la tendencia Responsive Design que se aplicara en diseño de páginas web.

4.2 Espacial: Mediante la realización de este trabajo se recopilará información

necesaria, para desarrollar un producto final concerniente a la aplicación de la teoría
de color para que sea asequible a cualquier usuario en la red y especial en Arauca.

4.3 Temporal: Inicialmente el proyecto de investigación comenzara su desarrollo en el

mes de octubre hasta el mes de diciembre de 2015, ya que durante este tiempo se
considera oportuno realizar los objetivos del proyecto.
 16

5. OBJETIVOS
5.1 General

Aplicar la teoría del color y las técnicas responsive web design en el desarrollo de
aplicaciones front-end con el fin de mejorar la experiencia del usuario.

5.2 Específicos

 Documentar la información existente relacionada con la teoría del color aplicada al

diseño de páginas web.

 Indagar sobre las técnicas Responsive Web Design más apropiadas para el diseño de
páginas web.

 Desarrollar una página web con la correcta aplicación de la teoría del color y técnicas
Responsive Web Design, para ilustrar el apropiado uso de esta teoría.

6. MARCO TEÓRICO

7. ANTECEDENTES

7.1 Históricos.

FUNDADORES DE LA TEORIA DEL COLOR

Aristóteles
El filósofo Aristóteles (384 - 322 AC) definió que todos los colores se conforman con
la mezcla de cuatro colores y además otorgó un papel fundamental a la incidencia de luz y la
 17

sombra sobre los mismos. Estos colores que denominó como básicos eran los de tierra, el fuego,
el agua y el cielo. (cardona, torres, peña, galeano, & ardila, 2014)

Leonardo Da Vinci
Siglos más tarde, Leonardo Da Vinci (1452-1519) definió al color como propio de la
materia, adelantó un poquito más definiendo la siguiente escala de colores básicos: primero el
blanco como el principal ya que permite recibir a todos los demás colores, después en su
clasificación seguía amarillo para la tierra, verde para el agua, azul para el cielo, rojo para el
fuego y negro para la oscuridad, ya que es el color que nos priva de todos los otros. Con la
mezcla de estos colores obtenía todos los demás, aunque también observó que el verde también
surgía de una mezcla. (cardona, et al, 2014)

Isaac Newton, la luz es color

Finalmente fue Isaac Newton (1642-1519) quien estableció un principio hasta hoy
aceptado: la luz es color. En 1665 Newton descubrió que la luz del sol al pasar a través de un
prisma, se dividía en varios colores conformando un espectro. Lo que Newton consiguió fué la
descomposición de la luz en los colores del espectro. Estos colores son básicamente el Azul
violaceo, el Azul celeste, el Verde, el Amarillo, el Rojo anaranjado y el Rojo púrpura. Este
fenómeno lo podemos contemplar con mucha frecuencia, cuando la luz se refracta en el borde de
un cristal o de un plástico. También cuando llueve y hace sol, las gotas de agua de la lluvia
realizan la misma operación que el prisma de Newton y descomponen la luz produciendo los
colores del arco iris. (cardona, et al, 2014),Así es como observa que la luz natural está formada
por luces de seis colores, cuando incide sobre un elemento absorbe algunos de esos y refleja
otros. (FotoNostra, s.f.)

Con esta observación dio lugar al siguiente principio: todos los cuerpos opacos al ser
iluminados reflejan todos o parte de los componentes de la luz que reciben. Por lo tanto cuando
vemos una superficie roja, realmente estamos viendo una superficie de un material que contiene
un pigmento el cual absorbe todas las ondas electromagnéticas que contiene la luz blanca con
excepción de la roja, la cual al ser reflejada, es captada por el ojo humano y decodificada por el
cerebro como el color denominado rojo. El círculo cromático creado por el científico Isaac
 18

Newton es tal vez el más famoso. El círculo de Newton tiene rojo, azul y amarillo como colores
primarios; y morado, verde y naranja como colores secundarios. También describió la existencia
de los colores complementarios, los cuales creaban el negro, gris o blanco cuando se mezclaban.
(cardona, et al, 2014)

Johann Wolfgang von Goethe

Reacción humana a los colores Johann Göethe (1749-1832) estudió y probó las
modificaciones fisiológicas y psicológicas que el ser humano sufre ante la exposición a los
diferentes colores. Para Göethe era muy importante comprender la reacción humana a los
colores, y su investigación fue la piedra angular de la actual psicológica del color. Desarrolló un
triángulo con tres colores primarios rojo, amarillo y azul. Tuvo en cuenta que este triángulo
como un diagrama de la mente humana y relacionó a cada color con ciertas emociones. Aunque
su círculo cromático se parecía al de Newton, Goethe hizo un enfoque innovador de la teoría del
color añadiendo el impacto emocional del color sobre la gente al círculo cromático. Su libro, que
fue publicado en 1810, dividía los colores adicionalmente en aquellos que producen emociones
positivas, y los que producen emociones negativas. (cardona, et al, 2014)

Kandinsky, Creador Del Arte Abstracto

La liberación del color y la fuerza de las formas geométricas, dan paso a las
vanguardias de la pintura abstracta. Podría decirse que Kandinsky fue el inventor, el creador, el
primero en pintar un cuadro totalmente abstracto, estilo poco comprendido y que tantos
enemigos tiene. Pero más allá de juzgar su pintura, más allá de las polémicas que siempre se
suscitan con el arte abstracto, con sus detractores a ultranza de un lado y los fieles e
incondicionales admiradores del otro, más allá de estos desencuentros, donde él mismo diría que
no todo el arte abstracto es bueno, al igual que no lo es todo el arte figurativo si éste no nace de
una "necesidad interior", está su vida, una vida llena de viajes, estudios, encuentros, prolífica
inspiración, una vida que rezuma honradez, gusto por el trabajo bien hecho y un afán de
pedagogía (véase su obra escrita) que merece, sin duda alguna, nuestra atención. Podrá no
gustarnos su obra, pero conociendo al personaje y sus ideas quizás empecemos a mirar, a ver este
arte con otros ojos, con otra emoción, con otra sensibilidad. (cardona,et al , 2014)
 19

Johannes Itten
Johannes Itten construyó su teoría basándose en el trabajo de Goethe, incorporando los
efectos emocionales del color con el trabajo que habían hecho teóricos anteriores. Su círculo
cromático es más complejo que el de sus predecesores.
Los 7 Contrastes de colores de Johannes Itten.
Johannes Itten, diseñador y profesor en la Bauhaus, es el primero que hizo una teoría
sobre los tipos de contrastes posibles que se producen entre las diferentes características de los
colores. Diferenció siete contrastes: saturación, temperatura, simultaneidad, cantidad,
luminosidad, colocación en el círculo cromático y calidad del color. (cardona, et al, 2014)

En esta tabla con colores se puede apreciar cuanto cambia la sensación visual de los
pequeños cuadros de colores, según el fondo de color en el que está ubicado:

Ilustración 1, Tabla de colores

Fuente: http://www.slideshare.net/ypena431/importancia-de-la-teoria-del-color-pdf
 20

Ilustración 2, 7 contrastes cromáticos de J. Itten

Fuente: http://agrega.juntadeandalucia.es/

7.2.Legales.

No se encuentran en la Constitución Nacional, leyes, decretos, resoluciones, acuerdos,

normatividad y estándares. Que hablen sobre la teoría del color.

7.3.Investigativos .

PSICOLOGIA DEL COLOR

Eva Heller
2000

Esta investigación fue realizada en Alemania mediante la encuesta a 2000 personas con
profesiones diferentes y algunas repetidas con edades comprendidas entre 14 y 97 años, donde
todos relacionaron colores con sentimientos y cualidades.

En la cual se establecieron asociaciones en 160 sentimientos e impresiones distintas, del

amor al odio, del optimismo a la tristeza, de la elegancia a la fealdad, de lo moderno a lo
anticuado con determinados colores.

Los resultados del estudio muestran que colores y sentimientos no se combinan de

manera accidental, que sus asociaciones no son cuestiones de gusto, si no experiencias
 21

universales profundamente enraizadas desde la infancia en nuestro lenguaje y pensamiento.

(Heller, 2008)

TEORIA Y PRÁCTICA DEL COLOR

Manuel Guzmán Galarza
2011

Pensado para estudiantes de arte, diseño y arquitectura. Hace referencia al fenómeno

sensorial de los colores y a la teoría artística del color, de los sistemas de ordenamiento sintáctico
del color.

El objetivo de este libro es lograr la comprensión de los colores mediante la realización

de una serie de ensayos y tanteos experimentales, que con la práctica se logra adquirir mayor
agilidad y destreza en su uso.

ARTE DEL COLOR

Johannes Itten
1922

El color es la vida pues un mundo de colores parece muerto. Los colores son las ideas
originales, los hijos, los hijos de la luz y de la sombra, ambas incoloras en el principio del
mundo. Si la llama engendra la luz, la engendra los colores, los colores provienen de la luz y la
luz es la madre de los colores. La luz fenómeno fundamental del mundo, nos revela a través de
los colores el alma viva de este mundo.

LA ARMONIA EN EL COLOR
Bride M. Whelan
1994
 22

La armonía del color, nuevas tendencias, es la guía perfecta para los diseñadores
gráficos decoradores de interiores, arquitectos, vendedores, artistas y artesanos en realidad para
aquel que desee comprender el lenguaje del color. Ya que debe afrontar la toma de decisiones.
Fija pautas acerca de cómo crear combinaciones de colores efectivos, explora los
sentimientos y los estados de ánimo con una amplia variedad de colores y sus posibles
combinaciones con 106 selecciones de colore y 1400 esquemas de combinación de colores
basadas en mensajes emocionales específicos, un circulo cromático de 12 segmentos. Aunque los
esquemas básicos y los colores que los acompañan brindan una gama infinita de sugerencias,
solo el ojo humano puede evaluar el resultado artístico final.

8. BASES TEÓRICAS

Las interfaces de usuario han venido transformándose en todos los sentidos que la
componen, por una parte la interfaz de usuario es uno de los factores más importantes de la
buena interactividad del humano- maquina sin embargo en el transcurrir de estos cambios se han
implementado una diversidad de colores pero en mala asignación para cada objeto de la interfaz,
es ahí donde la teoría del color que es un grupo de reglas básicas en la mezcla de colores para
conseguir el efecto deseado combinando colores de luz o pigmento, y viene a jugar un papel
muy importante para la creación de páginas web.

8.1. TEORIA DEL COLOR

Los autores (cardona, torres, peña, galeano, & ardila, 2014) definen La teoría del color
como un grupo de reglas básicas en la mezcla de colores para llegar al efecto deseado
combinando colores de luz o pigmentos.
También consiste en un grupo de reglas fundamentales sobre la combinación de los
colores y sus efectos; el color es una sensación producida por el reflejo de la luz en la materia y
 23

trasmitida por el ojo al cerebro, la materia capta las longitudes de onda que componen la luz
excepto las que corresponden al color que observamos y que son reflejadas. (cardona,et al, 2014)

8.2.QUE ES COLOR Y COMO SE PERCIBE

El color en si no existe (1670 y 1672, Isaac Newton), no es una característica del objeto
es más bien una apreciación subjetiva nuestra. Por tanto podemos definirlo como una sensación
que se produce en respuesta a la estimulación del ojo y de sus mecanismos nerviosos por
energías luminosas de ciertas longitudes de onda. (cardona, et al, 2014)

Vivimos en un mundo de colores, donde hay luz, hay color. La percepción de la forma,
profundidad o claroscuro está estrechamente ligada a la percepción de los colores.
El color es un atributo que percibimos de los objetos cuando hay luz. La luz está
constituida por ondas electromagnéticas que se propagan a unos 300.000 kilómetros por
segundos, eso significa que nuestros ojos actúan a la incidencia de la energía y no a la materia.
(cardona, et al, 2014)

Las ondas forman según su longitud de onda, distintos tipos de luz como infrarroja,
visible, ultravioleta o blanca. Las ondas visibles son aquellas cuya longitud de onda están
comprendidas entre 380 y 770 nanómetros. Los objetos devuelven la luz que no absorben hacia
su entorno. Nuestro campo visual interpreta estas radiaciones electromagnéticas que el entorno
emite o refleja como la palabra COLOR. (FotoNostra, s.f.)

Psicológicamente el color es una sensación consiente, resultante de la interacción de

nuestro sentido con la estimulación luminosa, el color es una percepción visual que se genera en
el cerebro al interpretar las señales nerviosas que le envían los foto receptores de la retina del ojo
y que a su vez interpretan y distinguen las distintas longitudes de onda que captan de la parte
visible del espectro electromagnético.
 24

La longitud de onda es el parámetro estimular (aspecto de la estimulación susceptible de

medida), preferentemente relacionado con la sensación de color pero solo representa el primer
paso en la cadena de acontecimientos que determinan esa sensación. (cardona, et al, 2014)
Al conjunto de procesos que completan estas cadenas causales se les denomina proceso
de codificación de color. Son los encargados de transformar un código físico, expresados en
términos de longitudes de ondas, en un código psicológico, expresados en términos de
experiencias conscientes de color. (cardona, torres, peña, galeano, & ardila, 2014)

Ilustración 3 Refracción de la luz (Isaac Newton)

Fuente: https://farmenta00.wordpress.com/tag/inercia/

8.3.EL COLOR / EL CÍRCULO CROMÁTICO

El ojo humano puede distinguir entre 10.000 colores. Se pueden además emplear tres
dimensiones físicas del color para relacionar experiencias de percepción con propiedades
materiales: saturación, brillantez y tono.
El círculo cromático: Nos sirve para observar la organización básica y la interrelación
de los colores, También lo podemos emplear como forma para hacer la selección de color que
nos parezca adecuada a nuestro diseño. Podemos encontrar diversos círculos de color, como el
que vemos en la ilustración 4.
 25

Ilustración 4, Circulo cromtico

Fuente: http://1.bp.blogspot.com/-
pg7Qp0roT1Q/TmQjw62y33I/AAAAAAAAABQ/Wi76cjsxr1Y/s1600/Circulo-
Cromatico1%255B1%255D.jpg

En este círculo cromático podemos encontrar:

 los colores primarios: rojo, azul y amarillo;

 los secundarios: verde, violeta y naranja;
 los terciarios: violeta rojizo, magenta, naranja amarillento, verde amarillento, verde
azulado y azul cian.

Teniendo en cuenta que el color negro se forma de la mezcla de todos los colores.
 26

Colores Primarios.

Ilustración 5 Colores Primarios

Fuente: http://www.ipixelestudio.com/teoria-color-diseno-web.html

Los colores primarios son aquellos que no se pueden obtener de la mezcla de ningún
otro. Son los colores básicos que mezclados darán lugar al resto de colores de la gama cromática.
Estos son el rojo, amarillo y azul. Sin embargo, si estamos hablando de colores de pantalla, tanto
en dispositivos móviles como en monitores de sobremesa, los colores primarios son el rojo,
verde y azul (RGB) los colores de la luz. (Ipixel Factory, 2013)

Dependiendo de qué ámbito, podemos encontrar tres juegos de colores primarios:

1. Los artistas y diseñadores parten de un juego formado por el rojo, el amarillo y el azul.
2. Mezclando pigmentos de éstos colores pueden obtenerse todos los demás tonos.
3. El segundo juego de primarios es el del rojo, verde y el azul, conocidos como primarios
aditivos.
 27

Son los primarios de la luz y se utilizan en el campo de la ciencia o en la

formación de imágenes de monitores. Si se mezclan en distintos tantos por ciento, forman
otros colores y si lo hacen en cantidades iguales producen la luz blanca. (Rios, 2012)
El tercer juego se compone de magenta, amarillo y cyan. Se tratan de los primarios
sustractivos y son los empleados por los impresores. En imprenta, la separación de colores se
realiza utilizando filtros para restar luz de los primarios aditivos, con lo que se obtienen los
colores de Impresión por proceso sustractivo. (Rios, 2012)

COLORES SECUNDARIOS

Ilustración 6 Colores Secundarios

Si mezclamos a partes iguales los colores primarios, es decir, el rojo con el amarillo, el
amarillo con el azul, y el azul con el rojo, se crean los colores secundarios, que son el naranja,
verde y magenta. La combinación de estos colores en diseño web genera una gran variedad de
contrastes. (Ipixel Factory, 2013)
 28

COLORES TERCIARIOS

Los colores terciarios se consiguen si mezclamos a partes iguales un color primario

junto con uno secundario, es decir, rojo con magenta, azul con verde, amarillo con verde, rojo
con naranja y amarillo con naranja. Asi que, ahora que se conocen cómo se crean los colores, se
entiende mejor cómo trabajan las combinaciones de colores en el modelo de rueda de colores.
(Ipixel Factory, 2013)

Ilustración 7 Colores Terciarios

COLORES COMPLEMENTARIOS

Los colores complementarios son colores que están situados uno frente al otro en la
rueda de color. Ejemplos de ello serían el rojo y el verde, azul y el naranja, el amarillo y el
púrpura, etc. Las combinaciones de colores complementarios crean un gran contraste entre sí al
usarlos a la vez. (Ipixel Factory, 2013)
 29

Ilustración 8 Colores Complementarios

COLORES ANALOGOS

Los colores análogos son colores que están uno justo al lado del otro en la rueda de
color. Es buena idea elegir un conjunto de colores análogos para crear una sensación de variedad
 30

en el diseño de tu página web. Ejemplos de estos serían el azul con el verde, el azul con el azul-
violeta o amarillo-verde, el amarillo con el amarillo-naranja. (Ipixel Factory, 2013)

Ilustración 9 Colores Análogos

 31

TRIADA DE COLORES

Ilustración 10 Triada de colores

Una tríada de colores es un conjunto de tres colores que están dispuestos uniformemente
alrededor de la rueda de color. Una tríada contiene una buena variedad de colores bien
 32

equilibrados. En el ejemplo de arriba, el cian, el naranja y el morado crean un bonito contraste

balanceado entre ellos. (Ipixel Factory, 2013)

COMPLEMENTARIOS DIVIDIDOS

Ilustración 11Complementarios Divididos

Los complementarios divididos parten de tomar un color y – en lugar de elegir el color

complementario que le corresponde en la rueda de color – tomamos los dos situados en
posiciones inmediatamente adyacentes. En el ejemplo anterior, si elegimos el amarillo, el color
opuesto en la rueda de color es el morado, pero en vez elegir este, cogemos el azul-morado y
rojo-morado, que crearán un gran contraste con el amarillo y entre ellos serán colores muy
cooperativos. (Ipixel Factory, 2013)
 33

CUADRO DE COLORES

Ilustración 12 Cuadro de Colores

El modelo de cuadrado de color tiene cuatro colores uniformemente espaciados
alrededor de la rueda de color. En el ejemplo anterior, los colores son azul, naranja, rojo-violeta,
y amarillo-verde. Estos esquemas de color son muy bonitos y funcionan bien con un color fuerte
y versiones más aclaradas de los otros tres colores. (Ipixel Factory, 2013)

TETRADICA DOBLE COMPLEMENTARIA

Los esquemas de color en tetrádica se construyen mediante la creación de un rectángulo

en la rueda de color. Selecciona dos opuestos en la rueda de color y a continuación
seleccionamos otro color desplazándonos dos espacios en la rueda y más su color
complementario. (Ipixel Factory, 2013)
 34

Ilustración 13 Tetradica Doble Complementaria

ACLARADOS Y OSCURECIDOS

Ilustración 14 Contraste de colores

El aclarado un color es cuando tomas un color, como el azul en el ejemplo anterior, y
agregas blanco al mismo. Un oscurecido es un color al que se le ha añadido negro. Puedes crear
 35

un gran esquema de colores monocromáticos con aclarados y oscurecidos del mismo tono de
color. (Ipixel Factory, 2013)

8.4.CLASIFICACION DE LOS COLORES

Se denominan colores fríos a todos los que participan o en su composición interviene el

azul y cálidos, a todos aquellos que participan del rojo o del amarillo.

Ilustración 15, Gama de colores

Fuente: http://www.todacultura.com/acuarelas/frios_calidos.htm
 36

Colores Cálidos

Ilustración 16 Colores Cálidos

Los colores cálidos son la gama de colores comprendida entre el Amarillo y el Rojo-
Violeta (rojos, amarillos y anaranjados), los asociamos a la luz solar, al fuego... de ahí su
calificación de "calientes". Los tonos cálidos, parecen avanzar y extenderse. También se les
conoce como Colores Activos
Los colores cálidos en matices claros: cremas y rosas, sugieren delicadeza, feminidad,
amabilidad, hospitalidad y regocijo y en los matices oscuros con predominio de rojo, vitalidad,
poder, riqueza y estabilidad. Por asociación la luz solar y el fuego al rojo-anaranjado, al amarillo,
etc. La distinción entre colores cálidos y colores fríos es bastante corriente. Los términos
"cálidos" y "fríos" apenas se refieren a los tintes puros, parecería que el rojo es un color cálido y
el azul es frío. Los dos términos parecen adquirir su significado cuando se refieren a la
desviación de un color dado en la dirección de otro color. Un amarillo o un rojo azulado tienden
a ser fríos, como también un rojo o un azul amarillento. Por el contrario un amarillo o azul rojizo
parecen cálidos. El que determina el efecto no es el color principal, sino el color que se desvía
ligeramente de él. Un azul rojizo parece cálido, mientras que un rojo azulado, parece frío. La
mezcla de dos colores equilibrados no manifestaría claramente el efecto. (cardona, et al, 2014)
 37

Colores Fríos

Ilustración 17 Colores Fríos

Los colores fríos son la gama de colores que va del Amarillo-verdoso al Violeta
pasando por el azul. Son aquellos colores que asociamos con el agua, el hielo, la luz de la luna,
siendo el máximo representante el color azul. Los tonos fríos, parecen retroceder y contraerse,
tales cualidades son particularmente notables cuando, además existe contraste de temperatura.
También se les conoce como Colores Pasivos. (Rios, 2012)

Se los considera por asociación con el agua al azul, violeta y verdoso. Los colores fríos
en matices claros expresan delicadeza, frescura, expansión, descanso, soledad, esperanza y paz y
en los matices oscuros con predominio de azul, melancolía, reserva, misterio, depresión y
pesadez. El clima influye mucho en el gusto por los colores. Las personas que viven en países
cálidos y de mucho sol prefieren, los colores cálidos, mientras que aquellas otras que viven en
latitudes frías y de poco sol muestran su gusto por los colores fríos. La saturación o croma se
refiere a la pureza de un color. Un color complementariamente puro sería producido sólo por una
longitud de onda lumínica
 38

Esta condición se advierte más de cerca en los tintes saturados del espectro. Cuando los
colores de diferentes longitudes de onda se mezclan, la vibración resultante se hace compleja, y
el color, es de un aspecto más desvaído. Cuando más semejantes las longitudes de onda que se
mezclan, tanto más saturada será la mezcla. El mínimo de saturación de obtiene con colores que
dan como resultado un gris acromático. Los colores que producen este efecto se conocen con el
nombre de complementarios. El grado de saturación obtenible varía con el valor de claridad del
color. La impureza acentúa la cualidad de temperatura que establece el tinte modificante,
haciendo que un color cálido sea aún más cálido y uno frío, más frío. (cardona,et al, 2014)

Estas cualidades que se les atribuyen a los colores es lo que se ha denominado

"Temperatura del color"

8.5.PROPIEDADES DE LOS COLORES

El tono:
Es el matiz del color, es decir el color en sí mismo, supone su cualidad cromática, es -
simplemente- un sinónimo de color. Es la cualidad que define la mezcla de un color con blanco y
negro. (Rios, 2012)
Está relacionado con la longitud de onda de su radiación. Según su tonalidad se puede
decir que un color es rojo, amarillo, verde... Aquí podemos hacer una división entre:
 tonos cálidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el
fuego...
 tonos fríos (azul y verde). Los colores fríos son aquellos que asociamos con el agua, la
luz de la luna. (Rios, 2012)

La brillantez:

Tiene que ver con la intensidad o el nivel de energía. Es la luminosidad de un color (la
capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono. Es
una condición variable, que puede alterar fundamentalmente la apariencia de un color. (Rios,
2012) La luminosidad puede variar añadiendo negro o blanco a un tono.
 39

Ilustración 18, Luminosidad

Fuente: http://my.visme.co/projects/25ed63

En general, con los tonos puros que tienen un valor más luminoso (amarillo lo, naranja,
verde) se consiguen las mejores variantes claras, mientras que los tonos puros que tienen
normalmente un valor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores
variantes oscuras. (Rios, 2012)

La saturación:

Está relacionada con la pureza cromática o falta de dilución con el blanco. Constituye
la pureza del color respecto al gris, y depende de la cantidad de blanco presente. Cuanto más
saturado está un color, más puro es y menos mezcla de gris posee. (Rios, 2012)

Ilustración 19, Saturacion

Fuente: http://my.visme.co/projects/25ed63
 40

Color: Color Luz y pigmento

Los colores menos saturados transmiten sensaciones tranquilas y suaves, por el

contrario los colores más saturados transmiten tensión. Por otro lado tenemos también el
concepto de matiz, que es la mezcla de un color con otro; en este sentido se puede hablar de rojo
granate, de rojo anaranjado (que tenga una buena parte de amarillo)... Estas diferentes
apreciaciones del color hacen muy difícil una nomenclatura de aceptación generalizada.
Por otro lado hay que tener en cuenta que el color está íntimamente relacionado con la
luz y el modo en que esta se refleja. Podemos diferenciar por esto, dos tipos de color: el color luz
y el color pigmento. (Netdisseny, 2003)

El Color Luz: Luz

Los bastones y conos del órgano de la vista están organizados en grupos de tres
elementos sensibles, cada uno de ellos destinado a cada color primario del espectro: azul, verde y
rojo, del mismo modo que una pantalla de televisión en color. Cuando vemos rojo es porque se
ha excitado el elemento sensible a esta longitud de onda. Cuando vemos amarillo es porque se
excitan a un tiempo verde y el rojo, y cuando vemos azul celeste (cyan), es que están
funcionando simultáneamente el verde y el azul (azul violeta). (Ballesteros, 2013)

Del mismo modo pueden obtenerse colores terciarios en los que las tres luces primarias
actúan a la vez en distintas proporciones y que hacen posible que, por ejemplo, en un televisor en
color se perciba una enorme cantidad de valores cromáticos distintos. Este proceso de formación
de colores a partir del trío básico azul, verde y rojo), es lo que se conoce como síntesis aditiva, y
en ella cada nuevo color secundario o terciario se obtiene por la adición de las partes
correspondientes de los tres fundamentales, siendo cada una de las sumas de color siempre más
luminosas que sus partes, con lo que se explica el que la mezcla de los tres permita la obtención
 41

del blanco, que es por definición, el color más luminoso .En este caso de lo que estamos
hablando es del color luz. (Ballesteros, 2013)

Fuente: https://borjalopezmenendez.files.wordpress.com/2010/12/mezcla.gif

Sintetizando:
Bastan tres colores (rojo, verde y azul) para obtener todos los demás mediante
Superposiciones. Estos tres colores se denominan primarios, y la obtención del resto de
los colores mediante la superposición de los tres primeros se denomina síntesis aditiva. Con este
proceso se obtienen los colores secundarios: magenta (azul + rojo), cyan (verde + azul) y
amarillo (verde + rojo), Este proceso se denomina síntesis sustractiva, y es más fácil prever el
color resultante (el azul + el amarillo originan el verde, el rojo + el amarillo originan el naranja).
(Rios, 2012)

El color pigmento: Por otra parte, cuando manejamos colores de forma habitual no
utilizamos luces, sino tintas, lápices, rotuladores... en este caso lo que estamos
hablando es del color pigmento. Cuando hablamos del color pigmento hablamos de
síntesis sustractiva, es decir, de pigmentos que aplicamos sobre las superficies para sustraer a la
luz blanca parte de su composición espectral.
 42

Todas las cosas (menos los medios transparentes) poseen unas moléculas llamadas
pigmentos, que tienen la facultad de absorber determinadas ondas del espectro y reflejar otras.
(Ballesteros, 2013)

Fuente:
http://www.uruguayeduca.edu.uy/UserFiles/P0001/Image/Ciencias%20naturales%20RSorribas%
20AEtchartea/SUSTRACTIVOS.JPG

8.6.PSICOLOGIA DEL COLOR Y SENSACIONES QUE PRODUCEN

El precursor de la psicología del color fue el poeta y científico alemán Johann Wolfgang
von Goethe (1749-1832) que en su tratado “Teoría del color” se opuso a la visión meramente
física de Newton, proponiendo que el color en realidad depende también de nuestra percepción,
en la que se halla involucrado el cerebro y los mecanismos del sentido de la vista. De acuerdo
con la teoría de Goethe, lo que vemos de un objeto no depende solamente de la materia; tampoco
de la luz de acuerdo a Newton, sino que involucra también a una tercera condición que es nuestra
percepción del objeto. De aquí en más, el problema principal pasó a ser la subjetividad implícita
en este concepto novedoso. (cardona,et al, 2014)
 43

Sin embargo, tal subjetividad no radica en los postulados de Goethe, sino en la misma
base física del concepto de color, que es nuestra percepción subjetiva de las distintas frecuencias
de onda de la luz, dentro del espectro visible, incidiendo sobre la materia. (cardona,et al, 2014)

Hoy en día el estudio más famoso basado en la teoría de los colores de Goethe es
Psicología del color, de Eva Heller.

La psicología del color es un campo de estudio que está dirigido a analizar el efecto del
color en la percepción y la conducta humana. (cardona, et al, 2014)
Las personas que trabajan con color como por ejemplo artistas, diseñadores gráficos o
de productos industriales, los terapeutas, los arquitectos de interiores, deben saber que efectos
producen los colores en los demás, cada uno de estos profesionales trabaja individualmente con
sus colores, pero el efecto del mismo ha de ser universal.

En el estudio de la Psicologa Eva Heller nos da a conocer evidencias de que los colores
son interpretados en más de 160 sentimientos diferentes, donde los resultados de estudios
demuestran que los colores y sentimientos no se mezclan de manera accidental, que sus
asociaciones no son cuestión de gusto si no de experiencias universales principalmente
enraizadas desde la infancia en nuestro lenguaje y nuestro pensamiento.

La creatividad se compone de un tercio de talento, otro tercio de influencias exteriores

que fomentan ciertos dotes y otro tercio de conocimiento adquirido sobre el dominio en el que se
desarrolla la creatividad, quien nada sabe de los efectos universales y el simbolismo de los
colores y se fía solo de su intuición, serán aventajados por aquellos que han adquirido
conocimientos adicionales, si sabemos emplear adecuadamente los colores, ahorraremos mucho
tiempo y esfuerzo.

En la cotidianidad conocemos más sentimientos que colores, por ello cada color puede
producir muchos efectos distintos, a menudo contradictorios, un mismo color actúa en cada
ocasión de manera diferente, por ejemplo el mismo rojo puede resultar erótico o brutal,
 44

inoportuno o noble. Un mismo verde puede parecer saludable o venenoso o tranquilizante. Un

amarillo radiante o hiriente. (Heller, 2008)

QUE SON LOS COLORES PSICOLOGICOS?

El color es más que un fenómeno óptico y que un medio técnico. Los teóricos de los
colores distinguen entre colores primarios, rojo, amarillo y azul; colores secundarios, verdes,
anaranjados y violetas; y mezclas subordinadas como rosa, gris y marrón. (Heller, 2008)

También discuten sobre si el blanco y el negro son verdaderos colores, y generalmente

se ignora el dorado y plateado, aunque en un sentido muy psicológico cada uno de estos trece
colores es un color independiente que no puede sustituirse por ningún otro y todos representan la
misma importancia. (Heller, 2008)

8.7.SIGNIFICADO DE LOS COLORES

Azul
La psicología del color azul, expresa profesionalismo, conocimiento, seriedad y
confianza, es un color utilizado para convencer a las personas a depositar su confianza, es por
ello que es utilizado en gran forma por empresas del sector bancario y de la salud. (Cruz, 2015)

Es el color de la inteligencia, la sabiduría, la reflexión y la paciencia. Induce al

recogimiento, proporciona una sensación de espacio abierto, es el color del cielo y el mar en
calma, y así evoca también paz y quietud. Actúa como calmante, sosegando los ánimos e
invitando al pensamiento. (Goethe, 1810)

El color preferido, el color de la simpatía, la armonía y la fidelidad pese a ser frio y

distante, el color femenino y el color de las virtudes espirituales, del azul real al azul de los
 45

tejanos; (cardona, et al, 2014). Es el color que cuenta con más adeptos, es el favorito del 46% de
los hombres y 44 % de las mujeres, Y casi no hay nadie que no le guste. (Heller, 2008)

ROJO

La psicología del color Rojo, expresa peligro, atracción, pasión, dinamismo, calidez y
agresividad, y aunque es un color que puede causar fatiga en las personas, es utilizado en muchas
partes debido a su gran particularidad de llamar mucho la atención, debido a que está asociado
con el fuego, la sangre, la temperatura, y el concepto alerta o peligro. Es utilizado en su gran
mayoría en marcas de consumo humano y en marcas que quieren influir dinamismo en las
personas. (Muñoz M. E., 2015)

Está relacionado con el fuego y evoca sensaciones de calor y excitación. Es el color de

la sangre y el fuego, el color de Marte, símbolo de la violencia, de la pasión sensual; sugiere
acción, impulso; es el color del movimiento y la vitalidad. Aumenta la tensión muscular, activa
un cierto estado de alerta en el cerebro. (Goethe, 1810)

El color de todas las pasiones, también se puede interpretar del amor al odio, el color de
los reyes y del comunismo, de la alegría y el peligro. (Heller, 2008)

AMARILLO

La psicología del color Amarillo, expresa calidez, dinamismo, amabilidad, luminosidad

y alegría, está muy relacionado con la comida, ocio y productos para los niños, su tonalidad de
color hace que al verlo lo asociemos con el sol, inteligencia, energía y en casos con la cobardía.
(Cruz, 2015)

Es el color del Sol. Para Goethe posee una condición alegre, risueña, es el color del
optimismo. El amarillo tiene las cualidades del sol, es el color del poder y la arrogancia, pero
 46

también de la alegría, el buen humor y la buena voluntad; es un color estimulante. (Goethe,

1810)

El color más contradictorio. Optimismo y celos, el color de la diversión, del

entendimiento y de la traición, el amarillo del oro y el amarillo del azufre. (Heller, 2008)

VERDE

La psicología del color verde, expresa relajación, naturaleza, frescura y dinamismo, está
muy relacionado con la naturaleza, la vida y la salud, su tonalidad de color hace que al verlo lo
asociemos con las plantas, la naturaleza y el dinero ya que este color es muy simbólico en estos
objetos. (Cruz, 2015)

El verde significa la llegada de la primavera, simboliza la juventud y la esperanza. Por

ser el color de la naturaleza, de los prados húmedos, sugiere aire libre y frescor; este color es
reconfortante, libera al espíritu y equilibra las sensaciones. (Goethe, 1810)

El color de la fertilidad, de la esperanza y de la burguesía, verde sagrado y verde

venenosa. el color intermedio. (Heller, 2008)

VIOLETA

La psicología del color Violeta, expresa lujo, realeza, sabiduría y creatividad, es un

color asociado a lo espiritual y psíquico, utilizado en marcas centradas en contenidos de
entretenimiento, lujo y fantasía. (Cruz, 2015)
 47

El violeta es el color de la madurez y la experiencia. En un matiz claro expresa

profundidad, misticismo, misterio, melancolía, es el color de la intuición y la magia; en su
tonalidad púrpura es símbolo de realeza, suntuosidad y dignidad. (Goethe, 1810)

De la purpura del color al color de la teoría, la magia, el feminismo y el movimiento

gay (Heller, 2008)

NARANJA

La psicología del color Naranja, expresa dinamismo, juventud, alegría y diversión, es

muy utilizados en productos dirigidos a personas con actitud alegre, divertida y de pensamiento
juvenil, es por eso que grandes marcas dirigidas a público juvenil utilizan este color en sus
logotipos. (Cruz, 2015)

Mezcla de amarillo y rojo, tiene las cualidades de ambos, aunque en menor grado. Para
Goethe es el color de la energía, un color para temperamentos primarios, que gusta a niños,
bárbaros y salvajes porque refuerza sus tendencias naturales al entusiasmo, al ardor, a la euforia.
(Goethe, 1810)
El color de la diversión y del budismo, exótico y llamativo pero subestimado. (Heller,
2008)

En estos seis colores se comprenden toda la enorme variedad de matices que pueden ser
obtenidos por las mezclas entre ellos y también por la de cada uno de ellos con el blanco o el
negro; cada una de estas variaciones participa del carácter de los colores de los cuales proceden,
aunque con predominio de aquel que intervenga en mayor proporción. (Goethe, 1810)
 48

NEGRO

La psicología del color Negro, expresa la elegancia, lo sofisticado, lo malo y lo simple,

también es asociado con la muerte la oscuridad y la noche. (Cruz, 2015)

El color del poder, de la violencia y de la muerte. El color favorito de los diseñadores y

de la juventud, el color de la negación y de la elegancia. (Heller, 2008)

BLANCO

La psicología del color Blanco, expresa limpieza, lo puro, lo bueno, el vacío y la

ausencia de todos los colores, es un color utilizado en ambientes estrechos o de poco espacio
para dar sensación de amplitud en estos ambientes carentes de espacio. (Cruz, 2015)

El color femenino de la inocencia. El color de la miel y de los espíritus. El color más

importante de los colores. (Heller, 2008)

TABLA PROPIEDAD Y PSICOLOGIA DE LOS COLORES

 49

Tabla 1, Propiedades y psicología de los colores

Fuente: http://www.webusable.com/coloursMean.htm

8.8.RESPONSIVE WEB DESIGN “DISEÑO WEB ADAPTATIVO”

Debido a la pluralidad de terminales, en los últimos años los diseñadores webs han
buscado soluciones para adaptar sus interfaces de usuario a la diversidad de tamaños de pantalla
y resoluciones de los dispositivos que actualmente usan el servicio web. (Vega, 2012)
 50

Ilustración 20, Ejemplo Interfaces con responsive web design

Fuente: http://richerimage.co.uk/wp-
content/thesis/skins/ri_v3/images/responsive_web_design_by_richerimage.co_.uk_.png

Entre 30.000 y 50.000 millones de nuevos dispositivos serán conectados a internet en

los próximos cinco años, revela el informe "Necesidades infraestructurales de la Economía
Digital" presentado en el Foro Económico Mundial para Asia Oriental que se celebró en
Yakarta. En marzo de 2015. (Vega, 2012)

“Responsive Web Design” es una filosofía o nuevo enfoque para solucionar los
problemas de diseño para la gran diversidad de resoluciones y dispositivos. Este enfoque quiere
centrarse en el contenido, y en el cliente, en su experiencia de usuario, si deja de trabajar con su
equipo de sobremesa y quiere continuar navegando en la misma página web desde una tablet o
smartphone. (Vega, 2012)

“Responsive Web Design” quiere eliminar la necesidad de diseños diferentes y nuevos

desarrollos para distintas resoluciones y por el contrario, sugiere que nuestro desarrollo debe dar
soporte y responder a la necesidad del contexto sobre el que se esté ejecutando, teniendo en
cuenta parámetros como el tamaño de pantalla, el tipo de dispositivo o la orientación. La página
 51

web debe de tener la capacidad de adaptarse a cada dispositivo, creando una solución única.
(Vega, 2012)

La creación del concepto como tal se le atribuye a Ethan Marcote, en un artículo que
escribió en la revista online “A List Apart” en el año 2010. En este artículo se describen las
técnicas y conceptos básicos que deben asumirse a la hora de implementar un diseño Responsive.
(Vega, 2012)

A nivel implementación Responsive Web Design tiene tres conceptos claves. El primero
de ellos es el uso de los Media Queries que nos ofrece CSS3 permitiéndonos aplicar estilos
condicionalmente teniendo en cuenta parámetros de la pantalla. El segundo se trata del diseño
web fluido, se trata de layouts1 definidos en porcentajes que se ajustan a los anchos de la
pantalla. Y por último el tercer concepto se trata de los elementos fluidos dentro de estos layouts,
como son las fuentes, las imágenes o elementos multimedia.

Al crear un sitio con Responsive Web Design solo necesitamos una única versión de
HTML y CSS que funcionará adecuadamente en cualquier tipo de dispositivo y resolución. Con
Responsive Web Design debemos de dejar de ofuscarnos en que nuestra web se vea idéntica en
cada dispositivo.

El término Responsive Web Design se acuña en la búsqueda de estas soluciones,

concretamente la idea nació en el año 2008 por el consorcio W3C en su recomendación “Mobile
Web Best Practices” que definieron el concepto “OneWeb”, que se basa en la idea de realizar un
diseño web para todos y accesible desde cualquier dispositivo, buscando que la experiencia del
usuario se enriquezca.

“One Web” significa proporcionar, en la medida de lo posible, la misma información y

servicios disponibles para todos los usuarios, independientemente del dispositivo que estos

1
Layouts : En efecto, su significado es plan, distribución, composición y también diseño de página. Este
sustantivo se ha formado a partir de dos términos ingleses: lay y out que, como dos palabras juntas forman un verbo
cuyo concepto es extender, exponer, trazar, presentar, diseñar.
 52

empleen. Esto no significa que el mismo contenido esté disponible en la misma representación
en todos los dispositivos. El contexto del empleo del dispositivo móvil, las distintas variedades
de las capacidades del dispositivo o problemas de ancho de banda en la red afectan a la
representación. Además de estas razones, ciertos servicios y contenidos son más adecuados en
ciertos contextos a usuarios específicos. Sin embargo, “One Web” se opone a la idea de separar
la versión móvil de la de escritorio, simplemente debe adaptarse al contexto. (Vega, 2012)

La aparición y establecimiento de HTML5, CSS3 y JavaScript en el mundo web ha

dado la posibilidad de que la web móvil consiga adoptar las mismas funcionalidades y obtenga la
misma importancia que la web de escritorio. El concepto Responsive Web Design aplicado con
estas tecnologías tiene el objetivo de reacomodar los elementos de una web para adaptarlos a la
resolución de pantalla del dispositivo, mediante la utilización de grids fluidos, imágenes
flexibles, media-queries en la hoja de estilo CSS y posibles modificaciones en la disposición del
contenido. Además, con una versión única en HTML y CSS se cubren todas las resoluciones de
pantalla, evitando los problemas de usabilidad que presentan los sitios web de ancho fijo.
Sin embargo el término Responsive Web Design no depende únicamente de un código
como tal, es también usabilidad, conlleva diseñar una experiencia para el usuario donde el
contenido es lo más importante y es lo que el diseñador debe tener cuenta, este término quiere
aportar una filosofía para afrontar el diseño de una página web. Todas estas son las principales
razones de por qué el término Responsive Web Design está ganando popularidad e importancia
en nuestros días. (Vega, 2012)

Es evidente que en este momento las tecnologías web del lado del cliente están tomando
bastante fuerza y gracias a los últimos lanzamientos de las últimas revisiones de HTML y CSS el
diseño web está alcanzando gran importancia.

Hoy en día, gracias a CSS3, HTML5 y Javascript se ha abierto un camino por el cual se
puede realizar todo lo que aportaba flash de una manera más rápida y eficiente Estas tecnologías
han impulsado el diseño de interfaces de usuario web aportando herramientas para crear nuevas
formas, trabajar con tipografías web y proporcionarnos grandes ventajas para interactuar con el
 53

usuario, obteniendo tiempos de carga menores y una mayor compatibilidad con navegadores
móviles.

El término Responsive Web Design se ha acuñado impuesto por la multitud de

dispositivos existentes haciendo que los diseñadores comiencen a preocuparse por esta creciente
tendencia, con el objetivo de llegar a todo tipo de usuario. Aunque muchos piensan que es una
tendencia de moda, realmente esta idea está desapareciendo, ya que cada día el concepto es más
importante y está mayormente valorado por el usuario, transformándose en una necesidad
adaptar nuestros diseños. (Vega, 2012)

8.9.EXPERIENCIA DEL USUARIO

Origen

Las limitaciones de los enfoques tradicionales para el diseño de productos interactivos

se deben a que resultan visiones sesgadas de este fenómeno interactivo, obviando variables tan
importantes como puede ser el comportamiento emocional del usuario. (Hassan Montero &
Martín Fernández, 2005)

En la búsqueda de soluciones de diseño más integradoras e inclusivas, en los últimos

años se ha popularizado – principalmente en el entorno profesional del desarrollo web– las
referencias a la "Experiencia del Usuario" (UX, User eXperience) como un nuevo enfoque para
el desarrollo de productos interactivos. (Hassan Montero & Martín Fernández, 2005)

Para D'Hertefelt (2000) la Experiencia del Usuario representa un cambio emergente del
propio concepto de usabilidad, donde el objetivo no se limita a mejorar el rendimiento del
usuario en la interacción - eficacia, eficiencia y facilidad de aprendizaje-, sino que se intenta
resolver el problema estratégico de la utilidad del producto y el problema psicológico del placer
y diversión de su uso. (Hassan Montero & Martín Fernández, 2005)
 54

El concepto de la Experiencia del Usuario tiene su origen en el campo del Marketing,

estando muy vinculado con el concepto de Experiencia de Marca – pretensión de establecer una
relación familiar y consistente entre consumidor y marca–. En el contexto del Marketing, un
enfoque centrado en la Experiencia del Usuario conllevaría no sólo analizar los factores que
influyen en la adquisición o elección de un determinado producto, sino también analizar cómo
los consumidores usan en producto y la experiencia resultante de su uso. (Hassan Montero &
Martín Fernández, 2005)

Encontrar una definición consensuada de un concepto de tan reciente aplicación en el

campo del diseño es una tarea difícil. Por ello se analizarán las diferentes definiciones y modelos
propuestos, con la intención de clarificar y componer una aproximación a la Experiencia del
Usuario.

Definición

Arhippainen y Tähti (2003) definen la Experiencia del Usuario sencillamente como la

experiencia que obtiene el usuario cuando interactúa con un producto en condiciones
particulares. En otro trabajo Arhippainen (2003) la define como las emociones y expectativas del
usuario y su relación con otras personas y el contexto de uso. (Hassan Montero & Martín
Fernández, 2005)

Knapp Bjerén (2003) es más específico al definirla como "el conjunto de ideas,
sensaciones y valoraciones del usuario resultado de la interacción con un producto; es resultado
de los objetivos del usuario, las variables culturales y el diseño del interfaz", especificando no
sólo de qué fenómeno es resultante, sino también qué elementos la componen y qué factores
intervienen en la interacción. En el contexto de la Web, DNX (2005) definen la buena
experiencia del usuario como un objetivo - "lo que se persigue es generar sensaciones y
valoraciones de los usuarios hacia nuestro sitio web lo más agradables, positivas y satisfactorias
posibles"-, además de reseñar la "fidelidad del usuario" como consecuencia de alcanzar este
objetivo. (Hassan Montero & Martín Fernández, 2005)
 55

La Experiencia del Usuario

Revisión y análisis de diferentes modelos teóricos y propuestas metodológicas, con el

objeto de clarificar y componer una aproximación a la Experiencia del Usuario. (Hassan Montero
& Martín Fernández, 2005)

1. HCI y Usabilidad

La Interacción Persona-Ordenador (HCI, Human-Computer Interaction) es un área de

estudio centrada en el fenómeno de interacción entre usuarios y sistemas informáticos, cuyo
objetivo es proporcionar bases teóricas, metodológicas y prácticas para el diseño y evaluación de
productos interactivos que puedan ser usados de forma eficiente, eficaz, segura y satisfactoria.
(Hassan Montero & Martín Fernández, 2005)

Puesto que las variables que intervienen en este fenómeno interactivo son muy diversas,
necesariamente y como indica (Hartson, 1998), la HCI es interdisciplinar en su práctica y
multidisciplinar en su origen. Entre las disciplinas sobre las que se sustenta podemos enumerar la
sicología cognitiva y de la conducta, ergonomía, antropología, sociología y ciencias de la
computación entre otras (Rozanski & Haake, 2003)

La Usabilidad, o Calidad de Uso, es un concepto central e inherente a la HCI. El

término es un anglicismo que significa facilidad de uso, y cuya definición formal se refiere al
grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr
objetivos específicos, en contextos de uso específicos. (Hassan Montero & Martín Fernández,
2005)
 56

Limitaciones del enfoque 'tradicional'

Tradicionalmente la investigación en el campo de la Interacción Persona-Ordenador ha

centrado su estudio en las habilidades y procesos cognitivos del usuario, estudiando únicamente
su comportamiento racional y dejando de lado su comportamiento emocional (Djajadiningrat,
Overbeeke, Wensveen; 2000) (Dillon; 2001) (Brave, Nass; 2002) (Picard, Klein; 2002) (Hekkert;
2001). Ésta es una visión sesgada de la realidad que implica deshumanizar al usuario y por tanto
no comprender en toda su completitud los factores que influyen en el uso y consumo de
productos interactivos. (Hassan Montero & Martín Fernández, 2005)

El comportamiento emocional del usuario es resultado de tres factores diferentes: las

emociones evocadas por el producto durante la interacción, el estado de humor del usuario y los
sentimientos pre-asociados por el usuario al producto.

Según Brave y Nass (2002), las emociones son evocadas en la relación hacia un
producto, mientras que el humor no, es un estado previo. Aún así tanto emoción como humor
tienen una relación de influencia mutua: las emociones experimentadas influyen en el estado de
humor del usuario, y el humor del usuario condiciona la posibilidad de que un producto evoque
determinadas emociones o no. (Hassan Montero & Martín Fernández, 2005)

Los sentimientos, al contrario que las emociones o el humor, no son estados del
individuo, sino propiedades de valor que el usuario asocia al producto resultado de sus
experiencias previas, ya sea por el uso con anterioridad de ese mismo producto o de productos
similares. (Hassan Montero & Martín Fernández, 2005)

Los aspectos emocionales juegan un papel fundamental en la interacción del usuario, no

ya sólo desde una perspectiva hedónica del uso de productos interactivos (Jordan; 1998), sino
porque como indica Norman (2002) los estados emocionales afectan a los procesos cognitivos.
En otras palabras, los estados afectivos del usuario influyen en cómo de bien éste resuelve
problemas racionales. De forma más específica, según Brave y Nass (2002) las emociones
 57

afectan a la capacidad de atención y memorización, al rendimiento del usuario y a su valoración

del producto. (Hassan Montero & Martín Fernández, 2005)

Tan importante como conocer las consecuencias de los estados emocionales del usuario
durante la interacción, es conocer cuáles pueden ser sus causas, principalmente aquellas
dependientes del diseño del producto.

El diseño de un producto puede evocar emociones de forma explícita, expresando

'afecto'; o implícita, a través de su estética. (Hassan Montero & Martín Fernández, 2005)

Otro medio de comunicación emocional es la estética, la cual juega un papel

fundamental en la satisfacción y placer de uso, y que paradójicamente hasta el momento ha
recibido muy poca atención por los investigadores en Interacción Persona-Ordenador (Lavie,
Tractinsky; 2004). Al hablar de estética en productos interactivos, no sólo nos referimos a la
apariencia visual del producto, sino a la estética de la interacción, donde la apariencia es una
parte. (Hassan Montero & Martín Fernández, 2005)

Factores que componen la experiencia del usuario

En el contexto de la Web, Morville (2004) propone el análisis de la Experiencia del

Usuario es base a siete facetas o propiedades que debe cumplir un sitio web: Útil, Usable,
Deseable, Encontrable, Accesible, Creíble y Valioso. En este mismo contexto Mahlke (2002)
identificaba cuatro propiedades del producto web - utilidad, facilidad de uso, cualidad de
hedónico y atractivo visual – como factores percibidos por el usuario y que influirán con distinto
peso en la intención de uso del producto. (Hassan Montero & Martín Fernández, 2005)
 58

Ilustración 21, Factores que componen experiencia del usuario

Kankainen (2002)

2. Práctica de la Experiencia del Usuario

Una de las aportaciones de la Experiencia del Usuario es su función de concepto

'paraguas' (Instone, 2005) bajo el que integrar las diferentes disciplinas y roles profesionales
implicados en el diseño de productos interactivos - ingeniería de la usabilidad, arquitectura de la
información, diseño gráfico, diseño de interacción, diseño de información, etc. –[1]. La
Experiencia del Usuario es una extensión de estas disciplinas que introduce una perspectiva más
amplia acerca de cómo las personas usan la tecnología (McClelland; 2005). En palabras de
González Vilalta (2004) "es una evolución, un cambio de paradigma o el crecimiento de la
disciplina más allá de las fronteras que hasta ahora la ponían coto". (Hassan Montero & Martín
Fernández, 2005)

Esto caracteriza el "Diseño de Experiencias de Usuario" como un enfoque

fundamentalmente interdisciplinario, para el que surgen modelos curriculares de carácter
necesariamente multidisciplinar, como el propuesto por Withrow (2005). (Hassan Montero &
Martín Fernández, 2005)

Otra de las aportaciones de la Experiencia del Usuario es su especial énfasis en los

aspectos emocionales en la interacción, a partir del cual surgen numerosas propuestas
metodológicas para capturar, más allá de la simple evaluación en términos de rendimiento
(eficacia y eficiencia), cómo resulta esta experiencia. (Hassan Montero & Martín Fernández,
2005)
 59

8.10. FRONT- END

Front-end es la parte del desarrollo web que se dedica de la parte frontal de un sitio web,
en pocas palabras del diseño de un sitio web, desde la estructura del sitio hasta los estilos como
colores, fondos, tamaños hasta llegar a las animaciones y efectos. (Arturo, 2014)
De forma general, front-end hace referencia al estado inicial de un proceso. Contrasta
con back-end, que se refiere al estado final de un proceso. (High View, 2015)

La idea general es que el front-end es responsable de recoger entradas de los usuarios, y

ser procesadas de tal manera que cumplan las especificaciones para que el back-end pueda
usarlas. La conexión entre front-end y el back-end es un tipo de interfaz. Front-end adquiere un
significado más especial en determinados contextos.

El front-end son todas aquellas tecnologías que corren del lado del cliente, es decir,
todas aquellas tecnologías que corren del lado del navegador web, generalizándose más que nada
en tres lenguajes, HTML , CSS Y JavaScript, la persona encargada del front-end, se dedica solo
a estas tres tecnologías, aunque esto no significa que no sepa como trabaja el Backend, ya que es
necesario para que pueda consumir datos y pueda estructurar correctamente un maquetado en
HTML y CSS para su mejor comodidad y la comodidad del Back-end a la hora de colocarlo
sobre un servidor, normalmente en Front-End se encarga de estilizar la página de tal manera que
la página pueda quedar cómoda para la persona que la ve, es decir, esta persona, debe de conocer
técnicas de User Experience para dar una experiencia de usuario cómoda a la persona que visita
la página, así mismo debe de saber de diseño de Interacción para que sepa colocar las cosas de
tal manera que el usuario las pueda ubicar de manera rápida y cómoda, es decir, el Back-end
posteriormente se encargará de llenar las páginas de información (en ocasiones) y de colocar la
página en un servidor, pero esto de nada sirve si la página es fea, por tanto, el programador del
Front-End debe de saber un poco de diseño, ya que como he dicho anteriormente, este se va a
encargar de que la página no solo se vea bonita para el usuario, si no que sea cómoda de utilizar,
cómoda de navegar e intuitiva, existen muchas tecnologías relacionadas a estos tres lenguajes
que se utilizan en el Front-End, por ejemplo, para JavaScript tenemos angular.js y backbone.js,
 60

que son tecnologías avanzadas que utiliza el front-end, este se puede apoyar en librerías de CS y
de JavaScript como animate.css y JQuery para poder dar una solución amena y cómoda, así
mismo, debe de conocer lenguajes de transferencia de información como XML y JSON, y Ajax
para hacer solicitudes sin necesidad de refrescar la página, en pocas palabras, el Front-End, es el
que se encargará de dejar bonita la página, en ver que los datos se muestren de manera cómoda
para el usuario, de que la interacción que realice sea llamativa y en la estética del sitio. (Diaz,
2014)
Front-end y back-end pueden traducirse al español el primero como interfaz, final
frontal o frontal y el segundo como motor.

Son términos que se relacionan con el principio y el final de un proceso. Estos términos
adquieren una relevancia mayor en ciertas áreas particulares

En diseño de software el front-end es la parte del software que interactúa con el o los
usuarios y el back-end es la parte que procesa la entrada desde el front-end. La separación del
sistema en front-end y back-end es un tipo de abstracción que ayuda a mantener las diferentes
partes del sistema separadas. La idea general es que el front-end sea el responsable de recolectar
los datos de entrada del usuario, que pueden ser de muchas y variadas formas, y los transforma
ajustándolos a las especificaciones que demanda el back-end para poder procesarlos,
devolviendo generalmente una respuesta que el front-end recibe y expone al usuario de una
forma entendible para este. La conexión del front-end y el back-end es un tipo de interfaz.

En diseño web (o desarrollo web) hace referencia a la visualización del usuario

navegante por un lado (front-end), y del administrador del sitio con sus respectivos sistemas por
el otro (back-end).

Los front-end tienden a ser programadores, pero hay diseñadores genios que también
hacen front-end. Son los encargados de maquetar la estructura semántica del contenido (HTML),
codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript).
 61

En la época actual los front-end tienen HTML5 y CSS3. Con HTML5, desde el front-
end, es posible hacer geolocalización, dibujo vectorial, guardar datos en el disco del usuario,
insertar audio y video, entre otras cosas.

Con CSS3, se pueden crear diseños altamente complejos sin la necesidad de imágenes
cortadas, sólo usando código. Bordes redondeados, sombras, degradados, fondos múltiples, entre
otros. (Diaz, 2014)

8.11. METODOLOGIA RAD

Según su autor Walter Maner (1997), es un modelo para el desarrollo de sistemas de

información de tamaño pequeño y mediano, se basa en la creación de prototipos.

Un prototipo es un sistema de información funcional a pequeña escala que permite

descubrir cuáles son las necesidades de los usuarios. El método para el desarrollo rápido de
aplicaciones tiene varias ventajas, entre las que se destacan su rápido desarrollo y su bajo coste
económico.

El desarrollo de un prototipo se realiza de forma iterativa. Tras ensamblar una primera

versión, los usuarios y los analistas trabajan sobre el prototipo haciéndolo crecer hasta alcanzar
con el sistema de información deseado. Normalmente, los prototipos solo tienen implementado la
parte funcional (que afecta directamente al usuario), mientras que la parte de seguridad y de
errores informáticos se resuelve posteriormente. (Alarcon, 2006)

El desarrollo rápido de aplicaciones (RAD) es una metodología orientada a objetos para

el desarrollo de sistemas, la cual incluye un método de desarrollo así como herramientas de
software. Tiene sentido hablar sobre RAD y los prototipos en el mismo capítulo ya que en
concepto son muy parecidos.

Algunos desarrolladores consideran a RAD como una metodología útil para los nuevos
entornos de comercio electrónico basado en Web, donde el denominado estatus del primer
 62

participante de un negocio podría ser importante. En otras palabras, para implementar una
aplicación en Web antes que sus competidores, tal vez sea conveniente para las empresas que sus
equipos de desarrollo experimenten con RAD. (Kendal & Kendal, 2011)

Fases de RAD

Según Kendal (2011), hay tres amplias fases para RAD en las que se involucra tanto a
los usuarios como a los analistas en la evaluación, el diseño y la implementación. En la
ilustración 21, se describen estas tres fases. Observese que RAD involucra a los usuarios en cada
parte del esfuerzo de desarrollo, con una intensa participación en la parte comercial del diseño.

Ilustración 22, Fases de la RAD

Ilustración 21, FASES DE RAD

FASE 1. PLANEACIÓN DE LOS REQUERIMIENTOS: En esta fase, los usuarios y

analistas se reúnen para identificar los objetivos de la aplicación o el sistema, y para identificar
los requerimientos de información que surgen a partir de estos objetivos.

FASE 2. TALLER DE DISEÑO RAD Se trata de una fase de diseño y refinación que se
puede caracterizar mejor como un taller. Durante el taller de diseño RAD, los usuarios responden
a los prototipos funcionales reales y los analistas refinan los módulos diseñados con base en las
respuestas de los usuarios.
 63

FASE 3. IMPLEMENTACION durante el taller, los analistas trabajan intensivamente

con los usuarios para diseñar los aspectos de negocio o los aspectos no técnicos del sistema.
(Kendal & Kendal, 2011)

9. TERMINOS BÁSICOS:

Síntesis aditiva: Al hablar de la síntesis aditiva del color debemos de hablar del color-
luz, es decir del color como radiación de luz. En este caso los colores primarios (con los que
podemos formar los demás) son el rojo, el verde y el azul.
Hay que darse cuenta que al mezclar luces de color, los colores resultantes de la mezcla
van a ser siempre más luminosos que los originales.
Podemos ver un ejemplo muy claro en la pantalla de los televisores o en los monitores.
Si miramos con una lupa veremos que la pantalla está formada por multitud de celdillas. Cada
una de ellas con tres bandas verticales de colores rojo, verde y azul. Podremos comprobar como
cada una de las bandas está más o menos iluminada dependiendo del color de la zona de la
pantalla.
Síntesis sustractiva: Cuando nos referimos a la síntesis sustractiva del color, nos
referimos al color como pigmentos, como pintura. Los pigmentos no emiten luz sino que
sustraen (absorben) parte de las radiaciones de la luz. Dependiendo que radiación de luz
absorban los veremos de uno u otro color. Como cada pigmento quita parte de la luz cuantos más
pigmentos mezclemos más oscuro será el color que obtendremos.
Los colores primarios en la síntesis sustractiva son el magenta, el amarillo y el azul
cian.
Colorimetría: la colorimetría es la determinación cuantitativa de la profundidad del
color. Es decir, es el arte de saber medir y mezclar los colores de acuerdo a nuestras necesidades.
La colorimetría es una ciencia que estudia y desarrolla el color para obtener una escala
de valores numéricos. Los coloristas lo aplican en su trabajo a través del círculo o estrella
cromáticos. Dicho círculo y estrella es la herramienta fundamental donde encuentran los colores
adecuados a partir de los colores primarios.
 64

10. DISEÑO METODOLÓGICO

10.1. TIPO DE INVESTIGACIÓN

Según la finalidad la Investigación es aplicada porque busca la utilización o aplicación

de los conocimientos que se adquiere, se vincula con la investigación básica.
Según la fuente de datos la Investigación es documental, ya que se apoya en fuentes de
carácter documental
Según el nivel de conocimiento la investigación se torna exploratoria porque es
considerada como el primer acercamiento científico a un problema, se utiliza porque este trabajo
aún no ha sido abordado o no ha sido suficientemente estudiado y las condiciones existentes no
son aun determinantes y según su naturaleza la investigación es cuantitativa ya que hay diseños
experimentales, encuestas, y utilización de datos ya existentes.

11. METODOLOGÍA DE INVESTIGACIÓN

11.1.METODOLOGIA DE MARCO LOGICO (MML)

Con esta metodología analizamos las dos etapas en las que se desarrolla esta
metodología de investigación, las cuales se siguen paso a paso en las fases de
identificación y de diseño del ciclo de vida del proyecto.

se realizó la identificación del problema y las alternativas de solución, y luego

se analiza la situación para crear y seleccionar las estrategias. En esta etapa se parte de la
idea —según Ortegón et al. (2005, p. 15) — de que todos los proyectos son diseñados
para resolver los problemas a los que se enfrentan los grupos de beneficiarios. Existen
cuatro tipos de análisis para realizar: el de involucrados, el de problemas, el de objetivos
y el de estrategias.
 65

Después en la etapa de planificación el proyecto se convierte en un plan

operativo práctico para la ejecución. En esta etapa se elabora la matriz de marco lógico
(MML). Las actividades y los recursos son definidos y visualizados en cierto tiempo.
Muchas veces en los proyectos las tareas de identificación, preparación,
evaluación, seguimiento y control de proyectos se desarrollan sin un planeamiento
estratégico. Y esto es muy importante pues es el que facilita ordenar y orientar las
acciones, y sin un plan estratégico y sin tener objetivos claros muchas veces los recursos
se destinan de manera errónea a varias direcciones sin satisfacer ninguna necesidad.

Así que para que una metodología de marco lógico funcione, y sea realmente
útil, se debe realizar antes una planificación estratégica que nos dé la dirección y el
rumbo de las acciones. Partiendo de ahí, de acuerdo con Ortegón et al. (2005, p. 10), la
metodología como herramienta ayuda tanto a enriquecer la información sobre las
decisiones presupuestarias, como a aportar argumentos valiosos para mejorar la gestión
de los programas mediante el seguimiento de los compromisos institucionales, facilitar el
monitoreo de las metas y, finalmente, favorecer la transparencia y la accesibilidad de la
información como insumo.

Para identificar los problemas y sus soluciones, aquí expusimos la metodología

de marco lógico presentada por Ortegón et al. (2005, p. 15), la cual incorpora seis
elementos analíticos que ayudan a guiar el proceso, y que vimos en detalle en los
siguientes apartados. Dichos elementos son: 1) análisis de los involucrados, 2) análisis
del problema, 3) análisis de los objetivos, 4) identificación de alternativas de solución al
problema, 5) selección de la alternativa óptima y 6) estructura analítica del proyecto.

3.2.1. Análisis de los involucrados: Ortegón et al. (2005, p. 71) recomiendan

realizar un diagrama que permita visualizar los distintos actores involucrados y cuáles
podrían ser las categorías de actores a utilizar dependiendo de las características
comunes de cada actor (por ejemplo, instituciones públicas: municipio, Ministerio de
Educación y organismos reguladores, podrían quedar en esta categoría), mediante la
identificación de los involucrados, clasificar a los involucrados, posicionar y clasificar a
 66

los involucrados y por ultimo identificar, analizar y seleccionar con involucrados el

tema.

3.2.2. Análisis del problema: Según Berumen (2010, p. 101), el análisis de

problemas es una investigación estructurada de los aspectos negativos de una situación
para establecer sus causas y efectos. Lo que se analiza son los problemas que enfrenta un
grupo determinado y que se pretenden resolver por medio de la realización del proyecto.
El análisis de problemas lo puede hacer el equipo técnico, pero se recomienda
que participen más actores, pues así el análisis será mucho más preciso y efectivo. Se
puede realizar en forma de taller en el que participen quienes conocen la problemática y
orientado por personas que conocen el método del análisis de problemas, animado por
una persona que domina el método y la dinámica del grupo.

3.2.3. Análisis de los objetivos: En el análisis de objetivos se realiza la

identificación y verificación de las situaciones positivas que los beneficiarios y las partes
interesadas consideran prioritarias y que deberían lograrse con la realización del
proyecto. El análisis consiste en convertir los estados negativos del árbol de problemas
en soluciones. Así que comparado con el análisis de problemas, lo que se hace aquí es
que todas las que eran causas en el árbol de problemas se transforman en medios en el
árbol de objetivos, los que eran efectos se transforman en fines, y lo que era el problema
central se convierte en el objetivo central o propósito del proyecto. Ortegón et al. (2005,
p. 16).

3.2.4. Identificación de alternativas de solución al problema: Para identificar las

mejores alternativas de solución al problema, debemos partir de los medios que están
más abajo en las raíces del árbol de problemas, como afirman Ortegón et al. (2005, p.
18). Con base en esto se proponen acciones probables que puedan —en términos
operativos— conseguir el medio. Esto quiere decir que si eliminamos las causas más
profundas estaremos eliminando el problema.
 67

3.2.5. Selección de alternativa optima: Este análisis consiste en la selección de

una o varias alternativas que se aplicarán para alcanzar los objetivos deseados. Se
selecciona la estrategia, no solo más factible en términos económicos, técnicos, legales y
ambientales, sino también pertinente, eficiente y eficaz, para lo cual se hace necesario
realizar una serie de técnicas y de estudios respectivos que permitirán utilizar criterios de
selección.

Ortegón et al. (2005, p. 19) presentan una lista de los diferentes análisis que
pueden ser útiles para seleccionar una alternativa. Entre las alternativas identificadas
como posibles soluciones del problema se evalúan y comparan diferentes análisis como
los siguientes:
 Diagnóstico de la situación: área de estudio, áreas de influencia, población
objetivo, demanda, oferta y déficit.
 Estudio técnico de cada alternativa: tamaño, localización, tecnología.
 Análisis de los costos de las actividades que demanda cada alternativa.
 Análisis de los beneficios.
 Comparación por medio de algunos criterios e indicadores y de esta comparación
tomamos la que muestra los mejores resultados.

3.2.6. Estructura analítica del proyecto: Como último elemento de análisis,

tenemos la Estructura Analítica del Proyecto (EAP), en la cual se diagrama un árbol de
objetivos ajustado a la alternativa o alternativas seleccionadas.

De acuerdo con Pacheco et al. (2005), la EAP tiene cuatro niveles jerárquicos:
fin, propósito, componentes y actividades. El fin y el propósito se toman del árbol de
objetivos original, mientras que los componentes y las actividades deberán construirse a
partir de la información resultado de los estudios de viabilidad que se utilizaron para el
análisis de alternativas. Ortegón et al. (2005, p. 18).
La EAP se estructura desde abajo hasta arriba, de igual manera que un árbol,
estableciendo una jerarquía vertical, de tal modo que las actividades aparecen en la parte
 68

inferior del árbol, se sube un nivel para los componentes, otro para el propósito, y
finalmente en la parte superior se encontrarán los fines del proyecto.
La cual nuestro resultado fue la MML que nos propusimos realizar para
encontrar las soluciones más apropiadas a la solución del problema. (carrascal)

Desarrollo Árbol de Problemas

Ilustración 23, Arbol de problemas

Autores: Hernando Vela & Diny Arias
 69

Desarrollo árbol de objetivos

Ilustración 24, Arbol de objetivos

Autores: Hernando Vela & Diny Arias

12. ASPECTOS DE INGENIERIA

12.1. APLICACIÓN DE LAS FASES EN EL DISEÑO WEB THEORYCOLOR.CO

FASE 1. PLANEACIÓN DE LOS REQUERIMIENTOS:

1. Documentar la información existente relacionada con la teoría del color aplicada al

diseño de páginas web.
2. Indagar sobre las técnicas Responsive Web Design más apropiadas para el diseño de
páginas web.
3. Desarrollar una página web con la correcta aplicación de la teoría del color y técnicas
Responsive Web Design, para ilustrar el apropiado uso de esta teoría.

Estos tres objetivos se llevaron a cabo mediante la búsqueda de información

confiable en artículos y libros virtuales que brindaron la información requerida para
implementarla en el diseño web, adicional a esto se implementa la tendencia responsive web
design para que dichos diseños sean adaptables a cualquier dispositivo.
 70

FASE 2. TALLER DE DISEÑO RAD

En el diagrama caso de uso Sistema Información Teoría del Color, nos ejemplifica
la relación que tiene lo actores (Diseñador / Programador, y Usuario), con el sistemas y las
acciones que este contiene.
Diseñador y Programador : Este actor interactúa con el sistemas diseñando sitio
web, que incluye Aplicar Responsive Web Design, Describir la Teoría del Color,
implementar RAD, aprobar diseño del sitio y publicar sitio en el servidor y portal.
Usuario: Este actor realiza consulta y lee biografía, consulta teoría y selecciona
temas que incluye visualizar un contenido, consulta acerca de nosotros y mira los autores,
consulta contáctenos y puede enviar un mensaje, consulta referencias y verifica datos
bibliográficos.

Ilustración 25.Digrama Caso de uso, Theory color.co

Autores: Hernando Vela & Diny Arias
 71

FASE 3. IMPLEMENTACION

Este diseño se elaboró con HTML 5, y Bootstrap, es un framework originalmente

creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad
es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice, Es decir, el
sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta
técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo. Se
adquirido el dominio en godaddy.com Go Daddy es una empresa registradora de dominios de
Internet y de alojamiento web.

Ilustración 26. Página principal Theory color

Autores: Hernando Vela & Diny Arias
 72

Ilustración 27, Parte Historia del color

Autores: Hernando Vela & Diny Arias
 73

CONCLUSIONES

El color es parte esencial para la comunicación audiovisual ya que posee la virtud de

elegir y dotar sentido a las cosas, nos ayuda a identificar lo que nos rodea, permitiendo que a lo
largo de nuestra existencia influya en nuestra sociedad.

El color nos sirve para identificar nuestra identidad de otros, además de que es
especialmente significativo en el mundo corporativo, se recomienda que cada empresa y cada
producto cuente con su propio color especialmente para representar lo que se intenta vender, las
páginas web son una herramienta importante para permitir escalabilidad de las empresas ya que
por medio de ellas se dan a conocer. Este es el trabajo de los diseñadores web y gráficos, quienes
buscan transmitir a través de mensajes y de la combinación de colores una idea clara y concisa.

A partir de los antecedentes históricos, se puedo observar notablemente las

investigaciones realizadas por algunos científicos de gran importancia como Isaac Newton, que
descubrió que el color en si no existe, es más bien una subjetividad propia ante la incidencia de
la luz, y así mismo otros científicos que también brindaron su aporte al estudio del color. La
teoría del color no solo se estudió desde un punto de vista teórico, sino que además se investigó
desde el punto de vista psicológico con los aportes del científico alemán Johann Wolfgang von
Goethe, el cual estudió y probó las modificaciones psicológicas que el ser humano sufre ante la
exposición a los diferentes colores.

A partir de estas investigaciones, la psicóloga alemana Eva Héller realizo una

investigación y probó mediante encuestas que los colores pueden generar reacciones humanas
como sensaciones y cualidades propias que se basan en la experticia vivida por cada individuo.

Mediante el aprendizaje y uso de la buena utilización de la mezcla de los colores

adecuados se puede crear interfaces graficas agradables a la vista del usuario final, con ello se
logran crear sitios web eficientes. Con un sitio web potenciales clientes pueden informarse de los
productos y servicios, que las empresas ofrecen, a cualquier hora y desde cualquier lugar donde
 74

se tenga conexión a internet. Esto permitirá que las empresas crezcan exponencialmente gracias
al diseño eficiente de sus sitios web.

El ritmo de los avances tecnológicos requiere de herramientas modernas, por tanto, los
sitios Web pueden ser visualizados o accedidos desde un amplio abanico de dispositivos con
conexión a Internet, como computadoras personales, portátiles, PDA´s y Teléfonos móviles, es
ahí donde la aplicación de las técnicas responsive web design cobran gran importancia
articulando un diseño web de alta calidad.
 75

RECOMENDACIONES

Además de servir como base para futuros estudios sobre esta problemática, la
aplicación de esta propuesta sobre la teoría del color, permitirá que todas aquellas personas que
se dediquen al diseño web la empleen, con el único fin de generar una mejor calidad visual y una
mejor experiencia a los usuarios e indirectamente a los empresarios.

Se recomienda que el trabajo se siga desarrollando, ya sea por medio de los autores de
la investigación, que se encuentran adscritos al grupo de investigación Los centauros, Semillero
Eco digital de la Universidad Cooperativa de Colombia o cualquier estudiante o docente que se
interese por mejorar el tema, con el fin de que permita ser útil a la comunidad universitaria y
demás personas que estén interesadas en conocer sobre el tema.
 76

BIBLIOGRAFÍA

AKVIS. (2014-2015). http://akvis.com/. Obtenido de http://akvis.com/es/articles/teoria-

color/introduccion.php
Alarcon, V. F. (2006). Desarrollo de sistemas de información: una metodología basada en el
modelado. Barcelona: universidad politecnica de catalunya, SL.
Arhippainen, L., & Tähti, M. (2003). Empirical Evaluation of User Experience in Two
Adaptative Mobile Application Prototypes. Proceedings of the 2nd International
Conference on Mobile and Ubiquitous Multimedia. Norrköping, Sweden. Obtenido de
http://www.ep.liu.se/ecp/011/007/ecp011007.pdf
Arturo, C. (10 de septiembre de 2014). FalconMaster. Obtenido de
http://www.falconmasters.com/web-design/que-es-front-end-y-que-es-back-end/
Ballesteros, A. (10 de 02 de 2013). Ballesterismo. Obtenido de
http://www.ballesterismo.com/2013/02/color-luz-y-color-pigmento-los-curiosos.html
Barrios, S. (07 de octubre de 2010). Estudio del color. Obtenido de
http://es.scribd.com/doc/38906860/Estudio-Del-Color
cardona, a., torres, a., peña, y., galeano, s., & ardila, c. (21 de febrero de 2014). Importancia de
la teoria del color y caracteristicas. Obtenido de Slideshare:
http://es.slideshare.net/ypena431/importancia-de-la-teoria-del-color-pdf
carrascal, I. T. (s.f.). metodologia de marco logico para la implementacion y gestion de
proyectos. bogota.
Cruz, M. (28 de mayo de 2015). El significado de los colores y la Psicología del color. Obtenido
de http://www.publicidadpixel.com/significado-de-los-colores/
D'Hertefelt, S. (2 de febrero de 2000). Emerging and future usability challenges: designing user
experiences and user communities. Obtenido de
http://www.interactionarchitect.com/future/vision20000202shd.htm
Diaz, I. A. (12 de abril de 2014). ¿Que es FrontEnd Y Backend en la programación web?
Obtenido de http://serprogramador.es/que-es-frontend-y-backend-en-la-programacion-
web/
FotoNostra. (s.f.). FotoNostra. Obtenido de http://www.fotonostra.com/grafico/teoriacolor.htm
Galarza, M. G. (2011). Teoria practica del color. Cuenca Ecuador: Ideando.
Goethe, J. W. (1810). Zur Farbenlehre, Johann Wolfgang von Goethe. Obtenido de http://artes-
graficas.blogspot.com.co/2008/12/j-w-von-goethe-pionero-de-la-psicologia.html
Hartson, H. (1998). Human-computer interaction Interdisciplinary roots and trends. The Jo urnal
of Systems and Software 43 .
Hassan Montero, Y., & Martín Fernández, F. J. (septimbre de 2005). La experiencia del usuario.
http://nosolousabilidad.com/articulos/experiencia_del_usuario.htm.
Heller, E. (2008). Psicología del color, cómo actuan los colores en los sentimientos y razón.
Obtenido de http://es.scribd.com/doc/121053656/Psicologia-del-color
High View. (24 de 09 de 2015). Obtenido de http://high-view.com.mx/category/web/page/2/
Instone, K. (abril de 2005). User Experience: An Umbrella Topic. Obtenido de
http://uxnet.org/devcon/DevCon-Instone.pdf
Ipixel Factory. (19 de abril de 2013). Ipixel Factory. Obtenido de
http://www.ipixelestudio.com/teoria-color-diseno-web.html
 77

ISO 9241-11. (1994). Part: 11, Guidance on Usability. Ergonomic Requirements for Office Work
with Visual Display Terminals .
Kendal, K., & Kendal, J. (2011). ANALISIS Y DISEÑO DE SISTEMAS. MEXICO: PRENTICE
HALL.
Muñoz, M. (12 de febrero de 2011). Teoria del color. Obtenido de
http://es.scribd.com/doc/48708228/Teoria-del-color#scribd
Muñoz, M. E. (10 de 09 de 2015). Color. Obtenido de http://es.scribd.com/doc/280015744/Color
Netdisseny. (03 de 09 de 2003). mailxmail.com. Obtenido de http://www.mailxmail.com/curso-
nociones-basicas-diseno/color-luz-pigmento
Proa, A. (s.f.). www.academia.edu. Obtenido de
http://www.academia.edu/7128370/LA_TEORIA_DEL_COLOR
Rios, J. G. (octubre de 2012). Sistemas Optpelectrónicos: teoria del color. Obtenido de
http://www.dtf.fi.upm.es/sites/www.dtf.fi.upm.es/files/SOE_4-COLOR.pdf
Rozanski, E., & Haake, A. (2003). The Many Facets of HCI. Proceeding of the 4th conference
on Information technology curriculum, pp. 180-185. Lafayette, Indiana, USA.
Vega, A. A. (2012). Responsive Web Design: Interfaces Web Adaptables al dispositivo
empleando HTML5 y CSS3. Responsive Web Design: Interfaces Web Adaptables al
dispositivo empleando HTML5 y CSS3. universidad de alcala.