Guia per a la construcció de webs de la Generalitat amb estil gencat responsiu. Pàgines d inici (homes) Versió beta

Guia per a la construcció de webs de la Generalitat amb estil gencat responsiu Pàgines d inici (homes) Versió beta Barcelona, juliol de 2015

Pàgines d inici (homes) v.0.1 1. QUÈ SÓN?... 3 2. COM ES MOSTREN?... 4 3. ELEMENTS... 6 1. CERCADOR... 6 1.1 Marca... 7 1.2 Cercador... 7 1.3 Llista d enllaços... 8 2. ACTUALITAT... 9 2.1 Model 1: Llista de continguts... 10 2.2 Model 2: Llista de continguts amb imatge destacada... 12 2.3 Model 3: Carrusel de diapositives... 14 2.4 Model 4: Calendari d agenda... 17 2.5 Model 5: Vídeo... 19 2.6 Model 6: Playlist de vídeos... 21 3. DESTACATS... 23 3.1 Model 1: Llista d enllaços... 23 3.2 Model 2: Bàners en imatge... 25 3.3 Model 3: Quadrícula de bàners en imatge quadrada... 27 3.4 Model 4: Llista d enllaços amb imatge destacada... 28 3.5 Model 5: Quadrícula de bàners de colors... 30 3.6 Model 6: Carrusel de bàners... 33 3.7 Model 7: Carrusel de diapositives... 34 4. EXEMPLES... 37 Pàg. 2

1. Què són? La home és la pàgina d inici d un web, ja sigui d un departament, organisme, programa, canal temàtic, etc. Té unes característiques especials de comunicació i, per això, cal editorialitzar-la. Les pàgines d inici combinen diversos tipus d informació: Notícies Agenda d activitats Tràmits Destacats/enllaços Cercador Hi ha un ordre establert per organitzar les seccions de les homes, després de la capçalera, que és el següent: 1) Cercador: obligatori. Es configura dins la zona de subcaçalera. Ocupa el 66% de l àrea i inclou una peça al 33% de l àrea d enllaços. 2) Actualitat: Inclou notícies i/o agenda i/o destacats d actualitat. Opcional, en funció del model. Pot ocupar un 50%-50%; 66%-33% o 100% de l àrea. 3) Tràmits: Opcional, en funció del model. Ocupa el 100% de l àrea. 4) Destacats: Obligatori. Ocupa el 100% de l àrea. En el disseny responsiu pren relleu la visualització dels continguts pel canal mòbil i l optimització de l espai. Per tant, l ús de les peces se simplifica i es redueix, perquè tots els elements utilitzats aportin valor i funcionalitat. Pàg. 3

2. Com es mostren? En funció de les necessitats comunicatives del web es mostraran més o menys elements a la primera pàgina. L ordre lògic de construcció d un web respon a les següents preguntes dirigides a la ciutadania o públic objectiu de cada portal i els elements que li donen resposta: 1. Què vol de mi usuari? En la primera zona s habilita l ús del cercador per tal que l usuari pregunti directament allò que li interessa. Elements: cercador. 2. Què tinc de nou què et pugui interessar? La segona zona es dedica a l actualitat. Hi ha diferents maneres de col locar els elements d actualitat que serveixen per donar força a l estratègia de comunicació. Elements: carrusel de bàners o de diapositives, llista notícies, agenda. 3. Quina informació de servei tinc per a tu? La tercera zona és el catàleg d informacions de servei i tràmits propis al promotor del web, com ara: tràmits, metatràmits, que cal fer si, etc. Elements: llista de continguts. 4. Què et destaco? La quarta zona és la zona de venda : destaca aquells apartats del web més importants i dels quals se ls vol donar accés directe sense passar per navegació. No tenen perquè ser d actualitat. Elements: llista de continguts, carrusel de bàners o de diapositives. Regles comunes a totes les combinacions de les pàgines d inici per a escriptori i tauleta. Quan l actualitat es posa en una àrea de 50%-50% (versió escriptori i tauleta), l ítem de l esquerra es recomana que sigui un carrusel de diapositives (model gencat). No han de tenir navegacions en format distribuïdora. Les navegacions es mostren a les subhomes i a les distribuïdores. Regles comunes a totes les combinacions per a mòbil La majoria dels continguts es mostren a una columna. Pàg. 4

