Principios efecivos de Diseño Web: Contraste

En el diseño moderno existen 4 principios básicos: Contraste, Repetición, Alineación y Proximidad. Me gustaría ahora comentar un poco sobre el Contraste, sobretodo aplicado el Diseño Web.

El Contraste ocurre cuando dos o mas elementos relacionados se muestran en forma diferente; a mayor diferencia mayor el contraste. La forma más común de hacer esto es usando los atributos del color para generar estas diferencias. Otros atributos pueden ser el tamaño, forma, textura, orientación, posición, etc. Sin embargo, dos elementos que tienen cierto contraste no son siempre agradables a la vista.

Cuando hablamos del Diseño Web y de la experiencia del usuario (usabilidad); es MUY importante que el Usuario (visitante de nuestro Sitio Web) se sienta cómodo viendo nuestros contenidos y además pueda encontrar fácilmente los enlaces o botones necesarios para que su experiencia sea completa. Nada es mas frustrante para un Usuario que querer comprar (por ejemplo) en un Sitio Web y no poder encontrar el botón de agregar al carrito.

A continuación mostramos 3 herramientas bastante útiles que pueden ayudarlos en revisar el contraste de sus diseños Web; ya sea que se encuentren en pleno desarrollo de las mismas o ya tengan sitios Web funcionando y deseen revisar como andan al respecto.

1) Check My Colours (http://www.checkmycolours.com/)
Es una herramienta que revisa un Sitio Web analizando las combinaciones de color entre todos los elementos HTML de la página. Todos los algoritmos usados están basados en sugerencias del World Wide Web Consortium (W3C) y son bastante útiles:
Check My Colours

2) Colour Contrast Check (http://snook.ca/technical/colour_contrast/colour.html)
Esta herramienta les permite hacer pruebas de contraste entre el color de un texto y el del fondo del mismo para así comprobar cómo se vería en la Página Web desarrollada. Usando algoritmos de contraste esta herramienta también les indica si el contraste elegido tiene una buena calificación según los estándares.
Colour Contrast Check

3) Color Contrast Checker (http://webaim.org/resources/contrastchecker/)
Muy similar al Colour Contrast Check, les permite hacer pruebas de contraste y saber de antemano si la elección hecha es correcta segun estandares y en forma visual.
Color Contrast Checker

… así que ya lo saben; para sus próximos proyectos Web intenten usar estas herramientas y no teman hacer pruebas antes de publicar finalmente un Sitio Web.



Deja un comentario

Tienes que iniciar sesión para escribir un comentario.

Buscar:

Slider by webdesign