infografes de la generalitat de catalunya. pautes...

Infografes de la Generalitat de Catalunya Pautes gràfques InDesign, PowerPoint i Piktochart

Octubre 2019

Infografies de la Generalitat de CatalunyaPautes gràfiques InDesign, PowerPoint i Piktochart

1 Introducció

Aquest manual conté les pautes gràfques per elaborar les infografes dels departaments de la Generalitat de Catalunya, dels organismes autònoms adscrits i de les empreses públiques que en depenen.

És una guia orientativa que defneix els paràmetres per elaborar aquests documents, a partir del programa professional Indesign o dels programes gratuïts PowerPoint i Piktochart, i convertir-los en documents electrònics (PDF) o en imatges (JPG).

Per facilitar l’elaboració dels documents, hi ha disponibles dos tipus de plantilles, una en Indesign i una en PowerPoint, i una mostra en Piktochart, ja que aquest programa no permet disposar d’una plantilla. També hi ha disponibles, a Descarregables relacionats, dues carpetes que contenen les icones i els mapes.


2 Tipografa

Per a la composició dels textos de les capçaleres de les infografes, s’ha d’utilitzar la tipografa Open Sans.

Per a la composició dels textos interiors, s’ha d’utilitzar la tipografia Open Sans en totes les seves variants.

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Open Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz


3

Colors corporatius

Vermell Pantone 485 (corporatiu Generalitat de Catalunya) R: 192, G: 0, B: 0 Color web: #CC0000

Negre R: 0, G: 0, B: 0 Color web: #000000

Gris R: 102, G: 102, B: 102 Color web: #666666

Els colors

La gamma de colors que cal utilitzar és la que es mostra en aquesta pàgina.

El vermell i el negre són els colors corporatius. El blanc sempre ha de ser el color de fons.

S’estableix també una gamma de colors alternatius.

Per a la capçalera, els departaments poden triar un color propi dins d’aquesta gamma alternativa o el color corporatiu de la Generalitat. Els organismes o les empreses amb imatge pròpia han d’utilitzar el color corporatiu i, en cas que no en disposin, el color que es triï ha de formar part del ventall de colors establert com a gamma alternativa.

