Mise en contexte


Bienvenue sur la charte web d’Adviz.

En parcourant les pages suivantes, vous trouverez toutes les règles à suivre pour travailler efficacement et avec unité, face à ce qui a déjà été fait par le passé, sur les projets internes d'Adviz. Le but de cette charte est évidemment de vous simplifier la vie en vous permettant de trouver toutes réponses à vos questions en un seul et même endroit.

Le charte couvrira autant les règles de styles CSS, les contrastes de couleur, type de tableau et règles typographique que l'application des filtres sur des images en photoshop et le style d'image désirée dans les projets d'Adviz.

Il est à noter que la charte n’est pas dans un état fixe, mais plutôt en constante évolution. Ce sera à vous de la faire évoluer au fil des projets.

Formule d'utilisation


#70BE48
rgba(112, 190, 72, 1)

#eeeeee
rgba(238, 238, 238, 1)

#363636
rgba(54, 54, 54, 1)

#FFFFFF*
rgba(255, 255, 255, 1)

#000000*
rgba(0, 0, 0, 1)

Le RBGA() ça sert à quoi?

Le RGBA c'est un peu la vie! Pas de mauvaises blagues promis.

RGB est la pour détermine sur une valeur de 255 le R: rouge, G:vert et B:bleu. Par exemple: rgba(255, 0, 0, 1), nous donne rouge.

Le A lui?

A: Alpha, il est là pour déterminer l'opacité, la transparence, de la couleur. Celui-ci à une valeur maximale de 1. Donc lorsque le A est à 1 la couleur est à 100%. Lorsqu'il est à 0.5, le rouge ne sera opaque qu'à 50%. Il serait par exemple écrit comme suit: rgba(255, 0, 0, 0.5)

Contrastes acceptés


Les contrastes sont les couleurs acceptés ensemble. Évidemment, il faut ici aussi savoir juger de son gros bon sans. Un texte blanc n'ira pas sur un fond gris pâle. N'oubliez pas que votre priorité est de rendre le texte et les éléments le plus accessible possible au grand public. Pensez aux gens ayant des troubles de visions lorsque vous appliquez vos règles de style.


En cas de doute, n'hésitez pas à visiter le site suivant: webaim. Il s'agit d'une plateform en ligne et gratuite qui analysera vos choix de couleurs et vous rendra un verdicte tant qu'à son accessibilité.

h1.grand titre

font-family: Oswald regular;
font-size: 42pt;
font-weight: bold;
color: #7fc144;
margin: 0;
text-align: left;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
line-height: 55px;

h2. titre de section

font-family: Oswald;
font-size: 20pt;
font-weight: light;
color: #2d2d2d;
margin: 20px;
line-height: 25pt;
text-transform: uppercase;
margin-top: 50px;

h3. Titre h3

font-family: Oswald;
font-size:20pt;
font-style: italic;
color:#2d2d2d;

h4. Titre h4

font-family: open sans;
font-size: 25pt;
font-weight: light;
letter-spacing: 4pt;
color: #7fc144;

h5.titre formulaire

font-family: Oswald;
font-size:20pt;
font-weight: light;
color:#7fc144;

h6.sous-titre formulaire

font-family: Oswald;
font-size:15pt;
font-weight: light;
color:#2d2d2d;

lien: ceci est un lien

font-family: Open Sans Light;
font-size: 13.5pt;
color:#7fc144;

blockquote: citation très longue.

font-family: Open sans;
font-size: 10.5pt;
color:#2d2d2d;
font-weight: 700;
font-style: italic;

figcaption: Une citation punch

font-family: Open Sans Light;
font-size: 24pt;
font-weight: 100;
font-style: italic;
line-height: 40px;
color:#2d2d2d;

Paragraphe
Caticus cuteicus kitty poochy. Hiss and stare at nothing then run suddenly away find something else more interesting, yet kitty scratches couch bad kitty but purr but plop down in the middle where everybody walks.

font-family: Open Sans Light;
font-weight: 300;
font-size: 13.5pt;
color:#2d2d2d;
line-height: 32px;
letter-spacing: 1px;
text-align:justify*
*Il est aussi possible de ne pas donner de justify au texte.

Exemple de mise en page

Le titre devrait être alignée à gauche et suivi d'une balise < hr >


Les sous-titre de sections devraient eux-aussi être à gauche

Pensez à centrer le contenu de vos articles dans la page. Le texte ne devrait pas prendre l'entièreté du "< body >" mais plutôt 40% de la page (environ 600px de width si vous travaillez en px sur un écran standard).

Pour simuler les retours de lignes (les espaces entre chacun des paragraphes), pensez simplement à mettre votre texte dans plusieurs balises < p >. Elles ont déjà été stylées pour mettre la bonne marge autour de son contenu.

N'oubliez pas que pour styler en italique ou en gras, les balises < i > (pour italic/italique) et < b > (pour bold/gras) sont à votre disposition et déjà stylées pour vous faciliter la vie!

Les citations longues, elles, sont toujours dans les balises < blockquote >. Elles ont, jusqu'à présent, toujours été étroites et centrées au milieu du contenu. Ne mettez JAMAIS les guillemets, c'est inutile, elles se mettront toutes seules!