Els continguts en pestanyes a la versió escriptori i tauleta es mostren en acordions. El cercador i la peça Els més consultats estan presents a totes les pàgines a la capçalera dins la lupa, perquè són elements estructurals de la pàgina. Pàg. 5

3. Elements 1. Cercador És obligatori en totes les pàgines d inici. Se situa a la zona de subcapçalera a la versió escriptori i tauleta, i a la capçalera a la versió mòbil. Conté 3 instàncies de continguts amb les seves pròpies formes de presentació: marca (1), cercador (2) i llista d enllaços (3). Il lustració 1. Elements del cercador (escriptori i tauleta) Il lustració 2. Elements del cercador (mòbil) Pàg. 6

1.1 Marca Com es construeix: Instància de contingut a GECO+: Imatge amb enllaç. Imatge: 50 px d alçada. La longitud es recomana que no excedeixi la de la caixa de cerca (620 px, per a la resolució de 1024, però s adapta segons la resolució). Text imatge: Font OpenSans i fons transparent. Ha de ser la URL del web. Enllaç: Ha d apuntar a la pàgina principal del web. Forma de presentació a GECO+: fpca_marca Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/enllac/fpca_marca/ Com es visualitza Versió escriptori i tauleta: URL del web (per exemple, presidencia.gencat.cat) Versió mòbil: La marca no es mostra 1.2 Cercador Per defecte, els webs de la Generalitat utilitzaran el cercador corporatiu GSA. Aquest es pot configurar de les maneres següents: Per col lecció Per URL Per tot gencat.cat Si un web té un cercador propi (per exemple el cercador del SOC), es pot configurar aquest cercador específic i no el de gencat. Com es construeix utilitzant el cercador GSA corporatiu: Instància de contingut a GECO+: HttpFetch (en GECO+) Forma de presentació a GECO+:: fpca_cercador_gencat Configuració a GECO+:: Cal triar la col lecció de cerca, sinó cerca a totes les col leccions (model gencat). També es pot configurar per url. Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/cercadors/cercadorgencat/ Com es visualitza: Versió escriptori i tauleta: Caixa de cerca i a sota un text amb exemples de possibles cerques, que serveixen per orientar l usuari. S han de crear manualment. Es recomana posar textos curts que no sobrepassin una línia. [peça pendent de construir] Pàg. 7

Versió mòbil: Es mostra com una lupa a la part dreta de la capçalera, que quan es prem, mostra la caixa de cerca. No es mostren els exemples de cerques. 1.3 Llista d enllaços Com es construeix: Instància de contingut a GECO+: Llista manual d enllaços (màxim 10) Forma de presentació a GECO+: fpca_llista_fonsdestacat Paràmetres de configuració a GECO+: o Títol: SÍ o Destaca títol: N/A o Separador: NO o Plegable en mòbil: NO o Columnes: 1 o Fons: Blanc o Enllaç: Més resultats Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/fonsdestacat/cas-1/ Recomanacions: Els enllaços es creen manualment, cal que responguin als interessos de difusió del promotor del web; pot ser una combinació de l analítica del cercador, del web i la voluntat de comunicació. Com es visualitza: Versió escriptori i tauleta: Mostra una llista de quatre ítems i un enllaç per desplegar els sis enllaços restants. Versió mòbil: Es mostra en prémer la lupa a sobre del contingut de la pàgina. Aquest component es mostra a totes les pàgines del portal, no només a la pàgina d inici. Per sortir del cercador, cal tornar a seleccionar la lupa. Pàg. 8

