Système de design Michigan Forty Two.

Michigan Forty Two Mise en œuvre institutionnelle du système de design

Un écosystème WordPress pris en charge

Forty-Two est le système de design de Michigan Engineering et un thème WordPress pris en charge. La présentation officielle décrit des éléments, des composants et des groupes de composants, représentés par des blocs et des compositions dans l’éditeur. Le thème est proposé aux départements et aux unités d’Engineering dans le cadre des services d’hébergement de Communications & Marketing ou de CAEN. Il ne faut pas le présenter comme un package npm générique installable par n’importe quel projet.

Cet exemple local propose une interprétation transparente du concept documenté d’annuaire de personnes. Il utilise la palette Web publiée et des profils fictifs, tandis que sa mise en page et son code de filtrage sont originaux. Un site institutionnel autorisé devrait utiliser le thème pris en charge et ses compositions actuelles, plutôt que de copier cette démonstration dans un bloc HTML personnalisé en supposant qu’il soit équivalent.

Consultez la spécification associée

Michigan Forty Two Palette Web et contraste du système de design

Utilisez la référence propre au Web

Maize et Blue constituent l’identité visuelle principale. La palette Web comprend aussi Base Puma Black, Base White et des nuances de bleu nommées, dont Hyperlink Blue. Les teintes secondaires complètent l’association principale ; elles ne justifient pas d’attribuer à chaque sujet universitaire un fond voyant sans lien avec celui-ci. Dans cet exemple, les couleurs de l’identité visuelle sont réservées à l’en-tête, et des tons neutres plus discrets entourent les résultats.

La palette du système Web et la page générale sur la marque diffèrent pour certaines valeurs secondaires, notamment A2 Amethyst. Le tableau de référence s’appuie sur la source propre au système Web. Toute dérogation aux valeurs par défaut du thème doit faire l’objet d’une vérification du contraste. Le fait qu’une couleur ait un nom officiel ne garantit pas qu’elle convienne à du petit texte sur tous les fonds.

Consultez la spécification associée

Michigan Forty Two Typographie et ton éditorial du système de design

Créer une hiérarchie sans inventer de jetons typographiques

Le guide typographique d’Engineering désigne Roboto et Open Sans comme ses principales familles de polices Web, Open Sans étant utilisée pour les paragraphes. Playfair Display est réservée à l’impression ; cela ne signifie donc pas qu’une police à empattements est obligatoire pour les titres Web. Cet aperçu utilise explicitement Arial comme police de remplacement ; le corps en 17px et la taille des titres sont des choix de démonstration, et non des jetons typographiques Forty-Two inventés.

Les consignes rédactionnelles préconisent la casse de phrase pour les titres de page, les intertitres, les libellés d’ancrage, les titres promotionnels et les légendes. Cette approche convient à un annuaire de personnes : un nom, un rôle et une description de recherche clairs apportent davantage d’informations qu’un slogan promotionnel. Sur les sites réels, respectez la dénomination institutionnelle et n’ajoutez pas de titres ou de qualifications non vérifiés aux profils.

Consultez la spécification associée

Michigan Forty Two Structure des personnes et des taxonomies du système de design

Distinguer la personne du libellé de filtre

L’index officiel des formations couvre la configuration de People, l’ajout d’un rôle ou d’un domaine de recherche, ainsi que deux dispositions de filtre : Query Sort et Sidebar. Ces entrées montrent que les personnes et leurs classifications sont des contenus gérés, et non des blocs dupliqués manuellement sur chaque page d’annuaire. Les attributs actuels exacts du plugin n’ayant pas été consultés publiquement, ce guide n’invente ni noms de codes courts ni clés de requête.

Dans l’exemple indépendant, chaque personne a un rôle et un domaine. Les deux filtres s’appliquent simultanément. Ce modèle volontairement réduit rend l’intersection visible : Faculty et Robotics ne renvoient aucun résultat, tandis que Research staff et Robotics en renvoient un. Une taxonomie en production peut être plus riche, mais il convient de définir explicitement son comportement AND/OR avant de créer l’interface.

// Original local filter composition; not a Forty-Two plugin API.
const matches = (person, role, area) =>
  (role === 'all' || person.role === role) &&
  (area === 'all' || person.area === area);
// Apply both conditions; clearing one filter must preserve the other.
// Announce the result count and offer recovery when the intersection is empty.