Les figcaptions, elles, servent à mettre une phrase punch qui va attirer et évidemment... puncher notre texte! Les figcaptions sont, elles aussi, toujours centrées!

COMME ÇA! FOU! REGARDEZ!

J'vous en ai passé une petite vite là hein? Normalement les liens ressemble à ça... vous avez que TROP bien raison. Mais dans les figcaptions, entre vous et moi, ça serait vachement étrange! Alors on l'a adaptée! Vous n'avez rien à faire de plus, #noWorries, tout est fait. La seule chose c'est un classique que vous savez sûrement: utilise la balise < a > pour les liens... #easy. PS: Au cas où vous n'avez pas été choqué du changement, ce dernier paragraphe était en justify.

Le logo


Il est sobre et élégant pour représenter le professionnalisme, avec des lettres rondes toutes en courbe, qui évoque une certaine douceur qui évoque confiance et assurance. À l’image de l’entreprise qui regarde toujours droit devant, le logo est moderne et orienté vers le futur.

adviz noir adviz degrader

Mais comment utiliser le logo?

Il y a beaucoup de choix... c'est vrai! Il faut savoir que si tous les choix peuvent être valides, ils ne le sont pas toujours dans toutes les circonstances.

Voilà quelques exemples et mises en situation pour évité les erreurs les plus évidentes.

Lorsque le logo est utlisé dans le pied de page d'un site. Se fier à la coulours de la typographique. Si, par exemple, le fond du pied de page est un gris très foncé et que le texte lui, est blanc, utilisez le logo blanc pour une plus d'unité.

Assurez vous que le logo soit bien aéré, il faudrait un bon 25px de marge autour de lui pour qu'il ne se perde pas dans les informations transmise, ce peu importe où il se situe dans la page.

Pour ce qui est de son utilisation en tête de page (dans les header par exemple), l'utilisation du logo en vert/dégradé est à priorisé également. Comme pour celui en pied de page, on demande d'y mettre une bonne marge, mais il doit, en plus, être centré en haut de page. En header, la taille peut varier, mais il vous est suggéré de l'utiliser à 500px de largeur, comme ceci:

Vous aimeriez utiliser le dégrader de vert à jaune sans utiliser une image? Voici la class et le code:

.green-gradiant {
	background: rgba(112, 190, 70, 1);
	background: -webkit-gradient(left bottom, right top, color-stop(2%, rgba(112, 190, 70, 1)), 
				color-stop(30%, rgba(112, 190, 70, 1)), color-stop(34%, rgba(112, 190, 70, 1)), 
				color-stop(100%, rgba(246, 255, 0, 1)));
	background: -webkit-linear-gradient(45deg, rgba(112, 190, 70, 1) 2%, rgba(112, 190, 70, 1) 30%, 
				rgba(112, 190, 70, 1) 34%, rgba(246, 255, 0, 1) 100%);
	background: linear-gradient(45deg, rgba(112, 190, 70, 1) 2%, rgba(112, 190, 70, 1) 30%, 
				rgba(112, 190, 70, 1) 34%, rgba(246, 255, 0, 1) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#70be46', 
				endColorstr='#f6ff00', GradientType=1);
}

Notez que ce bout de code est adapté à tous les navigateurs!

