FUNDAMENTOS DE DISEO Objetivo de la unidad

Con el estudio de esta unidad usted ser competente para:

Identificar los usos de los colores segn su connotacin y el uso correcto de la tipografa, para no cometer errores de este tema en el diseo de Sitios Web.

Introduccin a Diseo Web

4. Fundamentos de Diseo
4.1 Introduccin
Los fundamentos de diseo, son aspectos en los que se basa un buen diseo como lo son el color, forma y tipografa basndolos a la psicologa captada por el subconsciente, a manera de persuadir hacia el consumidor final. Entonces la funcin del diseador es, transmitir una idea de la forma ms eficaz posible. El diseador debe saber toda la informacin posible de lo que se va a transmitir para utilizar los elementos grficos adecuados, su imaginacin y todo aquello que pueda servir para la comunicacin del mensaje. El diseador para manipular los elementos debe saber la funcin especfica y lo que representa cada uno, como el color, la tipografa o una imagen. A continuacin veremos fundamentos de diseo que nos ayudarn a crear sitios con un concepto en color y tipografa bien manejados.

4.2 El Color

4.2.1 Definicin El color es una sensacin que se produce en respuesta a la estimulacin del ojo y de sus mecanismos nerviosos, por la energa luminosa de ciertas longitudes de onda. El color es pues un hecho de la visin que resulta de las diferencias de percepciones del ojo a distintas longitudes de onda que componen lo que se denomina el "espectro" de luz blanca reflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda est comprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendo radiaciones, pero ya no son percibidos por nuestra vista.

Introduccin a Diseo Web

4.2.2 Connotaciones del color Todos los colores nos hacen percibir una reaccin fsica, como la de fro en una habitacin pintada de azul o la de calor en otra pintada de rojo. La psicologa de los colores fue estudiada por grandes maestros a lo largo de nuestra historia, como por ejemplo Goethe y Kandinsky. Los colores clidos se consideran como estimulantes, alegres y hasta excitantes y los fros como tranquilos, sedantes y en algunos casos deprimentes. Aunque estas determinaciones son puramente subjetivas y debidas a la interpretacin personal, todas las investigaciones han demostrado que son corrientes en la mayora de los individuos, y estn determinadas por reacciones inconscientes de estos, y tambin por diversas asociaciones que tienen relacin con la naturaleza1. Por eso hay que tener muy en cuenta que colores utilizaremos en nuestro Sitio Web dependiendo del tema del mismo, veamos a continuacin las connotaciones que tiene cada color.

Amarillo: Es un color primario que tiene connotaciones positivas y negativas, en las positivas es el color de la luz, representa el sol, la accin, el poder y simboliza arrogancia, oro, fuerza, voluntad, alegra, liberacin y estmulo. Tambin se interpreta como jovial, afectivo, excitante e impulsivo. No es aconsejable utilizar grandes cantidades de amarillo porque tambin significa cobarda, envidia, ira, evoca satanismo por ser el color del azufre y traicin. Al combinar el amarillo con el rojo y el naranja constituyen los colores de la emocin. Mezclado con negro constituye un matiz verdoso muy poco grato y que sugiere enemistad, disimulo, crimen, brutalidad y recelo. Mezclado con blanco puede expresar cobarda, debilidad o miedo y tambin riqueza, cuando tiene un poco de pigmento verde.

1 http://www.estocolmo.se/cultura/color_oktub23.htm

Introduccin a Diseo Web

Naranja: Connota entusiasmo, exaltacin, fuerza activa y radiante, expresin, dinamismo y energa. Acta como fuerza estimulante para los tmidos, tristes o linfticos. Es un estimulante del apetito ya que nos recuerda inconscientemente a las frutas tropicales. No es recomendable utilizarlo en grandes reas porque es demasiado atrevido y puede crear una impresin impulsiva que puede ser agresiva. Cuando el naranja es muy encendido o rojizo connota ardor y pasin. Mezclado con el negro sugiere engao, conspiracin e intolerancia.

