Cuatro principios del diseño web. (2)

La naturaleza repetitiva de los blogs, hace que sean fácilmente identificables. Como consecuencia, el lector sabe donde tiene que dirigirse en cada momento. Imaginemos que en cada Post de nuestro blog, unas veces la fecha del post se encuentra debajo de la cabecera, y otras al final de este. Esto provocaria una confusion no deseable.

Veamos un ejemplo con el blog de 9rules :

Este blog tiene el tipico layout del que antes hablabamos. Se ha usado similares metaforas de diseño:

• La tipografia del cuerpo del mensaje es Lucida Grande (Verdana en windows).
• Las cabeceras dentro del blog y las que hay en la columna de la derecha están en Trebuchet MS con una linea de separacion de puntos debajo.
• Los links estan en negrita, y dentro de los posts están en un verde brillante para corresponder con el tiulo.
• Todas las secciones en la columna de la derecha tienen un borde gris alrededor de 7px.

Alineación.

Un buen alineamiento y separación es una marca de buen diseño web. Ten por costumbre asegurar de que el espacio entre elementos es simétrico y relativo a sus tamaños. Aqui hay algunas reglas respecto a la alineación en la web.

• Usa texto alineado a la derecha o a la izquierda, pero no ambos. Texto a la derecha en una columna que está en la derecha provoca un rio de espacios en blanco que resulta horroroso. Si el cuerpo de tu página está alineado a la izquierda, usa la misma alineación para tu columna.
• Encabezados centrados son elegantes, cuerpos centrados no lo son. Dos ejemplos de cabeceras centradas y cuerpos alineados a la izquierda son McSweeney’s y A List Apart.
• Alinea con precisión tus elementos. Si tu cabecera está a 5px de distancia del borde izquierdo de la página, indenta el texto de la pagina 5px también. Se preciso, 5px no son 7px.

Veamos en la cabecera de SXSW Bowling un buen ejemplo de como alinear elementos.

Tiene 4 áreas diferentes en la cabecera, y todas están alineados para comunicar mejor el mensaje y producir el máximo efecto. Usa los bordes derecho e izquierdo de la imagen para alinear el texto y la imagen del fenix, ademas mantiene el mismo espaciado alrededor de los 4 elementos para la simetria, una técnica que deberia ser emulada.

Alineación repetitiva y espacio simétrico son dos técnicas que puedes usar extensivamente en interfaces similares a la de los blogs, simplemente porque hay muchas oportunidades para agrupar elementos en algun widget o en áreas rectangulares.

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

- ¿Cómo elegir un navegador web?
- Diagramas que pueden ayudarte a definir el Anchor Text
- Cómo construir credibilidad para lograr más ventas
- Wordpress + Media Temple. Gestor de contenidos y hosting recomendados
- Accesibilidad, Usabilidad y Estética

- Versión imprimible de este documento

- Enviar por e-mail este documento