Guia d’...3/34 Guia d’estil gràfic LNIA GRFICA CIUTAT Introducció Les pautes gràfiques que...

2/34

Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT

Introducció

Estructura i resolució

Barra corporativa

Peu corporatiu

Tipografia

Colors corporatius

Navegació (menú)

Fil d’Ariadna

Pàgina principal (home)

Capçalera amb xarxes socials

Amb una sola imatge o un carrusel d’imatges

Amb reproductor de vídeo

Amb video background

Botons “Segueix-nos”

Promocions / Bàners

Mida petita

Mida gran

Notícies

Versionsd’unafilasenceraambdiferentsformats

Versionsd’unafilasenceraambunúnicformat

Versionsdemitjafila

Guia BCN

Localització

Pàgines interiors

Fitxad’informació

Llista d’ítems

Llista i detall de Guia BCN

Botons per compartir contingut

Franja per compartir contingut

Botons

Formularis

Xarxes socials

Vídeos

Estil d’imatges

3

4

8

9

10

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

Índex

3/34


IntroduccióLespautesgràfiquesques’handefinitalaguiad’estils’estructurenalvoltantdedosgranseixosconceptuals: Ciutat i Ajuntament.

S’hadonatespecialrellevànciaal’úsdel’espaienblancalweb.Elsconceptesquesustenteneldissenydelwebsón:

- La claredat dels continguts- L’ amplitud de l’espai- El fons blanc- El disseny adaptatiu (responsive design)

Al’horadeplantejarelswebsdedissenyCiutat,esbuscaaconseguirundissenypropiquesiguifàcild’associaraunproductedelaciutat,tenintencomptequecadawebtéunesparticularitatsiunsrequisitsconcrets.

Elswebshand’aplicarlanormativaestàndardWAI(WebAccessibilityInitiative)adoptadaperlaUnióEuropea,ilespautesWCAG2.0.Pertant,s’handetenirencompteunasèriederequerimentsal’horadeplantejareldisseny,comaraelcontrastilabrillantordecolors,elselementsnavegables,etcètera.

Aquesta guia d’estil és una versió provisional subjecta a canvis i modificacions.

4/34


Estructura i resolucióElswebsCiutatesbasenenelconceptededissenyadaptatiu(responsive design). L’ample màxim delmarcdelcontingutésde1.080píxelsperaresolucionsde1.280osuperiors.

Elsfonsialgunselementshand’ocuparl’ampletotaldepantallaperproporcionarunefectedepantalla completa.

Ample de pantalla

Ample del contingut 1080 px.

5/34


resolució 1.280

Acontinuaciós’indiquenlestresresolucionsmínimesamblesqualsesdesenvolupenelswebsdela ciutat basant-se en el concepte de disseny adaptatiu (responsive design).

Es treballen els talls següents: 1.280 o superior,1.024 i versió mòbil.

Totiqueespresentenaqueststrestallsmínimsinicials,s’enténcomadissenyadaptatiuqueesgaranteixlavisualitzaciócorrectaatotselsdispositiusmòbils,tauletesiversionsd’escriptori.

Ample del contingut 1.080 px.

Resolució 1.280 px.

6/34


resolució 1.024

Ample del contingut 906 px.

Resolució 1.024 px.

7/34


versió mòbil

Ample del contingut 600/300 px.

Resolució 640/320 px.

8/34


Barra corporativaLa barra corporativa consta dels elements següents:

-URLwww.barcelona.cat-Selectordewebscorporatiusprincipals- Cercador-Idiomes(exceptelesfinestresemergents)-URLlameva.barcelona.cat+selectorapartatsd’aquestweb- Logotip de l’Ajuntament de Barcelona

important!

Labarracorporativaésunelementpresentatotselswebs.

PerassegurarquelaimatgecorporativaéshomogèniaesproporcionaunfragmentXHTMLperacadaweb,unCSSiJScentralitzat.

Per obtenir el codi de la barra i les instruccions per incloure’l, cal demanar-ho al cap de projecte corresponent del Departament d’Internet de l’Ajuntament de Barcelona.

Versió escriptori

Versió mòbil

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/barra.zip

9/34


Peu corporatiuEl peu consta dels elements següents:

•AjuntamentdeBarcelona•Departament(opcional)•ContacteoQueixesisuggeriments(opcional)•Avíslegal:enllaçaunaplanaons’especificaelsdretsdelllocwebenconcret(siescau)•Accessibilitat:enllaçaunaplanaons’especificaeltractamentaccessibledelllocenconcret

Elcontingutilabarras’hand’adaptaral’ampledelcontingutdelapàgina. Espotutilitzarlabarraenblanc,grisoblancambfiletsielcontingutquelaprecedeixtétambéfonsblanc.Elcolordelpeuafectalamaneradetreballarlafranjapercompartircontingut(vegeula pàg. 30).

Peu per a la versió mòbil

Peu per a la versió escriptori

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/peu.zip

10/34


