LE LOGOTYPE

Plusieurs versions sont disponibles. Le logo principal à utiliser est sur fond blanc avec baseline. Il est possible de l’utiliser sur fond bleu avec une prédominance de blanc dans le texte. Pour des usages en plus petites dimensions, il est possible de l’utiliser sans sa baseline.

• Formats fournis : SVG & PNG

• Laisser un espace minimal de 16px autour :

• Mauvaises pratiques :

LES GAMMES COLORIMÉTRIQUES

La gamme principale

La gamme principale se compose de bleus et de gris. L’interface est plutôt claire dans son ensemble avec des jeux de gris et des touches de bleu profond, notamment pour les boutons et les survols.

La gamme secondaire

Afin de compléter cette gamme relativement sobre, 12 couleurs ont été définies pour accompagner la visibilité des compétences. Chaque couleur correspond à une compétence. L’association est prédéfinie en amont dans le code, il n’y a pas de personnalisation possible. Cette palette spécialement conçue pour les compétence repose sur 4 couleurs principales déclinées en 4 autres en ton clair et 4 dernières en ton foncé.

La gamme tertiaire

Une dernière gamme vient compléter les deux précédentes. Moins prédominante, elle n’en reste pas moins essentielle. La sobriété de l’interface voulu permet de mettre en lumière cette troisième palette. Il s’agira essentiellement de couleurs surlignant accentuations et alertes dans la navigation : les badges, les statuts et les notifications.

Ces couleurs se regroupent en deux tons pour deux types d’usages : il est possible d’utiliser le ton foncé en fond avec du texte blanc par-dessus (pour les notifications notamment) mais l’usage pré-requis est la bichromie ton sur ton. Ainsi, cette troisième palette permet d’offrir aux couleurs des deux premières palettes, un sous-ton. Elle embarque également d’autres nouvelles couleurs qui permettent de répondre aux nombreux statuts et badges disponibles dans l’interface.

Contrastes à respecter

Les couleurs utilisées dans ce design system respectent les critères d’accessibilité définis par le RGAA. La majorité d’entre elles proviennent directement du DSFR, garantissant leur conformité et leur robustesse. Les nouvelles teintes ajoutées ont été conçues en respectant les normes de contraste (notamment les exigences équivalentes au critère 3.2.1 WCAG). Chaque combinaison de couleurs a été préalablement testée et validée afin d’assurer une lisibilité optimale et une accessibilité renforcée.

Site de vérification d'accessibilité des contrastes : https://www.siegemedia.com/contrast-ratio

LA POLICE DE CARACTÈRES

[police à définir], la police principale

• La police utilisée dans COFOLIO est Luciole [police définitive en attente], téléchargeable [ici] [à définir]. La future police de caractères COFOLIO doit offrir un meilleure expérience de lecture possible. Pour ce faire, on privilégiera une police avec, au minimum, quatre graisses (light, medium, regular et bold) afin d'apporter le contraste nécessaire dans la plateforme. Les blocs textes étant nombreux et denses, les simples changements de taille ne suffisent pas (de 12 jusqu'à 48px). Afin de compléter ce critère essentiel, il faudra une police moderne et minimaliste pour permettre une lisibilité de lecture claire et agréable. Un caractère amical et léger est un plus pour la satisfaction utilisateur. En complément de la police de caractère et, pour répondre aux enjeux d'accessibilité et de l'école inclusive, il est impératif d'apporter une solution supplémentaire qui pourra substituer la police de caractère principale en cas d'handicap visuel.

• Les règles de hiérarchie :
  • H1 62/94
  • H2 48/56
  • H3 40/60
  • H4 32/48
  • H5 26/40
  • H6 20/30
  • Body Subtitles S1 20/30 regular ou bold
  • Body Subtitles S2 18/27 regular ou bold
  • Body B1 16/24 regular ou bold
  • Body B2 14/21 regular ou bold
  • Caption 12/18
  • Button 14/14

LES COMPOSANTS UI

L’interface utilisateur de COFOLIO repose sur un ensemble de composants standardisés, réutilisables et cohérents. Ces composants constituent la base du design system et garantissent une expérience homogène, intuitive et accessible sur l’ensemble de la plateforme.

Chaque composant a un rôle précis (navigation, action, affichage d’information, mise en page) et répond à des règles fonctionnelles, ergonomiques et graphiques définies en amont. Leur bonne utilisation assure :

• La cohérence visuelle : respect de la charte graphique et maintien d’une identité claire.
• L’efficacité fonctionnelle : interactions compréhensibles, fluides et prévisibles pour l’utilisateur.
• L’accessibilité : respect des bonnes pratiques (contraste, lisibilité, navigabilité clavier, lecteurs d’écran).
• L’évolution constante : composants documentés, modulaires et réutilisables dans différents contextes.

La documentation qui suit décrit en détail chacun de ces composants : leur rôle, leurs variantes, leurs propriétés, leur comportement, ainsi que leurs contraintes techniques et ergonomiques. Cette approche permet aux équipes de conception et de développement de partager une vision commune et d’assurer une continuité tout au long du cycle de vie du produit.

Les composants sont répartis en quatre catégories, elles-mêmes scindées par sous-catégories.

Catégorie Navigation et structure de page

Le header

• Description

Composant qui apparaît en haut de la page. Il sert de point de navigation principal et contient des informations clés pour l'utilisateur, comme le nom de l'application, l'état de la session, les notifications et des outils de recherche. Il s'agit d'un élément réactif qui persiste sur l'ensemble du site.

• Variantes :

Il existe des variantes en fonction du profil de l'utilisateur : étudiant, enseignant

• Styles :

La couleur principale est le bleu foncé pour les liens et les icônes, et blanc pour le fond. Les boutons et les liens sont soulignés ou ont un effet de survol. Les icônes sont simples et en ligne. La barre de recherche a des coins légèrement arrondis.

• Taille :

Le header a une hauteur fixe pour assurer une cohérence visuelle sur toutes les pages : 168px

• Comportement :

