{"id":2968,"date":"2020-03-06T17:42:00","date_gmt":"2020-03-06T17:42:00","guid":{"rendered":"https:\/\/www.pilafestudio.com\/?p=2968"},"modified":"2020-03-10T08:34:05","modified_gmt":"2020-03-10T08:34:05","slug":"reticula-diseno","status":"publish","type":"post","link":"https:\/\/www.pilafestudio.com\/val\/reticula-diseno\/","title":{"rendered":"Ret\u00edcula: cu\u00e1ndo es completamente necesaria."},"content":{"rendered":"

La ret\u00edcula subyace en m\u00e1s dise\u00f1os de los que pensamos. \u00bfPero es siempre necesario su uso?<\/h3>\n\n\n\n

Sabemos que la ret\u00edcula es una poderosa herramienta al servicio de la composici\u00f3n y armon\u00eda de los dise\u00f1os. Es el esqueleto invisible que da coherencia a la relaci\u00f3n entre elementos. <\/strong><\/p>\n\n\n\n

Con defensores y detractores de su uso recurrente en los procesos creativos, en este post quer\u00eda reflexionar un poco acerca de su uso, en seg\u00fan que disciplinas, dentro del dise\u00f1o gr\u00e1fico.<\/p>\n\n\n\n\n\n\n\n

Para ello, este post lo he estructurado en estos ep\u00edgrafes:<\/p>\n\n\n\n

  1. Respuesta a una necesidad.<\/a><\/li>
  2. En el dise\u00f1o editorial.<\/a><\/li>
  3. En el dise\u00f1o de logos .<\/a><\/li>
  4. En el dise\u00f1o web.<\/a><\/li>
  5. En el dise\u00f1o de iconos.<\/a><\/li>
  6. Conclusiones<\/a>.<\/li><\/ol>\n\n\n\n

    1. Respuesta a una necesidad<\/h3>\n\n\n\n

    Como la mayor\u00eda de herramientas de que disponemos en el campo del dise\u00f1o, la ret\u00edcula nace tambi\u00e9n con el ambicioso prop\u00f3sito de organizar la informaci\u00f3n con una coherencia y dotar de armon\u00eda la composici\u00f3n.<\/p>\n\n\n\n

    Aunque t\u00e9cnicamente llamamos ret\u00edcula a una cuadr\u00edcula formada por l\u00edneas verticales y horizontales, el uso de esta palabra se ha extendido, en el campo de la modulaci\u00f3n de logotipos, a las figuras geom\u00e9tricas que definen una imagen definitiva. Esto lo veremos mejor en el punto 3 del post<\/p>\n\n\n\n

    Pero volviendo a la necesidad que cubre esta herramienta, podemos afirmar que su uso se ve consolidado en el \u00e1mbito de la maquetaci\u00f3n de textos.<\/p>\n\n\n\n

    Ser\u00eda impensable maquetar una publicaci\u00f3n peri\u00f3dica, teniendo que plantear en cada n\u00famero, una soluci\u00f3n a la composici\u00f3n de cada p\u00e1gina<\/strong>. Es en este caso donde es absolutamente imprescindible.<\/p>\n\n\n\n

    Tambi\u00e9n en el dise\u00f1o web, la ret\u00edcula ofrece una ayuda y una gu\u00eda inicial para empezar a crear un prototipo. En este caso, veremos que lo que llamamos ret\u00edcula, en este caso no dispone del elemento horizonal, \u00fanicamente del vertical. En esto ahondaremos en el punto 4.<\/p>\n\n\n\n

    En cualquiera de los casos, lo importante es conocer esta herramienta, y usarla para dar coherencia al dise\u00f1o, y como punto de apoyo, sin considerar \u00e9sta como algo est\u00e1tico o inflexible.<\/strong><\/p>\n\n\n\n

    2. En el Dise\u00f1o Editorial<\/h3>\n\n\n\n

    Ya lo hemos adelantado. Nadie concibe la edici\u00f3n de un libro o revista o peri\u00f3dico, sin el uso de la ret\u00edcula.<\/strong><\/p>\n\n\n\n

    Es en este caso donde alcanza su m\u00e1xima eficiencia, pues resuelve uno de los problemas con lo que se debe lidiar en algunas ediciones, como es la convivencia entre im\u00e1genes y textos.<\/p>\n\n\n\n

    Sobre la ret\u00edcula en el \u00e1mbito editorial se ha escrito much\u00edsimo, pero una de las publicaciones de referencia es sin duda Sistema de Ret\u00edculas<\/a><\/strong>, de Josef M\u00fcller-Brockman. Un libro que desgrana todas las posibilidades de la ret\u00edcula en el \u00e1mbito editorial m\u00e1s amplio<\/strong>. Desde peri\u00f3dicos o revistas, hasta la maquetaci\u00f3n de cat\u00e1logos corporativos, pasando por la rotulaci\u00f3n de salas de exposici\u00f3n.<\/p>\n\n\n\n

    \"des\u00f1o
    P\u00e1ginas de \u00abSistemas de Ret\u00edculas\u00bb. Fuente: Editorial Gustavo Gili<\/figcaption><\/figure>\n\n\n\n

    Hablar de ret\u00edcula es hablar principalmente de proporci\u00f3n<\/strong>. Por lo que conocer c\u00f3mo distribuir los espacios entre las filas y columnas, y los tama\u00f1os de las celdas, requerir\u00e1 de un conocimiento profundo de la tipograf\u00eda a utilizar, y la configuraci\u00f3n de sus par\u00e1metros b\u00e1sicos, para que el conjunto de la mancha de texto, armonice con las im\u00e1genes y con la composici\u00f3n general.<\/p>\n\n\n\n

    3. En el Dise\u00f1o de Logos<\/h3>\n\n\n\n

    Como se ha comentado en el primer apartado, muchas veces, a las figuras geom\u00e9tricas que se utilizan para llegar a una soluci\u00f3n de un logotipo, le llamamos ret\u00edcula.<\/p>\n\n\n\n

    Hay opiniones de todo tipo, pues algunos profesionales defienden que no es necesario su uso, o al menos no es obligatorio.<\/strong><\/p>\n\n\n\n

    \"reticula<\/figure>\n\n\n\n

    Yo pienso que su uso es completamente necesario en el proceso creativo. Y esto significa que no necesariamente el resultado gr\u00e1fico final del logotipo est\u00e9 encajado en la ret\u00edcula propuesta.<\/p>\n\n\n\n

    Trabajar con una ret\u00edcula, o con una serie de par\u00e1metros que constri\u00f1an o restrinjan del alg\u00fan modo, las infinitas posibilidades en materia de composici\u00f3n que podr\u00eda tener un logo, es una forma de ser m\u00e1s eficientes en nuestro proceso de trabajo.<\/strong><\/p>\n\n\n\n

    Algunos dise\u00f1adores, con mucha experiencia, son capaces de crear composiciones armoniosas y proporcionadas de forma intuitiva. Generalmente por tener un ojo entrenado. <\/p>\n\n\n\n

    \"ret\u00edcula\"<\/a><\/figure>\n\n\n\n

    Pero no olvidemos que incluso as\u00ed, puede que mentalmente el dise\u00f1ador tenga concebida una ret\u00edcula, que transmite al papel.<\/strong><\/p>\n\n\n\n

    Por otro lado, con la ret\u00edcula garantizamos un trabajo de cara al cliente. Ver que el proceso creativo se ha tomado conforme a una base geom\u00e9trica s\u00f3lida transmitir\u00e1 confianza y profesionalidad.<\/p>\n\n\n\n

    No inventemos excusas (ni ret\u00edculas)<\/h4>\n\n\n\n

    Por \u00faltimo, y en contraposici\u00f3n al p\u00e1rrafo anterior, no transmite profesionalidad el hecho de crear de la nada, una especie de ret\u00edcula que no responde a ning\u00fan par\u00e1metro de proporci\u00f3n<\/strong>, solo para incluirla en el manual de marca.<\/p>\n\n\n\n

    Est\u00e1 bien no usar ret\u00edcula en el proceso, pero si no se ha hecho, no es necesario despu\u00e9s crear este tipo de artificios, que pueden desacreditar un trabajo de buena calidad. No se incluye y ya est\u00e1.<\/p>\n\n\n\n

    Pero, en mi caso, considero siempre necesario incluirla en el proceso creativo, aunque durante el mismo, se vaya modificando y adaptando hasta la soluci\u00f3n final. Hay que pensar en las necesarias correcciones visuales posteriores para equilibrar el resultado.<\/strong><\/p>\n\n\n\n

    4. En el Dise\u00f1o Web<\/h3>\n\n\n\n

    Aunque inicialmente el dise\u00f1o web tomaba pr\u00e1cticamente las mismas premisas que la composici\u00f3n en el dise\u00f1o editorial<\/strong>, conforme ha ido evolucionando de un medio est\u00e1tico, a uno totalmente din\u00e1mico y flexible, se han ido a\u00f1adiendo herramientas de dise\u00f1o espec\u00edficas para ellas.<\/p>\n\n\n\n

    Cada vez es menos frecuente encontrar a dise\u00f1adores que todav\u00eda prototipen con Photoshop, como se solia hacer anteriormente.<\/p>\n\n\n\n

    La oferta actual de programas de dise\u00f1o enfocados a web y app, se centra basicamente en Sketch y Adobe XD.<\/p>\n\n\n\n

    Estos programas ya incluyen la herramienta para dise\u00f1ar con ret\u00edcula, que, como hemos apuntado anteriormente, se trata m\u00e1s bien de un sistema de columnas<\/strong>, pues la direcci\u00f3n horizontal no tiene mucho sentido en el \u00e1mbito web, donde disponemos del scroll infinito, y no estamos limitados por el alto de la p\u00e1gina, como sucede en el dise\u00f1o de medios impresos.<\/p>\n\n\n\n

    Actualmente se considera un est\u00e1ndar el dise\u00f1ar a 12 columnas, y de hecho, es el valor por defecto que nos ofrece Adobe XD al marcar la casilla que ellos llaman \u00abcuadr\u00edcula\u00bb (pese a que son s\u00f3lo columnas).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Fragmentar nuestro espacio en columnas tambi\u00e9n ofrece las ventajas de encajar las secciones de la web en cajas imaginarias, que ser\u00e1n de utilidad para el desarrollador front-end<\/strong> que convertir\u00e1 a c\u00f3digo nuestra web. Facilitar\u00e1 la creaci\u00f3n de bloques y definir\u00e1 su comportamiento seg\u00fan los tama\u00f1os de pantalla, en base a los criterios del Responsive Design.<\/p>\n\n\n\n

    5. En el Dise\u00f1o de Iconos<\/h3>\n\n\n\n

    Para introducir la ret\u00edcula en el dise\u00f1o de iconos, hay que enfatizar de nuevo el concepto de proporci\u00f3n.<\/strong><\/p>\n\n\n\n

    Actualmente, y con el auge del dise\u00f1o de apps, ha sido necesario generar cantidad de iconograf\u00eda, que responda a las necesidades de cada aplicaci\u00f3n.<\/p>\n\n\n\n

    Aunque existen bancos de iconos dise\u00f1ados espec\u00edficamente para entorno app, y optimizados para trabajar con Sketch o Adobe XD, es muy probable que muchas empresas que encargan el dise\u00f1o de su app requieran de iconos esp\u00e9cificos.<\/p>\n\n\n\n

    En todo caso, tanto para realizar iconos gen\u00e9ricos para un banco de im\u00e1genes, como para dise\u00f1ar iconos espec\u00edficos, es necesarios basarnos en una ret\u00edcula. <\/p>\n\n\n\n

    \"\"
    Fuente: Adobe Blogs. Post: \u00abOptimize Icon Design with More Artboard<\/a>s\u00bb<\/figcaption><\/figure>\n\n\n\n

    Esta ret\u00edcula dar\u00e1 consistencia al conjunto de iconograf\u00eda de la web, app, cat\u00e1logo o cualquier otro soporte. La consistencia es b\u00e1sicamente que todos los iconos compartan par\u00e1metros visuales <\/strong>que hagan que, si los visualizamos conjuntamente, los identifiquemos como un \u00fanico estilo.<\/strong><\/p>\n\n\n\n

    Podemos alcanzar la consistencia mediante el uso correcto de los grosores de linea, los remates de los trazos, y los espacios en blanco. Y para todo ello una buena ret\u00edcula de base garantizar\u00e1 un resultado correcto.<\/strong><\/p>\n\n\n\n

    6. Conclusiones<\/h3>\n\n\n\n

    Aunque tradicionalmente asociemos la famosa ret\u00edcula al dise\u00f1o editorial, vemos que la cantidad de ecosistemas en los que puede convivir (en silencio, pues nunca se deja ver) es importante, y va aumentando conforme van apareciendo nuevos soportes para el dise\u00f1o.<\/p>\n\n\n\n

    El concepto de la ret\u00edcula dota de profesionalidad a los trabajos de dise\u00f1o, pues garantiza una estructura coherente<\/strong>, y transmite uniformidad y organizaci\u00f3n. <\/p>\n\n\n\n

    Al final, se trata de un elemento que trabaja en favor de la comunicaci\u00f3n visual, por lo que no entiende de soportes<\/strong>, es m\u00e1s bien la representaci\u00f3n de los espacios y distancias que no vemos directamente, pero s\u00ed apreciamos indirectamente.<\/p>\n\n\n\n

    Referencias y enlaces de inter\u00e9s<\/h4>\n\n\n\n