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.

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
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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:
   

   View Slide

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.
   

   View Slide

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”
   

   View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

13. View Slide

14. 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
    

    View Slide