En este artículo podemos ver los colores y hojas de estilos que ayudan a los visitantes a navegar de una manera más fácil e intuitiva por un sitio web.
Resumen:
1. Colores que ayudan a navegar.
Las pantallas de ordenador de los usuarios por lo general soportan miles de colores. Es raro encontrar monitores con 256 colores aunque aun existen algunos y va siendo normal encontrar monitores con millones de colores.
La seleccion de "colores basicos" de nuestro site se debe mantener dentro del rango de 256 colores. Podremos ampliar el rango en elementos no fundamentales (fotos, ilustraciones, etc) pero debemos asegurarnos que el 100% de la poblacion podra acceder a nuestro site sin problemas.
A la hora de seleccionar los colores debemos identificar las partes del site.
A. Colores en la Barra de Navegacion.
Lo mejor es tener dos colores, para identificar el elemento activo de la barra de navegacion y para identificar los elementos apagados. Es mejor si el elemento activo "avanza" sobre los demas elementos con lo que colores calidos (rojo, naranja) y saturados se presentaran mas cercanos al usuario frente a colores frios (azul y verde) y poco saturados.
B. Colores en los enlaces.
Es recomendable conservar los colores estandar (azul subrayado). Si decides cambiarlo, recuerda lo siguiente: Los links tienen 2 estados (sin pulsar y pulsado) por lo que tendras que elegir un color saturado para el estado sin pulsar y otro menos saturado para el estado pulsado.
Sin visitar (Link): Es el color de un link antes de ser pulsado. El color azul es el normal.
Visitado (Vlink): Es el color que presenta un link cuando ha sido pulsado. El violeta (#CC33CC) es el normal.
Si decidimos cambiar el color de los links procura que el sistema de color que elijas sea similar al estandar. Teniendo un color brillante para el estado de "no visitado" y un color mas oscuro para los "enlaces visitados".
C. El Color de Fondo.
El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas recomendable es el fondo blanco (#FFFFFF) o el amarillo claro (#FFFFCC). Otros colores claros son menos comodos para leer, pero si tu site no exige lecturas prolongadas, puedes usarlos para llamar la atencion y conseguir una lectura mas compulsiva.
Para mensajes de alerta lo mejor es usar el fondo rojo (#FF0000) y el texto en blanco (#FFFFFF). El amarillo y negro es una combinacion que llamara la atencion pero tiene un significado mas estatico. Por ultimo, no es recomendable la combinacion de rojo y negro.
Enlaces de interes sobre los colores y la vision humana.
Respuestas a preguntas comunes sobre el color..
2. Hojas de estilo.
Las hojas de estilo (CSS), tecnicamente, son un documento que define el estilo del site (tipografia y colores basicamente). Al definir todo el estilo en un unico documento actualizaciones y mejoras en el aspecto del site se simplifican y aceleran.
El documento se coloca en el servidor y se adjunta la llamada
A continuacion vamos a comentar la hoja de estilo que usamos en este site. Vamos a comentar esta hoja de estilo por que es sencilla y presenta mas o menos todos los elementos tipicos.
Enlaces de interes sobre hojas de estilo.
Guia basica sobre las hojas de estilo.
Validador de hojas de estilo para saber si son compatilbes y cumplen los estandares.
- Colores que ayudan a navegar.
- Hojas de estilo (CSS). Ayudan a navegar.
1. Colores que ayudan a navegar.
Las pantallas de ordenador de los usuarios por lo general soportan miles de colores. Es raro encontrar monitores con 256 colores aunque aun existen algunos y va siendo normal encontrar monitores con millones de colores.
La seleccion de "colores basicos" de nuestro site se debe mantener dentro del rango de 256 colores. Podremos ampliar el rango en elementos no fundamentales (fotos, ilustraciones, etc) pero debemos asegurarnos que el 100% de la poblacion podra acceder a nuestro site sin problemas.
A la hora de seleccionar los colores debemos identificar las partes del site.
A. Colores en la Barra de Navegacion.
Lo mejor es tener dos colores, para identificar el elemento activo de la barra de navegacion y para identificar los elementos apagados. Es mejor si el elemento activo "avanza" sobre los demas elementos con lo que colores calidos (rojo, naranja) y saturados se presentaran mas cercanos al usuario frente a colores frios (azul y verde) y poco saturados.
B. Colores en los enlaces.
Es recomendable conservar los colores estandar (azul subrayado). Si decides cambiarlo, recuerda lo siguiente: Los links tienen 2 estados (sin pulsar y pulsado) por lo que tendras que elegir un color saturado para el estado sin pulsar y otro menos saturado para el estado pulsado.
Si decidimos cambiar el color de los links procura que el sistema de color que elijas sea similar al estandar. Teniendo un color brillante para el estado de "no visitado" y un color mas oscuro para los "enlaces visitados".
-
Curiosidad: Luego existe el "Alink" que es uno de los misterios del universo microsoft. He buscado informacion sobre que es esto, pero ni dentro
de microsoft lo explican de forma clara.
El ejemplo que presentan sobre como
funciona, en un explorer 5 en mac no funciona.
- Como trabajar con Alinks: msdn.microsoft.com/library/tools/htmlhelp/chm/htalink1.htm.
- Ejemplo de una pagina que usa el Alink: msdn.microsoft.com/library/tools/htmlhelp/chm/HTalink4.htm.
- Sumario sobre temas relacionados con el Alink: msdn.microsoft.com/library/tools/htmlhelp/chm/HTAlink.htm.
C. El Color de Fondo.
El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas recomendable es el fondo blanco (#FFFFFF) o el amarillo claro (#FFFFCC). Otros colores claros son menos comodos para leer, pero si tu site no exige lecturas prolongadas, puedes usarlos para llamar la atencion y conseguir una lectura mas compulsiva.
Para mensajes de alerta lo mejor es usar el fondo rojo (#FF0000) y el texto en blanco (#FFFFFF). El amarillo y negro es una combinacion que llamara la atencion pero tiene un significado mas estatico. Por ultimo, no es recomendable la combinacion de rojo y negro.
Enlaces de interes sobre los colores y la vision humana.
2. Hojas de estilo.
Las hojas de estilo (CSS), tecnicamente, son un documento que define el estilo del site (tipografia y colores basicamente). Al definir todo el estilo en un unico documento actualizaciones y mejoras en el aspecto del site se simplifican y aceleran.
El documento se coloca en el servidor y se adjunta la llamada
<link rel="stylesheet" href="MiHojaDeEstilo.css">
en todas las paginas web en la parte del <head>-
Reglas basicas:
- Es mejor poner los tamaños de las fuentes en tantos por ciento (%) que en absolutos.
- Es mejor enlazar la hoja de estilo por que asi el usuario solo se la bajara una vez.
- No borres el subrayado de los enlaces solo por que puedes hacerlo.
- Que tu "estilo" sea por una mejor navegacion del site.
A continuacion vamos a comentar la hoja de estilo que usamos en este site. Vamos a comentar esta hoja de estilo por que es sencilla y presenta mas o menos todos los elementos tipicos.
-
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF;}
td { font-family: Arial, Helvetica, sans-serif; font-size: 100%;}
Con estas dos primeras lineas se define la fuente a utilizar en todo el site. Todo el texto que este en la pagina ira con el estilo definido en el "body" y todo el texto dentro de las tablas ira definido dentro del "td".
a:hover { color: RED; background-color: #FFFFCC;}
a:link { color: BLUE;}
a:visited { color: purple;}
En estas 3 lineas creamos el estilo de los enlaces. El "a:hover" es el estilo de los enlaces cuando nos colocamos encima de ellos. Esta opcion solo funciona en Explorer, pero es muy interesante incorporarlo. El "a:link" es el estilo de los links cuando aun no han sido visitados y "a:visited" es el estilo de los links cuando han sido visitados. Algunos utilizan la opcion de "text-decoration: none" que es para quitarle el subayado a los enlaces. No es recomendable.
.head { font-family: Arial, Helvetica, sans-serif; font-size: 160%;}
.head2 { font-family: Arial, Helvetica, sans-serif; font-size: 120%;}
En estas dos ultimas lineas hemos creado estilos especiales para la cabecera del articulo y las cabeceras en los parrafo. Para introducir este estilo, podemos poner
<font class="head2">. Como ves el tamaño esta definido en % con lo que el usuario es libre
de aumentar el tamaño de las fuentes en su navegador, pero el documento conservara las mismas proporciones.Enlaces de interes sobre hojas de estilo.
César Martín
Especializado en usabilidad, hoy César es gerente de marketing y ventas de Docxp...