Le header est fixe en haut de la fenêtre de navigation, il ne disparaît pas lorsque l'utilisateur fait défiler la page. Le menu de navigation principal change en fonction de la page active.

• Clic :

Clic sur un lien de navigation : redirige l'utilisateur vers la page correspondante. Clic sur les icônes : ouvre des fonctionnalités spécifiques (boîte de réception pour "Messagerie", liste des notifications pour "Notifications"). Clic sur le champ de recherche : placer le curseur dans le champ pour que l'utilisateur puisse taper sa requête. Le clic sur l'icône de la loupe lance la recherche. Clic sur le profil de l'utilisateur : ouvre un menu déroulant avec des options supplémentaires (profil, paramètres, déconnexion).

• Si désactivé :

Selon les paramétrages des établissements, les principaux liens de navigation "Réussir ma Formation" ou "Construire mon projet de vie" peuvent être visibles ou non visibles par les enseignants et étudiants.

• Contraintes :

Responsive : s’adapte en largeur 100% sur mobile avec texte qui disparait au besoin. Accessibilité : il doit être accessible aux utilisateurs ayant des limitations visuelles (via les technologies d'assistance comme les lecteurs d'écran). Le contraste des couleurs doit respecter les normes d'accessibilité (WCAG). Limites de caractères : la longueur des noms d'utilisateurs et des nombres de notifications doit être gérée pour ne pas déborder. Surcharge : le header ne doit pas contenir trop d'informations pour éviter d'être encombré.

• Exemple visuel :

Le Footer

• Description :

Composant qui se trouve en bas de chaque page web. Il sert de point de navigation secondaire et contient des informations importantes pour l'utilisateur, telles que des liens vers les pages "À propos", "Aide", "Ressources" et les mentions légales. Il comprend également des liens vers les réseaux sociaux et l'avis de droit d'auteur.

• Styles :

Sensiblement identique au header, l'arrière-plan est blanc, tandis que le texte est en gris foncé ou en noir pour un contraste optimal. Les liens cliquables sont en bleu pour se démarquer. Les icônes des réseaux sociaux reprennent les couleurs de leurs marques. Une zone bleu de 100px est présente pour y intégrer les informations des établissements sous licence.

• Taille :

Le footer a une hauteur fixe pour assurer une cohérence visuelle sur toutes les pages : 572px

• Comportement :

Le footer est fixe en bas de chaque page web.

• Clic :

Clic sur un lien de navigation : redirige l'utilisateur vers la page correspondante. Clic sur le bouton "Contacter l'administrateur" : ouvre une fenêtre modale avec un formulaire de contact ou redirige vers une page de contact spécifique. Clic sur les icônes de réseaux sociaux : ouvre une nouvelle fenêtre de navigateur qui dirige l'utilisateur vers le profil de l'entreprise sur le réseau social sélectionné.

• Si désactivé :

Si un lien ou un bouton est désactivé, il devrait être affiché en gris plus clair et ne pas répondre aux clics, pour indiquer qu'il n'est pas actif pour le moment.

• Contraintes :

Accessibilité : le contraste des couleurs doit respecter les normes d'accessibilité (WCAG) pour être lisible par tous. Adaptabilité : le footer doit s'adapter aux différentes tailles d'écran, en particulier pour les versions mobiles, où les colonnes peuvent se superposer. Maintenance : les liens et les icônes doivent être facilement mis à jour via un système de gestion de contenu (CMS) ou un fichier de configuration, sans nécessiter de changements dans le code.

• Exemple visuel :

Le menu latéral

• Description :

Le menu latéral est un composant de navigation secondaire qui apparaît sur le côté de l'écran. Il offre un accès rapide aux différentes sections d'une page ou d'une application. Le composant est collapsible (il peut se replier) et peut afficher un sous-menu en fonction de la section active.

• Variantes :

Version déployée : le menu est complètement ouvert, montrant les icônes et les libellés de chaque section. C'est l'état visible dans l'image. Version repliée : le menu est réduit à une largeur minimale, n'affichant que les icônes. Un bouton de bascule est visible pour le redéployer. Version avec sous-menu : si l'utilisateur est dans une section qui contient des sous-sections (par exemple, "Mon Parcours"), un sous-menu peut apparaître sous l'élément principal, soit de manière permanente, soit au survol de l'élément de menu.

• Styles :

L'arrière-plan du menu est blanc avec une ombre portée sur la droite et/ou un contour gris si sur fond blanc. L'élément de menu actif a un fond bleu foncé pour se démarquer (variantes avec les couleurs des compétences). Le texte et les icônes sont en gris foncé par défaut et en blanc lorsqu'ils sont actifs.

• Taille :

Largeur déployée : une largeur fixe, assez large pour contenir les icônes et le texte -> 266 px Largeur repliée : une largeur minimale, juste assez grande pour l'icône et un petit padding -> 71px Hauteur : la hauteur du menu s'étend sur toute la hauteur de la fenêtre du navigateur.

• États :

Par défaut : l'état du menu lorsqu'il est chargé pour la première fois est activé sur la première section du menu. Pour les niveaux de compétences et les AMS, la section active est le niveau de compétence ou l'activité en cours. Actif : l'élément de menu correspondant à la page actuelle. Il est visuellement mis en évidence (ex. : fond bleu foncé, texte blanc). Survol : lorsque l'utilisateur passe la souris sur un élément, le contour et le label s'active dans la couleur du thème. Replié/Déployé : l'état visuel du menu, qui change en fonction de l'action de l'utilisateur sur le bouton de bascule.

• Comportement :

Persistance : le menu latéral reste en place lorsque l'utilisateur fait défiler la page. Basculement : un bouton permet de passer de l'état "déployé" à l'état "replié" et vice-versa. L'icône du bouton change pour indiquer l'action. Sous-menu : lorsque le menu est en mode "déployé", le sous-menu s'affiche sous l'élément parent. Il peut rester visible jusqu'à ce que l'utilisateur clique sur un autre élément principal ou qu'il soit fermé. Ce sous-menu se met à jour en fonction de l'endroit où se trouve l'utilisateur sur la page.

