v. 1.00 - Darrera actualització 05/2019
Departament de Canals Digitals Direcció de Comunicació Digital
Guia d’estil gràfic per a webs
2/21Guia d’estil gràfic per a webs
Índex
Introducció
Estructura i resolució
Barra corporativa
Peu corporatiu
Tipografia
Iconografia
Colors
Navegació (Menú i submenú)
Fil d’Ariadna
Promocions / Bàners
Franja per compartir contingut
Camps i formularis
Xarxes socials
Kit disseny web (podeu descarregar-lo aqui)
3
5
8
9
10
11
12
13
15
16
17
18
19
21
Aquesta guia d’estil és una versió provisional subjecta a canvis i modificacions.
3/21Guia d’estil gràfic per a webs
Introducció
Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial rellevància a una sèrie d’aspectes que dotaran al conjunt de tots els webs d’unes mateixes característiques per mantenir un estil homogeni.
Organització clara de continguts
És primordial mantenir l’ordre i la claredat a l’hora d’organitzar els diferents continguts d’una pàgina. Treballar els continguts per franges ajuda a que les diferents informacions quedin ben delimitades, ja sigui amb fons de diferent color, amb línies o amb destacats espais en blanc.
Franja 1
Franja 2
Franja 3
Franja 4
Espai blanc
És important distribuir els elements que conformen el contingut del web tenint en compte els espais blancs que es formen i els que queden entre les diferents informacions, fent que el contingut quedi ordenat i visualment aïllat per facilitar a l’usuari la lectura i classificació de la informació.
4/21Guia d’estil gràfic per a webs
Accessibilitat
Els webs han d’aplicar la normativa estàndard WAI (Web Accessibility Initiative) adoptada per la Unió Europea, i les pautes WCAG 2.0. Per tant, s’han de tenir en compte una sèrie de requeriments a l’hora de plantejar el disseny, com ara el contrast i la brillantor dels colors, els elements navegables, etcètera.
Dissenys modulars
La modulació és una manera útil de mostrar informació que necessita varis espais de mides diferents mantenint l’ordre i la homogeneïtat.
5/21Guia d’estil gràfic per a webs
Estructura i resolució
Els webs es basen en el concepte de disseny adaptatiu (responsive design). L’ample màxim del marc del contingut és de 1.140 píxels per a resolucions de 1.170 o superiors. S’ha determinat aquesta mida per adaptar els dissenys a la retícula de maquetació adequada per a Bootstrap.
Els fons i alguns elements han d’ocupar l’ample total de pantalla per proporcionar un efecte de pantalla completa.
Escriptori Mòbil
6/21Guia d’estil gràfic per a webs
Resolució 1.170 o superior
Tot i que es presenten aquests dos talls mínims inicials, 1.170 i versió mòbil, s’entén com a disseny
adaptatiu el garantir la visualització correcta a tots els dispositius mòbils, tauletes i versions d’escriptori.
En versió escriptori el ample màxim de la reticula es de 1170 pixels, amb un total de contingut de 1140 pixels.
A. Retícula Bootstrap
Retícula de 1.170 px.
15 px. 15 px.
Ample del contingut 1.140 px.
Resolució 1.900 px.
A
7/21Guia d’estil gràfic per a webs
A. Retícula Bootstrap (100%)B. Ample de contingut (100% - 30 px)
15 px.15 px.
Retícula de 100%.A
B Ample del contingut
Versió mòbil
8/21Guia d’estil gràfic per a webs
Barra corporativa
La barra corporativa està dissenyada per adaptar-se a l’ample de resolució de pantalla. Consta dels elements següents:
- URL www.barcelona.cat- Selector de webs corporatius principals- Cercador- Idiomes (excepte les finestres emergents)- URL lameva.barcelona.cat - Logotip de l’Ajuntament de Barcelona
Important!
La barra corporativa és un element present a tots els webs.
Per assegurar que la imatge corporativa és homogènia es proporciona per a cada web un CSS i JS centralitzat i les instruccions necessàries per incrustar-la.
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
9/21Guia d’estil gràfic per a webs
Peu corporatiu
Versió escriptori
Versió mòbil
El peu de pàgina constarà dels elements següents distribuïts en aquest ordre:
• Logo de l’Ajuntament: obligatori. Ha de ser un enllaç al web de l’Ajuntament • Nom de l’àrea o del departament de qui depèn (ha de ser clicable). Obligatori en els webs estructurals i a la resta de webs cal consultar-ho amb els responsables del web.
• Mapa web: obligatori i s’inclouran els enllaços als auxiliars (mapa web, contacte, avís legal, accessibilitat)• Contacte: opcional (farem servir el substantiu: Contacte / Contacto / Contact)• Avís legal: obligatori, enllaçarà a una pàgina on s’especifica els drets del lloc web en concret. • Accessibilitat: obligatori, enllaçarà a una pàgina on s’especifica el grau d’accessibilitat del lloc en concret.
10/21Guia d’estil gràfic per a webs
Tipografia
Per a la línia gràfica de Ciutat s’utilitza la tipografia Source Sans Pro amb els seus diferents pesos. La tipografia es una Google Font gratuïta i incrustable per a tots els navegadors. Es pot trobar a https://fonts.google.com/
Si el web que s’està dissenyant requereix utilitzar una
tipografia diferent es podrà fer sempre i quan aquesta
sigui gratuïta i/o es disposin dels permisos per fer-la
servir al web.
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 Regular
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 Pro Semibold
Source Sans Pro Bold
11/21Guia d’estil gràfic per a webs
Iconografia
Per representar determinats conceptes recurrents a les webs de l’Ajuntament, s’ha desenvolupat una tipografia iconogràfica. Per la seva utilització, la font ha de ser instal·lada i referenciada per codi CSS.
És troba una mostra del recull a: http://www.barcelona.cat/assetsdi/icoajuntament/demo-icoajuntament.html
Medi ambient ComerçCultura Civisme Educació EsportsUrbanismePromocióeconòmica
Prevenciói seguretat Mobilitat Gestions
municipalsInformació, tràmits
i atencióSanitat i salut
públicaUrbanisme, obres
i habitatgeServeis funeraris
i cementirisManteniment de
l’espai urbà
Obres Projectes estratègics
Padró Alcalde
Habitatge
Relació ciutadania Gastronomia
Recollida i neteja de l’espai urbà
Serveis socials ParcsBarrisFàbriques decreació
Estudis
Transports públics
FamíliesActivitatsTreballEmpresa
Oci
Participació
A dalt lightMaximitzar Minimitzar Expandir / col·lapsara baix, esquerra
Expandir / col·lapsara dalt, esquerra
Expandir / col·lapsara dalt, dreta
Dreta medium A dalt medium Esquerra medium
A dalt bold A baix bold Més
Esquerra light
Tancar / Eliminarmedium Dreta bold
OK light
Més
Dreta light
OK medium
OK bold
Esquerra bold
Tancar / Eliminarlight
Tancar / Eliminarbold
Més light Més medium
Més bold Casa
Expandir / col·lapsara baix, dreta
A baix medium
Menys bold
Menys light
A baix light
Menys medium
Menú
Si el web que s’està dissenyant ho requereix, es podrà
utilitzar una iconografia diferent o addicional.
Descarrega’t la tipografia Icoajuntament.ttf
12/21Guia d’estil gràfic per a webs
Colors
El color del cos de text general és el gris #696973 i alguns títols o destacats poden ser negres (#000000).
Per la resta d’elements, es pot utilitzar qualsevol
color. Els contrastos entre colors, han de complir la normativa AA de les WCAG 2.0 d’accessibilitat. Tot i la llibertat de triar color, recomanem certs tons com per exemple:
#0069e1
#696973
#d50283
#000000
#f8de2e
#008000
#ed8e27
#7519e6
#1c7da3 #e91b1d
13/21Guia d’estil gràfic per a webs
Navegació
Tots els webs fan servir el mateix sistema de navegació (horitzontal). Es pot utilitzar qualsevol color que compleixi la normativa AA de les WCAG 2.0 d’accessibilitat.
Menú i submenúEscriptori
14/21Guia d’estil gràfic per a webs
Menú i submenúMòbil
15/21Guia d’estil gràfic per a webs
Fil d’Ariadna
Source Sans Regular12 punts
A les pàgines interiors s’utilitza el fil d’Ariadna amb la finalitat de facilitar la navegació.
Els elements que en l’exemple següent són de color verd, han de ser del color principal del web i han d’enllaçar on pertoqui.
16/21Guia d’estil gràfic per a webs
Promocions / BànersHi ha dues mides proporcionals per mostrar bàners.
Mida petita
Mida gran
Cal centrar la part important de la imatge tenint en compte que el bloc inferior que conté el títol fa que el centre visual de la imatge estigui lleugerament més amunt del centre real.
Mida requerida: 252x252px (es reescala per CSS a 160x160px)Pes màxim: 38kbFormat: Jpg 72dpi
Per tenir en compte
100%
20%
17/21Guia d’estil gràfic per a webs
Franja per compartir contingut
La franja per compartir contingut s’ha de situar sempre al final de la pàgina, just abans del peucorporatiu, i sense espai entre ells. S’ha de fer servir prioritàriament la versió amb la franja de colorgris, excepte quan l’element que el precedeix a la
pàgina ocupi el navegador d’extrem a extrem i nosigui de color blanc, cas en què cal aplicar la franja de color blanc i, per tant, incorporar línia horitzontal de color gris #e5e5e5 per separar la franja per compartir contingut del peu corporatiu.
18/21Guia d’estil gràfic per a webs
Camps i formularis
Els camps i selectors dels formularis s’han de personalitzar com als exemples que es proporcionen,
amb excepció dels radio button i els check box, que han de ser de sistema.
19/21Guia d’estil gràfic per a webs
Xarxes socials
A la versió escriptori, la fila de xarxes socials, mostrarà les xarxes disponibles. Com es pot veure a l’exemple, la secció del titol anirà amb el color del web en qüestió.
Versió escriptori
20/21Guia d’estil gràfic per a webs
A la versió mòbil només es pot modificar quines xarxes es mostren, i es pot optar per mostrar l’exemple on es destaca una etiqueta (hashtag) concreta.
Versió mòbil
21/21Guia d’estil gràfic per a webs
Kit disseny web
Es proporciona un arxiu en format Adove Xd amb els elements necessaris per dissenyar un web per a l’Ajuntament de Barcelona. L’arxiu conté elements com les barres i peus corporatius, botons, sistemes de navegació i de presentació d’informació i varis exemples de pàgines d’inici i de detall.
A banda dels elements proporcionats, es poden presentar nous elements si el web en qüestió ho requereix sempre i quan segueixin l’estil del conjunt del kit.
Descarrega el catàleg del kit de disseny web de l’Ajuntament de Barcelona PDF
Descarrega el kit de disseny web de l’Ajuntament de Barcelona Adobe Xd