Guide de styles du groupe 5D

La marque

I. Notre équipe

L’équipe des 5D est une équipe projet d'étudiants qui travaillent en coopération dans la création numérique. Fondée en octobre 2021, notre groupe a réuni cinq étudiants passionnés par le numérique aux profils et aux parcours bien différents. Aujourd’hui, notre équipe est composée de 4 membres aux compétences pluridisciplinaires pour créer des livrables de la meilleure qualité possible grâce aux talents de chacun de nos membres.

• Malo Robic, développeur web et mobile (Chef de projet)
• Johan Malapert, modélisateur 3D et infographiste
• Alexandre Grynia, compositeur, designer sonore et communicant
• Romain Turban, webdesigner et infographiste

II. Nos missions

Notre objectif est de proposer un divertissement sur des concepts connus en y apportant une nouvelle dimension grâce au développement des nouvelles technologies.

III. Notre personnalité

Notre image est également parfaitement reflétée par le nom de notre groupe. En effet, sous le nom des 5D, notre équipe était à l'origine composée de 5 membres aux rôles biens divers mais avec un point en commun, un nom de métiers du numérique commençant par la lettre D, de designeur à développeur. Par ailleurs, notre groupe propose des services correspondant à cinq corps de métiers avec comme initiale le D : développeur web, développeur mobile, designer sonore, UI/UX, graphique.

Enfin, les 5D expriment cette multitude de facettes, soit les cinq dimensions que nous possédons grâce à l’union des compétences de nos membres.

IV. Promesses et engagements

Notre entreprise à pour vocation le partage du sujet de l’intelligence et stupidité artificielle. Nous nous engageons à fournir des produits centrés sur ce sujet, avec au cœur de notre cible les étudiants intéressés par les nouvelles technologies. Le groupe des 5D est fondé autour de cette problématique, et produit différents livrables pour y répondre.

V. Projets

Récemment créé, notre groupe n’a pas encore finalisé de projet mais travaille en ce moment sur un projet innovant.

Actuellement, notre équipe travaille sur un projet universitaire sur la thématique de l’intelligence artificielle appelé Criminial. Il s’agit d’un jeu mobile à travers lequel l’utilisateur incarne un détective humain et affronte un détective robot dans une enquête meurtrière fictive. L’objectif étant de parvenir à trouver le criminel plus rapidement que l’intelligence artificielle. Cette application est un croisement entre le célèbre jeu du “Qui-est-ce ?” ainsi que l’incontournable jeu d’enquête Cluedo. En parallèle, le groupe 5D développe aussi une narration interactive centrée autour du déroulement d’une enquête, qui sera bientôt disponible en tant que site web. Enfin, le groupe crée aussi plusieurs contenus multimédias statiques, comme un trailer vidéo et une affiche.

Identité visuelle

I. Logo

Le logo 5D peut être utilisé dans ses couleurs d’origines, soit le bleu Havelock Blue #5473B6 et le jaune Rob Roy #E0AA4A, ou en noir et blanc. Pour plus d’informations sur les couleurs et la charge graphique du groupe 5D, se référer à la section B) Les couleurs.

Le logo 5D peut être décliné en 3 tailles différentes :

• petite : 32 par 32 pixels
• moyenne : 64 par 64 pixels
• grande : 128 par 128 pixels

Une version icône est aussi disponible, pour utiliser en tant que favicon ou icône d’application par exemple. Le ratio hauteur/largeur doit toujours être le même, et le logo ne doit pas être déformé d’une quelconque manière. Ces règles s'appliquent aussi pour les autres logos du groupe 5D.

II. Couleurs

La couleur primaire ou dominante du groupe 5D est le Havelock Blue #5473B6. Ce bleu doit toujours être utilisé tel quel, ou respecter une déclinaison de la liste suivante :

La couleur secondaire ou couleur d’accent est le jaune Rob Roy #E0AA4A. Idem, il doit être utilisé tel quel ou respecter une déclinaison de la liste suivante :