Rojo: Es el color del movimiento, impulso, extroversin y la vitalidad. Simboliza sangre, fuego, sugiere calor y excitacin, revolucin, alegra, actividad, accin, pasin y fuerza. Tambin simboliza desconfianza, rabia, crueldad y destruccin. Este color llama mucho la atencin y es el ms saliente de todos, por su potencia de excitacin, por eso en extensiones grandes no es recomendable, ya que cansa rpidamente. Mezclado con blanco simboliza frivolidad, inocencia, y alegra juvenil. Mezclado con el negro estimula la imaginacin y sugiere dolor, dominio y tirana.

Violeta: Es el color de la templanza, lucidez, reflexin y melancola. Simboliza lo emocional y espiritual. Tambin significa martirio, misticismo, tristeza, afliccin, profundidad y experiencia.

Introduccin a Diseo Web

En su variacin al prpura, es realeza, dignidad y solemnidad. En un matiz claro expresa delicadeza. Mezclado con negro es deslealtad, desesperacin y miseria. Mezclado con blanco representa muerte, rigidez y dolor.

Azul: Simboliza la profundidad inmaterial, fro, calma, descanso, inteligencia, sabidura, espacio, amistad, fidelidad, serenidad, sosiego, verdad eterna e inmortalidad. Es el color del infinito, de los sueos y de lo maravilloso. Mezclado con blanco es pureza, fe y cielo, y mezclado con negro, desesperacin, fanatismo e intolerancia. No fatiga los ojos en grandes extensiones, pero cuando se utiliza en texto, no es aconsejable ya que tiende a relajar e incluso dormir al lector.

Verde: Simboliza la naturaleza, primavera, el crecimiento, esperanza, razn, caridad, realidad, lgica y juventud. Produce reposo en el ansia y calma, tambin sugiere amor y paz. Sugiere humedad, frescura y vegetacin. Tambin es el color de los celos, de la degradacin moral y de la locura. Mezclado con blanco expresa debilidad o pobreza.

Blanco: Es el que suma o sntesis de inocencia, pureza, impresin luminosa

mayor sensibilidad posee frente a la luz. Es la todos los colores. Simboliza lo absoluto, unidad, paz, modestia y rendicin. El blanco crea una de vaco, positivo e infinito.

Introduccin a Diseo Web

Negro: Smbolo del error, del mal, el misterio y en ocasiones simboliza algo impuro y maligno. Es la muerte, es la ausencia del color. Tambin transmite nobleza y elegancia. Estiliza y acerca.

Gris: Simboliza neutralidad, tristeza, duda y melancola. Es una fusin de alegras y penas, del bien y del mal. Da la impresin de frialdad metlica, pero tambin sensacin de brillantez, lujo y elegancia.

Marrn: Es un color masculino, severo, confortable. Es evocador del ambiente otoal y da la impresin de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra en donde caminamos.

Hay que tomar en cuenta que en general los colores a plena saturacin son usados muy pocas veces en superficies de gran tamao, tenemos de gran ejemplo la naturaleza, que nunca los utiliza en amplias extensiones, sino como acentos o pequeas reas de animacin.

4.2.3 Interacciones del Color: Armona y Contraste Un mismo color permite innumerables lecturas. Un mismo tono puede parecer diferente cuando se coloca sobre diferentes fondos, y diferentes colores pueden parecer casi el mismo cuando se asocian a distintos fondos.

Introduccin a Diseo Web