Les Interdits

  • Ne pas utiliser de combinaisons de couleurs qui ne sont pas approuvées. (Fiez-vous à la palette de couleur déjà définie)
  • Ne pas déformer le logo
  • Ne pas rajouter d’ombre portée
  • Ne pas mettre le logo sur un fond complexe qui empêche sa lisibilité. (évitez tous font avec des pattern avec des couleurs intenses, n'oubliez pas que le but est que le logo soit le plus lisible possible.)
  • Ne pas appliquer de rotation
  • Ne pas rajouter de contours

Images


Avec filtre

Appliquez dans un nouveau calque photoshop une couche de vert, jaune/orange en mode produit à 50%. Notez que l'opacité du filtre peu dépendre de la couleur de l'image de base choisi. En cas de doute, n'hésitez pas à demander.

Niveaux corrigés.

Diminuez l’opacité du dégrader si l’effet est étrange.

Proportion de l’image: 1200 x 500 px
width: 100%; (l'image doit prendre 100% de la taille du conteneur parent.)
margin: 15px;

Sans filtre

Pour le choix de l’image assurez vous d’en trouver suivant les thèmes suivant: métiers, parcs, organismes, humains, entreprises, OBNL, PME.

Proportion de l’image: 1200 x 500 px
width: 100%; (l'image doit prendre 100% de la taille du conteneur parent.)
margin: 15px;

Dessins/flat design

Pour le choix des images type dessins: Pensez à utiliser des images qui pourrait aider à la compréhension du contenu lier.

Proportion de l’image: 1200 x 500 px
width: 100%; (l'image doit prendre 100% de la taille du conteneur parent.)
margin: 15px;

Exemple de présentation d'entreprise & de PME

img-rules

Pour le choix de l’image assurez vous d’en trouver suivant les thèmes suivant: métiers, parcs, organismes, humains, entreprises, OBNL, PME.
Les formes du logo Adviz viennent cadrer l’image, ses courbes font écho à l’inclinaison de la typo titre, vers la droite, l’avenir.

Proportion de l’image: 1200 x 500 px
width: 100%; (l'image doit prendre 100% de la taille du conteneur parent.)
margin: 15px;

Les images de blogues

img-rules

Assurez-vous bien que les images choisies pour l'article de blogue ait un lien avec le contenu de celui-ci. Il peut s'agir d'image de gens ou de dessins qui expriment visuellement le contenu de l'article. Dans certains contextes, on joue moins sur l'humain et plutôt sur le conceptuel. Un matin brillant sur une métropole...ou encore l'idée que nos produits parcourent le globe. Assurez-vous de ne pas utiliser une image trop petite pour son utilisation (ex: n'utilisez pas une image de 800px si vous avez l'intention de l'utiliser pour une bannière qui fera 1200px!)

Proportion de l’image: Elles peuvent varier, favorisez les choix plus carré que rectangulaire.
width: 400px;
Cette taille est à titre indicatif, elle peut varier selon la largeur du contenu de la page web. 400px serait idéale si vos articles de blogues, pas exemples, font 600px de largeur.
margin: 0 auto;

Suggestion

Pour le choix de l’image de présentation d'entreprise, de pme, rappelez vous de baser vos recherches dans les photos de PME, OBNL, les familles, enfants, des gens heureux qui s'entraident. Sentez vous à l'aise d'y inclure un peu de nature, ça fera par la même occasion un rappel de couleur du vert d'Adviz, un lien subtil, toujours apprécié.

Dans certains contextes, on joue moins sur l’humain et plutôt sur le conceptuel. Un matin brillant sur une métropole, ...ou encore l’idée que nos produits parcourent le globe sont à mettre également de l'avant.

Les icônes


La ligne du dessin est fine, uniformisée au contour. Les icônes évoquent à la fois des éléments faisant référence aux services de Adviz, mais se différencient également par l’ajout d’éléments plus humoristiques voire incongrus, à saupoudrer épisodiquement dans les documents.

icones icones icones icones icones icones icones icones icones icones icones icones icones icones icones icones icones icones icones

Les icones, quand quoi comment?

Assurez-vous lorsque vous utiliser les icones de réseaux sociaux de bien suivre leur brand guide à eux-aussi. En voilà quelques un:

Pour les icônes d'Adviz, la largeur est de 100px. Il est possible d'adapter selon les situations, utilisez votre bon jugement.

Si vous utilisez les icones de réseaux sociaux, assurez-vous de quelques point:

  • Prévilégiez les vecteurs (disponible sur fontawesome par exemple)
  • Assurez vous que tous vos icônes aient les mêmes proportions et marges. Utilisez des margin de 5px. (margin:5px;)
  • Assurez-vous également que tous les icones aient la même géométrie. N'allez pas placé un icône Facebook rond... à côté d'un icône de Twitter carré! Faites un choix et tenez-y vous pour plus de cohésion.
  • La largeur des icônes de réseaux sociaux ne devrait pas être supérieur à 50px (width:50px;)

Les formulaires


Formulaire étroit, quand l'utiliser?

Le formulaire étroit est à utiliser dans les pages qui nécessite la demande d'informations au "client". La collection doit être restreinte, il n'est pas question ici d'utiliser le petit formulaire pour demander de commencer un projet, mais plutôt pour, par exemple, récolté des commentaires, suggestions etc.

FORMULAIRE
Il est possible de mettre un sous titre informatif ici

Formulaire large sur une seule colonne?

Le formulaire large sur une seule colonne peut être utiliser sur une page vide, idéalement. Il s'agit de ne pas surcharger le "client" d'information dans le peu d'espace qu'offre l'écran d'ordinateur.

FORMULAIRE
Il est possible de mettre un sous titre informatif ici

Formulaire large sur deux colonnes?

Le formulaire large sur deux colonnes peut être utiliser sur une page vide, également. Comme pour l'autre formulaire large. Il s'agit ici de déterminer votre préférence entre les deux.

FORMULAIRE
Il est possible de mettre un sous titre informatif ici

Les listes


  • liste item #1
  • liste item #2
  • liste item #3
  • liste item #4
  • liste item #5
  • liste item #1
  • liste item #2
  • liste item #3
  • liste item #4
  • liste item #5
  • liste item #1
  • liste item #2
  • liste item #3
  • liste item #4
  • liste item #5

Les tableaux


TITRE 1

TITRE 2

TITRE 3

Element 1 9518 du texte
Element 2 7326 du texte
Element 3 4162 du texte

TITRE 1

TITRE 2

TITRE 3

Element 1 9518 du texte
Element 2 7326 du texte
Element 3 4162 du texte

TITRE 1

TITRE 2

TITRE 3

Element 1 9518 du texte
Element 2 7326 du texte
Element 3 4162 du texte

TITRE 1

TITRE 2

TITRE 3

Element 1 9518 du texte
Element 2 7326 du texte
Element 3 4162 du texte