2. Actualitat Primer element del cos. En la versió d escriptori i de tauleta, es pot mostrar en una àrea de: 50% i 50%, 66% i 33% 100%. En la versió mòbil, sempre es mostra en una columna. L actualitat pot estar formada per diversos tipus de continguts i formes de presentació, que es triaran en funció de les necessitats comunicatives de l organisme promotor: o Llistes de continguts: Notícies, articles, notes de premsa... Es mostra amb tres formes de presentació: o Model 1: Llista de continguts. o Model 2: Llista de continguts amb imatge destacada. o Model 3: Carrusel de diapositives o Calendari d activitats d agenda: Una forma de presentació (model 4) Vídeo: Una forma de presentació (model 5) o Playlist de vídeos: Una forma de presentació (model 6) A la versió escriptori i tauleta, cada contingut i la seva forma de presentació es pot mostrar a qualsevol dels espais de l àrea d actualitat: 50%, 66% o 33%, i 100% tot i que existeixen unes recomanacions generals que s expliquen a cada forma de presentació. Consideracions generals per a la versió escriptori i tauleta Es recomana no posar més d un carrusel, ni llista de vídeos (playlist), en la mateixa secció d actualitat. En el cas de l opció 50%-50%, el dos blocs de contingut tenen el mateix valor, la verticalitat de la pàgina es manté simètrica i, per tant, a nivell de contingut, les dues seccions tenen la mateixa importància. L ús del 100% dóna resposta a accions comunicatives d impacte amb missatge i contingut, va més enllà del contingut notícia ja que no només aporta informació d actualitat. Pàg. 9

2.1 Model 1: Llista de continguts Il lustració 3. Llista de continguts model 1 en una àrea de 50% (escriptori i tauleta) Il lustració 4. Llista de continguts model 1 en una àrea de 66% (escriptori i tauleta) Pàg. 10

Il lustració 5. Llista de continguts model 1 (mòbil) Com es construeix: Instància de contingut a GECO+: Llista manual o automàtica. Contingut de la llista: Notícies, notes de premsa, articles i enllaços. Es mostra el títol, l entradeta, la data i la imatge, si en té. Imatge: Redimensiona la imatge del contingut. Enllaç a Més continguts: Text i enllaç a la pàgina d actualitat. Forma de presentació a GECO+: fpca_llista Paràmetres de configuració a GECO+: o Columnes: 1 Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/fpca_llista/ Recomanacions: Aquest model s utilitza per mostrar notícies que tenen el mateix grau de rellevància. Si és una llista automàtica, es recomana llistar-la per ordre cronològic. Com es visualitza: La llista pot anar dins una pestanya amb un títol o no. Mostra sempre tres ítems. Es recomana fer títols i entradetes curtes (80 caràcters per al títol i 150 per a l entradeta). Versió escriptori i tauleta: Es mostren 3 continguts. Si aquests ocupen més espai que la pestanya, apareix una barra de desplaçament (scroll) per poder veure tot els text. [Pendent ] Pot ocupar l àrea de 50% i de 66%. Versió mòbil: Es mostra a una columna, dins d un format desplegat en acordió. Pàg. 11

2.2 Model 2: Llista de continguts amb imatge destacada Falta exemple a 50% Il lustració 6. Llista de continguts model 2 en una àrea de 66% (escriptori i tauleta) Il lustració 7.Llista de continguts model 2 (mòbil) Pàg. 12