Référence du code

Consultez la spécification associée

Michigan Forty Two Filtres et gestion des résultats vides dans le système de design

Veillez à ce que la sélection en cours reste compréhensible

La modification d’un filtre met à jour les profils affichés et une région dynamique qui annonce le nombre de résultats. Le focus reste sur le menu déroulant, ce qui permet aux personnes qui utilisent le clavier de comparer les options sans devoir revenir sans cesse au contrôle. Le message d’absence de résultats explique que cette combinaison ne donne aucun résultat et propose de modifier l’un des champs ou d’effacer les deux filtres.

Effacer les filtres rétablit leurs valeurs par défaut et affiche tous les profils, puis replace le focus sur le premier filtre. Les profils conservent un ordre stable. Cela évite un problème subtil des annuaires où chaque modification de filtre supprime des personnes et les réordonne de façon inattendue. Les noms et descriptions présentés ici sont fictifs et ne laissent entendre aucune affiliation réelle à une université.

1. Sélectionnez « Personnel de recherche » et vérifiez que l’annuaire n’affiche plus qu’un profil.
2. Combinez « Corps enseignant » et « Robotique », puis examinez le message de récupération affiché en l’absence de résultats.
3. Effacez les deux filtres et vérifiez que les trois profils réapparaissent dans leur ordre initial.

Consultez la spécification associée

Système de design Michigan Forty Two : blocs, modèles et maintenance

Choisir un modèle maintenu

L’inventaire de formation comprend des modèles pour les experts, les événements, les boucles de requêtes, les publications récentes et les personnes. Choisissez le modèle adapté au type de contenu plutôt que de composer une grille d’apparence similaire à partir de zones de texte sans lien entre elles. Un modèle consacré aux personnes peut préserver le lien entre la fiche d’une personne et l’annuaire qui l’affiche.

L’ancien bloc « Élément d’accordéon » est explicitement indiqué comme obsolète. Sa présence dans des ressources de formation historiques ne signifie pas qu’il est recommandé pour une nouvelle implémentation. Si des pages existantes utilisent un bloc ancien, consultez le site de formation actuel et la procédure de maintenance prise en charge avant de le remplacer. Préservez le contenu pertinent et les destinations existantes lors de la modification de la présentation.

• Fiches de personnes : les noms, rôles, domaines et contenus de profil relèvent de la structure de contenu prise en charge.
• Modèles : utilisez une composition actuelle et documentée pour les listes ou les sections promotionnelles.
• Navigation : considérez les liens de découverte comme du contenu à maintenir, et non comme un effet secondaire de la publication d’une page.

Consultez la spécification associée

Système de design Michigan Forty Two : processus pratique pour les éditeurs

Relier une nouvelle page au site

La liste de vérification officielle pour la création de pages explique que la publication d’une page ne la rend pas automatiquement accessible depuis le site. Définissez sa page parente, puis reliez-la aux éléments requis : en-tête, sous-navigation, filtres par rôle ou domaine de recherche, ou pied de page. Dans le parcours de l’éditeur documenté, ouvrez Apparence, Éditeur et Navigation, sélectionnez le menu approprié, ajoutez la page et ajustez sa position dans la vue en liste.

Pour un projet Forty-Two autorisé, ce processus dans l’éditeur constitue la méthode d’intégration concrète. Cette ressource ne prétend pas fournir une commande publique de SDK. Le bloc de configuration indique la méthode d’hébergement prise en charge et renvoie aux ressources de formation ; l’exemple de code local complet est présenté séparément pour un apprentissage autonome.

Consultez la spécification associée

Système de design Michigan Forty Two : accessibilité et limites de l’identité visuelle

Les styles par défaut ne valident pas le contenu

Les recommandations d’accessibilité d’Engineering indiquent que les composants Forty-Two par défaut sont conçus pour offrir un contraste accessible, mais que la modification des couleurs peut compromettre cet avantage. Le contenu des profils doit également comporter des titres pertinents, des intitulés de liens explicites, des textes alternatifs exacts pour les images et un message d’absence de résultats compréhensible. L’aperçu vérifie la mise en page adaptative et le comportement des filtres, mais ne certifie pas la conformité aux exigences de l’établissement.

