Cuatro principios del diseño web.

Resumen y libre traducción del artículo original de Mike Rundle en Vitamin.

C.R.A.P es el acrónimo de Contraste, Repetición, Alineación y Proximidad. Son 4 principios básicos que te ayudarán a crear mejores diseños. Una posible definición de estos principios:

1. Contraste. Elementos que no son lo mismo, deben de ser diferentes, haciéndolos ligeramente diferentes solo llevan a la confusión de relacionarlos incoscientemente entre ellos. Contrastando fuertemente los elementos, conseguiremos que el usuario se desplace de un elemento a otro acertadamente hasta el final de la página, evitando así un mar de similitud resultando muy aburrida.
2. Repetición. Repite el estilo de tu página durante toda ella, creando consistencia. Si relacionas elementos de una determinada manera en un área, repite esta tendencia en otras áreas.
3. Alineación. Todo en la página necesita estar visualmente conectado con alguna otra cosa, nada debería estar fuera de su lugar o distinto para todos los demas elementos de diseño.
4. Proximidad. La proximidad crea una relación de significados, elementos relacionados deberían agruparse, y entre elementos diferentes debería haber el suficiente espacio entre ellos para que se apreciara esa diferenciación.

Contraste.

Un buen contraste permite relacionar areas que tienen alguna similitud o relación, y separar las que no la tienen. Asegúrate de contrastar tus elementos y secciones.

Un ejemplo lo encontramos en el blog de Jason Csizmadi, Dangergraphics.com.

Su sitio está separado en dos columnas perfectamente diferenciadas visualmente, lo que indica que son contenidos completamente distintos. El lado derecho es un blog, y el izquierdo contiene algunos de sus trabajos más recientes y links a otros sitios.

Por otro lado, tenemos un ejemplo de contraste pobre en Northrop Grumman’s Capabilities.

El amarillo suave de fondo no separa visualmente lo suficiente y además usan la misma tipografia para el texto que para los encabezados. Las cabeceras de las principales secciones se limitan a pasar a negrita el tipo de letra, y eso no es suficiente para separar y distinguir. Si se usara un tamaño mayor para los encabezados y el fondo de la columna de la derecha fuera más distinta, se conseguiria un mejor contraste visual y mejor organización de los elementos.

Repeticion

Si has diseñado alguna vez un blog, sabrás algo sobre Repetición. Comunmente, los blogs tienen una estructura que se repite en todos ellos, una cabecera, un pie, una columna de texto y otra de navegacion con algunos extras como links.

Usuarios que han visto este tema también han visto...

- Abrete sésamo: Cuidado con las contraseñas
- Redactando contenidos en tono web
- El uso ilegal de metaetiquetas y el word stuffing
- Escribir para la web
- Todo sobre los spywares

- Versión imprimible de este documento

- Enviar por e-mail este documento