{"id":3999,"date":"2022-04-06T12:10:00","date_gmt":"2022-04-06T12:10:00","guid":{"rendered":"https:\/\/new.salago.design\/sin-categorizar\/jerarquia-visual-en-diseno-pongamos-orden\/"},"modified":"2026-07-31T11:11:12","modified_gmt":"2026-07-31T11:11:12","slug":"jerarquia-visual-en-diseno-pongamos-orden","status":"publish","type":"post","link":"https:\/\/salago.design\/es\/blog\/jerarquia-visual-en-diseno-pongamos-orden\/","title":{"rendered":"Jerarqu\u00eda visual en dise\u00f1o, \u00a1pongamos orden!"},"content":{"rendered":"
\n
\n
\n

La jerarqu\u00eda visual en dise\u00f1o es muy importante. De un vistazo, permite al usuario de una web o al lector de una publicaci\u00f3n entender la distribuci\u00f3n y verlo todo con claridad. Hay unas \u00a0normas b\u00e1sicas de jerarqu\u00eda visual\u00a0<\/strong>establecidas a las que atenerse para que el usuario reciba la informaci\u00f3n y la procese adecuadamente de forma r\u00e1pida.<\/p>\n<\/div>\n<\/div>\n

\n
\n
\n

\u00bfQu\u00e9 es la jerarqu\u00eda visual en dise\u00f1o?<\/h2>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n

Es la\u00a0definici\u00f3n de la importancia u orden de elementos que forman parte de un dise\u00f1o\u00a0<\/strong>por parte de quien los crea y que permite al usuario el reconocimiento primero de los elementos importantes, mejorando la comprensi\u00f3n r\u00e1pida del conjunto.<\/p>\n

Jerarqu\u00eda visual en dise\u00f1o para poner orden f\u00e1cilmente<\/h2>\n

El tama\u00f1o es clave para establecer una jerarqu\u00eda visual en dise\u00f1o<\/h3>\n

El tama\u00f1o mayor de un elemento logra\u00a0captar r\u00e1pidamente la atenci\u00f3n\u00a0<\/strong>e indica su mayor importancia.<\/p>\n

Cuando todos los elementos son de\u00a0tama\u00f1o\u00a0<\/strong>similar al usuario le resulta complicado saber cu\u00e1l es m\u00e1s importante. Requiere much\u00edsimo m\u00e1s tiempo y m\u00e1s esfuerzo averiguarlo. Sin embargo, adjudicar un mayor tama\u00f1o a los elementos m\u00e1s importantes e ir reduciendo este seg\u00fan descienda su importancia permite al usuario identificar esta de un vistazo.<\/p>\n

Por ello dentro de la jerarqu\u00eda visual el tama\u00f1o es una de las formas m\u00e1s importantes de\u00a0ordenar los elementos<\/strong>.<\/p>\n<\/div>\n<\/div>\n

\n
\n

Contraste para la jerarquizaci\u00f3n visual<\/h3>\n

Otro factor importante para establecer una jerarqu\u00eda visual es el\u00a0contraste<\/strong>. Se combinan con el color pero tiene entidad propia.<\/p>\n

El contraste permite\u00a0resaltar elementos de una imagen o un texto\u00a0<\/strong>para capturar antes la atenci\u00f3n del usuario. Pueden lograr un impacto m\u00e1s o menos explosivo o dram\u00e1tico en funci\u00f3n de c\u00f3mo se use.<\/p>\n

Color e impacto visual en dise\u00f1o<\/h3>\n

El color es un poderoso factor<\/strong>\u00a0para establecer una jerarqu\u00eda visual en dise\u00f1o. Est\u00e9tica y visualmente es f\u00e1cil de asimilar por el usuario. Es una de las formas m\u00e1s inteligentes de \u00a0crear un orden en un dise\u00f1o.<\/strong><\/p>\n

En el dise\u00f1o de p\u00e1ginas web o de cat\u00e1logos, por ejemplo, los colores deben estar alineados con el\u00a0branding<\/a><\/strong>\u00a0de la marca. No siempre se pueden utilizar libremente para generar una \u00a0combinaci\u00f3n arm\u00f3nica\u00a0<\/strong>y\u00a0establecer un orden<\/strong>. Pero se debe aplicar probando c\u00f3mo las distintas \u00a0combinaciones de colores y tonalidades\u00a0<\/strong>impactan y permiten dejar claro ese orden que se quiere mostrar.<\/p>\n

Temperatura, valor o saturaci\u00f3n\u00a0<\/strong>son distintas formas de jugar con\u00a0el color y el contraste\u00a0<\/strong>para lograr el objetivo deseado.<\/p>\n

Proximidad y repetici\u00f3n en la composici\u00f3n, otros factores para establecer un orden visual en un dise\u00f1o<\/h3>\n

Cuando se habla de\u00a0proximidad en jerarqu\u00eda visual\u00a0<\/strong>se hace referencia a c\u00f3mo se separan, colocan o agrupan los elementos. La proximidad permite \u00a0agrupar elementos similares\u00a0<\/strong>para que se les reconozca individualmente y como parte de un conjunto.<\/p>\n

En cuanto a la\u00a0repetici\u00f3n<\/strong>, permite reconocer elementos similares. Pero si se abusa de ella el dise\u00f1o puede terminar resultando excesivamente plano.<\/p>\n

Alineaci\u00f3n, repetici\u00f3n y composici\u00f3n para indicar la importancia de un elemento<\/h3>\n

La\u00a0ubicaci\u00f3n<\/strong>\u00a0de un elemento tambi\u00e9n es una forma de\u00a0mostrar su importancia\u00a0<\/strong>para que sea f\u00e1cil entenderlo y captarlo. Por ejemplo, en un dise\u00f1o web los elementos centrales suelen atraer m\u00e1s r\u00e1pidamente la atenci\u00f3n que los laterales. Y los superiores m\u00e1s que los inferiores.<\/p>\n

No obstante, hay reglas de composici\u00f3n de la imagen que permiten establecer un orden a fin de lograr que la atenci\u00f3n del usuario se dirigir\u00e1 a ellos en el mismo:<\/p>\n