Aplicación de la teoría del color y técnicas responsive web design en el desarrollo de aplicaciones front end

Texto completo

(1)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) 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) 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) 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) 5.

(6) 6 CONTENIDO. LISTAS DE TABLAS. Pág.. Tabla 1, Propiedades y psicología de los colores ___________________________________ 49.

(7) 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) 8. LISTAS DE ANEXOS.

(9) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 25. Ilustración 4, Circulo cromtico Fuente: http://1.bp.blogspot.com/pg7Qp0roT1Q/TmQjw62y33I/AAAAAAAAABQ/Wi76cjsxr1Y/s1600/CirculoCromatico1%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) 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) 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) 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) 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) 30 en el diseño de tu página web. Ejemplos de estos serían el azul con el verde, el azul con el azulvioleta o amarillo-verde, el amarillo con el amarillo-naranja. (Ipixel Factory, 2013). Ilustración 9 Colores Análogos.

(31) 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) 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) 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) 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) 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) 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 RojoVioleta (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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) 50. Ilustración 20, Ejemplo Interfaces con responsive web design Fuente: http://richerimage.co.uk/wpcontent/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) 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) 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) 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) 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) 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) 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.