Como vemos en este ejemplo el mismo elemento y del mismo color contrastado con fondos de diferentes colores hace que parezcan que cambia su tono y su valor. Adems de las diferencias de tono, los colores reciben influencias que se reflejan en su luminosidad y oscuridad, calidez y frialdad, brillo y sombra y segn los colores que los rodeen. Existen dos formas bsicas compositivas del color. Una de ellas es la armona y la otra el contraste. Armonizar: Significa coordinar los diferentes valores que el color adquiere en una composicin, es decir, cuando en una composicin todos los colores poseen una parte comn al resto de los colores componentes. Armnicas son las combinaciones en las que se utilizan modulaciones de un mismo tono, o tambin de diferentes tonos, pero que en su mezcla mantienen los unos parte de los mismos pigmentos de los restantes. La armona ms sencilla es aquella en la que se conjugan tonos de la misma gama representados en gradaciones constantes. La mezcla de colores consiste simplemente en hallar relaciones entre los tonos. Mezclar dos colores para dar un tercero, por ejemplo, crea un puente visual entre los dos primeros. El tercer color es un tono nacido de dos colores a los que se parece. Colocar un color mezclado entre los dos colores de los que procede no slo comporta una armoniosa distribucin de los tonos, sino que crea una sorprendente ilusin de transparencia. Los dos tonos originales parecen dos hojas de acetato coloreado que se superponen para formar un tercer color. La habilidad para hallar similitudes entre los tonos favorece en gran medida el proceso de seleccin del color, pues permite combinar con armona y equilibrio todos los colores de un diseo. Contraste: Se produce cuando en una composicin los colores no tienen nada en comn. Existen diferentes tipos de contraste: - Contraste de tono (cuando utilizamos diversos tonos cromticos). - Contraste de claro/oscuro (el punto extremo est representado por blanco y negro).

Introduccin a Diseo Web

- Contraste de saturacin (se produce por la modulacin de un tono puro saturado con blanco, con negro, con gris, o con un color complementario). - Contraste de cantidad (contraposicin de lo grande y lo pequeo, de tal manera que ningn color tenga preponderancia sobre otro). - Contraste simultneo (se produce por la influencia que cada tono ejerce sobre los dems al yuxtaponerse a ellos en una composicin grfica). - Contraste entre complementarios Para lograr algo ms armnico conviene que uno de ellos sea un color puro, y el otro est modulado con blanco o con negro. El tono puro debe ocupar una superficie muy limitada, pues la extensin de un color en una composicin debe ser inversamente proporcional a su intensidad). - Contraste entre tonos clidos y fros. Por ejemplo, en un contraste de claro/oscuro: hay uno o varios colores ms aproximados al blanco y uno o varios colores ms aproximados al negro2.

4.3

Tipografa

La tipografa es el estudio, diseo y clasificacin de las diferentes familias o tipos de letras.

4.3.1 Color en la tipografa La combinacin de tipos y color hace que se resalte los atributos visuales y expresivos de la tipografa. Cuando se elige un color para un tipo de letra es importante cuidar su legibilidad, por ejemplo el contraste ms utilizado a lo largo de los aos ha sido el color negro en letras sobre papel blanco, esta combinacin es la ms legible. Por lo tanto el diseador debe de combinar las propiedades del texto y del color para lograr una correcta legibilidad y multiplicar su potencial comunicativo, por medio del contraste en la letra y el fondo. Cuando se utiliza el color azul y el fucsia, totalmente saturados, ofrecen un contraste tonal pleno, pero aplicado a un texto y fondo los bordes de las letras tienden a oscilar y complica la
2 http://www.newsartesvisuales.com/funda/color5.htm

E.

Introduccin a Diseo Web

lectura del texto. Esto ocurre porque ambos colores poseen un brillo que rivaliza entre s y que reclaman atencin propia. Se soluciona ste problema suavizando cualquiera de los dos tonos.

E.

Si el tipo de letra es grueso o delgado tambin se tiene que tener en cuenta esta cualidad, ya que pueden parecer muy dbiles o ilegibles si los tonos son muy similares o si los valores del color son muy similares. Por lo tanto, debe de existir el contraste suficiente para proteger la fidelidad de las letras.

4.3.2 Legibilidad de la tipografa El texto legible, es el que facilita su lectura al posible lector. Para la legibilidad de los textos largos se debe escoger caracteres que sean abiertos y bien proporcionados, con regularidad en los tipos y con remates clsicos. Los tipos de letra estilsticos o irregulares son menos legibles, por lo se recomienda utilizarlos en titulares. La tipografa utilizadas en los sitios web, la gran mayora es el tipo de letra por defecto en sus sistemas operativos, que son Windows o Mac Os, por lo parece lgico disear nuestro sitio buscando la mayor compatibilidad tipogrfica entre ambos sistemas y nadie tendr problemas para leerlo.

