Michigan Forty Two Designsystem.

Michigan Forty Two Institutionelle Implementierung des Designsystems

Ein unterstütztes WordPress-Ökosystem

Forty-Two ist das Designsystem von Michigan Engineering und ein unterstütztes WordPress-Theme. In der offiziellen Übersicht werden Elemente, Komponenten und Komponentengruppen beschrieben, die im Editor Blöcken und Mustern entsprechen. Das Theme wird Fachbereichen und Organisationseinheiten von Engineering über Communications & Marketing oder CAEN-Hostingvereinbarungen angeboten. Es sollte nicht als generisches npm-Paket dargestellt werden, das jedes beliebige Projekt installieren kann.

Das lokale Beispiel ist eine transparente Interpretation des dokumentierten Konzepts für ein Personenverzeichnis. Es nutzt die veröffentlichte Web-Farbpalette und fiktive Profile, während Layout und Filtercode eigenständig entwickelt wurden. Eine autorisierte institutionelle Website sollte stattdessen das unterstützte Theme und dessen aktuelle Muster verwenden, anstatt diese Demonstration in einen eigenen HTML-Block zu kopieren und davon auszugehen, dass sie gleichwertig ist.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem: Web-Farbpalette und Kontrast

Die Web-spezifische Referenz verwenden

Maize und Blue bilden die primäre Identität. Die Web-Farbpalette ergänzt Base Puma Black, Base White und benannte Blautöne, darunter Hyperlink Blue. Sekundärfarben unterstützen das Primärpaar; sie sind kein Grund, jedem akademischen Thema einen anderen grellen Hintergrund zuzuweisen. Im Beispiel bleiben die Identitätsfarben auf den Kopfbereich beschränkt, während für die Ergebnisse zurückhaltende Neutraltöne verwendet werden.

Die Farbpalette des Web-Designsystems und die allgemeine Markenrichtlinie unterscheiden sich bei einigen Sekundärfarben, darunter A2 Amethyst. Die Referenztabelle verwendet die spezielle Quelle für das Web-Designsystem. Jede Abweichung von einem Theme-Standardwert erfordert weiterhin eine Kontrastprüfung. Eine offiziell benannte Farbe eignet sich nicht automatisch auf jedem Hintergrund für kleinen Text.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem: Typografie und redaktioneller Ton

Hierarchie ohne erfundene Schriftart-Tokens

Der Typografieleitfaden von Engineering nennt Roboto und Open Sans als wichtigste Web-Schriftfamilien; für Absätze wird Open Sans verwendet. Playfair Display wird für die Verwendung in Print beschrieben und ist daher kein Beleg für eine verbindliche Serifenschrift für Web-Überschriften. In dieser Vorschau wird ausdrücklich auf Arial zurückgegriffen; die Schriftgrößen von 17 px für Fließtext und Überschriften sind Beispiele und keine erfundenen Forty-Two-Typografie-Tokens.

Die Schreibrichtlinien empfehlen die Großschreibung am Satzanfang für Seitentitel, Abschnittsüberschriften, Ankerbeschriftungen, Werbetitel und Bildunterschriften. Das passt zu einem Personenverzeichnis: Ein klarer Name, eine Rollenbezeichnung und eine Beschreibung der Forschung vermitteln mehr als ein Werbeslogan. Achten Sie auf echten Websites auf korrekte institutionelle Bezeichnungen und fügen Sie Profilen keine ungeprüften Qualifikationen hinzu.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem: Personen und Taxonomiestruktur

Person und Filterbezeichnung getrennt halten

Der offizielle Schulungsindex umfasst die Einrichtung von Personen, das Hinzufügen einer Rolle oder eines Forschungsbereichs sowie zwei Filterlayouts: Abfragesortierung und Seitenleiste. Daraus geht hervor, dass Personen und ihre Klassifizierungen verwaltete Inhalte sind und nicht auf jeder Übersichtsseite manuell duplizierte Blöcke. Die aktuellen Plugin-Attribute konnten nicht öffentlich abgerufen werden; deshalb erfindet dieser Leitfaden weder Shortcode-Namen noch Abfrageschlüssel.

Im unabhängigen Beispiel hat jede Person eine Rolle und einen Forschungsbereich. Beide Filter werden gleichzeitig angewendet. Dieses bewusst kleine Modell macht die Schnittmenge sichtbar: Fakultät plus Robotik ergibt keine Treffer, während Forschungspersonal plus Robotik einen Treffer ergibt. Eine produktive Taxonomie kann umfangreicher sein, doch das UND-/ODER-Verhalten sollte vor dem Erstellen der Benutzeroberfläche eindeutig festgelegt werden.

// 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.

Code-Referenz

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem: Filtern und Wiederherstellung

Die aktuelle Auswahl verständlich halten

Beim Ändern eines Filters werden die sichtbaren Profile und eine Live-Region mit der Ergebnisanzahl aktualisiert. Der Fokus wird nicht vom Auswahlfeld verschoben, sodass Tastaturnutzer Optionen vergleichen können, ohne immer wieder zum Steuerelement zurückkehren zu müssen. Die Meldung bei keinen Treffern erklärt, dass die Kombination leer ist, und schlägt vor, eines der Felder zu ändern oder beide zurückzusetzen.

