À propos
Ce guide sert de référence aux designers, développeurs et tout autre professionnel qui a comme mandat le développement d’un site web, d’une application mobile, de système métier, etc. Il permet au professionnel d’avoir en main l’ensemble des éléments qui composent l’environnement graphique dans lequel évoluent les utilisateurs des plateformes numériques de la Ville de Laval.
Objectifs du guide UI :
- faciliter le travail du professionnel qui pourra facilement identifier et utiliser les bons attributs d’interface graphique et aux éléments de contenu (pré-approuvés) grâce au guide référence.
- assurer le développement d’une interface qui répond aux normes graphiques de l’identité de marque de la Ville de Laval en plus d’une similarité et d’une cohérence avec l’ensemble des autres plateformes numériques municipales afin d’améliorer le parcours et l’expérience utilisateurs.
- établir la crédibilité de la marque de la Ville de Laval tout en améliorant la lisibilité, puisque des repères visuels y sont installés, facilitant la prise d’informations, etc.
- canaliser les énergies vers la stratégie, l’ergonomie et l’accessibilité.
Le code CSS et la nomenclature des fichiers et class, sont à la discression des développeurs.
Télécharger la feuille de style (CSS).
Éléments de structure
Logo de la Ville de Laval
Veuillez respecter les normes graphiques pour son utilisation.
Télécharger le logo de la Ville de Laval (SVG et AI).
Font Graphik
On utilise la police de caractère officielle de la ville de Laval sur le site web : Graphik.
On l’utilise ****en Regular, Regular italique et Semi-Bold, Semi-Bold italique **uniquement.**
Selon le support (mobile ou desktop); la taille de la font s’adapte.
Prévoir la font fallback Helvetica Bold – Semi bold et Regular uniquement. Helvetica étant disponible sur le plus d’appareils possibles.
Éléments de contenu
Titres
Titre <h1>Le titre H1 est généralement unique dans une page d’un site Internet. Tout comme les autres titres, il est également une référence importante pour les moteurs de recherche.
Voici ces propriétés :
- la font est Roboto Bold de taille 36 px,
- interligne de 40 px,
- la couleur à un hexadécimal de #0054A6,
- la marge du bas est de 15 px.
Titre <h2>
Le titre H2, sert à découper les différents sujets d’une page web. Il permet aussi à l’utilisateur de « scanner » les informations dans une page.
Voici ces propriétés :
- la font est Roboto Medium de taille 28 px,
- interligne de 31 px,
- la couleur à un hexadécimal de #0054A6,
- la marge du haut est de 50 px, et celle du bas est de 15 px.
Titre <h3>
Le titre H3 est utilisé pour scinder des portions de textes d’un sujet d’une page web.
Voici ces propriétés :
- la font est Roboto Bold de taille 25 px,
- interligne de 28 px,
- la couleur à un hexadécimal de #0a0a0a,
- la marge du haut est de 35 px, et celle du bas est de 15 px.
Titre <h4>
Le titre H4 est souvent utilisé pour ajouter un titre à un paragraphe.
Voici ces propriétés :
- la font est Roboto Medium de taille 20 px,
- interligne de 22 px,
- la couleur à un hexadécimal de #0a0a0a,
- la marge du haut est de 20 px, et celle du bas est de 5 px.
Code CSS
h1 { margin: 0 0 15px; padding: 0; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 700; font-size: 36px; line-height: 40px; color: #0054A6; }
h2 { margin: 50px 0 15px; padding: 0; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 500; font-size: 28px; line-height: 31px; color: #0054A6; }
h3 { margin: 35px 0 15px; padding: 0; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 700; font-size: 25px; line-height: 28px; color:#0a0a0a; }
h4 { margin: 20px 0 5px; padding: 0; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 500; font-size: 20px; line-height: 22px; color:#0a0a0a; }
Paragraphe <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Exemple de caractère gras integer sodales dolor nec tincidunt facilisis. Nullam lien texte faucibus nisi leo, vel porta ante consequat in. Integer convallis cursus lorem, quis posuere orci elementum ut. Nunc finibus massa porttitor, finibus justo quis, venenatis libero. Proin eu congue risus.
Même si pour des raisons d’accessibilités nous n’utilisons pas d’italic sur le site laval.ca, voici un extrait The italic Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu augue sem. Integer eu neque malesuada nisl volutpat fermentum. Donec ac purus finibus, cursus enim faucibus, ultricies mi.
Voici ces propriétés :
- la font est Roboto de taille 16 px,
- interligne de 25 px,
- la couleur à un hexadécimal de #0a0a0a,
- la marge du bas est de 15 px.
Code CSS
p { margin: 0 0 15px; padding: 0; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; color: #0a0a0a; }
Petit texte
Il suffit d’ajouter une class « text-smaller » afin de réduire le format du texte. Ceci peut être utilisé dans le contexte d’une description, d’une référence…
Voici ces propriétés :
- la font est Roboto de taille 14 px,
- interligne de 17 px,
- la couleur à un hexadécimal de #999999.
.text-smaller { font-size: 0.85em; line-height: 1.25em; color: #999999; }
Ligne horizontale <hr>
hr { position: relative; border: none; border-bottom: 1px solid #c9c9c9; padding-bottom: 20px; height: 1px; }
Listes ordonnées et non-ordonnées <ol> <ul>
- Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros.
- Proin ut faucibus tellus. In consequat sagittis ex in vulputate.
- Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros.
-
In consequat sagittis ex in vulputate :
- Fusce elementum mi fringilla nunc in, mollis libero. Fusce elementum mi non luctus sodales.
- Proin ut faucibus tellus. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec nec lorem ornare
- Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec nec lorem ornare, fringilla nunc in, mollis libero.
- Donec nec lorem ornare
- Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus.
- Donec nec lorem ornare
-
Lower Alphabetical – Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros.
- Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec , mollis libero. Fusce elementum mi non luctus sodales.
- Donec nec lorem ornare
- Donec ac purus finibus
- Donec nec lorem ornare
-
Upper Alphabetical – Donec nec lorem ornare nec lorem ornare, fringilla nunc in.
- Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec , mollis libero. Fusce elementum mi non luctus sodales.
- Donec nec lorem ornare
- Donec ac purus finibus
- Donec nec lorem ornare
-
Lower Roman – Donec ac purus finibus
- Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec , mollis libero. Fusce elementum mi non luctus sodales.
- Donec nec lorem ornare
- Donec ac purus finibus
- Donec nec lorem ornare
-
Upper Roman – Donec nec lorem ornare
- Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec , mollis libero. Fusce elementum mi non luctus sodales.
- Donec nec lorem ornare
- Donec ac purus finibus
- Donec nec lorem ornare
ol { counter-reset: parentlist; }
ul, ol { list-style: none; margin: 5px 0 30px; }
ul li, ol li { position: relative; margin-bottom: 10px; font-family: « Roboto », « Helvetica Neue », Arial; font-size: 16px; font-weight: 400; color: #0a0a0a; line-height: 20px; vertical-align: baseline; -webkit-font-smoothing:antialiased !important; }
ul ul, ul ol,
ol ul, ol ol { margin: 10px 0 20px 15px; }
ul { list-style-type: none; }
ul li { padding-left: 15px; }
ul li::before { content: « »; position: absolute; width: 4px; height: 4px; top: 7px; left: 2px; border-radius: 50%; background-color:#0054A6; }
ol li { padding-left: 20px; }
ol li::before { counter-increment: parentlist; content: counter(parentlist) « . « ; position: absolute; left: 0; font-weight: 700; color: #0054A6; letter-spacing: -0.08em; }
ol ol { counter-reset: childlist;}
ol ol li::before { counter-increment: childlist; content: counter(childlist) « . « ; }
ol ol[type= »a »] { counter-reset: alphalower2;}
ol ol[type= »a »] li { counter-increment: alphalower2;}
ol ol[type= »a »] li::before { content: counter(alphalower2, lower-alpha) « . « ; }
ol ol[type= »lower-alpha »] { counter-reset: alphalower;}
ol ol[type= »lower-alpha »] li { counter-increment: alphalower;}
ol ol[type= »lower-alpha »] li::before { content: counter(alphalower, lower-alpha) « . « ; }
ol ol[type= »upper-alpha »] { counter-reset: alphaupper;}
ol ol[type= »upper-alpha »] li { counter-increment: alphaupper;}
ol ol[type= »upper-alpha »] li::before { content: counter(alphaupper, upper-alpha) « . « ; }
ol ol[type= »i »] { counter-reset: romanlower2;}
ol ol[type= »i »] li { counter-increment: romanlower2;}
ol ol[type= »i »] li::before { content: counter(romanlower2, lower-roman) « . « ; }
ol ol[type= »lower-roman »] { counter-reset: romanlower; }
ol ol[type= »lower-roman »] li { counter-increment: romanlower; }
ol ol[type= »lower-roman »] li::before { content: counter(romanlower, lower-roman) « . « ; }
ol ol[type= »upper-roman »] { counter-reset: romanupper; }
ol ol[type= »upper-roman »] li { counter-increment: romanupper; }
ol ol[type= »upper-roman »] li::before { content: counter(romanupper, upper-roman) « . « ; }
ol li h1:first-child,
ol li h2:first-child,
ol li h3:first-child,
ol li h4:first-child,
ol li p:first-child,
ul li h1:first-child,
ul li h2:first-child,
ul li h3:first-child,
ul li h4:first-child,
ul li p:first-child { margin-top: 0; padding-top: 0; }
Liens et boutons
Types de boutons
<a href= »# » class= »btn-cta-main »>Bouton principal</a>
<a href= »# » class= »btn-cta-secondary »>Bouton secondaire</a>
Boutons formulaires
<a href= »# » class= »btn-cta-submit »>Continuer</a>
<button class= »btn-cta-submit »>Submit Button</button>
<a href= »# » class= »btn-cta-submit-secondary »>Annuler</a>
Hyperliens
<a href= »# »>Lien texte avec chevron<span class= »icon-chevron »></span>></a>
<a href= »# »>Lien texte avec chevron<span class= »icon-chevron-inline »></span></a>
Ou bien sûre, un hyperlien texte dans un paragraphe
Tableaux
Tableau avec entête
| Catégorie : Parterre avant – secteur 1 | Gagnants |
|---|---|
| 1er prix – 125 $ en chèque-cadeau échangeable chez un producteur horticole lavallois | Ginette Paquin |
| 2e prix – 75 $ en chèque-cadeau échangeable chez un producteur horticole lavallois | Claire et Raymond Hébert |
| 3e prix – 50 $ en chèque-cadeau échangeable chez un producteur horticole lavallois | Ex-aequo Réjean Galarneau Edi et Giancarlo Bertolucci |
table td { font-size: 13px; }
table th { padding: 15px; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 500; font-size: 16px; line-height: 20px; color: #ffffff; background: #999999; }
table tr:nth-child(even) { background-color: #f2f2f3; }
table td { padding: 15px; border: 1px solid #c9c9c9; }
Boîtes d’emphase
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Caractère gras integer sodales dolor nec tincidunt facilisis. Nullam lien texte faucibus nisi leo, vel porta ante consequat in. Integer convallis cursus lorem, quis posuere orci elementum ut. Nunc finibus massa porttitor, finibus justo quis, venenatis libero. Proin eu congue risus.
<div class= »box-important »>… votre contenu …</div>
.box-important { margin: 15px 0; padding: 30px; background: #eeeeee; }
.box-important h1:first-child, .box-important h2:first-child, .box-important h3:first-child, .box-important h4:first-child, .box-important h5:first-child, .box-important h6:first-child { margin-top: 0 !important; }
.box-important *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Caractère gras integer sodales dolor nec tincidunt facilisis. Nullam lien texte faucibus nisi leo, vel porta ante consequat in. Integer convallis cursus lorem, quis posuere orci elementum ut. Nunc finibus massa porttitor, finibus justo quis, venenatis libero. Proin eu congue risus.
<div class= »box-important-secondary »>… votre contenu …</div>
.box-important-secondary { margin: 15px 0; border-top: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; width: 100%; padding: 10px 0; }
.box-important-secondary h1:first-child, .box-important-secondary h2:first-child, .box-important-secondary h3:first-child, .box-important-secondary h4:first-child, .box-important-secondary h5:first-child, .box-important-secondary h6:first-child { margin-top: 0 !important; }
.box-important-secondary *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
Boîte de procédure
|
Avant de débuter, lire la procédure au complet ​:
|
<table class= »box-important-stepbystep »>… votre contenu OL/LI …</table>
Citations <blockquote>
Tout comme dans un traitement de texte, vous pouvez mettre en valeur vos principales citations sur une page Web, en utilisant la balise <blockquote>. Cette balise accompagnée de code CSS, affichera automatiquement une ligne à gauche avec un espacement et grossira la dimension du texte.
« Le blockquote est généralement utilisé pour des citations. Mais il pourrait être utile pour présenter un bout de phrase sommaire, mettre en évidence une portion de texte, une note, un truc ou une astuce… »
— Un employé au service des communications et du marketing
blockquote { display: block; border-left: 3px solid #c9c9c9; margin: 20px 0; padding: 0 0px 0 20px; font-family: « Roboto », Arial, Helvetica, sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; }
Charte des couleurs
Les couleurs de notre plateforme s’inspirent de notre vision « Urbaine de nature », et expriment cette dualité unique à Laval.
Elles sont donc divisées en deux palettes distinctes :
- Une palette urbaine, composée de tons chauds;
- Une palette nature, formée de tons froids.
Voici comment les utiliser :
- Utilisez toujours les couleurs en duo;
- Servez-vous du noir et du blanc comme base;
- Créez ensuite votre duo de couleurs principal en choisissant une couleur pâle et une couleur foncée.
À noter que le rouge ne fait partie d’aucune palette. C’est que nous réservons son utilisation exclusivement aux mesures d’urgence, des messages d’erreurs de validation, de certaines consignes et règlements, comme indicateur de « fermeture » sur le web.
Thématiques
Couleurs pâles
C0 M46 J56 N0
R255 V155 B110
C20 M13 J100 N0
R215 V200 B35
C7 M30 J0 N0
R229 V187 B216
C43 M18 J0 N0
R141 V183 B225
C0 M30 J95 N0
R255 V185 B30
C0 M55 J100 N0
R246 V139 B31
Couleurs foncées
C100 M93 J28 N23
R34 V45 B101
C57 M92 J40 N32
R100 V40 B80
C100 M75 J0 N0
R0 V84 B166
C38 M100 J2 N0
R168 V27 B141
C90 M12 J95 N40
R0 V107 B53
C93 M54 J52 N31
R0 V80 B90
Neutres
C0 M0 J0 N100
R10 V10 B10
C69 M63 J62 N58
R0 V0 B0
C90 M42 J55 N22
R6 V102 B102
C43 M35 J35 N1
R153 V153 B153
C21 M16 J17 N0
R201 V201 B201
C8 M6 J6 N6
R230 V231 B232
C5 M4 J4 N0
R238 V238 B238
C4 M3 J2 N0
R242 V242 B243
C2 M1 J1 N0
R247 V247 B248
Fonctionnelles
C85 M12 J98 N1
R0 V156 B76
C0 M30 J97 N0
R255 V185 B30
C6 M98 J100 N1
R225 V35 B36
Iconographie
Le contour de chaque icône a été conçue pour être cohérent avec le reste de l’ensemble des icônes.
Icônes d’interface
Sociales
Coordonnés
Documents
Autres icônes
* Faculatif
Navigation de contenu
Colonne de droite
Accordéon
Les accordéons sont utilisés pour cacher du contenu secondaire ou même tertiaire. Ceci permet d’alléger visuellement le contenu, donnant aux utilisateurs la possibilité de « scanner » l’information importante dans la page.
Cliquer pour voir le contenu.
Très utile pour cacher du texte secondaire.
Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec nec lorem ornare, fringilla nunc in, mollis libero. Fusce elementum mi non luctus sodales. Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus.
Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus. Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec nec lorem ornare, fringilla nunc in, mollis libero. Fusce elementum mi non luctus sodales.
Accordéon qui possède un élément graphique.
Vestibulum quis purus sit amet lorem vestibulum finibus sed non eros. Donec nec lorem ornare, fringilla nunc in, mollis libero. Fusce elementum mi non luctus sodales. Proin ut faucibus tellus. In consequat sagittis ex in vulputate. Phasellus posuere non diam at faucibus.