• Clic :

Clic sur un élément de menu principal : redirige vers la page ou la section correspondante. Si l'élément a un sous-menu, le clic peut le faire apparaître ou le masquer. Clic sur le bouton de bascule : replie ou déploie le menu latéral.

• Si désactivé :

Un élément de menu peut être désactivé si l'utilisateur n'a pas la permission d'y accéder. L'élément serait alors affiché en gris plus clair et ne serait pas cliquable. Un message peut apparaître au survol pour expliquer la raison (ex : "Ce niveau de compétence n'est pas encore initié")

• Contraintes :

Accessibilité : le menu doit être navigable au clavier et compatible avec les lecteurs d'écran. Les étiquettes et les états doivent être bien définis. Responsive : la version repliée est essentielle pour l'affichage sur des écrans plus petits. Gestion des états : l'état actif du menu et du sous-menu doit être mis à jour correctement à chaque changement de page. Performance : le mécanisme de bascule (animation de déploiement/repli) doit être fluide pour ne pas ralentir l'interface utilisateur.

• Exemple visuel :

La pagination

• Description :

La pagination est un composant qui permet aux utilisateurs de naviguer à travers des résultats de recherche ou des listes de données volumineuses. Il est divisé en deux parties : un contrôle de pagination supérieur et un contrôle de pagination inférieur.

• Variantes : Le composant a une seule variante visible qui inclut tous les contrôles de navigation et d'affichage. Pour une version mobile, les éléments devront être réorganisés et simplifiés.
• Styles :

Couleurs : les éléments non actifs sont en gris clair. Les boutons actifs et les icônes de navigation sont en bleu foncé, la couleur principale de l'interface. Typographie : le texte des labels, comme "Nombre de résultats par page", est de 14px Éléments : les boutons de la liste de résultats ont un fond blanc et une bordure grise. Le bouton actif est un rectangle plein bleu. Les boutons de navigation sont rectangulaires et contiennent des icônes de flèches.

• État :

La hauteur des boutons est standard pour l'interface et la largeur des éléments varie en fonction du texte et du nombre de résultats.

• Comportement :

La modification du nombre de résultats par page et la navigation vers d'autres pages mettent à jour la liste des cartes affichées. Le nombre total de pages et la page actuelle sont mis à jour dynamiquement en fonction du nombre total de résultats et de l'option de résultats par page sélectionnée.

• Clic :

Clic sur une option de résultats par page : met à jour la liste pour afficher le nombre de cartes sélectionné. Clic sur les boutons de navigation : les boutons "Page précédente" et "Page suivante" permettent d'aller à la page correspondante. Les icônes de double flèche permettent de sauter à la première ou à la dernière page.

• Si désactivé :

Comme mentionné dans les états, si l'utilisateur est sur la première ou la dernière page, les boutons de navigation pertinents sont désactivés pour éviter les clics invalides. Ils apparaissent en gris et ne répondent pas au survol.

• Contraintes :

Cohérence : les deux sections de pagination (haut et bas) doivent être synchronisées, affichant la même page actuelle et le même nombre total de pages. Responsive : les contrôles doivent pouvoir se redimensionner et adapter pour des vues plus petites.

• Exemple visuel :

Catégorie Composants interactifs et boutons

Boutons :

Bouton principal (Primary Button)

• Description :

Il est conçu pour déclencher une action ou un événement lorsqu'il est cliqué. Il peut être utilisé pour soumettre un formulaire, annuler une action, ouvrir une fenêtre, ou naviguer vers une autre page.

• Style :

bleus, gris, couleurs des compétences flat, stroke 2 tailles

• États :

Par défaut (Default) : l'apparence normale du bouton. Survol (Hover) : lorsque la souris passe sur le bouton, le fond et le texte change de couleur ou la bordure apparait pour indiquer qu'il est cliquable. Actif (Active) : l'état du bouton lorsqu'il est pressé. Désactivé (Disabled) : le bouton est grisé, n'est pas cliquable et n'a aucun effet de survol. Il indique que l'action n'est pas possible dans le contexte actuel. Chargement (Loading) : un indicateur de chargement (spinner) apparaît à la place du texte ou de l'icône, signalant que l'action est en cours. Propriétés : Texte facultatif (max. 25 caractères, verbe d’action), Icône facultative à gauche, au moins un des deux éléments doit être présent. Issue à privilégier : utilisation texte + icône Comportement : Interaction : le bouton réagit au clic. Validation : le bouton peut rester désactivé jusqu'à ce que les conditions nécessaires à l'action soient remplies (ex. : un formulaire valide). Feedback : après un clic, le bouton peut changer d'état (ex. : passer à l'état de chargement, puis à l'état désactivé) pour donner un retour visuel à l'utilisateur.

• Clic :

exécute l’action définie par le contexte (soumission, redirection, ouverture modale).

• Si désactivé :

aucune action, curseur non interactif.

• Contraintes :

Responsive : s’adapte en largeur 100% sur mobile avec texte qui disparait au besoin.

• Exemple visuel :

Autres boutons :

• Description :

Le composant "autres boutons" regroupe trois types d'éléments d'interface utilisateur essentiels pour recueillir les choix des utilisateurs : le bouton radio, la case à cocher et l'interrupteur. Le bouton radio est utilisé pour des sélections mutuellement exclusives où un seul choix est possible, tandis que la case à cocher permet de sélectionner une ou plusieurs options de manière indépendante. L'interrupteur sert à basculer rapidement entre deux états, "activé" et "désactivé".

• Styles :

Les styles de ces boutons sont minimalistes et clairs. Le bouton radio est représenté par un cercle qui se remplit d'un point lors de la sélection. La case à cocher est un carré qui affiche une coche lorsque cochée. L'interrupteur est un bouton qui glisse d'un côté à l'autre sur une piste, la couleur de la piste changeant pour indiquer l'état.

• Taille :

Ces boutons sont de petite taille pour optimiser l'espace, avec un libellé à côté. La taille du curseur et de la piste de l'interrupteur est également proportionnelle à la taille du texte associé.