TipografiaPer a la línia gràfica de Ciutat s’utilitzalatipografiaSource Sans Proambelsdiferentspesos.LatipografiaesunaGoogleFontgratuïtaiincrustableperatotselsnavegadors.Lapodeubaixarahttp://www.google.com/fonts/.

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z a b c d e f g h i j k l m n ñ o p q r s t u v w x y z 0123456789&$*¡!¿?

Source Sans Pro ExtraLight

ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyz 0123456789&$*¡!¿?

SourceSansProLight




Source Sans Regular

Source Sans Semibold

Source Sans Bold

11/34


Com s’aplica?

S’hadefinitlamidatipogràficadelcosdetextdelwebalesdiferentsresolucions.Lamidadelstitularsespotaplicarambllibertatsemprequeesrespectilataulad’equivalènciesdeltracking.

Tracking

14 punts 20 - 30 punts 30 - 40 punts 40 - 50 punts 50oméspunts

0 -25 -35 -45 -55

Cos del text

Source Sans Pro Regular

color: #666666

Resolució Punts

1.280 px1.024 px 14 pt

320 px 28 pt

Titular

Source Sans Pro Light

color: #000000

textos de25 pt o superior

Source Sans Pro ExtraLight

color: #000000

textos de30 pt o superior

12/34


#0069e1 #d50283

#f8de2e

#008000

#ed8e27

#7519E6 #1c7da3

Colors corporatiusElcolordelcósdetextgeneralésgris:#666666ialgunstítolsodestacatspodensernegres:#000000.

Per a la línia gràfica CiutatespotutilitzarqualsevolcolorquecompleixilaAAdelesWCAG2.0d’accessibilitat.Totilallibertatdetriarcolor,recomanemcertstonscomperexemple:

#E91B1D

#000000#666666

13/34


Navegació (menú)Menú i submenú

Totselswebsfanservirelmateixsistemadenavegació(horitzontal).Acontinuacióesproporcionendiferentsplantillesdelmenúperdescarregaramblessevesespecificacions.Elcodidecolord’aquestmenúesdelliureelecciósemprequecompleixilesWCAG2.0.

Encasqueestractid’unwebapantallacompleta,calferservirlaversiófull screendelmenú,inclosatambéenl’arxiudescarregable.

Elmenúhadequedarfixatalapartsuperiorquanesmoulabarradedesplaçament.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/menu.zip

15/34


Capçalera homeHihatrestipologiesdecapçalera,depenentdelselementsquelaconformen:

Consta dels elements següents:

• Imatge o imatges de fonsUna sola imatge o un carrusel d’imatgesrelacionadesambelconceptedelwebenqüestió.Latransicióentrelesdiferentsimatgeshadeserperfosasuauiaunritmepausat.

Lamidad’imatgedefonsésde444px.d’alçadaperaresolucionsde1.280osuperiorside354px.d’alçada per a resolucions de 1.024 (ample total).

• TitularDinsd’aquestespaiipersobrelesimatgesdefonshihaeltitulardelweb,queespotmostrardedues maneres:. Un sol títol (mida gran del .psd escalable o divisible en dues línies per poder-lo encabir)..Títolisubtítol(demidatambéescalablemantenintlaproporciódepesosqueesreflecteixalPSD).

• Botons d’accés a les xarxes socials

• Autor de la fotografiaDemaneraopcional,quancalgui,espodràindicarl’autordelafotografiacomesreflecteixal’arxiuPSD,alapartinferioresquerra.

Capçalera amb una sola imatge o un carrusel d’imatges

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/header.zip

16/34


Capçalera amb reproductor de vídeo


• ImatgeUnaimatgerelacionadaambelconceptedelwebenqüestióodirectamentextretadelvídeoiqueromandràestàticafinsquel’usuariactivilareproducciódelvídeoambelbotóplay.



• Botó play

• VídeoElvídeoesreproduiràenl’espaidelacapçaleraperòmantenintlaproporcióoriginal,se’npotveureun exemple a l’arxiu .psd per descarregar.



17/34


Capçalera amb video background


• VídeoUnvídeorelacionatambelconceptedelwebenqüestió,senseso,queesreprodueixenloopiqueanirà sota d’una trama.


• Botó pausaSituatalapartsuperiordreta,permetentotmomentquel’usuaripuguiaturarelvideo loop.




20/34


NotíciesHihatresversionspermostrarnotíciesaunahome,cadascunaambdiferentsopcionsdeformatidecolorsegonselcolordefons.

Lesnotíciesespodencombinareneldiferentsformatssemprequequedintotesaunamateixaalçada. Les notícies inclouen sempre el botó per compartir-ne el contingut a les xarxes socials.

Enaquestaversió,lesnotíciespodenanaracompanyadesdedostipusdebotóperveuremésnotícies:elprimer,ipreferible,had’activarunacàrregadinàmicaquemostrimésnotíciesalapàginaactual,desplaçantcapabaixelcontingutdesota;elsegonbotóqueespotferservirhadeportarl’usuarialwebd’El Digital DBarcelona en una nova pestanya del navegador.

Versions d’una fila sencera amb diferents formats

