fbpx

CĆ³mo la jerarquĆ­a visual en el diseƱo web puede mejorar la experiencia de usuario.

La jerarquĆ­a visual es una de las claves del diseƱo, y da a los lectores un sentido de cĆ³mo consumir el contenido, desde el inicio hasta el final, usando pistas visuales. Pero son varios los factores a tener en cuenta para crear una buena jerarquĆ­a en tu diseƱo web: el tamaƱo, el color, la posiciĆ³n de elementos, el contraste, la armonĆ­a, etc. son elementos que se combinan entre sĆ­. ĀæQuieres saber mĆ”s?

Tal y como mencionamos en post anteriores, el diseƱo web es una parte estratĆ©gica fundamental para llegar a nuestro pĆŗblico. Tener una pĆ”gina mal cuidada o con contenido y elementos desordenados, puede reducir el tiempo que el usuario permanece en la web y perjudicar la relaciĆ³n que tengan con nuestra marca.

AdemĆ”s, nuestra pĆ”gina web es nuestra carta de presentaciĆ³n, nuestra cara, nuestra imagen, y el objetivo es que nuestros clientes, o futuros compradores, obtengan la mejor experiencia de usuario tanto dentro como fuera de la web.

Una de las funciones mĆ”s importantes de la jerarquĆ­a visual es establecer un punto focal, mostrar al espectador dĆ³nde estĆ” el contenido relevante, la informaciĆ³n mĆ”s valiosa. Desde este punto, irĆ”n distribuyĆ©ndose el resto de elementos de la pĆ”gina. De esta forma vamos guiando a nuestros lectores hacia el contenido que mĆ”s nos interese mostrar.

La organizaciĆ³n de elementos grĆ”ficos en el diseƱo web

diseƱo web

 

 

 

 

 

 

  • Punto focal:

SegĆŗn explica Adobe, todas las culturas leen de arriba abajo, y la mayorĆ­a de izquierda a derecha, por tanto hay que tener en cuenta la forma en la que organizamos los elementos de acuerdo a estos parĆ”metros de lectura.

Como comentĆ”bamos anteriormente respecto al punto focal, la posiciĆ³n en el diseƱo web es muy importante a la hora de dirigir la atenciĆ³n hacia donde nos interesa que se fijen los lectores.

Todos los diseƱos necesitan una estructura, organizaciĆ³n y composiciĆ³n. Tanto en diseƱo como en fotografĆ­a, la regla de los tercios es una buena tĆ©cnica para ordenar los elementos de manera atractiva.

Esta coloca el punto focal desplazado del centro para dar dinamismo a los elementos, dividiendo el espacio del diseƱo en una rejilla con tres lƭneas horizontales igualmente espaciadas y tres lƭneas verticales. El punto focal se colocarƔ en una de las lƭneas o en uno de los cuatro de las intersecciones.

Por otro lado, sabemos que aquellos elementos que se ubiquen en el centro tienen mayor importancia que los situados en las barras laterales y un slider de gran tamaƱo situado en la posiciĆ³n mĆ”s alta de la web es sin duda el elemento mĆ”s destacable, por lo que la informaciĆ³n principal la situaremos ahĆ­.

regla de los tercios en diseƱo web

  • TamaƱo:

Al crear una pƔgina web con un gran tamaƱo, el espaciado puede ser una alternativa elegante. Si aumentamos el tamaƱo de una imagen o un texto con respecto al resto de elementos se reducirƔ el ruido visual y se crearƔ un concepto mƔs claro de lo que queramos transmitir.

Y al contrario, a los elementos de diseƱo que no son tan importantes se le puede quitar Ʃnfasis al reducir su tamaƱo para que sean menos visibles. Muchas veces, menos es mƔs.

tamaƱo en el diseƱo web

  • Color:

El color en el diseƱo web es otra herramienta importante para captar la atenciĆ³n de tu pĆŗblico objetivo. Ciertos colores nos ayudan a crear un ambiente diferente.

Existen diversos estudios sobre la psicologĆ­a del color: el azul y el verde son colores frĆ­os, que transmiten serenidad, mientras que el rojo, amarillo y naranja, mĆ”s cĆ”lidos, son mĆ”s agresivos e invitan a la acciĆ³n. Por otro lado, existen colores mĆ”s neutros, como si elegimos el blanco, el gris o el negro, que transmiten seriedad, profesionalidad o elegancia.

En cuanto a la saturaciĆ³n, El uso de colores brillantes o apagados (ya sea por sĆ­ mismos o en conjunto) puede ser una manera estratĆ©gica de crear contraste en el diseƱo.

Dependiendo de lo que queramos transmitir tenemos que tener en cuenta esta psicologĆ­a del color para crear una buena composiciĆ³n. Ya que al mezclar temperaturas de color, especialmente aquellos con alto contraste, podemos atraer mĆ”s la atenciĆ³n de nuestro target.

diseƱo web el color

  • Cuerpo de texto:

Una vez tengamos la parte grĆ”fica Ā no nos podemos olvidar del cuerpo de texto. Para organizarlo, los diseƱadores web usan etiquetas para encabezados (h1, h2 y h3, o lo que es lo mismo TĆ­tulo 1, TĆ­tulo 2 o TĆ­tulo 3) para indicarnos el orden de lectura e importancia del contenido y facilitar asĆ­ la lectura.

La forma en la que se presenta el texto tambiƩn es muy importante para seguir atrayendo a los usuarios. Es muy importante ofrecer un contenido estructurado y con buena legibilidad.

Por eso, cuando hacemos un repaso visual por el texto (normalmente en forma de Z o F) nos hacemos una idea de si el artƭculo serƔ interesante antes de lanzarlos a la lectura e invertir mƔs tiempo en el contenido.

Con relaciĆ³n al tamaƱo del texto, la escala es muy importante. Para crear una jerarquĆ­a diferente, los tamaƱos deben tener una variaciĆ³n diferente en relaciĆ³n con las otras fuentes de la pĆ”gina.

Al igual que ocurre con las imĆ”genes, se puede jugar con la orientaciĆ³n del texto para darle Ć©nfasis y destacarlo del resto de elementos. Inclinar, modificar o alterar la forma en la que se presenta el texto puede lograr este efecto.

tamaƱo del texto de la web

  • El espacio:

Otro recurso a tener en cuenta es el espacio. Es tan importante dejar suficiente espacio entre elementos como que la composiciĆ³n no carezca de ellos. Los espacios en blanco ayudan a que el contenido sea mĆ”s fĆ”cil de leer, y la falta de estos puede suponer un problema de legibilidad que afecte a la experiencia de usuario de tu web.

Por Ćŗltimo, el tipo de fuente, es otro elemento importante a valorar. Os invitamos a leer nuestro post sobre las diferentes tĆ©cnicas existentes en tipografĆ­a para analizar la importancia de este elemento en el diseƱo de tu web.

Hasta aquƭ nuestro anƔlisis sobre los elementos que influyen en el diseƱo web y la importancia de establecer una jerarquƭa visual entre ellos.

Esperamos que os hayan servido de ayuda estos consejos. Ā”Hasta la semana que viene!

ĀæQuĆ© buscas?

Lo mƔs leƭdo

ĀæQuieres tener una agencia como Dosmedia?

ĀæEn quĆ© podemos ayudarte?

RELACIONADOS
ArtĆ­culos relacionados

ĀæEn quĆ© podemos ayudarte?

CONTACTO
Ā”No pierdas el tiempo!