• Comportement :

Bouton radio : La sélection d'un bouton en désélectionne automatiquement tous les autres dans le même groupe. Case à cocher : L'utilisateur peut cocher autant de cases qu'il le souhaite, sans que cela n'affecte les autres cases. Interrupteur : Un simple clic sur l'interrupteur bascule son état de manière immédiate.

• Clic :

Bouton radio : Le clic sur un bouton radio sélectionne cette option et désélectionne les autres. Case à cocher : Le clic alterne entre l'état "coché" et "non coché". Interrupteur : Le clic change l'état de l'interrupteur entre "Activé" et "Désactivé".

• Si désactivé :

Lorsque ces boutons sont désactivés, ils sont visuellement grisés. Ils conservent leur état (coché/décoché ou activé/désactivé), mais l'utilisateur ne peut pas le modifier.

• Contraintes :

Tous ces boutons doivent respecter des contraintes d'accessibilité pour les utilisateurs naviguant au clavier ou utilisant des lecteurs d'écran. Les libellés doivent être clairs et ne doivent pas être liés à un seul bouton, mais à l'ensemble de l'option. Le contraste des couleurs doit également être suffisant pour une bonne lisibilité.

• Exemple visuel :

Sélecteurs :

• Description :

composants permettent de choisir une option parmi une liste. Dans ce cas, nous avons deux types de sélecteurs: un groupe de deux sélecteurs en cascade qui dépendent les uns des autres, et un groupe de deux sous-sélecteurs qui apparaissent dans des boîtes de dialogue ou des zones contextuelles.

• Styles :

Les sélecteurs ont une apparence uniforme. Le sélecteur principal est imposant et peut contenir jusqu'à trois onglets. Le sous-sélecteur est plus discret et se comporte comme un filtre tri. Les derniers sélecteurs permettent de créer des onglets dans les blocs et les modales pour gagner de la place et catégoriser.

• Taille :

Le sélecteur principal fait la largeur de l'écran avec hauteur fixe de 63px. Le sous-sélecteur peut avoir une hauteur de 40px ou 56px.

• Comportement :

Au clic sur un onglet du sélecteur principal, il est ensuite possible de cliquer sur le sélecteur secondaire. Ils sont indissociables, c'est-à-dire que le sélecteur secondaire dépend de l'onglet sélectionné. Pour les sélecteurs de zones, ils se comportent comme des onglets.

• Clic :

Au clic sur un sélecteur, l'onglet de l'écran se met à jour pour afficher le contenu sélectionné.

• Si désactivé :

Si un onglet est désactivé, il s'affiche en gris et l'utilisateur ne peut pas cliquer dessus.

• Contraintes :

Accessibilité : La navigation au clavier doit être possible pour parcourir les options. Responsive : Les sélecteurs doivent s'adapter à la taille de l'écran, surtout pour les versions mobiles, où ils peuvent s'afficher en plein écran.

• Exemple visuel :

Stepper :

• Description :

composant qui guide à travers un processus à plusieurs étapes, dans un ordre séquentiel. Il est conçu pour donner à l'utilisateur un aperçu de sa progression et pour faciliter le passage d'une étape à l'autre. Il existe deux variantes principales pour ce composant : le stepper vertical et le stepper horizontal.

• Styles :

Les steppers, qu'ils soient verticaux ou horizontaux, utilisent des indicateurs visuels pour représenter chaque étape : des cercles numérotés. L'étape active est mise en évidence par une couleur d'accentuation (le bleu) et un cercle en contour de plus par rapport aux étapes précédentes. Les étapes futures sont en transparence de bleu.

• Taille :

La taille s'adapte en respectant le contenant.

• Comportement :

Stepper horizontal : chaque étape est affichée l'une à côté de l'autre, ce qui donne une vue d'ensemble rapide du processus. Stepper vertical : chaque étape est empilée, souvent avec un espace plus grand en dessous pour des informations supplémentaires ou des formulaires. Le stepper vertical est plus approprié pour des processus avec de nombreuses étapes.

• Clic :

Ces steppers sont des indicateurs du processus en cours. Ils ne permettent pas d'aller à l'étape souhaitée au clic sur l'élément en question. Ils se mettent jour en fonction de l'avancement du processus.

• Contraintes :

Logique de progression : le stepper doit suivre la logique du processus, s'assurant que les étapes sont complétées dans le bon ordre. Lisibilité : la taille du texte et les icônes doivent être suffisamment grandes pour être lisibles. Responsive : le stepper horizontal peut avoir du mal à s'adapter à des écrans étroits, il pourrait alors se transformer en un stepper vertical ou en une autre solution de navigation.

• Exemple visuel :

Filtres :

• Description :

Une zone de filtres est un espace dédié qui permet aux utilisateurs de trier, affiner ou réduire un ensemble de données, comme des produits, des résultats de recherche, ou des listes d'éléments. Elle se compose d'un ou plusieurs composants de filtrage (sélecteurs, champs de recherche, cases à cocher) qui agissent sur la liste principale. Son objectif est de permettre à l'utilisateur de trouver rapidement l'information pertinente.

• Styles :

Les filtres sont regroupés dans une zone délimitée pour une meilleure organisation. Chaque filtre a un libellé clair pour indiquer son rôle. Les composants de filtrage (sélecteurs, boutons, etc.) sont cohérents avec le reste du design de l'application, en bleu. La présence d'un bouton de "réinitialisation" est présent en fin de liste.

• Taille :

La taille de la zone de filtres varie en fonction du nombre de filtres. Actuellement, la zone est horizontale et peut s'étendre sur toute la largeur de l'écran. Il est recommandé de limiter la zone à une ligne de filtres mais s'il y en a trop, ils se mettront à la ligne.

• Comportement :

L'application de filtres met à jour la liste des résultats de manière dynamique, sans nécessiter le rechargement de la page. Les filtres peuvent fonctionner de manière cumulative, où la sélection de plusieurs filtres continue de réduire le nombre de résultats. Le bouton de réinitialisation efface toutes les sélections de filtres.