L’aperçu d’origine n’utilise ni Block M, ni signature universitaire, ni données réelles sur le personnel. Les logos institutionnels sont distribués par des canaux de marque authentifiés et relèvent d’un système d’identité distinct de ces couleurs pédagogiques. Un véritable site d’Engineering doit suivre les procédures de marque et de publication prises en charge ; un prototype indépendant doit être présenté comme tel.

Consultez la spécification associée

Système de design Michigan Forty Two : exemples de composants

// Original local filter composition; not a Forty-Two plugin API.
const matches = (person, role, area) =>
  (role === 'all' || person.role === role) &&
  (area === 'all' || person.area === area);
// Apply both conditions; clearing one filter must preserve the other.
// Announce the result count and offer recovery when the intersection is empty.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research collaborators</title><style>*{box-sizing:border-box}body{margin:0;color:#131516;background:#fafafa;font:17px/1.6 Arial,sans-serif}header{background:#00274c;color:#fafafa;border-top:8px solid #ffcb05;padding:32px}h1{font-size:36px;line-height:1.15;margin:8px 0 16px}h2{font-size:23px;line-height:1.25;margin:0 0 8px}main,header>div{max-width:1040px;margin:auto}.layout{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px}label{display:block;font-weight:bold;margin:0 0 8px}select,button{font:inherit;padding:10px;width:100%;border:1px solid #00274c;margin-bottom:24px;background:white;color:#00274c}button{cursor:pointer;font-weight:bold}button:focus-visible,select:focus-visible{outline:3px solid #00274c;outline-offset:3px}article{padding:24px 0;border-top:1px solid #e9e9e9}article p{margin:8px 0}.role{color:#1e406b;font-weight:bold}.topic{display:inline-block;background:#e9e9e9;padding:4px 10px;font-size:14px}#empty{border-left:6px solid #ffcb05;padding:16px;background:white}footer{font-size:14px;padding:24px 32px;border-top:1px solid #e9e9e9}[hidden]{display:none!important}@media(max-width:700px){.layout{grid-template-columns:1fr;padding:24px;gap:8px}header{padding:24px}h1{font-size:30px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters button{grid-column:1/-1;margin-bottom:8px}select{margin-bottom:8px}}</style><header><div><small>INDEPENDENT RESEARCH DIRECTORY</small><h1>Find a collaborator</h1><p>Explore fictional profiles by role and research area.</p></div></header><main><div class="layout"><aside class="filters" aria-label="Filter people"><div><label for="role">Role</label><select id="role"><option value="all">All roles</option><option value="faculty">Faculty</option><option value="staff">Research staff</option></select></div><div><label for="area">Research area</label><select id="area"><option value="all">All areas</option><option value="energy">Energy</option><option value="robotics">Robotics</option><option value="materials">Materials</option></select></div><button id="reset">Clear filters</button></aside><section aria-label="Matching people"><p id="count" role="status">3 people</p><article data-role="faculty" data-area="energy"><h2>Avery Chen</h2><p class="role">Faculty</p><p>Studies ways to make community energy systems easier to understand and maintain.</p><span class="topic">Energy</span></article><article data-role="staff" data-area="robotics"><h2>Jordan Ellis</h2><p class="role">Research staff</p><p>Supports experiments in human-centred robotics and field testing.</p><span class="topic">Robotics</span></article><article data-role="faculty" data-area="materials"><h2>Samira Patel</h2><p class="role">Faculty</p><p>Explores how durable materials can support repair and reuse.</p><span class="topic">Materials</span></article><div id="empty" hidden><h2>No matching people</h2><p>Try another role or research area, or clear both filters.</p></div></section></div><footer>OpenDesign interpretation of Forty-Two’s documented people-directory concept and web palette. Fictional profiles; Arial fallback, original layout and filtering. Not the university’s WordPress theme or an official directory.</footer></main><script>const role=document.querySelector('#role'),area=document.querySelector('#area');function filter(){let n=0;document.querySelectorAll('article').forEach(a=>{a.hidden=!((role.value==='all'||role.value===a.dataset.role)&&(area.value==='all'||area.value===a.dataset.area));if(!a.hidden)n++});document.querySelector('#count').textContent=n+' '+(n===1?'person':'people');document.querySelector('#empty').hidden=n!==0}role.onchange=area.onchange=filter;document.querySelector('#reset').onclick=()=>{role.value=area.value='all';filter();role.focus()};</script></html>