Com es construeix: Instància de contingut a GECO+: Llista manual o automàtica. Contingut de la llista: Notícies, notes de premsa, articles, enllaços. El primer ítem conté imatge, títol i entradeta i data, si estan informades i es mostra a una columna, i els altres dos ítems mostren només el títol i l entradeta i data. Imatge: Redimensiona la imatge. Per a un àrea del 66% i del 50%, s aconsella 839x463px. Més continguts: Text i enllaç a la pàgina d actualitat. Forma de presentació a GECO+: fpca_llista_imatgedestacada Paràmetres de configuració a GECO+: o Estil visual: 2 Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/destacatimatge/fpca_destaca timatge-cas-2/ Recomanacions: Aquest model s utilitza quan es vol destacar una notícia per sobre d altres, per això presenta la imatge. En cas que les notícies tinguin totes la mateixa rellevància, es podria utilitzar el model 1. En el cas que la llista sigui d enllaços, caldrà informar sempre el camp data per tal que surti a la llista. Com es visualitza: Mostra sempre tres ítems. Es recomana fer títols i entradetes curtes (80 caràcters per al títol i 150 per a l entradeta). Versió escriptori i tauleta: Pot ocupar l àrea de 50% i de 66%. Versió mòbil: Es mostra a una columna. Pàg. 13

2.3 Model 3: Carrusel de diapositives Il lustració 8. Carrusel de diapositives (model 3) al 50% per a escriptori i tauleta Il lustració 9. Carrusel de diapositives (model 3) a 66% per a escriptori i tauleta Pàg. 14

Il lustració 10. Carrusel de diapositives (model 3) a 100% per a escriptori i tauleta Il lustració 13. Carrusel de diapositives (model 3) per a mòbil Com es construeix: Pàg. 15

Instància de contingut a GECO+: Llista manual. No hi ha màxim d ítems però es recomana no posar-ne més de 6. Contingut de la llista: Enllaços, notícies i articles. Es mostra el títol, l entradeta i la imatge. Imatge: Per a una àrea del 50% s aconsella 555x431px i per a una àrea del 66% o del 100% s aconsella 839x463 px. El contingut principal ha d estar a la part central i superior, ja que la part inferior queda tapada pel títol i l entradeta. Xarxes socials: Text de compartició amb enllaços (enllaç+imatge que és una icona de xarxa social). Cada xarxa social té una icona única. Consulteu la guia d estil gràfic per saber quines són les icones de cada xarxa social. Aquestes icones només es mostren quan el contingut es mostra en una àrea del 50%. Si es troba en una àrea del 33%, 66% o 100%, no es mostren (PENDENT) Forma de presentació a GECO+: fpca_diapositives Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/carrussels/fpca_carruselcas-60/ Recomanacions: Els títols no han d ocupar més d una línia (versió escriptori), per tal que no ocupin en excés l espai de la imatge. Les entradetes no han d ocupar més de dues línies (versió escriptori). Com es visualitza: Es mostra amb fletxes de navegació dins de la imatge i punts de navegació a la part inferior. En cas que només hi hagi un ítem a la llista, no es mostren les fletxes i els punts de navegació. Versió escriptori i tauleta: Pot ocupar l àrea de 50%, de 66% i de 100% 50%: Títol i entradeta surten sobreimpressionats a la imatge. 66%: Títol surt sobreimpressionat a la imatge i l entradeta surt a sota, fora de la imatge. 100%: Títol i entradeta surten a l esquerra de la imatge. Sota es mostra el text Segueix l actualitat a i les icones de les xarxes socials i butlletins, si s han informat. Versió mòbil: El títol se sobreimpressiona a la imatge ; l entradeta es mostra sota els punts de navegació, sota de la imatge. Sota mostra les icones de les xarxes socials, butlletins i RSS (sense el text Segueix l actualitat a ). Pàg. 16

2.4 Model 4: Calendari d agenda Il lustració 11. Calendari d'activitats d'agenda a 50% (escriptori i tauleta) Il lustració 12. Calendari d'activitats d'agenda a 33% (escriptori i tauleta) Pàg. 17

4 Il lustració 135. Calendari d'activitats d'agenda a 33% (escriptori i tauleta) no inclòs dins una pestanya Il lustració 14. Calendari d'activitats d'agenda, versió mòbil Pàg. 18

