Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Teoría del color en sitios WEB

MaxMendez
February 02, 2010

Teoría del color en sitios WEB

Los sitios web cada vez son más indispensables para las empresas y personas debido al gran auge de Internet, es por esto que con el paso del tiempo los sitios se han hecho cada vez más sofisticados y han adquirido más servicios.

Debido a la gran competencia y auge de los sitios web es que se han formado profesionales especializados en esta área los cuales han tomado las teorías del diseño para ponerlas en práctica en este medió, creando diseños basados en imágenes y tecnologías como html, ajax y css.

MaxMendez

February 02, 2010
Tweet

More Decks by MaxMendez

Other Decks in Design

Transcript

  1. Índice Introducción........................................................................................................2 Armonía en la Combinación de Colores...............................................................3 Armonía Monocromática..................................................................................4

    Armonía Complementaria................................................................................4 Armonía Complementaria Dividida..................................................................4 Armonía de tres colores...................................................................................5 Selección Natural de los Colores.........................................................................6 Efectos Psicológicos del Color.............................................................................6 Herramientas Para Selección de Colores.............................................................7 Conclusión ..........................................................................................................8 Bibliografía .........................................................................................................9
  2. Introducción Los sitios web cada vez son más indispensables para

    las empresas y personas debido al gran auge de Internet, es por esto que con el paso del tiempo los sitios se han hecho cada vez más sofisticados y han adquirido más servicios. Debido a la gran competencia y auge de los sitios web es que se han formado profesionales especializados en esta área los cuales han tomado las teorías del diseño para ponerlas en práctica en este medió, creando diseños basados en imágenes y tecnologías como html, ajax y css. Una de las teorías más importantes en el diseño, es la de color la cual tiene gran relevancia en todas las áreas del diseño, esto por el impacto que este tiene en las creaciones finales y los efectos psicológicos que produce en el espectador. Es por esto que a lo largo de este trabajo se analizara el uso de esta teoría en el diseño web.
  3. Armonía en la Combinación de Colores La armonía es uno

    de los fundamentos indispensables en el diseño, siendo junto con el contraste la forma compositiva del color. Al armonizar se busca que todos los valores de una composición se encuentren coordinados, debido a que estos deben ser parte de un todo para que la composición sea exitosa. El concepto de la armonía cromática también conocida como armonía del color, se basa en un equilibrio óptimo entre los colores a emplear en una compasión, concepto que ha venido evolucionando desde la antigüedad Griega hasta la actualidad. En una gran variedad de armonías cromáticas se encuentran tres colores siendo uno la base o dominante, el cual es el más neutro y acapara la mayor parte de la superficie el cual se usa para hacer destacar al resto de tonalidades. Se encuentra también un color tónico, el cual es un complementario del base teniendo este una utilidad de dar animación, ya que es el más sobresaliente de los 3. Finalmente se encuentra un color de mediación entre los dos colores anteriores, normalmente teniendo una cercanía con el color tónico. Existen distintos tipos de armonía del color que son comúnmente utilizados, los cuales son: • Armonía monocromática. • Armonía análoga. • Armonía complementaria. • Armonía complementaria dividida. • Armonía de tres colores o triada.
  4. Armonía Monocromática Se elige un solo color, un mismo punto

    en el círculo cromático, al cual solamente se le modifica la luminosidad, obteniendo de esta forma distintas tonalidades pero con el mismo valor y saturación. Armonía Análoga Los colores se eligen al estar yuxtapuestos entre sí. Gracias a su cercanía se logra armonía al ser parecidos, lo que se debe a que uno de los colores se repite en los siguientes, es por esto que se les llama análogos.
  5. Armonía Complementaria Los colores se eligen por estar en puntos

    totalmente opuestos en el círculo cromático, de esta forma se logra un efecto de refuerzo entre sí, creando una armonía intensa y contrastante. Armonía Complementaria Dividida Se selecciona un color, y los 2 colores al lado del opuesto de este, produciendo un contraste menos marcado.
  6. Armonía de tres colores Se eligen tres colores que coinciden

    con los vértices de un triangulo dentro del circulo cromático. También existen versiones complejas en las que se forma un cuadrado o incluso un pentágono.
  7. Selección Natural de los Colores El color es la principal

    influencia con respecto a lo que el público siente con respecto a un diseño. Además de ayudar a guiar dentro del diseño y marcar elementos importantes, los colores afectan directamente el estado de ánimo de quien lo mira. Es por esto que el seleccionar combinaciones de color encontradas en la naturaleza resulta ser una herramienta muy útil para el diseñador, mostrándose funcionales ya que se muestran igualmente útiles que los colores artificiales para guiar y marcar elementos dentro del diseño pero con la diferencia de que estos al no ser tan saturados, no resaltaran de la misma forma siendo especialmente útiles en diseños en los cuales la audiencia deba concentrarse en el contenido por un tiempo más largo, creando los colores artificiales una distracción a la vista en elementos de menos importancia. Además la selección natural de los colores es esencialmente armoniosa por su misma condición natural, es posible que quienes lo miren sientan una inconsciente familiaridad, formando de esta forma sentimientos positivos y resultando más agradable para el usuario. Un ejemplo de selección natural del color es el siguiente, en donde se ha tomado una fotografía de referencia, y de esta se han seleccionado los colores más resaltantes de esta:
  8. Efectos Psicológicos del Color Es bien sabido que los colores

    logran un efecto psicológico en las personas, por lo cual se debe utilizar esta capacidad para lograr cumplir el objetivo de nuestro sitio web, gracias a estos podemos lograr que la visita de los usuarios sea más prolongada o corta. Desde el siglo XVIII se comenzó con el estudio de los efectos de estos en las personas, resultando en la actualidad en una teoría bien fundamentada y estudiada, en la que se han basado disciplinas relacionadas con el color, para lograr efectos en las personas gracias a esa capacidad de transmisión de estados. Es por esto que la selección de color en un sitio web es uno de los pilares principales del diseño ya que estos son los elementos más expresivos con que se cuenta, gracias a estos se puede prologar las visitas al tener un sitio con una paleta de colores que transmitan tranquilidad, seguridad y confort, es importante tomar en cuenta el significado de los colores a nivel cultural del sector a que va dirigida la pagina para de esta forma no transmitir un efecto no deseado. Cada color por si mismo tiene significados culturales e históricos, los cuales se acentúan o disminuir según los colores que le acompañen, por lo tanto para una composición correcta es necesario tener en cuenta el contraste de los colores para así asegurar que el ambiente que se desea dar sea el resultante. Es por el contraste que a pesar que un color tenga una connotación que pueda ser negativa puede disminuirse la percepción del mismo, convirtiéndolo en un color de segundo plano ayudando a resaltar otro que representa de mejor manera el mensaje a transferir.
  9. Herramientas Para Selección de Colores En un inicio los sitios

    web eran diseñados por programadores los cuales en su mayoría no tenían conocimiento alguno de diseño gráfico por lo cual la selección de colores y estructura en general eran hecho de forma intuitiva de la persona lo cual no siempre resultaba en un buen diseño. Como por ejemplo Yahoo! uno de los pioneros de Internet con su sitio web de 1996, el cual era bastante desordenado en la parte inferior, como es posible apreciarlo en la siguiente imagen: Con el desarrollo de las páginas web se debe no solo a la creación de una nueva disciplina la cual fusiona el diseño grafico con la programación sino también se debe a la evolución de los lenguajes utilizados para este fin, por ejemplo el HTML1 siendo su última actualización la 5 la cual conlleva una serie de cambios y herramientas nuevas las cuales permiten hacer diseños que antes necesitaban más trabajo en otros lenguajes, PHP2 es otro lenguaje que ha madurado a lo largo de este camino encontrándose vigente actualmente la versión 5.3 y preparándose ya la versión 6.0. 1HyperText Markup Language 2En un inicio llamado “Personal Home Page“ ahora conocido como “PHP Hypertext Preprocesso”
  10. Otro leguaje nacido para las web es el CSS3, el

    cual se encuentra en su versión 3, la implementación de este lenguaje es ahora necesario para cumplir los estándares mundiales, su función principal es definir la presentación de los documentos que se muestran por lo cual en este se dictan medidas, colores, fondos, tamaños de letras, entre otras propiedades que facilitan la presentación de los objetos HTML del sitio, es por esto que es una de los principales herramientas a la hora de programar un sitio web. Además de estos lenguajes existen una variedad grande de opciones, pero estos son de los más significativos a mi parecer. Toda esta evolución de lenguajes ha llevado también a una evolución de herramientas, entre estas han aparecido una variedad para la selección de color y facilitar esta tarea la cual es una de las más importantes del diseño, en la actualidad existen un sin número de estas desde herramientas con una apariencia simple como lo es Color Match de la página hypergurl.com la cual cuenta con una interfaz bastante simple y de características limitadas como se puede observar en la siguiente imagen: 3Cascading Style Sheets
  11. Hasta herramientas más elaboradas las cuales cuentan con la opción

    de selección de los diferentes tipos de colores para una composición ya sean triadas, colores análogos, monocromáticos, complementarios entre otros, para mi experiencia personal una de las más útiles es la herramienta en línea kuler de la empresa Adobe, la cual cuenta con una gran gama de opciones de selección y te permite además agregar o quitar opciones de colores, su única desventaja ante otras con igual capacidades e interfaz menos trabajada es la opción de visualizar en un documento web la selección dejando esta el uso de los colores obtenidos según crea el diseñador. A continuación puede observarse la interfaz de kuler con una selección de colores resultante: Existen una gran variedad de herramientas en línea que facilitan esta tarea, por lo cual es solo cuestión de navegar un poco y seleccionar la que más útil parezca para, todo gratuitamente sin la necesidad de instalar nada en el ordenador.
  12. Conclusión La importancia del color en el diseño de páginas

    web es de grandes proporciones como se pudo observar en cada uno de las áreas de estudio de este escrito, es por esto que no debe pasar desapercibido o a segundo plano la tarea ya que de esta puede depender el éxito o fracaso de mismo. Es posible concluir que al ser esta tarea tan importante es razón suficiente para justificar la aparición de herramientas que ayuden a la culminación satisfactoria de la selección de color para un sitio web, estas basándose en los principios de la teoría del color, disminuyendo en cierto nivel el error humano en esta tarea.
  13. Bibliografía Armonías de color. Disponible en: http://vectoralia.com/manual/html/armonias_de_color.html Armonía cromática. Disponible

    en: http://es.wikipedia.org/wiki/Armon %C3%ADa_crom%C3%A1tica Color, arquitectura y estados de ánimo. Disponible en: http://www.monografias.com/trabajos5/colarq/colarq.shtml#armo Los Colores y sus efectos Psicológicos. Disponible en: http://www.escuelaweb.com.mx/amazon2.htm Suero Wilbur. (2008). Combinaciones de colores naturales. Disponible en : http://retrorock.info/2008/08/combinaciones-de-colores-naturales/ Wroblewski Luke. (2003). Natural Selections: Colors Found in Nature and Interface Design. Disponible en: http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_ and_interface_design