{"id":340,"date":"2017-06-21T12:05:15","date_gmt":"2017-06-21T12:05:15","guid":{"rendered":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/?page_id=340"},"modified":"2017-07-13T11:06:22","modified_gmt":"2017-07-13T11:06:22","slug":"5-trabajar-con-la-reticula-2","status":"publish","type":"page","link":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/5-trabajar-con-la-reticula-2\/","title":{"rendered":"5. Treballar amb la ret\u00edcula"},"content":{"rendered":"

<\/p>\n

5.2. Claus per al disseny de la ret\u00edcula<\/h3>\n

La ret\u00edcula ens permet dividir la superf\u00edcie de la p\u00e0gina en el que s\u2019anomenen camps reticulars<\/em>, una s\u00e8rie d\u2019espais m\u00e9s redu\u00efts a manera de \u00abreixeta\u00bb que poden (o no) tenir les mateixes mides. L\u2019al\u00e7\u00e0ria dels camps correspon a un determinat nombre de l\u00ednies de text, i la seva ampl\u00e0ria correspon a la suma de les columnes. Els camps reticulars i les columnes se separen per mitj\u00e0 d\u2019espais (anomenats carrers<\/em>). La finalitat \u00faltima d\u2019aquesta repartici\u00f3 de l\u2019espai \u00e9s ajudar a l\u2019hora d\u2019ordenar els diferents elements que farem servir en la composici\u00f3 del nostre disseny. Tots els elements del nostre disseny s\u2019hauran d\u2019ajustar a les dimensions dels camps, de manera que s\u2019estableixi una jerarquia en els elements de la p\u00e0gina. La ret\u00edcula \u00e9s quelcom que porta tota publicaci\u00f3 per darrere i, una vegada acabada la nostra feina, l\u2019\u00fanica cosa que en quedar\u00e0 ser\u00e0 una percepci\u00f3 harm\u00f2nica en la distribuci\u00f3 de tots els elements, la qual cosa donar\u00e0 lloc a un bon disseny que aconseguir\u00e0 un impacte positiu sobre l\u2019observador.<\/p>\n

\"\"<\/a><\/p>\n

El nombre de divisions reticulars \u00e9s il\u00b7limitat. Haurem d\u2019estudiar quin tipus de disseny volem desenvolupar i definir el tipus d\u2019ordenaci\u00f3 que m\u00e9s ens conv\u00e9. Si els elements del disseny se subordinen a la ret\u00edcula, s\u2019aconseguir\u00e0 una impressi\u00f3 general d\u2019harmonia, d\u2019ordre, de transpar\u00e8ncia, etc. L\u2019ordre en el disseny contribueix a crear confian\u00e7a en el disseny i credibilitat en el missatge que es presenta. Una ret\u00edcula adequada en un disseny donar\u00e0 lloc a una disposici\u00f3 l\u00f2gica i est\u00e8tica de textos i imatges, de manera que la posada en p\u00e0gina ser\u00e0 intel\u00b7ligible i despertar\u00e0 l\u2019inter\u00e8s de l\u2019observador. L\u2019\u00fas de la ret\u00edcula ens permet resoldre problemes de manera r\u00e0pida i efectiva.<\/p>\n

A l\u2019hora de determinar l\u2019amplada de columna m\u00e9s adequada, hem de tornar sobre un tema que ja hem esmentat anteriorment: la llegibilitat dels textos. Una amplada de columna normal s\u2019estableix en unes set o deu paraules per l\u00ednia (recordem que l\u00ednies massa llargues o massa curtes dificulten la lectura). Tamb\u00e9 haurem de tenir cura de la reixeta base, que ens marcar\u00e0 l\u2019interlineat del text perqu\u00e8 sigui llegit correctament.<\/p>\n

L\u2019ideal \u00e9s dividir la p\u00e0gina en un nombre l\u00f2gic de columnes, en funci\u00f3 de la grand\u00e0ria del document. La taca (l\u2019\u00e0rea en la qual es disposa el nostre disseny) estar\u00e0 delimitada per un espai en blanc, els marges. Aquest espai en blanc \u00e9s important en dos \u00e0mbits:<\/p>\n

    \n
  1. En l\u2019\u00e0mbit t\u00e8cnic<\/strong>: cal deixar un espai de seguretat d\u2019entre 2 i 5 mm per al tall de les p\u00e0gines.<\/li>\n
  2. En l\u2019\u00e0mbit est\u00e8tic<\/strong>: uns blancs ben equilibrats al voltant de la composici\u00f3 no nom\u00e9s en facilitaran la lectura sin\u00f3 que tamb\u00e9 hi aportaran una sensaci\u00f3 est\u00e8tica interessant. Si aquest marge blanc \u00e9s massa petit, pot fer la sensaci\u00f3 de saturaci\u00f3 a la p\u00e0gina i provocar un rebuig del disseny.<\/li>\n<\/ol>\n

    Per tot aix\u00f2, podem concloure que la ret\u00edcula \u00e9s la que marca el nombre de columnes, els blancs de cap\u00e7alera, el peu, el tall, el llom i la col\u00b7locaci\u00f3 de les cap\u00e7aleres de secci\u00f3 i de la foliaci\u00f3. Aporta uniformitat i unitat a la revista i contribueix a definir l\u2019estil visual del producte. Aporta harmonia a la composici\u00f3 i guia el lector en el seu recorregut per la p\u00e0gina.<\/p>","protected":false},"excerpt":{"rendered":"

    5.2. Claus per al disseny de la ret\u00edcula La ret\u00edcula ens permet dividir la superf\u00edcie de la p\u00e0gina en el que s\u2019anomenen camps reticulars, una s\u00e8rie d\u2019espais m\u00e9s redu\u00efts a manera de \u00abreixeta\u00bb que poden (o no) tenir les mateixes mides. L\u2019al\u00e7\u00e0ria dels camps correspon a un determinat nombre de l\u00ednies de text, i la […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages\/340"}],"collection":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/comments?post=340"}],"version-history":[{"count":10,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages\/340\/revisions"}],"predecessor-version":[{"id":731,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages\/340\/revisions\/731"}],"wp:attachment":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/media?parent=340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}