Com es construeix: Instància de contingut a GECO+: Llista d activitats d agenda. Contingut de la llista: Activitats d agenda. Més activitats: Text i enllaç a la pàgina distribuïdora de l agenda (aquest enllaç és manual). Forma de presentació a GECO+: fpca_activitatagenda_calendari Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/agenda/fpca_llista_activitatagenda _calendari/cas-1/ Com es visualitza: Mostra el calendari del mes actual, amb el dia seleccionat. A sota hi ha la descripció del dia i l enllaç a dues activitats del dia seleccionat, si és que n hi ha. L enllaç Mes activitats porta a la llista de totes les activitats del dia. Pot anar inclòs dins una pestanya. Versió escriptori i tauleta: Pot ocupar l àrea de 50% i de 33%. Versió mòbil: Es mostra dins d un acordió quan a escriptori està inclòs dins una pestanya. 2.5 Model 5: Vídeo Il lustració 15. Vídeo que ocupa el 50% de la pàgina, per a versió escriptori i tablet. Pàg. 19

Il lustració 16. Vídeo per a versió mòbil. Com es construeix: Instància de contingut a GECO+: Descripció pàgina. Contingut: Cal indicar un identificador d un vídeo del BIG. Forma de presentació a GECO+: fpca_descripciopagina Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/descripciopagina/fpca_descri Recomanacions: Per poder mostrar un vídeo, cal ser usuari de BIG. Per crear galeries de BIG, cal consultar la guia d usuari de BIG. Cal conèixer les mides i les proporcions dels vídeos, si són format 16:9 (allargat) o quadrat. Pàg. 20

Es recomana que els vídeos que es mostrin tingui una qualitat mínima per ser visualitzats amb qualsevol dispositiu i que no tinguin una durada excessiva. Per temes d accessibilitat, els vídeos han d anar acompanyats de subtítols. Com es visualitza: Versió escriptori i tauleta: Mostra un vídeo en una àrea del 66%. També pot mostrar un títol i una descripció textual. El text s adaptarà a l espai segons l amplada del multimèdia i la seva alineació. Si el multimèdia té una amplada de: 750 px o més: ocuparà el 100% de l àrea i, per tant, el text es col locarà per sota. Entre 500 px i 750 px: ocuparà el 66% de l àrea i, per tant, el text serà líquid a la dreta o l esquerra, segons l alineació. Entre 300 px i 499 px: ocuparà el 50% de l àrea i, per tant, el text serà líquid a la dreta o l esquerra, segons l alineació. Fins a 300 px: ocuparà el 33% de l àrea i, per tant, el text serà líquid a la dreta o l esquerra, segons l alineació. Versió mòbil: Mostra el títol, el text i el multimèdia a una columna. Es mostra a sang, ocupa el 100% de l espai, i el text es mostra a sota, si n hi ha. 2.6 Model 6: Playlist de vídeos [pendent maqueta i captura] Instància de contingut a GECO+: GaleriaBig Contingut: Identificador d una galeria de vídeos del BIG Forma de presentació a GECO+: fpca_big_playlist Paràmetres a GECO+: o Títol llista: sí/no o Amplada del visor: 100%-66%-50% o Format: horitzontal/vertical o Idioma: català, castellà, aranès, anglès i francès (per defecte, català) Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/galeriabig/fpca_big_galeria/ Com es construeix: Recomanacions: Per poder crear una playlist de vídeos cal ser usuari de BIG. Per crear galeries de BIG, cal consultar la guia d usuari de BIG. Pàg. 21

Com es visualitza: Versió escriptori i tauleta: Pot ocupar l àrea de 66% i 100%. Mostra un vídeo principal i a la part inferior o lateral una llista de vídeos. [PENDENT MIDES MÍNIMES PLAYLIST]. Versió mòbil: El vídeo principal es mostra a una columna i la llista de vídeos, a sota, es mostra a dues columnes (vídeo + descripció). Pàg. 22