Introduccin a Diseo Web

Las fuentes serif son las que tienen un pequeo remate al pie de las letras, como si fuera un apoyo o un pedestal, por ejemplo la Times New Roman. Est demostrado que esto facilita la lectura en papel, pero para la web la perjudica, ya que la resolucin no es tan buena y aparece emborronado. Por eso, para la web siempre hay que usar tipografa sans-serif que es la simple, como la Arial. En grandes extensiones de texto, si se utiliza la negrita es muy denso y tambin dificulta la lectura. Otro problema que puede surgir en la legibilidad es el espacio entre las palabras, ya que puede entorpecer la lectura y la esttica cuando las palabras distan mucho unas de otras. Hay que encontrar una medida razonable, que depender del tipo de escrito que se est desarrollando.

Veamos otros aspectos importantes de la legibilidad en el texto: Interlineado: El interlineado es el trmino tipogrfico que describe el espacio vertical entre lneas. La interlnea se usa para dar mayor legibilidad a las lneas de un texto, cuando stas son largas y estn compuestas en un cuerpo pequeo. La alineacin del Texto: La alineacin del texto es un paso importante para mantener tambin una buena legibilidad. Las opciones de alineacin en un diseo de una pgina tradicional son: Alinear a la izquierda, alinear a la derecha, centrar, justificar y alineaciones asimtricas. El texto alineado a la izquierda es el recomendable para textos largos. Crea una letra y un espacio entre palabras muy equilibrado y uniforme. Alineacin a la derecha se encuentra en sentido contrario del lector porque resulta difcil encontrar la nueva lnea. Este mtodo puede ser adecuado para un texto que no sea muy extenso. El texto justificado, alineado a derecha e izquierda. Puede ser muy legible, si el diseador equilibra con uniformidad el espacio entre letras y palabras.

10

Introduccin a Diseo Web

Las alineaciones centradas proporcionan al texto una apariencia muy formal y son ideales cuando se usan en poco texto. Se debe evitar configurar textos demasiado largos con esta alineacin. Alineaciones asimtricas se utilizan cuando el diseador quiere romper el texto en unidades de pensamiento lgicas, o para dar ms expresividad a la pgina3. Variables visuales: definicin, orientacin y tamao Las variables visuales son las variaciones que han sufrido las letras como la forma, la orientacin, el tamao y el movimiento. La forma de un tipo puede ser mayscula y minscula. La orientacin es la inclinacin que tienen las letras que se emplea para remarcar una letra dentro de un bloque de texto, para que destaque del resto. De la misma forma, un texto escrito todo en cursiva, resulta pesado leerlo. El tamao se refiere a la anchura y altura de un tipo de tipografa. Habitualmente se mide en puntos (pt), y al variar estos puntos el tipo aumenta o disminuye proporcionalmente en altura y anchura.

Ancho del texto para los sitios web Hay algunas teoras sobre la conveniencia de utilizar un ancho de texto u otro. Segn estudios, la anchura adecuada para la web es no menos de 500 pxeles sin superar nunca los 700. Adems, el texto lquido que se adapta al tamao del navegador, aunque es bueno para la accesibilidad, los usuarios con resoluciones altas de pantalla tendrn lneas demasiado largas, pero no redimensionarn el navegador, por lo que no leern el texto por lo tanto el ancho del texto siempre tiene que ser fijo.

3 http://www.fotonostra.com

11

Introduccin a Diseo Web

ACTIVIDADES
Realizar cinco composiciones dependiendo de las connotaciones del color y tipografa. Las composiciones las puede realizar en Word o PowerPoint. Utilice su imaginacin. Por ejemplo:

rea de Bebs

MUERTE

12