{"id":14939,"date":"2020-12-09T13:32:47","date_gmt":"2020-12-09T11:32:47","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14939"},"modified":"2021-02-17T16:26:54","modified_gmt":"2021-02-17T14:26:54","slug":"reticulas-para-pantalla","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/reticulas-para-pantalla\/","title":{"rendered":"Ret\u00edculas para pantalla"},"content":{"rendered":"

Introducci\u00f3n<\/strong><\/h2>\n

La ret\u00edcula<\/strong> se utiliza para establecer una estructura de dise\u00f1o continua y coherente en soportes que deban alojar todo tipo de contenidos. En peri\u00f3dicos y revistas, el contenido var\u00eda en cada edici\u00f3n (se puede llegar a actualizar diariamente o incluso con m\u00e1s periodicidad), y el dise\u00f1ador debe garantizar la coherencia gr\u00e1fica que proporciona identidad a la publicaci\u00f3n. Esta coherencia se mantendr\u00e1 a lo largo de todas las p\u00e1ginas, aunque los contenidos cambien en cada una.<\/p>\n

Del mismo modo, en soporte digital, el usuario debe poder identificar una aplicaci\u00f3n o una web como un conjunto unitario, aunque el aspecto general sea diferente en cada pantalla.<\/p>\n

La ret\u00edcula act\u00faa de manera similar a la estructura de un edificio, preservando la relaci\u00f3n entre todos los elementos que conforman el conjunto y garantizando la estabilidad y coherencia.<\/p>\n

\"\"<\/p>\n

Estructura de la ret\u00edcula<\/strong><\/h2>\n

En publicaciones (tanto impresas como digitales) que se actualizan frecuentemente, se hace necesario minimizar el n\u00famero de decisiones sobre dise\u00f1o que el editor de la p\u00e1gina debe tomar.<\/p>\n

En estos casos, la ret\u00edcula adquiere la forma de una rejilla, que determina las zonas existentes en el soporte y su subdivisi\u00f3n (generalmente, en varias columnas). Durante el proceso de edici\u00f3n de los contenidos se respeta estrictamente la estructura definida, de manera que exista una continuidad visual a lo largo de toda la publicaci\u00f3n, a pesar de que los contenidos de cada p\u00e1gina sean diferentes.<\/p>\n

\"\"

Ret\u00edcula del peri\u00f3dico The Independent
Fuente: http:\/\/b-beckman1518-sp.blogspot.com\/2015\/11\/grids.html<\/a>.<\/p><\/div>\n

La ret\u00edcula tambi\u00e9n puede basarse en escalas modulares<\/strong>, que son m\u00e1s flexibles que la rejilla utilizada en peri\u00f3dicos y revistas. Estas escalas se basan en un conjunto de proporciones armoniosas, y se pueden generar a partir de cualquier proporci\u00f3n: la serie Fibonacci, las medidas de una guitarra para un libro de m\u00fasica, cartas astron\u00f3micas para un de astronom\u00eda, etc.<\/p>\n

\"\"

Ret\u00edcula basada en escalas modulares<\/p><\/div>\n

La ret\u00edcula tambi\u00e9n puede basarse en escalas org\u00e1nicas<\/strong>, m\u00e1s irregulares e imprevisibles que las anteriores. Los resultados se suelen aplicar a productos experimentales o publicaciones en las que la frecuencia de actualizaci\u00f3n sea baja.<\/p>\n

\"\"

Ret\u00edcula basada en escalas org\u00e1nicas<\/p><\/div>\n

Terminolog\u00eda<\/strong><\/h2>\n

Columna<\/strong><\/h3>\n

La columna es la unidad m\u00ednima de la ret\u00edcula. Muchas de las ret\u00edculas web para escritorio se basan en una estructura de 12 columnas.<\/p>\n

\"\"<\/p>\n

Gutter<\/em><\/strong><\/h3>\n

El gutter<\/em> es la distancia entre columnas de la ret\u00edcula.<\/p>\n

\"\"<\/p>\n

M\u00e1rgenes<\/strong><\/p>\n

Los m\u00e1rgenes corresponden a la distancia que hay entre la ret\u00edcula y el contorno de la ventana del navegador (en web) o de la pantalla (en apps<\/em>).<\/p>\n

\"\"<\/p>\n

Baseline<\/em><\/strong><\/h3>\n

Corresponde a la distancia vertical entre los elementos. Por ejemplo, podemos determinar una baseline<\/em> de 8 px, de modo que la distancia vertical entre elementos siempre sea de 8 px o m\u00faltiplos de esta unidad.<\/p>\n

\"\"

Fuente: Imagen de https:\/\/webdesign.tutsplus.com\/articles\/setting-web-type-to-a-baseline-grid–webdesign-3414<\/a>.<\/p><\/div>\n

Layout<\/em><\/strong><\/h3>\n

El layout<\/em> corresponde a la agrupaci\u00f3n de columnas, por lo que se generan estructuras de p\u00e1gina o pantalla en las que tienen que encajar los contenidos.<\/p>\n

En una misma web o aplicaci\u00f3n, los diferentes modelos de p\u00e1gina pueden aplicar diferentes estructuras de columnas. Como las unidades sobre las que trabajan son las mismas, esta variaci\u00f3n hace que el aspecto visual de las p\u00e1ginas sea din\u00e1mico, pero aun as\u00ed se vea una unidad subyacente.<\/p>\n

\"\"<\/p>\n

Campo<\/strong><\/h3>\n

Los campos corresponden a las divisiones horizontales de la p\u00e1gina, es decir, a los diferentes bloques de contenido de una p\u00e1gina que se re\u00fanen en franjas horizontales.<\/p>\n

Ret\u00edcula responsive<\/em><\/strong><\/h3>\n

La ret\u00edcula responsive<\/em><\/strong> utiliza en entorno web para conseguir una regularidad en la estructura de las p\u00e1ginas, aunque el ancho de pantalla de los diferentes dispositivos var\u00ede.<\/p>\n

Aunque se puede trabajar con el dise\u00f1o de ret\u00edcula que cada dise\u00f1ador prefiera, en entorno web responsive<\/em> es muy habitual trabajar con estructuras de 12 columnas. Al ser m\u00faltiplo de 4, esta estructura trabaja bien con los breakpoints<\/em> habituales del dise\u00f1o web.<\/p>\n

\"\"<\/p>\n

Los breakpoint<\/em><\/strong> son los puntos en los que el dise\u00f1o de una web cambia perceptiblemente para responder lo mejor posible a las condiciones de visualizaci\u00f3n del dispositivo utilizado.<\/p>\n

Referencias<\/strong><\/h2>\n

Monjo, T.<\/strong> Disseny d\u2019interf\u00edcies multim\u00e8dia<\/em>. Barcelona: FUOC.<\/p>\n

Turnbull, C.<\/strong> \u00abSetting Web Type to a Baseline Grid\u00bb [en l\u00ednea]. <https:\/\/webdesign.tutsplus.com\/articles\/setting-web-type-to-a-baseline-grid–webdesign-3414<\/a>>. [Fecha de consulta: 25 de enero de 2021].<\/p>\n

\u00a0<\/strong>Wassermann, E.<\/strong> (2016) \u00abA Comprehensive Introduction to Grids in Web Design\u00bb [en l\u00ednea]. <https:\/\/webdesign.tutsplus.com\/articles\/a-comprehensive-introduction-to-grids-in-web-design–cms-26521<\/a>>. [Fecha de consulta: 25 de enero de 2021].<\/p>\n","protected":false},"excerpt":{"rendered":"

Introducci\u00f3n La ret\u00edcula se utiliza para establecer una estructura de dise\u00f1o continua y coherente en soportes que deban alojar todo tipo de contenidos. En peri\u00f3dicos y revistas, el contenido var\u00eda en cada edici\u00f3n (se puede llegar a actualizar diariamente o incluso con m\u00e1s periodicidad), y el dise\u00f1ador debe garantizar la coherencia gr\u00e1fica que proporciona identidad […]<\/p>\n","protected":false},"author":4,"featured_media":18245,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,31],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14939\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=14939"}],"version-history":[{"count":11,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14939\/revisions\/"}],"predecessor-version":[{"id":18018,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14939\/revisions\/18018\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18245\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=14939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=14939"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=14939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}