3. Destacats És un element obligatori. Cal tenir en compte la posició perquè hi ha components que tenen una millor visualització si s utilitzen en algun tipus de franja o una altra (100%, 66%, 50% o 33%). La secció de destacats està formada per llistes de contingut amb diverses formes de presentació, que es triaran segons de les necessitats comunicatives de l organisme promotor: Model 1: Llista d enllaços (catàleg) Model 2: Bàners en imatge (catàleg) Model 3: Quadrícula de bàners en imatge quadrada (catàleg) Model 4: Llista d enllaços amb imatge destacada (catàleg) Model 5: Quadrícula de bàners de colors (catàleg) Model 6: Carrusel de bàners (catàleg) Model 7: Carrusel de diapositives (catàleg) 3.1 Model 1: Llista d enllaços Il lustració 17. Llista d'enllaços amb el model 1 (escriptori i tauleta) Pàg. 23

Il lustració 18. Llista d'enllaços model 1 plegat i sense plegar (mòbil) Com es construeix: Instància de contingut a GECO+: llista manual o automàtica Tipus de Contingut: Enllaços Forma de presentació a GECO+: fpca_llista_fonsdestacat Paràmetres a GECO+: o Destaca títol: SÍ o Plegable en mòbil: SÍ NO o Columnes: 1 o Fons: gris Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/fonsdestacat/cas-1/ Recomanacions: Els títols dels enllaços no han d ocupar més de dues línies en la versió escriptori. Pàg. 24

El títol de la llista ha de ser curt, en la versió mòbil ocuparia tot l ample de la pàgina. Com es visualitza: Mostra una llista d enllaços amb un títol. El títol està sobre fons blanc i els enllaços sobre fons gris. Aquesta forma de presentació té diversos paràmetres configurables que permet mostrar la llista de diferents formes Versió escriptori i tauleta: Es recomana que ocupi el 33% de l àrea. Versió mòbil: Es mostra a una columna. Si s activa l opció Plegable en mòbil es mostrarà com un enllaç que s obre des de la part dreta de la pàgina i desplega els enllaços. 3.2 Model 2: Bàners en imatge Il lustració 19. Llista de bàners amb imatge model 3 (escriptori i tauleta) Pàg. 25

Il lustració 20. Llista de bàners amb imatge model 3 (mòbil) Instància de contingut a GECO+: llista Tipus de Contingut: Enllaços Imatge: 358x241 px Forma de presentació a GECO+: fpca_llista_graficdestacat Paràmetres: o Estil: 1 Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/graficdestacat/opcio-1/ Com es construeix: Recomanacions: Els títols dels enllaços no han d ocupar més de dues línies en la versió escriptori. Mala pràctica: no s ha d utilitzar aquesta fpca en una pàgina que tingui molt color o imatge, ja que provocaria una visualització caòtica de la pàgina. Es recomana utilitzar aquesta forma de presentació en pàgines en què no hi hagi imatge ni color, de manera que es destaca més la llista d enllaços. Pàg. 26

Com es visualitza: Mostra una llista de bàners amb imatge i títol. El títol de l enllaç es mostra sobreimpressionat a la part inferior de la imatge. El contingut principal de la imatge ha d estar a la part superior. Versió escriptori i tauleta: Es recomana que ocupi el 33% de l àrea. Versió mòbil: Es mostra a una columna. 3.3 Model 3: Quadrícula de bàners en imatge quadrada Il lustració 21. Llista de bàners amb imatge quadrada model 5 (escriptori i tauleta) Il lustració 22. Llista de bàners amb imatge quadrada model 5 (mòbil) Com es construeix: Instància de contingut a GECO+: llista Tipus de Contingut: Enllaços Imatge: 256x256 px Forma de presentació a GECO+: fpca_llista_graficdestacat Paràmetres a GECO+: o Estil: 2 Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/graficdestacat/opcio-2/ Pàg. 27

