Guide de style
Soutien à la mise en page et à l'identité d'entreprise, pour un aspect uniforme et professionnel
Parce que nous valorisons l'individualité, nous demandons que les normes de formatage suivantes soient respectées dans la mesure du possible :
- Télécharger Logo VanRoey (vectoriel)
- Télécharger Logo VanRoey White (vectoriel)
- Télécharger Icône (vecteur) couleur / Blanc
Couleurs
Dans notre communication, nous n'utilisons qu'un nombre limité de couleurs. Veuillez ne pas vous en écarter. Vous pouvez varier en ajustant la transparence.
Bleu VanRoey : #287ABE (Pantone 285C)
Couleur du support VanRoey :
#47687f
Appel à l'action vert : #47D7AD
Fond doux : bleu : #F0F6FA
Texte et titres "foncés" : #384349
Les images peuvent également être recouvertes avec le Bleu VanRoey sur 33% opacité Si elles sont un peu trop chargées, trop lumineuses ou colorées... Une méthode facile pour que l'image s'intègre mieux au reste du design.
Polices de caractères
Conseils généraux :
- Essayez toujours VanRoey écrire
- Utilisez une hauteur de ligne et un espace suffisant entre les paragraphes.
- Assurez-vous que en gras et se distinguent normalement les uns des autres
- Veillez à ce que la longueur physique des phrases ne soit jamais trop longue.
(c'est-à-dire passer assez rapidement à la ligne suivante) - Ne le transformez pas en livre de coloriage.
- Nous essayons aussi tellement de "Kempus" au lieu de "le Kempus" à utiliser, idem avec Roeftop
Nous utilisons délibérément 2 polices de caractères web très populaires : Ils se chargent donc rapidement et sont très compatibles.
Poppins
Titres, boutons, éléments interactifs ou de menu...
- Télécharger : https://fonts.google.com/specimen/Poppins
- Vous pouvez utiliser des styles fins et épais.
- Important : N'utilisez que des majuscules !
Open Sans
Texte brut (paragraphes...<p>...)
- Télécharger : https://fonts.google.com/specimen/Open+Sans
- Segoe UI Semilumière
- Segoe UI Semien gras (pour le texte en gras)
- titres : Segoe UI BLACK Uppercase (majuscules)
Dans le logo, la police "Dense Régulier" utilisé.
Vous devez donc l'installer. En général, nous l'utilisons aussi dans les titres de documents. Pour le reste (texte normal), n'hésitez pas à utiliser Segoe ui Semilight et Segoe ui Semibold.
Couleurs :
Vert foncé - #535648 | C62 M51 Y67 K35
Vert clair - #8B9571 | C47 M31 Y62 K5
Gris - #545554 | C64 M56 Y56 K32
Boutons
Essayez de limiter le nombre de boutons. Ils ne doivent servir que d'"appel à l'action" (l'action la plus importante de la page) et doivent donc attirer beaucoup d'attention.
- Donnez-leur suffisamment d'espace (ne les collez jamais les uns aux autres et veillez à ce que l'action soit toujours claire).
- Les angles arrondis sont autorisés (petit rayon)
- Texte
- Police : Poppins 700 Uppercase
- couleur blanche ou #384349
- Les ombres ne sont pas nécessaires par défaut, elles sont facultatives au survol.
- Au survol (agréable à avoir)
- Une animation subtile (ici 'bob' a été choisi)
- éclaircir un peu la couleur de fond :
- Vert : #47D7AD devient #63E7C0
- Bleu : #287ABE devient #439BE5
- donnent une ombre/un éclat doux :
- Caractéristiques : vertical 14px, fade 34px ; spread : -4px
- Vert : rgba(71, 215, 173, 0.44)
- Bleu : rgba(40, 122, 190, 0.29)
Si l'utilisateur dispose de deux options (par exemple, négative : "annuler" et positive : "appliquer"), utilisez l'exemple 1 ou 2.
Si l'utilisateur ne dispose que d'une option négative, vous pouvez utiliser l'option 3, le bouton blanc avec une bordure sombre (2px, #384349).
Le coin
Si nous utilisons des lignes ou des angles obliques quelque part, nous essayons toujours de les aligner avec l'un des côtés du carré droit (tourné de 120°).). Vous pouvez voir que ce dernier est parallèle au V du logo VanRoey.
Vous pouvez également utiliser cet élément de mise en page comme nous le faisons souvent sur le site ou dans d'autres documents de marketing (par exemple, vous pouvez y placer le logo, y incorporer une image... ou simplement l'utiliser comme un élément de remplissage de page supplémentaire dans une couleur très douce telle que #F0F6FA)
Éléments de mise en page
- Depuis la fusion avec EuroSys, nous utilisons parfois des coins arrondis. Mais n'en faites pas trop s'il vous plaît 🙂 .
- Ne changez JAMAIS radicalement la couleur des boutons au survol.
- Bordures : juste #abe287 avec 10px d'épaisseur
- Il faut toujours prévoir suffisamment de rembourrage à l'intérieur d'un objet pour que le texte ne tombe pas trop près des bords.
- On utilise rarement, voire jamais, l'ombre, mais quand on le fait :
- très doux, spacieux
- Utilisez la même couleur que le cadre ou le bouton ou simplement le gris s'il s'agit d'un bouton ou d'une surface blanche.
Icônes
Nous utilisons généralement les glyphes des bibliothèques d'icônes (vous pouvez les consulter sur leur site web ou avec %windir%\system32\charmap.exe)
- FontAwesome
- Actifs Segoe MDL2 (intégrés à Windows 10)
- Icônes SVG gratuites à télécharger sur Le projet Noun
Images
- De préférence de la meilleure qualité possible, mais jamais trop lourde (< 300kb pour le web)
- PNG avec transparence : premier passage https://compresspng.com compresser
- Icônes/logos : de préférence : SVG pour qu'il soit parfaitement net sur tous les écrans et dans toutes les tailles !
Titre ALL CAPS POPPINS
Cadre frappant avec un exemple de paragraphe. Notez le rembourrage autour du texte Liens en gras et/ou soulignés. Notez également les coins. Nous utilisons également des coins arrondis (rayon de 10 ou 15px) depuis l'acquisition d'EuroSys et le renouvellement du loho.
Utilisez suffisamment d'espace entre les phrases et les paragraphes pour que tout soit clair et lisible.
TITRE TOUT CAPS POPPINS
En dehors des heures de bureau, le week-end et les jours fériés, vous trouverez de plus amples informations à ce sujet sur notre site Internet. A gauche en gras, VanRoey Blue, ...
