¡Shh! No comparta este secreto de información privilegiada sobre los principios de diseño CRAP

Usar los principios de diseño de CRAP es una manera asombrosa de crear un diseño visual efectivo.

"¡¿QUÉ ?!" todos ustedes dijeron, ¿no es así? Bueno, esto seguro que fue una sorpresa para ti si nunca antes habías oído hablar de CRAP. Robin Patricia Williams, una asombrosa autora estadounidense que escribió muchos libros relacionados con la informática, ha descrito un conjunto de principios de diseño gráfico en su libro, The Non-Designer's InDesign Book. Ella lo llamó MIERDA.

(También puede leer una breve entrevista con ella aquí ).

Entonces, ¿qué es CRAP? ¡No el que conocemos, por supuesto!

Bueno, para crear diseños efectivos y llamativos, debemos ser consistentes. La coherencia viene con la implementación de conceptos básicos y fundamentales que siempre son necesarios. Estos conceptos básicos son los más básicos que cualquier diseñador debe considerar constantemente.

Como diseñador gráfico, su trabajo es producir algo que hipnotice al espectador de una manera que no pueda salir del sitio web. Los espectadores deben estar pegados a sus asientos con su diseño gráfico apasionante, y para eso, viene CRAP.

CRAP es un acrónimo que significa Contraste, Repetición, Alineación y Proximidad.

1. Contraste

El contraste se describe como "yuxtaposición de elementos diferentes (como color, tono o emoción) en una obra de arte". El contraste es lo que hace que los elementos se destaquen. Antes de entrar, hay un consejo que debes considerar. Si usa una función de contraste demasiadas veces, simplemente está reduciendo el contraste, no aumentando. ¿Por qué? Porque contraste significa lo que significa cuando quieres que se destaquen algunos elementos. Si todo destaca, ¡nada destaca! Como elemento importante en los principios del diseño de mierda, debes saber cómo usarlo bien. ¡Vamos a por ello!

Color

Puede utilizar la diferencia de colores para crear contraste. El Consorcio World Wide Web (W3C) ha creado pautas sobre el contraste mínimo necesario entre el texto y su fondo. Aunque tener un alto contraste es imprescindible cuando se trata de texto y fondo, esto no es cierto cuando hablamos de diferentes elementos. Tener un alto contraste entre diferentes elementos puede fatigar la vista de los usuarios. Puede ver una versión en escala de grises de su diseño para ver si se ha utilizado el contraste óptimo o no.

Como regla general, puede ser una buena práctica usar tonos de colores complementarios que no creen un alto contraste que fatiga la vista.

Tamaño

Las diferencias en el tamaño de los elementos, especialmente cuando se trata de texto, pueden ser una fuente de contraste. Mantener el tamaño de un elemento significativamente más grande que el de otros que lo rodean lo hará llamativo. Los botones de llamada a la acción (CTA) también pueden beneficiarse de este tamaño más grande. Tus espectadores los notarán más y te ayudarán con tu CRO. Además, si necesita más ayuda con sus estrategias de CRO, consulte esta guía.

Forma

Tener diferentes formas puede generar el contraste que estás buscando. Puede ver el contraste en la forma utilizada en la infografía de manera efectiva. El uso de formas diferentes una al lado de la otra puede ayudar a involucrar la mente de los lectores. Agregar esquinas redondeadas a formas cuadriláteras o usar elementos cuadrados junto con elementos redondos y circulares también pueden ser ejemplos de contraste en la forma.

Fuente

Podemos clasificar las fuentes en diferentes grupos. Serif, Sans-serif, script, monoespaciado y display son las clasificaciones básicas de mecanografiado. El uso de diferentes grupos de fuentes puede crear contraste para el texto que queremos significar. Además, el uso de diferentes pesos de fuente (negrita o regular), estilos de fuente (cursiva, opaca o normal) y decoraciones de fuente (subrayado, tachado, etc.) puede llevar su juego al siguiente nivel.

2. Repetición

