Seleccionar página

Esta es una traducción del post original: CRAP Design (en portugués)

Puede parecer raro a primera vista, pero ¡no se asusten! Este CRAP que estoy hablando es formado por las iniciales de Contraste, Repetición, Alineación y Proximidad: los cuatro principios básicos de design descritos por Robin Williams (no el actor sino que la escritora) en el libro Non-Designer’s Design Book. En este libro la autora presenta ejemplos de aplicación para la media impresa. En un segundo libro, The Non-Designer’s Web Book, la autora presenta ejemplos aplicados al design para web.

Voy a hablar un poco acerca de cada principio individualmente, pero vale la pena recordar que éstos deben ser trabajados en conjunto, ya que están interrelacionados. Además, no deben ser entendidos como reglas, aunque yo les aconseje fuertemente que sean seguidos en el caso de que no estén seguros de romperlos concientemente.

Contraste
“Si dos elementos no son exactamente los mismos, diferéncialos completamente.”

El contraste tal vez sea la mejor forma de ofrecer atracción visual a tu proyecto. Para esto, la autora sugiere que el designer no sea tímido. Si la diferencia de dos elementos es poca, puede generarse un conflicto visual en vez de contraste. La página de juegos de la consola XBOX360 es un buen ejemplo de contraste con relación a todo, pues presenta imágenes en gran tamaño luego al principio de la página. La descripción de la imagen (ubicada en la esquina inferior izquierda), entretanto, puede parecer imperceptible a primera vista. La diferencia apenas del tamaño de la fuente, sin que haya una mudanza de colores o de tipo de fuente, disminuye el contraste de este grupo de informaciones.

Repetición
“Algún aspecto del design debe repetirse en el material completo.”

La repetición de aspectos de design como estilo y tamaño de fuente, colores o elementos gráficos, por ejemplo, colaboran a unificar el proyecto gráfico visual. Repetir elementos de design en un proyecto de muchas páginas, como por ejemplo un website, significa darle consistencia visual a éste. El website de Apple presenta un buen ejemplo de consistencia. El menú es mantenido en la misma posición; los colores y organización visual son las mismas; la identidad visual de los íconos es la misma; el estilo, tamaño y colores de fuente también se repiten en todas las páginas. Es posible notar que hay una diferencia estructural entre la “home” y las páginas internas. Y eso es válido, una vez que la home es una página “especial” del sitio.

Al proyectar un interfaz es importante estar siempre atento para que no haya grandes diferencias entre la página inicial y las internas. Al acceder a la página de videos del sitio oficial de Formula1, por ejemplo, tenemos una quiebra de consistencia con relación al resto del sitio. El usuario pierde la referencia de las páginas anteriores, no encuentra el logo o menú, además de encontrar un color de fondo diferente de todo el resto del sitio.

Alineación
“En una página, nada debe ser puesto arbitrariamente. Cada elemento debe tener una conexión visual con algo de la misma.”

Las informaciones no deben ser dispuestas en una página de manera aleatoria, apenas para ocupar los espacios vacíos. La alineación crea una línea “invisible” que ayuda al lector a identificar la cohesión, la conexión entre los elementos aunque éstos están físicamente separados. Al observar los detalles del sitio en español de ESPN, por ejemplo, es posible percibir las líneas “imaginarias” (destacadas en rojo) que definen la alineación del contenido. Es interesante observar que la proporción y la alineación son respetadas aunque tengamos una variación en el número de columnas.

Este es un pequeño desliz comúnmente realizado por los designers. En un detalle del sitio Terra, por ejemplo, a pesar de mantenerse el largo del área de contenido, la alineación general entre las columnas no está bien definida.

Proximidad
“Elementos relacionados entre si deben ser agrupados”.

Los elementos relacionados deben ser vistos de manera conjunta, cohesa, para que se forme una unidad visual. Los elementos o grupos de informaciones que no poseyeran una relación entre si deben ser desasociados, para que se evite la confusión del usuario. Un desliz con relación al principio de la proximidad que es muy común de encontrarse puede ser visto en el detalle de la página de publicaciones del Nielsen Normal Group. Repare que el espacio entre el título y la información a que se refiere el mismo es el mismo espacio referente al final de la información anterior. Esto genera una pequeña confusión en la lectura. En este ejemplo, entretanto, la comprensión de la información no queda comprometida como podría estar en el caso de que este tipo de design fuera adoptado en un menú, por ejemplo.

Lo ideal, en el caso anterior, sería que el título estuviera más próximo del texto a que corresponde y más alejado del texto anterior, como ocurre en este detalle de la página de ayuda del twitter.

Lecturas adicionales para auxiliar en la elaboración de un buen design de interfaces. Además de estos principios, les sugiero la lectura de conceptos relacionados a la tipografía, como categoría, combinación y contraste de tipos. El libro de Robin Williams ofrece una base acerca de estos asuntos.

Otro asunto que les recomiendo es la lectura acerca de la teoría y uso de los colores. El libro “From color to inexistent color” (que es un poco difícil de encontrarse), de Israel Pedrosa, trae un contenido muy rico acerca del asunto. Vale la pena la lectura.