guia d’estil gràfic per a webs - barcelona · uia d’estil gràfic per a webs 3/21 introducció...

21
v. 1.00 - Darrera actualització 05/2019 Departament de Canals Digitals Direcció de Comunicació Digital Guia d’estil gràfic per a webs

Upload: others

Post on 10-Aug-2020

30 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

v. 1.00 - Darrera actualització 05/2019

Departament de Canals Digitals Direcció de Comunicació Digital

Guia d’estil gràfic per a webs

Page 2: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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.

Page 3: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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ó.

Page 4: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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.

Page 5: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 6: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 7: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 8: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 9: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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.

Page 10: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 11: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 12: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 13: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 14: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

14/21Guia d’estil gràfic per a webs

Menú i submenúMòbil

Page 15: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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.

Page 16: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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%

Page 17: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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.

Page 18: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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.

Page 19: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 20: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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

Page 21: Guia d’estil gràfic per a webs - Barcelona · uia d’estil gràfic per a webs 3/21 Introducció Per treballar el disseny dels webs de l’Ajuntament de Barcelona cal donar especial

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