Normal
0

21

false
false
false

ES
X-NONE
X-NONE

MicrosoftInternetExplorer4

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Guías para usar color en el diseño web

Dele a su sitio web un esquema de color

Las páginas web visualmente atractivas necesitan un esquema de color consistente. Sin color, a una página puede faltarle personalidad. Con un esquema de color consistente y balanceado, una página puede tener una personalidad consistente y balanceada. Demasiado color, o una coloración errática, le da a una página una personalidad confusa.

Un esquema de color se refiere a menudo a un sistema consistente de tonalidades que encaje bien. Puede significar alternativamente una manera de usar los colores, que no pertenezca necesariamente a una familia de tonalidades.

Por ejemplo, Apple.com usa colores diferentes en secciones diferentes, pero los colores son usados de una manera similar. En este caso, la consistencia deriva del tratamiento y la aplicación, más que de los colores en sí mismos.

Ejemplo de una página web sin suficiente color

La página inicial de Starbucks carece seriamente de un esquema de color.

Su fondo gris es inerte y se ve totalmente utilitario. La marca dice mucho acerca de un estilo de vida, como refleja el diseño de la tienda Starbucks, pero el sitio web carece totalmente de carácter.

Use suficiente color

Usar demasiado poco color conlleva el riesgo de que se vea aburrido o inerte. El color es una buena manera de identificar, agrupar o diferenciar elementos. Es barato (especialmente cuando es aplicado a través de Cascade Style Sheets). Si usa poco color, tiene que emplear otros medios para atraer al ojo, para diferenciar y darle significado a los elementos.

Deje espacios en blanco en las disposiciones de una página web

El blanco es el mejor fondo sobre el cual leer textos. Es una convención ubicar áreas con contenido sobre un fondo blanco (o de una coloración muy ligera). Las áreas blancas sobresalen rápidamente para la vista como áreas que llevan contenido.

Use su fondo más ligero para el contenido principal

Voy a afirmar sin ninguna duda que el blanco es el mejor tono/color para poner su contenido central. El área de tono más claro en su página debe ser su área de contenido, porque es convencional y lo que el cerebro espera.

Ejemplo de un color de fondo claro usado erróneamente

Este ejemplo vino de http://www.pixelgraphix.de/ hace un tiempo. Con la hoja de estilo por defecto, el texto principal se despliega en cuadros de un gris muy claro sobre un fondo blanco. Note como su ojo no quiere enfocarse en los cuadros grises – quiere, por alguna razón, enfocarse en el blanco.

Original

Cambiado

La página inicial del proveedor de servicios de banda ancha irlandés HEAnet usa áreas blancas, pero no en el área de los contenidos. El contenido está sobre un color de fondo azul no demasiado claro. Esto hace un poco difícil enfocarse en el contenido.

Conserve colores intensos para atraer al ojo

El color intenso atrae al ojo, y cuanto más grande sea el área, más fuerte es será la atracción. Demasiados colores intensos atraen al ojo en demasiadas direcciones, y la técnica pierde su efectividad potencial.

www.collegeclub.com usa demasiado color y contraste intensos, que provocan que el ojo los saltee.

El área grande naranja fuerte en la mitad de la página es el elemento más atrayente, pero no lleva contenidos de gran valor. Este es un error de diseño.

www.guardian.co.uk usa también demasiados elementos altamente atractivos. La gran cantidad de cuadros de rojo brillante confunde al ojo, y la gran cantidad de cuadros de colores fuertes lo distrae del contenido relativamente claro de la mitad de la página.

El sitio web de la RNIB (Organización británica para los ciegos) se cuida de emplear suficientes tonos contrastantes para hacer que todos los elementos de la pantalla sobresalgan lo suficiente para gente con debilidades visuales moderadas.

La disposición y los colores fallan de varias maneras.

El esquema de color está en desorden. El logo de arriba a la izquierda arranca usando una buena combinación de tonos verde azulados. El resto de la página es dominado por una tonalidad roja, que no combina con el azul.

Entonces, el amarillo fuerte en la barra de navegación primaria agrega un color primario más. El problema es que los colores primarios no combinan fácilmente entre sí.

El color más intenso y contrastante es el fondo de la barra de navegación secundaria. Esto atrae al ojo primero hacia un elemento de un valor muy bajo, antes que hacia el logo del sitio o cualquier contenido.

Evite yuxtaponer colores intensos con imágenes fotográficas

Evite usar demasiados colores diferentes

Demasiado color puede verse hiperactivo o chillón.

Algunos colores van naturalmente bien juntos, algunos naturalmente chocan, particularmente cuando son adyacentes, lo que puede crear efectos negativos en algunas pantallas.

Esta combinación de colores es chocante y es difícil de leer, y además usa un tamaño de fuente muy pequeño.

Colocar áreas coloreadas junto a áreas menos saturadas o con escalas de grises puede verse muy inteligente.

Esquemas de color inspirados por la Naturaleza

Luke Wrobleski (en un artículo publicado en Boxes & Arrows) argumenta que muchos sitios web corporativos usan el mismo esquema seguro de colores y que están comenzando a verse todos igual. Él defiende un uso más creativo del color en las páginas web.

Él dice que, si aceptamos los beneficios de trabajar con convenciones de disposición, y hay limitaciones inherentes, el color se vuelve un medio más útil y atractivo para diferenciar los diseños.

Luke propone también una manera realmente bonita de encontrar esquemas de color complementarios: usando la inspiración de la Naturaleza.

Sitios corporativos que se ven igual

(HP, IBM, Dell, Microsoft) Del artículo de Luke Wrobleski

Una muestra de un esquema de color tipo pradera.

Del artículo de Luke Wrobleski

Un esquema de color inspirado en el paisaje de los alrededores de Dublín.

Del artículo de Luke Wrobleski

Limitaciones del color: Ceguera al color

Algunas personas (principalmente hombres) tienen deteriorada la capacidad de distinguir ciertos colores. Hay diversos tipos de ceguera al color, la más común afecta al rojo y el verde (parecen ser el mismo color).

La implicación de esto es: No debe usar color (particularmente rojo y verde) para remarcar elementos en un modo en que un usuario necesite diferenciar los colores para usar exitosamente la interfaz. Las guías de accesibilidad W3C establecen lo siguiente como un mojón de Prioridad 1 (p.ej. necesita cumplir con este requerimiento para reclamar cualquier conformidad W3CAG):

– Asegúrese de que toda la información aportada con color esté también disponible sin color, por ejemplo desde el contexto o el margen.

Un segundo mojón establece:

– Asegúrese de que las combinaciones de los colores del primer plano y el fondo presenten un contraste suficiente al ser vistos por alguien con deficiencias de color o cuando son vistas en una pantalla en blanco y negro.

[Prioridad 2 para imágenes, Prioridad 3 para texto].