Color">
TRABAJO DE GRADO Diny Zulay Arias & Hernando Jose Vela
TRABAJO DE GRADO Diny Zulay Arias & Hernando Jose Vela
TRABAJO DE GRADO Diny Zulay Arias & Hernando Jose Vela
Dirigido Por:
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 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.
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.
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.
CONTENIDO
LISTAS DE TABLAS
Pág.
LISTAS DE FIGURAS
Pág.
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.
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
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.
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.
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.
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
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.
¿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
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.
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
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.
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)
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)
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:
7.2.Legales.
7.3.Investigativos .
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.
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.
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)
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.)
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
Teniendo en cuenta que el color negro se forma de la mezcla de todos los colores.
26
Colores Primarios.
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)
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
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
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
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)
TRIADA DE COLORES
COMPLEMENTARIOS DIVIDIDOS
CUADRO DE COLORES
ACLARADOS Y OSCURECIDOS
un gran esquema de colores monocromáticos con aclarados y oscurecidos del mismo tono de
color. (Ipixel Factory, 2013)
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
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)
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
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)
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
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.
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
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)
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)
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)
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
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
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)
VIOLETA
NARANJA
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
BLANCO
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
“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)
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.
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)
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.
Origen
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
Definición
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
1. HCI y Usabilidad
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)
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)
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.
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)
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.
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)
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.
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
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
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.
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.
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.
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)
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.
FASE 3. IMPLEMENTACION
CONCLUSIONES
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.
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
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.