• Clic :

Clic sur un filtre : Ouvre un menu déroulant ou une liste pour choisir des options de filtrage. Sélection d'une option : Met à jour la liste principale en conséquence. Clic sur le bouton "Réinitialiser" : Ramène tous les filtres à leur état par défaut et réaffiche l'ensemble des données.

• Si désactivé :

Un filtre peut être désactivé si il n'y a aucune option de filtrage disponible. Dans ce cas, il est grisé et ne répond pas aux clics.

• Contraintes :

Performance : L'application de filtres ne doit pas entraîner de latence significative, même avec un grand nombre de données. Accessibilité : La navigation au clavier doit être possible, et les filtres doivent être compatibles avec les technologies d'assistance.

• Exemple visuel :

Panneaux contextuels :

• Description :

Ces panneaux apparaissent après une action de l'utilisateur, comme le clic sur un bouton de filtre ou sur un lien de menu. Ils sont conçus pour offrir des fonctionnalités spécifiques (filtrage, notification, navigation) sans rediriger l'utilisateur vers une autre page.

• Styles :

Le style général est un panneau flottant avec des coins légèrement arrondis et une ombre portée ou un contour bleu pour le faire ressortir du reste de l'interface. Les couleurs d'accentuation sont le bleu foncé pour les titres et icônes, et le blanc pour l'arrière-plan du panneau. Les boutons de validation et d'annulation ("Valider", "Fermer") sont en texte, et les boutons d'action sont mis en évidence par leur couleur ou leur position. Les icônes sont simples et en ligne.

• Taille :

La taille des panneaux est variable et s'adapte à leur contenu. Un menu déroulant et un panneau de filtres sont plus étroits, tandis que les panneaux de notifications sont plus larges pour accommoder le contenu. Leur position est également variable, apparaissant près de l'élément qui les a déclenchés.

• Comportement :

Ces panneaux apparaissent en surcouche du reste de l'interface. Ils ne sont pas ancrés à un endroit fixe de la page, mais sont positionnés en fonction du composant qui les a appelés. Ils restent visibles jusqu'à ce que l'utilisateur interagisse avec un bouton d'action ("Fermer") ou clique en dehors du panneau. Les boutons "Réinitialiser" et "Fermer" apparaissent uniquement si au moins une case est cochée dans les filtres.

• Clic :

Clic sur un élément de filtre (case à cocher) : Coche ou décoche l'option correspondante. Cela active ou désactive également l'affichage des boutons "Réinitialiser" et "Fermer". Clic sur un bouton d'action : Exécute l'action correspondante (fermer le panneau, valider une sélection, etc.). Clic à l'extérieur du panneau : Ferme le panneau sans valider les changements.

• Si désactivé :

Si un panneau est désactivé, il ne s'affichera pas car le clic sur le parent composant sera inactif.

• Contraintes :

Accessibilité : La navigation doit être possible au clavier, et le panneau doit être bien géré par les lecteurs d'écran. Positionnement : Le panneau doit s'afficher correctement sur différentes résolutions d'écran sans être masqué.

• Exemple visuel :

Accordéons :

• Description :

Les accordéons sont des composants qui organisent le contenu de manière concise en le dissimulant dans des panneaux dépliables. Ils sont idéaux pour structurer des listes longues ou des informations complexes, permettant à l'utilisateur de se concentrer sur une section à la fois. Ils se composent d'un en-tête cliquable et d'un contenu qui peut être masqué ou révélé.

• Styles :

Les en-têtes contiennent un titre et une icône et parfois sont de véritables cards (Compétences). Le style de l'en-tête de l'accordéon change lorsque le panneau est ouvert pour indiquer son état actif. Le contenu du panneau est masqué ou affiché sous l'en-tête.

• Taille :

La largeur de l'accordéon s'adapte à la zone de l'interface dans laquelle il est placé (écran principal ou drawer). Sa hauteur est variable et s'ajuste pour afficher tout le contenu une fois déplié.

• Comportement :

L'accordéon est un conteneur dynamique. Lorsque l'en-tête est cliqué, il s'anime en s'ouvrant ou en se fermant, révélant ou masquant son contenu. Tous les groupes d'accordéons sont configurés pour qu'un seul puisse être ouvert à la fois. Pour que plusieurs puissent être ouverts simultanément, il faut le préciser au développement.

• Clic :

Un clic sur l'en-tête de l'accordéon bascule son état d'ouverture. Si l'accordéon était fermé, il s'ouvre, et s'il était ouvert, il se ferme. Dans un groupe d'accordéons où un seul peut être ouvert à la fois, l'ouverture d'un accordéon ferme automatiquement les autres.

• Si désactivé :

Un accordéon peut être désactivé si son contenu n'est pas disponible ou si l'utilisateur n'a pas les permissions d'y accéder. Dans cet état, l'en-tête de l'accordéon est grisé et ne répond pas aux clics.

• Contraintes :

Accessibilité : L'accordéon doit être navigable au clavier, et les lecteurs d'écran doivent pouvoir le lire et détecter son état (ouvert/fermé). Lisibilité : Les titres doivent être courts et clairs. Performance : Les animations d'ouverture et de fermeture doivent être fluides et ne pas causer de ralentissements de l'interface.

• Exemple visuel :

Catégorie Affichage de contenu et widget

Widget :

• Description :

Un widget est un module réutilisable qui affiche des informations spécifiques et permet des interactions limitées. Il est conçu pour être compact et placé en page d'accueil pour fournir un aperçu rapide des données clés ou des fonctionnalités. Les widgets agissent comme des "fenêtres" sur des applications ou des données plus vastes, permettant à l'utilisateur d'accéder à l'essentiel sans naviguer vers une nouvelle page.

• Styles :

un design épuré, avec des coins arrondis et un fond blanc pour les distinguer visuellement du reste de la page. La hiérarchie du composant est comme suite : Titre, sous-titre, information, bouton d'accès vers la page correspondante. Ces informations prendront souvent l'aspect de cards. Le style peut varier en fonction du type d'information affichée, mais il maintient une cohérence visuelle pour s'intégrer harmonieusement.