Cal assegurar-se que els colors que es triïn que no formin part d’aquestes gammes proposades passin el test de contrast de color (Colour Contrast Analyser: http:// colorsontheweb.com/colorcontrast.asp) almenys amb la AA, tant per a textos de cossos tipogràfcs grans com petits amb tipografa en blanc o en negre segons el fons de color.

En els casos que el fons de color tingui una saturació entre el 0% i el 40%, el text s’ha d’aplicar en negre. Quan el fons tingui un grau de saturació superior al 40%, el text s’ha d’aplicar en blanc.

El peu ha de tenir el mateix color que la capçalera i, per tant, la identificació bàsica o departamental situada a sobre ha de seguir la mateixa normativa pel que fa al color.

En els casos que el fons de color tingui una saturació entre el 0 i el 40%, la identificació s’ha d’aplicar en negre. Quan el fons tingui un grau de saturació superior al 40%, la identificació s’ha d’aplicar en blanc.

A l’interior de la infografia, cal limitar els colors utilitzats a 3 o 4 colors principals i els seus tramats. Les gammes seleccionades han de ser de gammes cromàtiques harmòniques (tons propers al cercle cromàtic).


4

Gamma alternativa

Verd clar R: 153, G: 204, B: 13 Color web: #a8cb33

Verd R: 61, G: 155, B: 53 Color web: #3d9b35

Verd fosc R: 0, G: 133, B: 100 Color web: #008564

Verd oliva clar R: 188, G: 191, B: 0 Color web: #bcbf00

Verd oliva fosc R: 100, G: 122, B: 48 Color web: #647a30

Turquesa R: 0, G: 152, B: 170 Color web: #0098aa

Blau clar R: 0, G: 171, B: 212 Color web: #60a9d1

Blau R: 44, G: 116, B: 179 Color web: #2c74b3

Blau fosc R: 15, G: 48, B: 99 Color web: #0f3063

Lila R: 111, G: 65, B: 143 Color web: #6f418f

Violeta R: 164, G: 37, B: 124 Color web: #8d2a79

Rosa R: 230, G: 30, B: 135 Color web: #e61e87

Vermell R: 255, G: 0, B: 0 Color web: #db0000

Taronja R: 248, G: 92, B: 38 Color web: #f85c26

Carbassa R: 247, G: 148, B: 31 Color web: #e09330

Groc R: 250, G: 188, B: 32 Color web: #fabc20

Groc fosc R: 197, G: 150, B: 20 Color web: #b8952a

Marró R: 174, G: 128, B: 85 Color web: #ae8055


5 Mides, marges i columnes

El format de les infografes és DIN A4 (210 x 297 mm) amb els marges que s’indiquen a la il·lustració. En el cas que les mides hagin de ser en píxels, com en el cas del Piktochart,

210 mm / 600 px s’estipula la mida de 600 píxels d’amplada per la llargada 8,5 mm / 24 px 26 mm / 73,5 px que sigui necessària.

CapçaleraTítol Open Sans Bold, cos entre 20 i 24,alineat a l’esquerra, color blanc

Mes any

Subtítol Open Sans Regular, cos entre 12 i 14, alineat a l’esquerra, color blanc

Títol apartat (Open Sans Bold, cos entre 16 i 20, alineat a l’esquerra color negre) lorem ipsum dolor Subtítol apartat (Open Sans Regular, cos entre 12 i 16, alineat a l’esquerra, color negre) lorem ipsum dolor sit amet dolortibus

30 m

m /

86

px

38 m

m /

110

px

Les infografes s’estructuren en tres parts: la capçalera, les seccions i el peu.

Seccions La llargada pot variar en funció del disseny.

297

mm


6 m

m Peu

10,5

mm

/ 5

0 p

x

22,5 mm 6,4 mm 63,8 px 18 px

6 Infografes de la Generalitat de Catalunya Pautes gràfques InDesign, PowerPoint i Piktochart

Mes i any Open Sans Bold 14 Caixa esquerra, sense partició de paraules. L’espai entre caràcters s’ha d’ajustar manualment, si cal.

Mes anyTítol Open Sans Bold, cos entre 20 i 24,

alineat a l’esquerra, color blanc Subtítol Open Sans Regular, cos entre 12 i 14, alineat a l’esquerra, color blanc


Títol del text (Open Sans Bold, cos entre 8 i 14, alineat a l’esquerra, color negre). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel odio et sapien blandit lacinia. Suspendisse odio magna, pretium non vehicula sit amet, dignissim id mi.

Etiam imperdiet varius arcu ac pretium. Aliquam pulvinar enim nisl, et aliquam augue ullamcorper sit amet. Pellentesque rhoncus placerat pretium. Vivamus enim mauris.

Nulla auctor mi ut orci molestie blandit. Pellentesque condimentum vel libero sed luctus. Phasellus sagittis feugiat urna quis pharetra.

Text infografia(OpenSans Bold)

Phasellus non pretium justo.


Text (Open Text (Open Text (Open Text (Open Text (OpenSans Bold, color Sans Bold, color Sans Bold, color Sans Bold, color Sans Bold, color

negre) negre) negre) negre) negre)



Elements fxos de la plantilla

Capçalera Conté el títol i subtítol, si n’hi ha, de la infografa, i també el mes i l’any d’elaboració. Un petit flet d’1 pt separa aquests dos blocs.

Títol i subtítol de l’apartat Indiquen la secció de la infografa amb un sistema de tipografes fnes i negretes. Han d’anar delimitats per un flet davant, a sang del document, o bé amb un quadrat, també a sang.

Peu Conté un element gràfc que delimita el fnal del document. En cas que s’hagi de paginar (com ara al InDesign o al PowerPoint), s’ha de situar a la part inferior esquerra d’aquest element, mitjançant un cercle de color blanc o negre, segons el fons on s’aplica i, a dins, la numeració de la pàgina (Open Sans Bold, cos 12) amb el mateix color que l’utilitzat per a la capçalera i el peu.

La part inferior dreta s’utilitza per posar la identifcació bàsica de la Generalitat o la identifcació departamental en color blanc, format horitzontal i en cos 8/8 (composició horitzontal 3 línies), disponibles a: http://identitatcorporativa.gencat.cat/ca/descarregues/ identif cacio-basica http://identitatcorporativa.gencat.cat/ca/descarregues/ departaments-i-imatges-propies/

En el cas que es tracti d’una infografa d’una empresa, servei o organisme amb marca pròpia, s’hi ha d’incloure, d’acord amb la normativa establerta, l’harmonització de la imatge pròpia amb la identifcació bàsica o amb la identifcació departamental (http://identitatcorporativa. gencat.cat/web/.content/Documentacio/identitat/ identif cacions/0061.pdf).

http://identitatcorporativa

http://identitatcorporativa.gencat.cat/ca/descarregues

http://identitatcorporativa.gencat.cat/ca/descarregues

7 Infografes de la Generalitat de Catalunya Pautes gràfques InDesign, PowerPoint i Piktochart

Mes anyTítol Open Sans Bold, cos entre 20 i 24,

alineat a l’esquerra, color blanc Subtítol Open Sans Regular, cos entre 12 i 14, alineat a l’esquerra, color blanc

Títol apartat (Open Sans Bold, cos entre 16 i 20, alineat a l’esquerra color negre) lorem ipsum dolor dolortibus Subtítol apartat (Open Sans Regular, cos entre 12 i 16, alineat a l’esquerra, color negre) lorem ipsum dolor sit amet dolortibus



Nulla auctor mi ut orci molestie blandit. Pellentesque condimentum vel libero sed luctus. Phasellus sagittis feugiat urna quis pharetra.

Text infografia(Open SansBold)

Phasellus non pretium justo.

Títol apartat (Open Sans Bold, cos entre 16 i 20, alineat al’esquerra color negre) lorem ipsum dolor dolortibus Subtítol apartat (Open Sans Regular, cos entre 12 i 16, alineat a l’esquerra, color negre) lorem ipsum dolor sit amet dolortibus

Text (Open Text (Open Text (Open Text (Open Text (OpenSans Bold, Sans Bold, Sans Bold, Sans Bold, Sans Bold,

color negre) color negre) color negre) color negre) color negre)


1

Títol apartat (Open Sans Bold, cos entre 16 i 20, alineat a l’esquerra color negre) lorem ipsum dolortibus



Subtítol apartat (Open Sans Regular, cos entre 12 i 16, alineat a l’esquerra, color negre) lorem ipsum dolor sit amet dolortibus

Títol Open Sans Bold, cos entre 16 i 20, alineat al’esquerra, color blanc, lorem ipsum dolor

2

Lorem

Lorem ipsum 69.302.000

(any)

69.302.000Lorem

Lorem ipsum

1980: 398 2011: 196 1980: 3982011: 196

Lorem


(any)

Lorem

69.302.000Lorem ipsum

1980: 398 2011: 196

12 7 4Open Sans Regular 12 A Regular

Segon full de la plantilla

En cas que es necessiti un segon full, es pot paginar la plantilla (com ara al InDesign o al PowerPoint) a la part inferior esquerra del peu, mitjançant un cercle de color blanc o negre, segons el fons on s’aplica i, a dins, la numeració de la pàgina (Open Sans Bold, cos 12) amb el mateix color que l’utilitzat per a la capçalera i el peu.


8 Text

El text de les infografes s’ha de limitar a unes quantes frases. Visualment és més entenedor un text espaiat que “respira” que una massa de lletres que no incita a la lectura.

Si una infografa està molt plena és preferible dividir-la en dues i il·lustrar els textos amb petites imatges de recurs.

S’ha de tenir una cura especial amb la redacció i l’ortografa.

S’han de tenir en compte els criteris lingüístics propis del llenguatge administratiu català i els criteris establerts per la Direcció General de Política Lingüística.

Pel que fa a als criteris tipogràfcs, cal seguir les recomanacions següents:

. Cal evitar escriure paraules o títols en majúscules.

. Si és necessari destacar paraules, és millor fer servir la negreta que la cursiva, el subratllat o les versaletes.

Si s’han de presentar moltes dades numèriques, és preferible fer servir gràfcs i, sobretot, extreure una conclusió que aporti signifcat a les xifres.

Pel que fa a la redacció, cal tenir en compte els aspectes següents:

. Utilitzar l’ordre lògic de l’oració perquè afavoreix la comprensió de les idees. . Presentar les idees més rellevants en frases simples (paraules clau al principi). . Utilitzar frases positives. . Utilitzar frases actives, en comptes de passives. . Evitar frases massa llargues. . Evitar l’abús de subordinacions. . Enumerar de forma lògica. . Utilitzar els connectors lingüístics, numèrics, etc.


9 Icones

La carpeta Imatges, disponible a Descarregables relacionats conté una sèrie d’icones en diferents formats editables que segueixen la línia gràfca del conjunt. Es poden utilitzar directament o bé crear-ne variants. En el cas del programa Piktochart cal utilitzar les icones d’un mateix estil: simples i clares. Aquest programa permet canviar el color de les icones segons el tipus que es selecciona. En cas que no es pugui canviar el color, cal utilitzar la gamma cromàtica més adequada.

Les icones s’han d’utilitzar de manera similar a la resta de gràfcs: a una, dues o tres columnes, segons l’espai que es necessiti. Cal deixar dues línies en blanc entre el text i la icona.


10 Combinació de formes i colors

Cal utilitzar el menor nombre de recursos gràfcs diferents en una infografa, és a dir, si s’utilitza la rodona, cal utilitzar aquest recurs gràfc en la majoria de vegades possible.

També cal utilitzar el menor nombre de gammes cromàtiques diferents en una infografa, és a dir, si s’utilitza el color blau cal utilitzar aquesta tonalitat en la majoria de vegades possible. Per crear colors nous, s’ha d’utilitzar el mateix color en percentatges de trama, afegint-hi percentatges de negre o, si és necessari, utilitzant els altres colors de la gamma alternativa.

En cas d’haver d’utilitzar més recursos gràfcs i gammes cromàtiques, s’ha d’intentar restringir el nombre d’aquests a 3 o 4 recursos (rodona, línia, rectangle...) i tonalitats.

Lorem ipsum Lorem ipsum dolor sit amet, consecteturadipiscing elit. Etiam vel odio et sapienblandit lacinia. Suspendisse odio magna,pretium non vehicula sit amet, dignissim idmi.

Lorem


(any)

Lorem


(any)

Lorem ipsum 20.000 60.000

Lorem ipsum 20.000 60.000

Lorem ipsum Etiam vel odio Suspendisse

Lorem ipsum

Lorem ipsum Etiam vel odio Suspendisse

Lorem ipsum 20.000 Lorem

Lorem ipsum Lorem ipsum

Lorem ipsumLorem ipsum

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Etiam vel odio et sapienblandit lacinia. Suspendisse odio magna,pretium non vehicula sit amet, dignissim idmi.

Label1 10

Label2 20

Label3 30

30 %

10 %

20 %

Lorem ipsum

11 Infografes de la Generalitat de Catalunya Exemples Pautes gràfques InDesign, PowerPoint i Piktochart

Exemples d’aplicació de la combinació de formes i colors.

12 Infografes de la Generalitat de Catalunya Exemples Pautes gràfques InDesign, PowerPoint i Piktochart

Exemples d’aplicació de la combinació de formes i colors.

13 Infografes de la Generalitat de Catalunya Gràf cs Pautes gràfques InDesign, PowerPoint i Piktochart

Títols dels gràfcs Lorem ipsum dolorOpen Sans Bold 9,5/10. Caixa a l’esquerra.

Subtítols Open Sans 7/9. Caixa a l’esquerra.

Valors gràfcs de punts

7%

30 %

63 % Lorem ipsum

Open Sans 8/12. Caixa a l’esquerra, dreta o centrada, segons convingui.

Valors gràfcs de barres Open Sans 8/12. Centrat respecte la barra.

Lorem ipsum Valors taules dolor sit Open Sans 8/12. Caixa a l’esquerra, dreta o centrada, segons convingui. Per crear les taules, cal establir com a alçada mínima de les fles a 4 mm. Lorem ipsum

Llegenda Open Sans 8/12. Caixa a l’esquerra.

Notes Open Sans 6/8. Caixa a l’esquerra.

Lorem ipsum dolor

Lorem ipsum dolor sit



Els gràfcs i les taules es poden importar des de documents en Excel i en Word o també es poden fer quadres amb una caixa de text.

El programa Piktochart permet inserir directament els gràfcs dins la infografa. Cal procurar utilitzar els colors i la tipografa predominants a la infografa.

Els gràfcs i les taules han se seguir, sempre que sigui possible, la normativa establerta a http://identitatcorporativa.gencat.cat/ca/aplicacions/grafcs-i-taules

S’han d’inserir a una, dues o tres columnes, segons l’espai que es necessiti. Cal deixar dues línies en blanc entre el text i el gràfc.

Pel que fa a la línia superior dels gràfcs i de les taules, s’ha d’utilitzar el percentatge del mateix color que la secció.

Per crear colors nous, s’ha d’utilitzar el mateix color en percentatges de trama, afegint-hi percentatges de negre o, si és necessari, utilitzant altres colors d’una gamma alternativa.

En el cas de les taules, la quantitat de dades del quadre ha de ser raonable.

46,5 4,9

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

31,6 3,8 55,0 2,6 6,7

35,6 12,0 45,9 1,9 4,6

37,2 8,,8 2,4

Ítem 1 Ítem 2 Ítem 3 Ítem 4 Ítem 5

http://identitatcorporativa.gencat.cat/ca/aplicacions/grafics


14 Mapes

La carpeta Mapes, disponible a Descarregables relacionats conté una sèrie de mapes de Catalunya, Espanya, Europa i el món en diferents formats editables que segueixen la línia gràfca del conjunt. Es poden utilitzar directament o bé crear-ne variants. El mapa de Catalunya està dividit per

Xarxa bàsica d’obres subvencionades Àrees afectades comarques.

Els mapes s’han d’utilitzar de manera similar a la resta de gràfcs: a una, dues o tres columnes, segons l’espai que es necessiti. Cal deixar dues línies en blanc entre el text i el mapa.

Per crear colors nous, s’ha d’utilitzar el mateix color en percentatges de trama, afegint-hi percentatges de negre o, si és necessari, utilitzant els altres colors de la gamma alternativa.

Zona Lleida

Zona Central

Zona Pirineu Oest

Zona GironaOsona

Zona Barcelona

Zona Tarragona

Zona Ebre

Montsià

Maresme

Vallès Oriental

Barcelonès

Vallès Occidental

Baix Llobregat

PAV

PCO

SAL

POL

CAM

ATL

Font: Consell Català de l’Esport

Zonificació prevista Font: Consell Català de l’Esport

Estats de la UE

infografes de la generalitat de catalunya. pautes...

Documents