{"id":9515,"date":"2020-08-07T08:22:41","date_gmt":"2020-08-07T06:22:41","guid":{"rendered":"https:\/\/www.makingscience.com\/blog\/las-reticulas-son-tus-amigas\/"},"modified":"2020-08-07T08:22:41","modified_gmt":"2020-08-07T06:22:41","slug":"las-reticulas-son-tus-amigas","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/las-reticulas-son-tus-amigas\/","title":{"rendered":"C\u00f3mo elegir la ret\u00edcula que m\u00e1s se adapta a tu proyecto"},"content":{"rendered":"
C\u00f3mo elegir la ret\u00edcula que m\u00e1s se adapta a tu proyecto<\/div>\n
\n

Vivimos en un mundo en el que nos tenemos que enfrentar al problema de distribuir el espacio constantemente, desde construir un armario hasta distribuir las calles de una ciudad; el ser humano siempre ha buscado c\u00f3mo estructurar el contenido de la mejor manera posible.<\/p>\n

\"\"<\/p>\n

Como se puede ver en los ejemplos anteriores, hay una tendencia a dividir el espacio en bloques cuadrados o rectangulares, ya que no queda espacio perdido y se crea una composici\u00f3n en la que todos los elementos son paralelos. Esto permite hacer a\u00f1adidos o sustracciones de m\u00f3dulos de manera sencilla y, adem\u00e1s, ayuda a distinguir los elementos que lo componen f\u00e1cilmente.<\/p>\n

En el mundo del dise\u00f1o nos enfrentamos al mismo problema de distribuci\u00f3n en nuestras creaciones y, a la hora de maquetar contenido, se han buscado soluciones que permitan mantener un orden en la disposici\u00f3n de los elementos que compongan nuestro proyecto.<\/p>\n

Por norma general no te puedes permitir el lujo de colocar las cosas a ojo (donde sea), solo porque \u201cqueda bonito\u201d. Se necesita un orden, una base para equilibrar la composici\u00f3n.<\/p>\n

Esta soluci\u00f3n, al igual que en los ejemplos que hemos visto antes, consiste en dividir el espacio del que se dispone en diferentes bloques o m\u00f3dulos, cuadrados o rectangulares, que permitan repartir el espacio f\u00e1cilmente. En otras palabras, se crea una ret\u00edcula<\/strong>.<\/p>\n

Las ret\u00edculas son la herramienta esencial a la hora de maquetar. Nos ayudan a establecer el lugar que ocupar\u00e1n los textos e im\u00e1genes, as\u00ed como a definir los espacios en blanco (m\u00e1rgenes) que quedar\u00e1n.<\/p>\n

Permiten guiar al lector y ayudan a jerarquizar el contenido. Tambi\u00e9n nos ayudan a mantener un dise\u00f1o constante en el caso de proyectos que tengan varias p\u00e1ginas. Las ret\u00edculas, por tanto, nos ofrecen orden, equilibrio, continuidad, eficacia<\/strong> y, por supuesto, dise\u00f1o<\/strong>.<\/p>\n

Con la ret\u00edcula podemos dotar a la composici\u00f3n de un tono u otro seg\u00fan lo que queramos transmitir. No existe un solo tipo,\u00a0 y dependiendo del proyecto y del formato de la p\u00e1gina (tama\u00f1o, orientaci\u00f3n), utilizaremos una ret\u00edcula u otra.<\/p>\n

No es lo mismo un libro, con una lectura pausada y tranquila, que un peri\u00f3dico, m\u00e1s r\u00e1pido y din\u00e1mico, donde vas saltando de un lado a otro constantemente y no necesariamente en orden. Seg\u00fan su estructura b\u00e1sica se pueden dividir en 4 tipos.<\/p>\n

Tipos de Ret\u00edcula<\/h2>\n
    \n
  • Ret\u00edcula de manuscrito: <\/strong>Es la que podemos encontrar en cualquier novela. Una sola caja o columna en la que se dispone toda la informaci\u00f3n. Es la m\u00e1s b\u00e1sica de todas.<\/li>\n
  • Ret\u00edcula de columnas:<\/strong> Se divide la p\u00e1gina en 2 o m\u00e1s columnas. Permite m\u00e1s juego al poder distribuir el contenido en ellas, las cuales adem\u00e1s, se pueden se combinar entre ellas seg\u00fan tus intereses (por ejemplo, puede ser que los textos ocupen una sola columna de ancho y las im\u00e1genes dos).<\/li>\n
  • Ret\u00edcula modular:<\/strong> Partiendo de la ret\u00edcula de columnas, pero dividiendo estas en filas, creamos una matriz, una cuadr\u00edcula formada por m\u00f3dulos que, si bien pueden funcionar de manera independiente, tambi\u00e9n pueden combinarse entre ellos, tanto a lo ancho como a lo alto, d\u00e1ndonos much\u00edsima variedad en el dise\u00f1o. Esta podr\u00eda considerarse la ret\u00edcula m\u00e1s completa.<\/li>\n
  • Ret\u00edcula Jer\u00e1rquica:<\/strong> La m\u00e1s libre de todas. Se crea a partir del contenido que se vaya a incluir y las necesidades de este. No tiene por qu\u00e9 dividirse el espacio proporcionalmente como en los otros tipos de ret\u00edcula.<\/li>\n<\/ul>\n

    \"\"<\/p>\n

    Con estos 4 tipos de ret\u00edculas podemos crear infinidad de dise\u00f1os distintos para cualquier medio, utilizando m\u00e1s o menos columnas y combinando m\u00f3dulos. \u00a1Las posibilidades son infinitas!<\/p>\n

    Medios Online<\/h2>\n

    Hasta ahora, hemos hablado de las ret\u00edculas de manera general centr\u00e1ndonos en la maquetaci\u00f3n offline<\/em>, pero \u00bfqu\u00e9 ocurre con los medios online<\/em>?<\/strong><\/p>\n

    Hoy en d\u00eda hay much\u00edsimo contenido en la red y, las p\u00e1ginas web, se enfrentan al mismo problema de orden y distribuci\u00f3n que ya hemos visto, con m\u00e1s complicaciones a\u00fan si cabe.<\/p>\n

    No solo debemos tener en consideraci\u00f3n todo lo hablado anteriormente, sino que se debe tener en cuenta que las webs son interactivas, din\u00e1micas. Por un lado, se debe conseguir que el usuario sea capaz de encontrar lo que busca en todo momento (User Esperience – UX<\/em> y User Interaction – UI<\/em>) sin perderse por la p\u00e1gina.<\/p>\n

    Por otro lado, y es aqu\u00ed donde la ret\u00edcula juega un papel importante, las p\u00e1ginas web suelen ser responsive<\/em>, lo que significa que dependiendo del dispositivo en el que las veas, la pantalla tendr\u00e1 unas proporciones y tama\u00f1os distintos y, por tanto, la p\u00e1gina tendr\u00e1 que adaptarse a cada dispositivo teniendo que cambiar su maquetaci\u00f3n seg\u00fan convenga, pero manteniendo la misma informaci\u00f3n siempre.<\/p>\n

    Tambi\u00e9n hay ventajas, como que el espacio vertical es infinito. En los medios impresos, en cambio, un p\u00e1rrafo con un par de l\u00edneas de texto m\u00e1s de las esperadas puede suponer un quebradero de cabeza a la hora de encajarlo en la p\u00e1gina sin quedarnos sin espacio.<\/p>\n

    Habitualmente, las ret\u00edculas para medios online<\/em> constan de 12 columnas dada su gran versatilidad. Una ret\u00edcula de 12 columnas se puede dividir en 1, 2, 3, 4 o 6 columnas iguales seg\u00fan nos convenga o, dicho de otro modo, seg\u00fan la pantalla y el espacio horizontal del que dispongamos, permitiendo mucho juego y garant\u00eda de no tener problemas de adaptaci\u00f3n en ning\u00fan dispositivo.<\/p>\n

    Hay quien se ha obsesionado con esta perfecci\u00f3n y exactitud creando lo que se conoce como pixel perfect<\/em>, que lleva estas t\u00e9cnicas de adaptaci\u00f3n y precisi\u00f3n al extremo, a la exactitud del pixel.<\/p>\n

    \"\" Para finalizar, solo repetir que las ret\u00edculas son tus amigas<\/strong> y que, gastar algo de tiempo en pensar en cual se adapta mejor a tus necesidades al principio te puede ahorrar much\u00edsimo tiempo y problemas futuros.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    C\u00f3mo elegir la ret\u00edcula que m\u00e1s se adapta a tu proyecto Vivimos en un mundo en el que nos tenemos que enfrentar al problema de distribuir el espacio constantemente, desde construir un armario hasta distribuir las calles de una ciudad; el ser humano siempre ha buscado c\u00f3mo estructurar el contenido de la mejor manera posible. […]<\/p>\n","protected":false},"author":21,"featured_media":9519,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[63],"class_list":["post-9515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advertising","tag-creativity-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=9515"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9515\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/9519"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=9515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=9515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=9515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}