• Taille :

Leur taille est dépendante de l'information contenue. Il est tout de même préconisé de se servir des deux largeurs prédéfinies sur la page d'accueil (400px / 912px). La hauteur peut varier sans problème.

• Comportement :

Il faut penser les widget comme un ensemble sur une grille de 3 colonnes. Leurs comportements s'adaptent à cette grille. Dans un premier temps, ils ne sont pas personnalisables mais à terme, ils pourraient être amenés à évoluer en ce sens pour devenir modulables dans leur taille et sur la grille. Dans chaque widget, il s'agit d'un simple affichage avec bouton de redirection.

• Clic :

Au clic sur le bouton de redirection, l'utilisateur est automatiquement reconduit sur les page où se trouvent le contenu.

• Contraintes :

Simplicité : Un widget doit être simple et ne pas surcharger l'utilisateur d'informations. Son rôle est de donner un aperçu. Réactivité : Le widget doit être réactif et s'adapter à différentes tailles d'écran sans perdre en lisibilité. Performance : Les widgets doivent se charger rapidement pour ne pas ralentir l'interface. Les données affichées doivent être à jour. Interactivité limitée : Le but d'un widget n'est pas de remplacer l'application complète, mais de la compléter. Les interactions doivent donc être limitées et bien définies.

• Exemple visuel :

Cards :

• Description :

Les cards sont des objets majeurs de COFOLIO. Elles représentent des éléments tangibles pour l'utilisateur : Compétences, AMS, Traces, CV, Pages libres etc. Chaque card possède sa propre identité propre, déclinée sous différentes tailles, ce qui permet de créer des repères visuels et des points de contact rapides pour l'utilisateur.

• Styles :

Bien que chaque card est sa propre identité, le style général est semblable. Il y a une couleur prédominante, toujours positionnée dans l'en-tête de la card. Elle est complétée par un titre, un sous-titre, des badges et statuts.

• Taille :

Il existe des tailles différentes des cards. Certaines cards comme les objets "compétences" et "AMS" prennent toute la largeur de l'espace réservé au contenu. En hauteur, elles se limitent à 174px. Les cards "traces" originales font du 660x223px. Ensuite, toutes ces cards sont disponibles en version minimale avec des informations sommaire, notamment pour la page d'accueil.

• Clic :

Au clic sur la card, l'utilisateur accède au détail de l'objet correspondant. Ainsi, quand il clique sur une card "Compétence", il accède au détail de la compétence en question, avec ses niveaux mais également sa progression dans la compétence et son évaluation.

• Si désactivé :

Si une card est désactivée, elle apparaitre en grisé, sans aucun badge ni statut et n'est pas cliquable.

• Contraintes :

Accessibilité : Il faut que les cards contiennent le minimum d'informations nécessaires à l'utilisateur. Ces informations doivent résultées des informations présentes dans le détail de la card.

• Exemple visuel :

Blocs Texte :

• Description :

Les blocs de texte sont conçus pour afficher des informations textuelles de manière structurée et organisée. Ils peuvent varier en complexité, allant d'un simple paragraphe à un conteneur plus élaboré qui inclut un titre, un sous-titre, et d'autres éléments. Son but est de présenter clairement le contenu à l'utilisateur, que ce soit une description, un ensemble de données ou des instructions.

• Styles :

Ils ont un style minimaliste pour ne pas distraire du contenu. Ils ont très souvent un fond gris ou blanc, un contour fin gris quand c'est un fond blanc, ou même être une simple ligne de texte sur la page, notamment pour les titres. La typographie est cruciale pour la lisibilité, avec des tailles de police, des poids et des couleurs variés pour créer une hiérarchie visuelle entre les titres, les sous-titres et les paragraphes. Certains blocs peuvent inclure des éléments décoratifs comme des icônes ou des "badges" pour catégoriser ou mettre en évidence l'information.

• Taille :

La taille d'un bloc de texte est variable et s'adapte à son contenu. Il peut être une petite boîte compacte ou une section plus large qui s'étend sur la page. La hauteur s'ajuste pour contenir tout le texte, et la largeur peut être fixe ou réactive pour s'adapter à la taille de l'écran.

• Comportement :

La plupart des blocs de texte sont statiques et ne réagissent pas au clic. Cependant, certains peuvent avoir des fonctionnalités interactives. Un bloc peut s'agrandir pour afficher plus de détails (avec un lien "Afficher plus de détail"), ou un bouton peut servir de lien pour filtrer renvoyer à d'autres contenus. Le comportement est généralement simple et se limite à la présentation de l'information.

• Contraintes :

Lisibilité : Le texte doit être facilement lisible, avec un contraste de couleur suffisant entre le texte et l'arrière-plan. Cohérence : Les styles et les tailles de texte doivent être cohérents dans toute l'interface pour une expérience utilisateur prévisible. Responsive : Les blocs de texte doivent s'adapter à la taille de l'écran sans causer de débordement de texte ou de problèmes de mise en page.

• Exemple visuel :

Tableaux :

• Description :

Un tableau est un composant qui organise des données de manière structurée en lignes et en colonnes. Il est utilisé pour présenter des informations de manière claire et concise, ce qui facilite la comparaison et l'analyse des données. Le tableau peut être statique, avec un contenu fixe, ou dynamique, avec des données qui changent.

• Styles :

Les tableaux utilisent une grille de lignes et de colonnes pour organiser l'information. Les en-têtes de colonne sont en gras pour se distinguer des données. Les cellules peuvent avoir un fond de couleur différente pour une meilleure lisibilité, ainsi que des contours. On privilégie les tons de gris et le blanc pour laisser de la place à l'information.

• Taille :

Aucune taille prédéfinie

• Comportement :

Certains tableaux croisés sont personnalisables par l'utilisateur. Il peut choisir la donnée entrante. D'autres tableaux possèdent du contenu cliquable qui redirige vers plus de détail.

• Clic :

