v. 1.2 - Darrera actualització 03/2020

Departament de Canals Digitals Direcció de Comunicació Digital

Guia d’estil gràfic per a webs

2/19Guia 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

Kit disseny web (podeu descarregar-lo aqui)

3

5

8

9

10

11

12

13

15

16

17

18

19

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

3/19Guia 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/19Guia 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/19Guia 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.110 píxels per a resolucions de 1.140 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/19Guia d’estil gràfic per a webs

Resolució 1.140 o superior

Tot i que es presenten aquests dos talls mínims inicials, 1.140 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 1140 pixels, amb un total de contingut de 1110 pixels.

A. Retícula Bootstrap

Retícula de 1.140 px.

15 px. 15 px.

Ample del contingut 1.110 px.

Resolució 1.900 px.

A

7/19Guia 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/19Guia 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

Full screen

Retícula 1110

9/19Guia d’estil gràfic per a webs

Peu corporatiu

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.

Versió escriptori

Versió mòbil

Full screen

Retícula 1110

10/19Guia 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/19Guia 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/19Guia 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/19Guia 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/19Guia d’estil gràfic per a webs

Menú i submenúMòbil

Menú principal Menú principal amb cercador

Títol web Títol web + Subtítol Títol web + Àrea temàtica

Menú principal1er nivell actiu

15/19Guia d’estil gràfic per a webs

Fil d’Ariadna

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 blau, han de ser del color principal del web i han d’enllaçar on pertoqui.

Source Sans Regular12 punts

16/19Guia 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/19Guia 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/19Guia d’estil gràfic per a webs

Camps i formularis

Descarrega el kit de disseny de Formularis de l’Ajuntament de Barcelona Adobe Xd

Es proporciona un arxiu en format Adobe XD amb els elements necessaris per dissenyar i desenvolupar els

camps de formulari i així tenir disponibles totes les opcions possibles.

19/19Guia d’estil gràfic per a webs

Kit disseny web

Es proporciona un arxiu en format Adobe 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