Le bleu foncé Space Cadet #36364E constitue la dernière couleur de l’harmonie colorée de 5D, et doit être utilisée de manière discrète.

Les couleurs constituent l’identité du groupe 5D, et ne doivent jamais être altérées ni modifiées.

III. Typographies

Nous utilisons deux typographies différentes, avec différentes graisses.

Ces typographies sont employées suivant le contenu qui est mis en avant. Bowlby One SC est la typographie utilisée uniquement pour les titres principaux. Elle se caractérise par son style atypique et très marqué qui la rend particulièrement visible et attractive. Cette police doit être utilisée seulement pour le texte “Criminial” et pour les noms de produits proposés par 5D, mais jamais dans le corps de texte ou dans des titres de contenu. Cette police est exclusive aux noms des produits.

De l’autre côté, la typographie Rubik est quant à elle beaucoup plus simple et plus sobre afin de maximiser la lisibilité. Elle est utilisée pour les titres de niveaux inférieurs ainsi que pour les textes courants.

Titres : BOWLBY ONE SC - 24px

Sous titres : Rubik Bold - 20px

Paragraphes et corps de texte : Rubik - 16px

Bowlby One SC et Rubik sont des typographies sans-serif, ce qui rend la lecture plus agréable et plus confortable. Ces polices sont sous licence Open Font License. Elles peuvent être utilisées librement pour tout produit ou projet imprimés ou numériques, commerciaux ou autres.

IV. Iconographie

Notre identité visuelle repose sur une iconographie bien définie. D’une part, les icônes améliorent l’aspect visuel et esthétique d’un support. Elles le rendent plus attractif et plus agréable à observer. Par ailleurs, l’utilisation d’icônes favorise la compréhension du support et facilite la lecture de ce dernier. Les icônes que nous avons choisi sont en accord avec l’harmonie colorée définie dans notre charte graphique. Les icônes doivent toujours être accompagnées d’un label explicatif :

V. Images et illustrations

5D utilise des aplats de couleurs et un style qui s’apparente au “flat-design” pour la plupart de ses contenus, notamment pour les avatars du produit Criminial. Rien ne vous empêche d’utiliser d’autres styles graphiques, mais cela doit rester cohérent et adapté avec le reste du projet : même univers, même atmosphère… Ainsi, nous vous encourageons à utiliser des illustrations en format vectoriel (svg). Les images doivent toujours être de bonne qualité :

Rédaction

I. Langue et grammaire

En termes de langage, nous utiliserons un langage courant puisqu’il correspond à celui qui est utilisé dans la vie courante, soit le plus régulièrement et facilement. Ce choix se porte pour s’adresser à notre cible de manière à utiliser une langue à la portée de tous.

Étant donné que notre projet est à destination d’un public cible français, l’intégralité de nos produits et de notre communication se fait en français.

Les graisses de textes

La typographie que nous utilisons majoritairement est la police Rubik qui possède notamment 14 graisses différentes (7 graisses et leurs adaptations en italique). Il faut utiliser choisir les graisses avec cohérence.

Pour tout texte, il faut utiliser la typographie Rubik Regular pour présenter les informations qui nous concernent. Au niveau des boutons, il faut utiliser la typographie Rubik Medium et Rubik Light au niveau des inputs. Enfin, concernant les titres, il faut se référer à la section II- C) Typographie.

Les capitales

Il faut débuter les phrases avec forcément une majuscule et succédé par des minuscules pour tout le contenu nous relatant.

Les nombres

Pour les nombres, il n’est pas interdit de les écrire littéralement mais il est préférable et recommandé de les écrire en chiffres pour simplifier leur lecture et la compréhension.

Les phrases actives

Il faut privilégier la forme active, où le sujet fait l’action, à la forme passive pour toutes les tournures des phrases.

Les abréviations

Il ne faut pas utiliser d'abréviations dans la communication externe pour s'adresser aux clients.