Au clic sur le contenu, l'utilisateur est redirigé vers la page correspondante.

• Si désactivé :

Si un tableau est désactivé, il n'est pas cliquable et ne possède pas de contenu. Si une donnée est désactivée, elle est grisée et non cliquable.

• Contraintes :

Lisibilité : le tableau doit être facile à lire, même avec de nombreuses données. Responsive : sur les petits écrans, le tableau doit se transformer pour rester utilisable (ex. : en masquant certaines colonnes ou en s'affichant en mode "liste").

• Exemple visuel :

Catégorie Fenêtres d'information et modales

Messages d'alerte :

• Description :

Un message d'alerte est un composant qui fournit un retour d'information important, contextuel et non intrusif à l'utilisateur. Il est utilisé pour informer d'un succès, d'un avertissement, d'une erreur ou d'une simple notification. Contrairement aux modaux qui bloquent l'interface, les messages d'alerte apparaissent souvent dans le flux de la page ou en haut de l'écran pour être remarqués sans interrompre le flux de travail.

• Styles :

Les messages d'alerte utilisent des codes couleur standardisés pour communiquer leur intention : Succès : vert, pour indiquer qu'une action a réussi. Erreur : rouge ou rose, pour signaler un problème critique ou une action ayant échoué. Information : bleu, pour une information générale ou une notification neutre. Les blocs sont rectangulaire, ont des coins arrondis, et contiennent un texte court et clair, une icône pertinente et parfois un bouton de fermeture.

• Taille :

Il existe trois tailles. La première est de 480 px de largeur. Elle est utilisée pour les zones précises. La seconde fait 1087px et est utilisée pour l'écran entier. La dernière est plus spécifique et est utilisée lorsqu'il n'y aucunes informations disponibles. Elle fait la largeur de l'écran et ne possède pas de bouton de fermeture.

• Comportement :

Affichage : Le message apparaît après qu'un événement se soit produit : la soumission d'un formulaire, une page chargée ou un clic sur un bouton. Fermeture : Le message d'alerte critique reste visible jusqu'à ce que l'utilisateur le ferme manuellement. Les alertes non critiques peuvent disparaître automatiquement après quelques secondes. Les informations de non disponibilité des contenus ne peuvent pas être enlevés. Position : Les messages sont souvent fixés en haut de la fenêtre ou apparaissent au-dessus du contenu concerné.

• Clic :

Le clic est limité au bouton de fermeture (croix "x") quand il est présent. Dans certains cas, le texte de l'alerte peut être cliquable pour fournir plus de détails sur l'erreur ou la réussite.

• Contraintes :

Clarté : Le message doit être immédiatement compréhensible. Non-intrusif : Il ne doit pas bloquer le reste de l'interface ou nécessiter une interaction immédiate (sauf en cas d'erreur critique). Accessibilité : La couleur et l'icône doivent être accompagnées d'un texte clair, et le rôle du message doit être accessible aux lecteurs d'écran.

• Exemple visuel :

Drawer:

• Description :

Le drawer est un composant qui apparaît en surcouche, glissant depuis le bord de l'écran droit, pour afficher du contenu contextuel ou des formulaires. Il est utilisé pour permettre à l'utilisateur d'effectuer des tâches spécifiques (comme ajouter une nouvelle trace, modifier son profil) sans perdre le contexte de la page principale qui reste visible en arrière-plan.

• Styles :

Le drawer est un panneau rectangulaire avec un fond uni blanc et une ombre portée pour le distinguer du contenu derrière lui. Il a un en-tête clair qui contient un titre de l'action ("Ajouter une trace") et une icône d'action. Le pied de page est réservé aux boutons d'action principaux, alignés à droite, avec un bouton principal mis en évidence ("enregistrer") et un bouton secondaire ou d'annulation ("quitter").

• Taille :

La largeur du drawer est définie pour occuper une partie signification de l'écran, tout en laissant le contenu principal visible. Il a une taille fixe. Il fait la hauteur de l'écran et 560px de largeur.

• Comportement :

Le drawer apparaît avec une animation de glissement fluide depuis le bord de l'écran. Le contenu de la page principale devient légèrement grisé pour attirer l'attention sur le drawer. Il reste ouvert tant que l'utilisateur n'a pas cliqué sur une action pour le fermer ("quitter", "enregistrer").

• Clic :

Clic sur le bouton d'action principal ("ENREGISTRER/VALIDER") : Déclenche l'exécution de l'action, puis ferme le drawer. Clic sur le bouton d'annulation ("QUITTER/FERMER/ANNULER") : Ferme le drawer et annule les modifications en cours. Clic en dehors du drawer : possible évolution, cela ferme le tiroir et annule les modifications.

• Si désactivé :

Le bouton d'action principal est désactivé (grisé) et ne répond pas au clic tant que le formulaire n'est pas valide ou qu'il n'y a pas de données à enregistrer.

• Contraintes :

Accessibilité : Le drawer doit être navigable au clavier, et la navigation doit être confinée à l'intérieur du drawer tant qu'il est ouvert pour respecter l'ordre de tabulation. Conservation des données : Une alerte doit être affichée si l'utilisateur tente de fermer le drawer ("quitter") alors qu'il y a des modifications non enregistrées. Performance : L'animation de glissement doit être fluide et rapide.

• Exemple visuel :

Fenêtre modale :

• Description :

La fenêtre modale apparaît au premier plan, suspendant temporairement l'interaction avec le contenu principal de la page. Elle est utilisée pour attirer l'attention de l'utilisateur pour permettre l'exécution d'une tâche critique, comme l'affichage des détails d'un élément ("Détail de ma trace") ou la confirmation d'une action.

• Styles :