Como seres humanos, nuestras mentes están programadas en patrones de agrado; Los buscamos por todas partes. ¿Qué crea patrones? ¡Repetición! Además, creamos un sentido de identidad cuando nos encontramos con una repetición de cosas. Piense en una pieza musical en la que los temas principales no se repitan. Te sentirías perdido.

Exactamente lo mismo sucede en el diseño. Necesitamos repetir colores, formas, texturas, tamaños y otros atributos en nuestro diseño para hacerlo consistente y darle algún tipo de identidad. Además, las empresas utilizan la repetición en el diseño para crear conciencia de marca. Repiten un conjunto predefinido de colores y fuentes para aportar coherencia a sus diferentes plataformas y canales.

La repetición en el diseño es otro principio importante en los cuatro principios de diseño CRAP. El usuario necesita sentirse seguro, no perdido. Ayuda a optimizar la UX de su sitio web.

3. Alineación

La alineación, como otro factor crucial en los principios de diseño de CRAP, especifica el posicionamiento de un elemento en el diseño. Es lo que da cohesión y sentido de orden a un diseño. En términos de elementos, puede alinearlos según sus bordes o sus centros. Sin embargo, los textos se pueden alinear a la izquierda, a la derecha, al centro o simplemente se pueden justificar. Dependiendo del idioma de texto utilizado, las alineaciones izquierda y derecha, ya sea LTR o RTL, son las más populares. Podemos usar la alineación central para tramos de texto cortos (pero es difícil de leer en textos más largos). La justificación es una buena opción cuando la longitud de la línea es larga, el tamaño de la fuente es pequeño y las palabras son más cortas (usarla en líneas estrechas que constan de palabras largas reduce la legibilidad).

Cada diseño debe tener algunas líneas verticales que actúen como guías de alineación horizontal. El texto que flota en todas partes de la página confunde al espectador. Sus espectadores simplemente deberían poder darse cuenta de la relación de cada parte de la página entre sí.

4. Proximidad

Por último, pero no menos importante, la proximidad es otro principio que juega un papel vital en el diseño CRAP. La proximidad en el diseño establece que debemos colocar elementos que se relacionen entre sí y estén estrechamente asociados entre sí. Tiene sentido, ¿no? No quieres buscar un enlace relacionado con el artículo que estás leyendo en la barra de navegación, ¿verdad? Además, espaciar los elementos de manera uniforme a lo largo de la página hace que el diseño sea más difícil de seguir. Agrupe los elementos relacionados tanto como sea posible para que a su espectador le resulte más fácil encontrar la información deseada.

La regla de los 3 segundos

"Solo se necesitan 3 segundos para enamorarse".

Entonces, la prueba final a la que puede ir para ver si su diseño CRAP es impecable es verificar si es efectivo en 3 segundos. Puede hacerlo usted mismo aclarando su mente y mirando hacia otro lado, luego volviendo a hacerlo. También puede pedirle a un amigo o familiar su opinión después de 3 segundos. Decidimos si algo nos atrae y si queremos continuar o no en tan solo 3 segundos.

La relación

No debemos utilizar estos principios de forma aislada. La repetición y la alineación funcionan juntas para proporcionar el estado "normal", que le permite cambiar la forma o ubicación de un fragmento de texto para generar contraste. Además, la repetición y la proximidad trabajan juntas para producir formatos efectivos como listas con viñetas: la repetición de la viñeta hace hincapié en la proximidad de los puntos.

Conclusión

Oscar Wilde, en el prefacio de su libro más famoso, “El retrato de Dorian Gray”, dice: “El artista es el creador de cosas hermosas. Revelar el arte y ocultar al artista es el objetivo del arte ”.

Finalmente, el objetivo es que el esfuerzo que dedicas a la creación de un documento se desvanezca, se vuelva invisible, permitiendo a tu lector o espectador acceder sin restricciones a las ideas que estás intentando comunicar, tanto directamente en tu texto como de forma muy sutil, a través de su elección de componentes de diseño. En este sentido, es un trabajo ingrato ya que pocas personas comentarán (o incluso notarán) la calidad del diseño, pero se darán cuenta del mensaje y actuarán en consecuencia. ¿No es eso de lo que se trata?