Krypton Solid

12 principios esenciales de la jerarquía visual que incluso los no diseñadores deberían conocer [Infographic]

Una de las cosas más comunes que escucho de los clientes una y otra vez es «Bueno, no soy diseñador, así que no lo sé».

A lo que respondo: «Puede que no tengas formación como diseñador, pero tienes una opinión sobre el diseño, te guste o no».

Una de las cosas que siempre me ha fascinado del diseño es que está literalmente en todas partes, todo el tiempo.

Curso gratuito: Elementos de un excelente sitio web de inbound marketing

La mayoría de la gente no se detiene a pensar en quién diseñó algo o por qué fue diseñado de la forma en que fue, porque parecen tan simples. Sin embargo, con toda honestidad, así es como debe sentirse un buen diseño.

Un buen diseño debe ser un experiencia ininterrumpida, suave y natural.

Sin que usted lo sepa, está inmerso en un mundo de diseño. diario. De hecho, es imposible no tener una opinión al respecto.

O lo eres capaz de articular sus sentimientos en términos de diseño o articularlos es una historia diferente.

¿Las buenas noticias? Aunque puede ser un poco abrumador, aprender algunos términos de diseño es fácil y te ayudará a comunicar lo que está sucediendo en ese hermoso y gran cerebro tuyo. Prometo.

Aprender algunos de estos términos no solo lo ayudará a comunicarse con su diseñador, sino que también lo ayudará a comprender algunas de las decisiones que toma su diseñador.

Esta publicación de Visme hace un gran trabajo al resumir algunos los principios de la jerarquía visual lo cual puedo asegurarle será valioso al discutir el diseño de su sitio.

Su infografía no solo es una guía de referencia rápida para los términos de diseño, sino que también han incluido un video de 8 minutos (que incorporaré a continuación) que ayuda a desglosar algunos de estos términos en ejemplos fáciles de entender.

La siguiente infografía le dará un ejemplo visual de los 12, pero aquí hay algunos elementos notables que considero más importantes para que los «no diseñadores» los comprendan:

Tamaño y escala: Mediante el uso de formas e imágenes de diferentes tamaños y contrastes, podemos guiar la vista del usuario para digerir el contenido más fácilmente, experimentar con una página en un orden determinado y encontrar elementos importantes, como el mensaje «Obtenga una demostración gratuita». . Los objetos más grandes tendrán más peso visual y más importancia, mientras que los objetos más pequeños se volverán secundarios y menos importantes.

Color y contraste: Este principio en realidad tiene un propósito muy similar al de tamaño y escala. Nos ayuda a extraer los elementos más importantes y una página y dictar la información secundaria.

Un truco que casi siempre implemento en mis sitios es crear un recorrido de usuario codificado por colores. Esto significa seleccionar un color determinado (generalmente en las familias de amarillo, naranja o rojo, porque la ciencia nos dice que estos colores crean urgencia) para que se relacione con todas las cosas en la parte inferior del embudo (BOFU). Esto podría significar un botón, un enlace, un encabezado o una imagen a la que quiero atraer a mi usuario y hacer que actúe.

Los otros colores que uses deben contrastar con tu color BOFU para que siempre atraiga la atención de los usuarios. (¿No sabes cómo contrastar colores? Christine te ayudará a perfeccionar tu teoría del color Aquí.)

Jerarquía tipográfica: La idea de la jerarquía tipográfica es crear niveles de relevancia a través de su contenido utilizando los pesos, tamaños y colores de las fuentes. La demostración más simple de la jerarquía de fuentes es el buen carácter en negrita a la antigua. La razón por la que atrevido las cosas en nuestra escritura son para hacer que se destaquen más o para poner más énfasis.

Lo mismo ocurre con la manipulación de la tipografía cuando aumentamos el tamaño de la fuente o el peso de la fuente, es para aumentar la importancia de ese contenido.

Líneas principales: Se pueden usar de manera sutil o como un patrón de fondo con líneas angulares que instan al usuario a avanzar en la página, o de formas más sencillas, como una flecha que apunta a una llamada a la acción. Cualquiera que sea una táctica eficaz que no debe pasarse por alto.

Para ver ejemplos visuales de estos principios (y otra) vea la infografía completa y el video de Visme Desde abajo.

Creado usando Visme. Un creador de infografías fácil de usar.

Deja un comentario