Mit „Filter löschen“ werden die Standardwerte und alle Profile wiederhergestellt; anschließend wird der Fokus auf den ersten Filter gesetzt. Die Profile behalten ihre feste Reihenfolge. So wird ein subtiler Fehler vermieden, der bei Verzeichnissen auftreten kann: Bei jeder Filteränderung werden Personen entfernt und unerwartet neu sortiert. Die Namen und Beschreibungen hier sind fiktiv und implizieren keine tatsächlichen Anstellungen an einer Universität.

1. Wählen Sie „Forschungspersonal“ aus und bestätigen Sie, dass sich das Verzeichnis auf ein Profil verkleinert.
2. Kombinieren Sie „Fakultät“ mit „Robotik“ und prüfen Sie die Meldung zur Wiederherstellung bei keinen Treffern.
3. Löschen Sie beide Filter und bestätigen Sie, dass alle drei Profile in der ursprünglichen Reihenfolge zurückkehren.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem: Blöcke, Muster und Pflege

Ein gepflegtes Muster auswählen

Die Schulungsübersicht umfasst Muster für Experten, Veranstaltungen, Abfrageschleifen, aktuelle Beiträge und Personen. Verwenden Sie ein Muster, das zum Inhaltsmodell passt, anstatt ein ähnlich aussehendes Raster aus unverbundenen Textfeldern zusammenzustellen. Ein Personenmuster kann die Beziehung zwischen einem Personendatensatz und dem Verzeichnis, in dem er angezeigt wird, erhalten.

Das ältere Accordion Item ist ausdrücklich als veraltet gekennzeichnet. Dass es in älteren Schulungsunterlagen vorkommt, ist keine Empfehlung für eine neue Implementierung. Wenn bestehende Seiten einen älteren Block verwenden, konsultieren Sie vor dem Austausch die aktuelle Schulungswebsite und das unterstützte Wartungsverfahren. Bewahren Sie beim Ändern der Darstellung sinnvolle Inhalte und bestehende Ziele.

• Personendatensätze: Namen, Rollen, Bereiche und Profilinhalte gehören in die unterstützte Inhaltsstruktur.
• Muster: Verwenden Sie für den Eintrags- oder Werbebereich eine aktuell dokumentierte Komposition.
• Navigation: Behandeln Sie Entdeckungslinks als gepflegte Inhalte, nicht als Nebenprodukt der Veröffentlichung einer Seite.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem – praktischer Redaktionsworkflow

Eine neue Seite mit der Website verknüpfen

Die offizielle Checkliste für neue Seiten erklärt, dass eine veröffentlichte Seite nicht automatisch auffindbar ist. Weisen Sie ihr eine übergeordnete Seite zu und verknüpfen Sie sie anschließend mit dem passenden Header, der Unternavigation, den Filtern für Rollen und Forschungsbereiche oder dem Footer. Öffnen Sie im dokumentierten Redaktionsablauf „Appearance“, „Editor“ und „Navigation“, wählen Sie das passende Menü aus, fügen Sie die Seite hinzu und passen Sie ihre Position in der Listenansicht an.

Für ein autorisiertes Forty-Two-Projekt ist dieser Redaktionsworkflow der konkrete Integrationsweg. Diese Ressource enthält keinen erfundenen öffentlichen SDK-Befehl. Der Einrichtungsabschnitt nennt den unterstützten Hosting-Weg und verweist auf das Schulungsmaterial; das vollständige lokale Codebeispiel ist separat als Material zum Selbststudium gekennzeichnet.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem – Barrierefreiheit und Grenzen der visuellen Identität

Standardstile prüfen keine Inhalte

Die Leitlinien zur Barrierefreiheit im Engineering weisen darauf hin, dass die Standardkomponenten von Forty-Two auf barrierefreie Kontraste ausgelegt sind. Änderungen an den Farben können diesen Vorteil jedoch zunichtemachen. Auch Profilinhalte benötigen aussagekräftige Überschriften, verständliche Linktexte, passende Bildalternativen und einen nachvollziehbaren Leerzustand. Die Vorschau prüft responsives Layout und Filterverhalten, stellt aber keine Zertifizierung der institutionellen Konformität dar.

Die ursprüngliche Vorschau verwendet weder Block M noch die Universitätssignatur oder echte Mitarbeiterdaten. Institutionelle Logos werden über authentifizierte Markenk anäle bereitgestellt und gehören zu einem Identitätssystem, das von diesen Gestaltungsfarben getrennt ist. Eine echte Engineering-Website sollte den unterstützten Marken- und Veröffentlichungsprozess einhalten; ein unabhängiger Prototyp sollte sich ehrlich als solcher ausweisen.

Unterstützende Spezifikation lesen

Michigan Forty Two Designsystem – Komponentenbeispiele

// 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>