Recomanacions: El número d ítems recomanats és 4 o 8. El títol ha de tenir una llargada màxima de 80 caràcters. Mala pràctica: Aquesta forma de presentació dóna molta força a la imatge, per això es recomana no combinar-la en pàgines on hi ha excés de càrrega informativa gràfica (carrusels, vídeos, etc.). La imatge per si mateixa ja és informació, per tant ha de ser il lustrativa de l enllaç que porta. Com es visualitza: Mostra una llista d enllaços amb imatge quadrada. El títol es mostra sobreimpressionat en blanc a la part inferior de la imatge. Versió escriptori i tauleta: Es mostra en una columna que ocupa el 100% de l àrea. Versió mòbil: Es mostra a dues columnes. 3.4 Model 4: Llista d enllaços amb imatge destacada Il lustració 23. Llista d enllaços amb imatge destacada model 6 (escriptori i tauleta) Pàg. 28

Il lustració 24. Llista d enllaços amb imatge destacada model 6 (mòbil) Com es construeix: Instància de contingut a GECO+: Llista. Contingut de la llista: Enllaços o tràmits. Cal posar 10. El primer conté imatge. Imatge: 378x276 px. Forma de presentació a GECO+: fpca_llista_imatgedestacada Paràmetres de configuració a GECO+: o Estil: 1 Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/destacatimatge/fpca_des tacatimatge-cas-1/ Recomanacions: Aquesta forma de presentació s ha d usar en una zona de franja grisa de la pàgina. Imatge: porta sobreimpressionat el títol de l enllaç, cal que el pes important de la imatge no sigui a la part inferior, que és on hi ha el text. Títol : ha de tenir una llargada d uns 20 caràcters Recomanacions en cas de mostrar tràmits: Pàg. 29

És la peça recomanada per mostrar llistes de tràmits. Només un enllaç per tràmit. Es poden agrupar tràmits quan hi ha en campanya un conjunt de tràmits lligats a una convocatòria. Per exemple Ajuts al comerç 2015. No es poden agrupar tràmits per temes ni per àmbits que ja repeteixin literal a la mateixa pàgina d inici. El darrer enllaç és Més tràmits i porta a la subhome de tràmits del departament. Com es visualitza: Versió escriptori i tauleta: Es recomana que ocupi el 100% de l àrea, i es mostra a 3 columnes. Versió mòbil: El primer ítem de la llista, amb imatge, es mostra a 50% la imatge i el títol, i la resta d ítems es mostren en una llista d una columna. 3.5 Model 5: Quadrícula de bàners de colors Il lustració 25. 8 bàners amb quadrícula color, model 7 (escriptori i tauleta) Il lustració 26. 6 bàners amb quadrícula colors i 2 imatges, model 7 (escriptori i tauleta) Pàg. 30

Il lustració 27. 4 bàners amb quadrícula color, model 7 (escriptori i tauleta) Il lustració 28. Bàners amb quadrícula colors model 7 (mòbil) Pàg. 31

Com es construeix: Instància de contingut a GECO+: Llista. Contingut de la llista: Enllaços. El nombre d ítems ha de ser 4 o 8. Imatge: 279x186 px. El text sobreimpressiona la imatge per la part inferior, per tant, el contingut principal de la imatge no ha d estar a la part inferior. Forma de presentació a GECO+: fpca_llista_quadriculacolors Paràmetres de configuració a GECO+: o Estil visual número 1 Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/llista/quadricula-colors/ Recomanacions: Informació editorialitzada que mostra una selecció dels àmbits d actuació i la possibilitat d incloure dos bàners amb imatge. Els textos han de ser curts, com a màxim 40 caràcters. Com es visualitza: Versió escriptori i tauleta: Ocupa un espai del 100% de l àrea. Mostra files de quatre elements, una o dues, que es poden parametritzar per ser: Una fila de 4 elements amb color de fons. Aquest color ve per defecte, no es pot parametritzar. Dues files de 4 elements amb color de fons. Aquest color ve per defecte, no es pot parametritzar. Dues files de 4 elements amb els dos elements de la part dreta amb imatge. Versió mòbil: Ocupa un espai del 100% de l àrea. Mostra el contingut a 1 i a 2 columnes que es poden parametritzar per ser: 8 o 4 elements amb color de fons a 2 columnes. Aquest color ve per defecte, no es pot parametritzar. 2 elements amb imatge a una columna (100%) i 6 elements amb color de fons a 2 columnes. Aquest color ve per defecte, no es pot parametritzar. Pàg. 32

