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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  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

    View full-size slide