Embed Size (px)
Citation preview
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àg. 2
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. 3
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. 4
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. 5
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. 6
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. 7
1.1 Marca
Com es construeix:
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:
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]
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/
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/cercador-gencat/
Pàg. 8
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:
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.
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/
Pàg. 9
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:
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.
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)
Pàg. 10
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. 11
Il·lustració 5. Llista de continguts model 1 (mòbil)
Com es construeix:
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ó.
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/
Pàg. 12
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. 13
Com es construeix:
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.
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_destacatimatge-cas-2/
Pàg. 14
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. 15
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. 16
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”).
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_carrusel-cas-60/
Pàg. 17
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. 18
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
4
Pàg. 19
Com es construeix:
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.
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/
Pàg. 20
Il·lustració 16. Vídeo per a versió mòbil.
Com es construeix:
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.
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_descripciopagina-cas-2/
Pàg. 21
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]
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.
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/
Pàg. 22
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. 23
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. 24
Il·lustració 18. Llista d'enllaços model 1 plegat i sense plegar (mòbil)
Com es construeix:
Recomanacions:
Els títols dels enllaços no han d’ocupar més de dues línies en la versió escriptori.
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/
Pàg. 25
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. 26
Il·lustració 20. Llista de bàners amb imatge model 3 (mòbil)
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.
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/grafic-destacat/opcio-1/
Pàg. 27
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/grafic-destacat/opcio-2/
Pàg. 28
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. 29
Il·lustració 24. Llista d’enllaços amb imatge destacada model 6 (mòbil)
Com es construeix:
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:
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_destacatimatge-cas-1/
Pàg. 30
É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. 31
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. 32
Com es construeix:
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.
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/
Pàg. 33
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:
Recomanacions:
Títol: llargada màxima de dues línies en versió tauleta o 80 caràcters.
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_carrusel-cas-100-multiple/
Pàg. 34
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. 35
Com es construeix:
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ó.
Il·lustració 32. Carrusel de
diapositives (model 9) per a
mòbil.
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_carrusel-cas-50/
Pàg. 36
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. 37
4. Exemples
Il·lustració 33. Home amb actualitat (escriptori i tauleta)
Pàg. 38
Il·lustració 40. Home amb actualitat (mòbil)
Pàg. 39
Il·lustració 34. Home sense actualitat (escriptori i tauleta)
Pàg. 40
Il·lustració 35. Home sense actualitat (mòbil)
Pàg. 41
Il·lustració 36. Home amb actualitat, (escriptori i tauleta)
Pàg. 42
Il·lustració 37. Home amb actualitat, (mòbil)
Pàg. 43
Il·lustració 38. (escriptori i tauleta)
Pàg. 44
Il·lustració 39. (mòbil)