3.6 Model 6: Carrusel de bàners Il lustració 29. Carrusel de bàners model 8 (escriptori i tauleta) Il lustració 30. Carrusel de bàners model 8 (mòbil) Com es construeix: Instància de contingut a GECO+: llista Tipus de Contingut a GECO+: Enllaços Imatge: 264x264 px Forma de presentació a GECO+: fpca_carrusel Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/carrussels/fpca_carruselcas-100-multiple/ Recomanacions: Títol: llargada màxima de dues línies en versió tauleta o 80 caràcters. Pàg. 33

Mala pràctica : No es recomana utilitzar més d un carrusel per pàgina per sobrecàrrega d informació gràfica i moviment. Com es visualitza: Mostra un carrusel d enllaços amb imatge quadrada. El títol es mostra sobreimpressionat en blanc a la part inferior de la imatge i el text es mostra sota la imatge. Cada ítem de la llista està dins del requadre Mostra els elements de 4 en 4 (4 en la primera fila, 4 més en la segona, etc.) Versió escriptori i tauleta: Es mostra en una columna que ocupa el 100% de l àrea. Quan hi ha més de 4 ítems, apareixen les fletxes per navegar a dreta i esquerra. Versió mòbil: Es mostra a una columna. 3.7 Model 7: Carrusel de diapositives Il lustració 31. Carrusel de diapositives (model 9) per a escriptori i tauleta. Pàg. 34

Il lustració 32. Carrusel de diapositives (model 9) per a mòbil. Com es construeix: Instància de contingut a GECO+: Llista manual. No hi ha màxim d ítems però es recomana no posar-ne més de 6. Contingut de la llista: Enllaços, notícies i articles. Es mostra el títol, l entradeta i la imatge. Imatge: 839x463 px. Forma de presentació a GECO+: fpca_carrusel Exemple: http://catalegresponsiu.gencat.cat/ca/cataleg/generiques/cos/carrussels/fpca_carruselcas-50/ Recomanacions: Títols: La llargada no ha d ocupar més d una línia (versió escriptori), tot i que no hi ha limitació de caràcters. Entradetes: Igualment, les entradetes no han d ocupar més de dues línies (versió escriptori). Mala pràctica Aquesta forma de presentació dóna molta força a la imatge i implica moviment, per això no es recomana utilitzar-la si hi ha més carrusels a la pàgina. El carrusel es mou automàticament a partir de la primera diapositiva i finalitza també a la primera diapositiva i per tant, és la que té més importància. Com es visualitza: Es mostra amb fletxes de navegació dins de la imatge i punts de navegació a la part inferior. Si només hi ha un ítem a la llista, no es mostren les fletxes i els punts de navegació. Pàg. 35

Versió escriptori i tauleta: Ocupa l àrea de 100%. Títol i entradeta surten a la part esquerra de la peça, sobre un fons blanc. Versió mòbil: El títol surt sobreimpressionat a la imatge i l entradeta surt sota els punts de navegació, a sota de la imatge. Pàg. 36

4. Exemples Il lustració 33. Home amb actualitat (escriptori i tauleta) Pàg. 37

Il lustració 40. Home amb actualitat (mòbil) Pàg. 38

Il lustració 34. Home sense actualitat (escriptori i tauleta) Pàg. 39

Il lustració 35. Home sense actualitat (mòbil) Pàg. 40

Il lustració 36. Home amb actualitat, (escriptori i tauleta) Pàg. 41

Il lustració 37. Home amb actualitat, (mòbil) Pàg. 42

Il lustració 38. (escriptori i tauleta) Pàg. 43

Il lustració 39. (mòbil) Pàg. 44