II. Vocabulaire et noms propres

Le vocabulaire doit rester simple, compréhensible et respecter les critères généraux d’écriture pour le web. L’orthographe et la syntaxe doivent êtres soignées. Les phrases doivent êtres simples et concises. Nous avons une palette de mots et expressions que nous employons régulièrement, quel que soit le support utilisé. Voici une liste non exhaustive : innovation, imagination, changement, découverte, originalité, savoir-faire, technologie, technique, application, produit, service, dispositif…

Concernant les noms propres (les produits proposés par le groupe notamment), certaines règles sont à respecter. Le groupe 5D développe plusieurs produits : Criminial, l’algorithme Sherbot. Ces noms doivent toujours être capitalisés et écrits correctement.

III. Style d'écriture

Le registre de langue doit être courant. Criminial se voulant tout public, les registres soutenu, familier et grossier sont proscrits. Ainsi tout le monde est susceptible de porter de l’attention à nos différents moyens de communication.

Interactivité

I. Boutons

Les boutons sont des rectangles dont les coins sont arrondis de 20 points et accompagnés d’une ombre portée sans flou avec un décalage de 2 sur les axes X et Y. Les couleurs respectent les quatre choisies pour la charte graphique, soit Havelock Blue #5473B6, Rob Roy #E0AA4A et Space Cadet #36364E. Voici comment est construit un bouton :

Un des éléments importants est la taille minimale du bouton : par soucis de facilité d’utilisation, un bouton ne peut avoir une taille inférieure à 55 pixels s’il comporte du texte. L'arrondi doit aussi être respecté. Voici un exemple de bonne et de mauvaise utilisation de bouton :

La police du texte est également en Rubik, de gras médium, et dont la taille dépend de celle du bouton en prenant en compte le fait que le texte doit prendre un maximum d’espace. La couleur de la police doit être blanc. Un bouton peut également contenir une icône qui représente l’action qui découle de l’interaction avec celui-ci. L’icône doit être blanche et peut être pleine ou de forme définie par ses bordures.

II. Champs de saisie

Voici un exemple de formulaire comportant différents champs de saisie. Les propriétés les caractérisant sont illustrées sur le visuel ci-dessous.

De la même manière que les boutons, les champs de formulaire sont uniformes dans tous les produits du groupe des 5D; ainsi, leurs caractéristiques visuelles et fonctionnelles doivent toujours êtres conservées :

III. Ambiance sonore

Clic sur les éléments

Le sound design issu des interactions de l’utilisateur avec les différents éléments présents est dans une esthétique moderne et sobre. De cette manière, les interactions ne seront pas une source de distraction pour le joueur et pourra également profiter de l’ambiance sonore s’il le souhaite et se concentrer sur la résolution du jeu.

Bande-son

Les différentes bandes sonores restent dans un style orchestral et peuvent être combinées à des éléments sonores provenant de l’esthétique électro pour avoir la présence de l’aspect technologique dans la musique. Celles-ci comprennent des citations de fragments musicaux d’une pièce à l’autre afin de créer une continuité scénaristique dans la diégèse sonore, permettant alors d’enrichir l’univers du jeu.

Musique de lancement de l’application

La musique du lancement de l’application est brève et moderne, avec des sons synthétiques et doux. Elle soutient et ponctue les mouvements du logo lors de son animation tout en annonçant sonorement le lancement de l’application.

Ressources

I. Suite Adobe

Pour la création des différents éléments visuels, notre équipe utilise au quotidien différents logiciels de la suite Adobe. Pour de la création visuel comme par exemple des logos, des affiches, des flyers, etc. notre équipe se sert des logiciels Illustrator, InDesign, Photoshop.

II. Pinterest et Dribbble

Pour trouver toutes ces idées innovantes, l’équipe des 5D se rend régulièrement sur Pinterest et Dribble pour se tenir au courant des dernières tendances et effectuer une veille.