La fenêtre modale est un conteneur rectangulaire blanc avec des coins arrondis et une ombre portée, centré dans l'écran. L'arrière-plan de la page est assombri pour concentrer l'attention sur la fenêtre. Elle a un en-tête contenant un titre informatif. Ce type de modale présente des actions clairement séparées : un bouton d'actions contextuelles en haut à droite (souvent un menu déroulant d'options) et une action de fermeture en bas à droite.

• Taille :

La taille est variable, mais la modale est conçue pour être suffisamment grande pour afficher le contenu détaillé sans nécessiter de défilement excessif. Elle ne prend jamais la totalité de l'écran, ce qui permet de conserver un lien visuel avec la page parente.

• Comportement :

Lorsqu'elle est ouverte, la fenêtre modale rend le contenu de la page principale non interactif. L'utilisateur doit interagir avec la modale pour retourner à la page. La fermeture se fait soit par le bouton d'action dédié ou parfois en cliquant sur l'arrière-plan désactivé (notamment pour les contenus d'affichage sans action comme le détail d'une trace)

• Clic :

Clic sur le bouton "PLUS D'ACTIONS" : Ouvre un menu déroulant d'actions contextuelles (modifier, supprimer, exporter, etc.). Clic sur le bouton "FERMER LA FENÊTRE/QUITTER/VALIDER/ENREGISTRER" : Dissimule la modale et rend l'interface de la page parente à nouveau interactive. Clic sur le "backdrop" : Méthode alternative pour fermer la fenêtre modale.

• Si désactivé :

Les actions à l'intérieur de la modale peuvent être désactivées si l'utilisateur n'a pas les permissions requises. Le bouton de fermeture n'est jamais désactivé.

• Contraintes :

Focus : Dès son apparition, la modale doit recevoir le focus clavier pour des raisons d'accessibilité. Défilement : Si le contenu dépasse la hauteur de la fenêtre, seul le contenu de la modale doit pouvoir défiler, pas la page en arrière-plan. Empilement : Il est fortement déconseillé d'ouvrir une modale par-dessus une autre modale. Accessibilité : L'échappement (touche Echap) doit pouvoir fermer la modale.

• Exemple visuel :

Messagerie :

• Description :

Le composant de messagerie est conçu pour faciliter la communication au sein de COFOLIO, en offrant une expérience d'échanges contextualisés. Il apparaît comme une zone flottante, permettant des échanges de messages, l'accès à différentes conversations (groupes/messages privés), et l'exécution d'actions liées aux messages (répondre, joindre des fichiers). Cette messagerie est disponible dans le COFOLIO étudiant mais également dans le COFOLIO enseignant.

• Styles :

Le composant est structuré à partir du drawer. C'est un exemple de l'utilisation possible du drawer. Les messages sont affichés dans des bulles de conversation (comme des "post-it"), alignées à gauche ou à droite pour distinguer l'émetteur du récepteur. L'arrière-plan de la boîte est blanc. Il y a un en-tête pour le titre de la conversation et des éléments de navigation (onglets, boutons retour). La zone de saisie du message est clairement délimitée, et les actions comme "ENVOYER" sont mises en évidence. Il existe deux variantes de la messagerie : une pour les étudiants et une pour les enseignants.

• Taille :

La largeur du drawer est définie pour occuper une partie signification de l'écran, tout en laissant le contenu principal visible. Il a une taille fixe. Il fait la hauteur de l'écran et 560px de largeur.

• Comportement :

Outre le comportement du drawer, le composant prend en charge différents comportements de conversation : Défilement : Le fil de conversation défile pour afficher les messages les plus récents en bas. Navigation : Des boutons ou onglets permettent de passer d'un fil de discussion à un autre (ex. : "Mon Groupe", "Mes messages"). Saisie : La zone de message permet la saisie de texte. Le bouton "ENVOYER" devient actif une fois qu'un message est tapé. Actions : Des boutons d'action contextuels (comme "ACCÉDER aux détails" ou "QUITTER") sont disponibles.

• Clic :

Clic sur un message/groupe : Ouvre le fil de conversation correspondant. Clic sur "ENVOYER" : Soumet le message dans la zone de saisie. Le drawer ne se ferme pas. Clic sur les boutons d'attachement : Ouvre une interface de téléchargement de fichier ou de sélection de trace. Clic sur "QUITTER" / "X" : Ferme la boîte de dialogue de messagerie.

• Si désactivé :

Le bouton "ENVOYER" est désactivé tant que la zone de message est vide. Les fonctions de joindre des documents peuvent être désactivées si l'utilisateur n'a pas les permissions requises (selon paramétrages).

• Contraintes :

Mise à jour : Le composant affiche les nouveaux messages sous un temps x. Ce n'est pas un chat en temps réel. Gestion des pièces jointes : Il doit gérer l'affichage et le téléchargement des différents types de pièces jointes. Accessibilité : L'interface de dialogue doit être gérée correctement par les lecteurs d'écran, et la navigation au clavier doit être possible dans le fil et dans la zone de saisie.

• Exemple visuel :

LA BIBLIOTHÈQUE ICONOGRAPHIQUE

La bibliothèque d’icônes est issue de RemixIcon ou du kit Material Design de Iconify. Il est possible d’ajouter des icône issus de ces deux bibliothèques en veillant à respecter le style iconographique recommandé : linéaire et minimaliste.

Les icônes sont généralement utilisés à côté des titres, dans les badges et dans certains composants UI « Card ». Leur taille est de 24x24 px à l’exception des badges où leur dimension est de 16x16 px. La couleur est souvent associé à la couleur du texte associé.

LES BONNES PRATIQUES

Ce qu'il faut faire :

✅ Toujours utiliser les couleurs de la palette ✅ Respecter les dimensions et couleurs du logo ✅ Respecter la hiérarchie typographique ✅ Réutiliser le plus possible les composants même pour créer de nouveaux éléments ✅ Vérifier le contraste pour l’accessibilité ✅ Utiliser les icônes des bibliothèques disponibles sur RemixIcon ou Iconify

**Ce qu'il ne faut pas faire : **

❌ Ne pas utiliser d’icônes d’un autre style ❌ Ne pas changer les proportions du logo ❌ Ne pas ajouter de nouvelles couleurs sans validation ❌ Ne pas dénaturer les composants existants, notamment les cards ❌ Ne pas ajouter un nouveau composant sans validation