Descarrega’t les plantilles 1.280 | 1.024 | mòbil http://www.barcelona.cat/download/guia_estil_ciutat/noticies.zip

21/34


Enaquestaversió,lesnotícieshandetenirsempreelformatqueesreflecteixenl’exempleperdescarregaritambéhand’inclouresempreelbotópercompartir-neelcontingutalesxarxessocials.

Enaquestaversió,lesnotíciestambépodenanaracompanyadesdedostipusdebotóperveuremésnotícies:elprimer,ipreferible,activaràunacàrregadinàmicaquemostrimésnotíciesalapàginaactual,desplaçantcapabaixelcontingutdesota;elsegonbotóqueespotferservirhadeportarl’usuarialwebd’El Digital DBarcelona en una nova pestanya del navegador.


Versions d’una fila sencera amb un únic format

22/34



Versions de mitja fila

Enlaversiódemitjafilalesnotíciesespodencombinarenelsdiferentsformats.Les notícies inclouen sempre el botó per compartir-ne el contingut a les xarxes socials.

Enaquestaversiónoméss’hipotincloureunbotóqueportaràl’usuarialwebd’El Digital DBarcelona en una nova pestanya del navegador.

23/34


Guia BCNHihaduesversionspermostrardestacatsdelwebGuiaBCNaunahome,ambdiferentcolorsegonselcolordefons.

Cadadestacathad’inclouresempreunbotópercompartir-neelcontingutalesxarxessocials.Opcionalmentespotinclouretambéunbotópermostrarmésdestacatsdesplaçantcapabaixelcontingut de sota.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/guiabcn.zip

24/34


LocalitzacióAquestwidget permet mostrar en el plànol una o diverses localitzacions amb els marcadors corresponents,quehandeserclicablespermostrarmésinformació.Opcionalmentespotmostrarelblocambfiltresperacotarlainformacióqueesmostra.Tambéopcionalmentespotoferirpoderveuretotalainformacióenformadellista.Elscolorsespodentriarlliurement.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/localitzacio.zip

25/34


Fitxa d’informacióEldissenydelespàginesdefitxesd’informacióéslliure.Acontinuacióespodenbaixartresexemplescomareferència.

Lagaleriapotincloureimatgesivídeosielsbotonsdel’apartat“Mésinformació”handebaixararxius o obrir enllaços en una pestanya nova.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/fitxa_info.zip

26/34


Llista d’ítemsEldissenyd’unallistad’ítemséslliure.Acontinuacióespodendescarregardosexemples,undesimpleiunaltrequeincloufiltresperacotar-lo.

Lesduesopcionspodenincloureunbotópermostrarmésítemsiaquestsesmostraranalamateixapàgina,desplaçantcapabaixelcontingutquepuguintenirasota.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/llista.zip

27/34


Llista i detall de Guia BCN

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/guiabcn.zip

AcontinuacióespotdescarregarunexempledellistaiundefitxadedetalldeGuiaBCN.Elscolorsespodentriarlliurement.SielquecalésunespaidestacatdeGuiaBCNenunahome,espottrobarl’exemple a la pàgina 22.

29/34


Franja per compartir contingutLafranjapercompartircontinguts’hadesituarsemprealfinaldelapàgina,justabansdelpeucorporatiu,isenseespaientreells.S’hadeferservirprioritàriamentlaversióamblafranjadecolorgris,exceptequanl’elementqueelprecedeixalapàginaocupielnavegadord’extremaextreminosiguidecolorblanc,casenquècalaplicarlafranjadecolorblanci,pertant,incorporarunalíniahoritzontalpersepararelpeucorporatiu.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/addthis.zip

31/34


Camps i formularis

Escriptori Mòbil

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/formularis.zip

Elscampsiselectorsdelsformulariss’handepersonalitzarcomalsexemplesqueesproporcionen,amb excepció dels radio button i els check box,quehandeserdesistema.

32/34


Xarxes socialsAlaversióescriptori,lafiladexarxessocialshadesermodificablepelquefaaquinesxarxesesmostren,itambéenelcolor,elqueenl’exempleésmagentas’hadecanviarpelcolordelwebenqüestió,peròelgrisesmantindràigual.Alaversiómòbilnomésespotmodificarquinesxarxesesmostren,iespotoptarpermostrarl’exempleonesdestacaunaetiqueta(hashtag) concreta.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/xxss.zip

33/34


VideosQuanesmostriunvídeo,aquesthad’incloureelbotóplayadequatalamidadelaimatgeisempreenlaposicióqueesmostraenl’exemple.Lesimatgespetites(lesquetenenunamidaméspetitaquelaimatgecentral)hand’incloureelbotóplaypetitilesimatgesquesiguinmésgransoigualquelaimatgedelcentrehand’incloureelbotóplay gran.

Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/video.zip

Guia d’...3/34 Guia d’estil gràfic LNIA GRFICA CIUTAT Introducció Les pautes gràfiques que...

Documents

Transcript of Guia d’...3/34 Guia d’estil gràfic LNIA GRFICA CIUTAT Introducció Les pautes gràfiques que...