Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
resolució 1.024
Ample del contingut 906 px.
Resolució 1.024 px.
7/34
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
versió mòbil
Ample del contingut 600/300 px.
Resolució 640/320 px.
8/34
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
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&$*¡!¿?
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&$*¡!¿?
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 Regular
Source Sans Semibold
Source Sans Bold
11/34
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
#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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
Capçalera amb reproductor de vídeo
Consta dels elements següents:
• ImatgeUnaimatgerelacionadaambelconceptedelwebenqüestióodirectamentextretadelvídeoiqueromandràestàticafinsquel’usuariactivilareproducciódelvídeoambelbotóplay.
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).
• Botó play
• VídeoElvídeoesreproduiràenl’espaidelacapçaleraperòmantenintlaproporcióoriginal,se’npotveureun exemple a l’arxiu .psd per descarregar.
• Botons d’accés a les xarxes socials
Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/header.zip
17/34
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
Capçalera amb video background
Consta dels elements següents:
• VídeoUnvídeorelacionatambelconceptedelwebenqüestió,senseso,queesreprodueixenloopiqueanirà sota d’una trama.
Lamidad’imatgedefonsésde444px.d’alçadaperaresolucionsde1.280osuperiorside354px.d’alçada per a resolucions de 1.024 (ample total).
• Botó pausaSituatalapartsuperiordreta,permetentotmomentquel’usuaripuguiaturarelvideo loop.
• 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
Descarrega’t les plantilles 1.280 | 1.024 | mòbilhttp://www.barcelona.cat/download/guia_estil_ciutat/header.zip
20/34
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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.
Descarrega’t les plantilles 1.280 | 1.024 | mòbil http://www.barcelona.cat/download/guia_estil_ciutat/noticies.zip
Versions d’una fila sencera amb un únic format
22/34
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
Descarrega’t les plantilles 1.280 | 1.024 | mòbil http://www.barcelona.cat/download/guia_estil_ciutat/noticies.zip
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 d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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
Guia d’estil gràfic LÍNIA GRÀFICA CIUTAT
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