{"id":7515,"date":"2017-03-03T12:51:19","date_gmt":"2017-03-03T12:51:19","guid":{"rendered":"https:\/\/www.templatemonster.com\/es\/blog\/?p=7515"},"modified":"2017-03-03T12:51:19","modified_gmt":"2017-03-03T12:51:19","slug":"establecimiento-de-la-jerarquia-visual","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/","title":{"rendered":"Establecimiento de la jerarqu\u00eda visual"},"content":{"rendered":"<p>\u00bfAlguna vez has pensado en lo que nos ayud\u00f3 a evolucionar del ca\u00f3tico dise\u00f1o de los a\u00f1os 90 a algo que tenemos ahora?<\/p>\n<p><!--more--><\/p>\n<div class=\"spacer\"><\/div>\n<p style=\"text-align: center;\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7522\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-2.png\" alt=\"\" width=\"589\" height=\"209\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-2.png 589w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-2-300x106.png 300w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>La respuesta es bastante simple: todo gracias a la <strong>jerarqu\u00eda visual<\/strong>.<\/p>\n<p>En la jerarqu\u00eda visual se utilizan todas las herramientas que tiene en su bolso el dise\u00f1ador medio: contraste, espaciado, tipograf\u00eda, color. Todas estas cosas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.<\/p>\n<p>\u00bfCu\u00e1l es la cosa m\u00e1s importante en el dise\u00f1o del sitio web? Es crucial para que el usuario sea guiado a trav\u00e9s del contenido del sitio web. Pues, tienes que echar ganas para que tu p\u00e1gina web sea sencilla de navegar y para que el usuario pueda encontrar toda la informaci\u00f3n necesaria en pocos segundos.<\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h3><b>Patrones de lectura de contenido<\/b><\/h3>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7523\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-3.png\" alt=\"\" width=\"524\" height=\"208\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-3.png 524w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-3-300x119.png 300w\" sizes=\"(max-width: 524px) 100vw, 524px\" \/><\/a>Todos conocemos muy bien las t\u00e9cnicas tradicionales de lectura de libros y peri\u00f3dicos. Sin embargo, todo es un poco m\u00e1s complicado en cuanto a las p\u00e1ginas web. Cuando un cliente abre tu sitio web, hay dos maneras posibles que puede utilizar para leerlo. Estas manerasse llaman patrones y en este post vamos a hablar un poco sobre cada patr\u00f3n y su uso.<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h4><b>F-patrones<\/b><\/h4>\n<p>Este tipo de patr\u00f3n se aplica generalmente a los blogs como nuestro. Cuando tienes un gran feed de informaci\u00f3n a la izquierda y una barra lateral a la derecha, el usuario del sitio web va a escanear tu p\u00e1gina tratando de encontrar los t\u00edtulos m\u00e1s interesantes de art\u00edculos. Una vez que encuentra algo interesante, comienza a leerlo y se desplaza a la derecha para obtener informaci\u00f3n adicional o pasa a la barra lateral para navegar por las caracter\u00edsticas adicionales.<\/p>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7524\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-4.png\" alt=\"\" width=\"648\" height=\"409\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-4.png 648w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-4-300x189.png 300w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/a>Al echar un vistazo a las estad\u00edsticas (como en la captura de pantalla arriba), notar\u00e1s que las zonas m\u00e1s calientes de la atenci\u00f3n del usuario forman algo que parece a la letra \"F\".<\/p>\n<p>Si est\u00e1s tratando de construir un tema para un blog o un sitio web con un mont\u00f3n de contenido, aseg\u00farate de resaltar los t\u00edtulos escribiendolos en negrita y localizandolos a la izquierda de tu sitio web.<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h4><b>Z - patrones<\/b><\/h4>\n<p>A todos otros tipos de sitios web, puedes aplicar el patr\u00f3n Z. Cuando un usuario visita un sitio web, \u00e9l o ella mira atentamente al panel superior para examinar toda la informaci\u00f3n importante como el logotipo y el men\u00fa. A continuaci\u00f3n se desplaza a la esquina opuesta en diagonal y hace lo mismo en la parte inferior de la p\u00e1gina.<\/p>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-5.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7525\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-5.jpg\" alt=\"\" width=\"800\" height=\"400\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-5.jpg 800w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-5-300x150.jpg 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-5-768x384.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a>Es por eso que muchos dise\u00f1adores web tienden a colocar la informaci\u00f3n m\u00e1s importante y \u00fatil en el panel superior, el panel inferior y en la diagonal.<\/p>\n<p>Aqu\u00ed est\u00e1 un ejemplo de sitio web en el que se utiliza el patr\u00f3n Z.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-6-1024x680.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7526\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-6-1024x680.jpg\" alt=\"\" width=\"1024\" height=\"680\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-6-1024x680.jpg 1024w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-6-1024x680-300x199.jpg 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-6-1024x680-768x510.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<figure id=\"attachment_92559\" class=\"wp-caption aligncenter\"><figcaption class=\"wp-caption-text\">http:\/\/www.irregulart.com\/<\/figcaption><\/figure>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h3><b>Formas de implementar la jerarqu\u00eda visual<\/b><\/h3>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/LEGO-1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7519\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/LEGO-1.jpg\" alt=\"\" width=\"537\" height=\"355\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/LEGO-1.jpg 537w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/LEGO-1-300x198.jpg 300w\" sizes=\"(max-width: 537px) 100vw, 537px\" \/><\/a>Como ya hemos mencionado, para estructurar tu contenido de la manera m\u00e1s eficiente, necesitas utilizar un cierto n\u00famero de habilidades de dise\u00f1o. Hablar es siempre f\u00e1cil, pero vamos a hacer frente a las formas de implementaci\u00f3n de la jerarqu\u00eda visual. Nuestro objetivo principal aqu\u00ed es aprender algo nuevo, \u00bfno?<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h4><b>Dise\u00f1o y tama\u00f1os<br \/>\n<\/b><\/h4>\n<p>Dado que hemos discutido los patrones de lectura de contenido, creemos que ahora es necesario hablar de los dise\u00f1os (layouts) de sitios web.<\/p>\n<p>\u00bfEst\u00e1s buscando una manera directa de afectar y mejorar la jerarqu\u00eda visual? No hay opci\u00f3n m\u00e1s directa que el dise\u00f1o del sitio web en s\u00ed.<\/p>\n<p>Si\u00e9ntete libre de usar filas y columnas para estructurar la informaci\u00f3n en tu sitio web y mantener el caos bajo control.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/flexbox_mini.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7518\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/flexbox_mini.jpg\" alt=\"\" width=\"500\" height=\"311\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/flexbox_mini.jpg 500w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/flexbox_mini-300x187.jpg 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>El uso de los efectos de parallax, los men\u00fas de hamburguesas y otras funciones te ayudar\u00e1 a mantener la interacci\u00f3n de los usuarios con tu sitio web eficaz y conveniente.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/burger.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7517\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/burger.jpg\" alt=\"\" width=\"577\" height=\"177\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/burger.jpg 577w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/burger-300x92.jpg 300w\" sizes=\"(max-width: 577px) 100vw, 577px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/148ZTf9Tb4rhLi.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7532\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/148ZTf9Tb4rhLi.gif\" alt=\"\" width=\"616\" height=\"300\" \/><\/a>\u00bfAlguna vez has o\u00eddo algo de la <strong>Ley de Fitts<\/strong>? Esta ley ayuda a los dise\u00f1adores web (y no s\u00f3lo a nosotros) a evaluar la cantidad de tiempo necesario para moverse a un objeto determinado de la interfaz.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-7.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7527\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-7.png\" alt=\"\" width=\"596\" height=\"224\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-7.png 596w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-7-300x113.png 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/a>Esta ley ayuda a los dise\u00f1adores a poner los elementos importantes de la interfaz en los lugares donde el usuario podr\u00e1 alcanzarlos sin dificultades.<\/p>\n<p>Por otro lado, necesitas reducir la distancia entre un elemento del dise\u00f1o y otro, pero ten en cuenta que tambi\u00e9n es importante hacer que el objeto sea suficientemente grande, as\u00ed que el cliente no tendr\u00eda que perder tiempo en los esfuerzos de apuntar en este elemento.<\/p>\n<p>Por ejemplo, la buena pr\u00e1ctica de posicionar los elementos de la interfaz se puede ver en la imagen abajo. Como puedes ver, los botones son suficientemente grandes, visibles y f\u00e1ciles de alcanzar y usar.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-8.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7528\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-8.png\" alt=\"\" width=\"889\" height=\"470\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-8.png 889w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-8-300x159.png 300w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-8-768x406.png 768w\" sizes=\"(max-width: 889px) 100vw, 889px\" \/><\/a>As\u00ed, como has entendido ya, el usuario pierde mucho m\u00e1s tiempo en alcanzar a los objetos que son peque\u00f1os. Y si ellos se encuentran muy lejos uno de otro, el proceso tomar\u00e1 a\u00fan m\u00e1s tiempo.<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h4><b>Espaciado<\/b><\/h4>\n<p>El espaciado tiene uno de los papeles principales en la jerarqu\u00eda visual. Hay un mont\u00f3n de sitios web que ten\u00edan grandes ideas de dise\u00f1o, pero luego romperon todo por no incluir lo suficiente espacio en blanco en el dise\u00f1o.<\/p>\n<p>Incluso si est\u00e1s tratando de ofrecer a tu audiencia la mayor cantidad de informaci\u00f3n en el mercado, tienes que presentar esta informaci\u00f3n con una cierta cantidad de espaciamiento.<\/p>\n<p><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-9.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7529\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-9.png\" alt=\"\" width=\"500\" height=\"427\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-9.png 500w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-9-300x256.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a>El dise\u00f1o web limpio incluye tanto el espacio en blanco activo como lo pasivo.<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h4><b>Color<\/b><\/h4>\n<p>Los colores que eliges te servir\u00e1n como herramientas de influencia en la jerarqu\u00eda visual de tu sitio web.<\/p>\n<p>Si examinas los sitios web que visitas todos los d\u00edas y los sitios web que realmente te gusta usar, te dar\u00e1s cuenta de c\u00f3mo el contraste y la elecci\u00f3n de colores te gu\u00edan a trav\u00e9s del contenido del sitio web.<\/p>\n<p>Por ejemplo, nos gusta mucho c\u00f3mo los chicos de Stanford d.school resaltan el contenido con los colores brillantes mientras que te gu\u00edan a trav\u00e9s de su sitio web. Si prestas atenci\u00f3n al movimiento de tus ojos, notar\u00e1s que en primer lugar los t\u00edtulos y los botones 'Leer m\u00e1s' llaman tu antenci\u00f3n.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-10.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7530\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-10.png\" alt=\"\" width=\"1015\" height=\"2500\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-10.png 1015w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-10-122x300.png 122w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-10-768x1892.png 768w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-10-416x1024.png 416w\" sizes=\"(max-width: 1015px) 100vw, 1015px\" \/><\/a><\/p>\n<figure id=\"attachment_92552\" class=\"wp-caption aligncenter\"><figcaption class=\"wp-caption-text\">https:\/\/dschool.stanford.edu\/<\/figcaption><\/figure>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h4><b>Peso y tama\u00f1o del tipo de letra<\/b><\/h4>\n<p>Esto es bastante obvio que uno de los puntos m\u00e1s importantes en la jerarqu\u00eda visual es la jerarqu\u00eda tipogr\u00e1fica. Te ayuda a estructurar los textos en tu sitio web para que sean f\u00e1ciles de percibir para los usuarios.<\/p>\n<p>En la mayor\u00eda de los casos, los dise\u00f1adores web tienen que presentar los textos en la forma en que llega a la audiencia y lo golpea como una tormenta. A nadie le gusta leer los textos mon\u00f3tonos sin bloques, listas o palabras resaltadas.<\/p>\n<div class=\"spacer\"><\/div>\n<p style=\"text-align: center;\"><a href=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-11.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7531\" src=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-11.png\" alt=\"\" width=\"440\" height=\"701\" srcset=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-11.png 440w, https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-11-188x300.png 188w\" sizes=\"(max-width: 440px) 100vw, 440px\" \/><\/a><\/p>\n<p>Ah\u00ed es donde debes utilizar el peso y el tama\u00f1o de la fuente. Simplemente resalta los p\u00e1rrafos o bloques de informaci\u00f3n para que el usuario preste atenci\u00f3n a ellos, lo que tembi\u00e9n mejorar\u00e1 la experiencia general del usuario.<\/p>\n<p>No utilices demasiado estilo de texto en tu sitio web, como no hay necesidad de hacer el 60% de su texto en negrita y cursiva o aplicar 10 fuentes al mismo art\u00edculo. Debe ser simple, pero llamativo.<\/p>\n<p>Fuente: \"<a href=\"https:\/\/monsterspost.com\/establishing-the-visual-hierarchy\/\">Establishing The Visual Hierarchy<\/a>\" por Alex Tkachenko<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfAlguna vez has pensado en lo que nos ayud\u00f3 a evolucionar del ca\u00f3tico dise\u00f1o de los a\u00f1os 90 a algo que tenemos ahora?<\/p>\n","protected":false},"author":1334762,"featured_media":7521,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Establecimiento de la jerarqu\u00eda visual<\/title>\n<meta name=\"description\" content=\"En la jerarqu\u00eda visual se utilizan muchas cosas: contraste, espaciado, tipograf\u00eda, color. Todas ellas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Establecimiento de la jerarqu\u00eda visual\" \/>\n<meta property=\"og:description\" content=\"En la jerarqu\u00eda visual se utilizan muchas cosas: contraste, espaciado, tipograf\u00eda, color. Todas ellas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterEspana\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-03T12:51:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Diane Parks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:site\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diane Parks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\"},\"author\":{\"name\":\"Diane Parks\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\"},\"headline\":\"Establecimiento de la jerarqu\u00eda visual\",\"datePublished\":\"2017-03-03T12:51:19+00:00\",\"dateModified\":\"2017-03-03T12:51:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\"},\"wordCount\":1271,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\",\"url\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\",\"name\":\"Establecimiento de la jerarqu\u00eda visual\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#website\"},\"datePublished\":\"2017-03-03T12:51:19+00:00\",\"dateModified\":\"2017-03-03T12:51:19+00:00\",\"description\":\"En la jerarqu\u00eda visual se utilizan muchas cosas: contraste, espaciado, tipograf\u00eda, color. Todas ellas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Establecimiento de la jerarqu\u00eda visual\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/es\/#website\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"name\":\"Blog de TemplateMonster\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\",\"name\":\"MonstersPost Espa\u00f1a\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonstersPost Espa\u00f1a\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterEspana\",\"https:\/\/twitter.com\/TMonster_ES\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\",\"name\":\"Diane Parks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Diane Parks\"},\"description\":\"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!\",\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\"],\"url\":\"https:\/\/monsterspost.com\/es\/author\/diane\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Establecimiento de la jerarqu\u00eda visual","description":"En la jerarqu\u00eda visual se utilizan muchas cosas: contraste, espaciado, tipograf\u00eda, color. Todas ellas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/","og_locale":"es_ES","og_type":"article","og_title":"Establecimiento de la jerarqu\u00eda visual","og_description":"En la jerarqu\u00eda visual se utilizan muchas cosas: contraste, espaciado, tipograf\u00eda, color. Todas ellas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.","og_url":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/","og_site_name":"Blog de TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterEspana","article_author":"https:\/\/www.facebook.com\/profile.php?id=100004881674652","article_published_time":"2017-03-03T12:51:19+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2017\/03\/TemplateMonster-Visual-Hierarchy-Guide-1.jpg","type":"image\/jpeg"}],"author":"Diane Parks","twitter_card":"summary_large_image","twitter_creator":"@TMonster_ES","twitter_site":"@TMonster_ES","twitter_misc":{"Escrito por":"Diane Parks","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/"},"author":{"name":"Diane Parks","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c"},"headline":"Establecimiento de la jerarqu\u00eda visual","datePublished":"2017-03-03T12:51:19+00:00","dateModified":"2017-03-03T12:51:19+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/"},"wordCount":1271,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/","url":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/","name":"Establecimiento de la jerarqu\u00eda visual","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/#website"},"datePublished":"2017-03-03T12:51:19+00:00","dateModified":"2017-03-03T12:51:19+00:00","description":"En la jerarqu\u00eda visual se utilizan muchas cosas: contraste, espaciado, tipograf\u00eda, color. Todas ellas pueden ayudarte a estructurar tu contenido de la manera m\u00e1s eficiente y hermosa.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/es\/establecimiento-de-la-jerarquia-visual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/es\/"},{"@type":"ListItem","position":2,"name":"Establecimiento de la jerarqu\u00eda visual"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/es\/#website","url":"https:\/\/monsterspost.com\/es\/","name":"Blog de TemplateMonster","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/es\/#organization","name":"MonstersPost Espa\u00f1a","url":"https:\/\/monsterspost.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonstersPost Espa\u00f1a"},"image":{"@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterEspana","https:\/\/twitter.com\/TMonster_ES"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c","name":"Diane Parks","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Diane Parks"},"description":"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!","sameAs":["https:\/\/www.facebook.com\/profile.php?id=100004881674652"],"url":"https:\/\/monsterspost.com\/es\/author\/diane\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/7515"}],"collection":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/users\/1334762"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/comments?post=7515"}],"version-history":[{"count":3,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/7515\/revisions"}],"predecessor-version":[{"id":7538,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/7515\/revisions\/7538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media\/7521"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media?parent=7515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/categories?post=7515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/tags?post=7515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}