Las hojas de estilo y los colores que ayudan en una web – PARTE I

El día de hoy y con este tema se pueden observar los colores y hojas de estilos que auxiliarán a los visitantes a moverse de una forma más sencilla e intuitiva por un sitio web.

 Esas pantallas en la computadora de las personas por lo usual aguantan miles de colores. Es raro hallar hoy en día monitores con 256 colores no obstante aún existen algunos y va siendo normal hallar monitores con millones de colores.

Esa selección de “colores básicos” de vuestro sitio se tiene que conservar dentro del rango de 256 colores. Se podrá incrementar el rango en elementos no esenciales (fotos, ilustraciones, etc) pero deben asegurarse que el 100% de la población podrá entrar a vuestro sitio sin inconvenientes.paleta web 216 colores con explicacion sobre calido - frio - saturados

Al momento de elegir los colores se tiene que identificar las partes del sitio.

A. Colores en la Barra de Navegación.
Lo recomendable es que deba tener dos colores, para identificar el elemento activos de la barra de navegación y para señalar los elementos apagados. Es mejor si el elemento activo “progresa” sobre los otros elementos con el cual los colores cálidos (rojo, naranja) y saturados se exhiben más cerca de un usuario frente a colores fríos (azul y verde) y poco saturados.

ejemplo de botones con colores calidos - frios y diferentes constrastes

Colores en los enlaces.
Es digno guardar los colores estándar (azul subrayado). Si deciden modificarlo, recuerden lo siguiente: Los links deben de tener 2 estados (sin pulsar y pulsado) por lo que deberán de seleccionar un color saturado para el estado sin presionar y otro menos saturado para el estado pulsado.

  • Sin visitar (Link): Es el color de un link antes de ser presionado. El color azul es el usual.
  • Visitado (Vlink): Es el color que muestra un link cuando ha sido presionado. El violeta (#CC33CC) es el tradicional. Si deciden modificar el color de los links procuren que el sistema de color que seleccionen sea semejante al estándar. Poseyendo un color brillante para el estado de “no visitado” y un color más obscuro para los “enlaces visitados”.

Curiosidad: Después de que existe el “Alink” que es uno de los misterios del universo Microsoft. Se ha intentado buscar información sobre qué es eso, pero ni dentro de Microsoft lo explican de manera concisa. El ejemplo que muestran sobre cómo trabaja, en un Explorer 5 en Mac no funciona.

 

  • Como trabajar con Alinks: microsoft.com/library/tools/htmlhelp/chm/htalink1.htm.
  • Ejemplo de una página que maneja el Alink: microsoft.com/library/tools/htmlhelp/chm/HTalink4.htm.
  • Sumario sobre temas vinculados con el Alink: microsoft.com/library/tools/htmlhelp/chm/HTAlink.htm.C. El Color de Fondo.El texto corrido se lee mejor con fondo claro y texto obscuro. Lo más recomendable es usar un fondo blanco (#FFFFFF) o un amarillo claro (#FFFFCC). Otros colores claros son menos agradables para leer, pero si vuestra web no requiere lecturas prolongadas, pudiesen utilizarlos para llamar la atención y obtener una lectura más compulsiva.

    Para mensajes de alerta lo mejor es utilizar el fondo rojo (#FF0000) y el texto en blanco (#FFFFFF). El amarillo y negro es una combinación que llamara la atención pero posee un significado más estancado. Por último, no es recomendable la mezcla de rojo y negro.

ejemplos de alertas y colores

Enlace que os puede interesar sobre los colores y la visión humana.