Sistema di design Michigan Forty Two.

Michigan Forty Two Implementazione istituzionale del sistema di design

Un ecosistema WordPress supportato

Forty-Two è il design system di Michigan Engineering e un tema WordPress supportato. La panoramica ufficiale descrive elementi, componenti e gruppi di componenti, associati rispettivamente a blocchi e pattern nell’editor. Il tema è offerto a dipartimenti e unità di Engineering tramite le soluzioni di hosting di Communications & Marketing o CAEN. Non va presentato come un pacchetto npm generico installabile in qualsiasi progetto.

Questo esempio locale è un’interpretazione trasparente del concetto documentato di elenco di persone. Usa la palette web pubblicata e profili fittizi, mentre il layout e il codice dei filtri sono originali. Un sito istituzionale autorizzato dovrebbe usare il tema supportato e i pattern aggiornati, invece di copiare questa dimostrazione in un blocco HTML personalizzato presumendo che sia equivalente.

Leggi la specifica di supporto

Michigan Forty Two Palette web e contrasto del sistema di design

Usa il riferimento specifico per il web

Maize e Blue definiscono l’identità primaria. La palette web aggiunge Base Puma Black, Base White e tonalità di blu con nomi ufficiali, tra cui Hyperlink Blue. Le tonalità secondarie supportano la coppia primaria; non giustificano l’uso di uno sfondo acceso e diverso per ogni ambito accademico. Nell’esempio i colori dell’identità sono usati nell’intestazione e, intorno ai risultati, sono abbinati a tonalità neutre e sobrie.

La palette del sistema web e la pagina generale del marchio differiscono su alcuni valori secondari, tra cui A2 Amethyst. La tabella di riferimento usa la fonte dedicata al sistema web. Ogni scostamento dai valori predefiniti del tema richiede comunque una verifica del contrasto. Il fatto che un colore abbia un nome ufficiale non lo rende automaticamente adatto al testo piccolo su qualsiasi sfondo.

Leggi la specifica di supporto

Michigan Forty Two Tipografia e tono editoriale del sistema di design

Gerarchia senza inventare token tipografici

La guida tipografica di Engineering indica Roboto e Open Sans come principali famiglie web e specifica l’uso di Open Sans per i paragrafi. Playfair Display è indicato per la stampa, quindi non costituisce una prova che le intestazioni web debbano essere necessariamente serif. Questa anteprima usa esplicitamente Arial come fallback; il corpo da 17px e le dimensioni delle intestazioni sono scelte dimostrative, non token tipografici Forty-Two inventati.

Le linee guida di scrittura raccomandano l’uso delle minuscole nei titoli di pagina, nelle intestazioni di sezione, nelle etichette dei link di ancoraggio, nei titoli promozionali e nelle didascalie. È una scelta adatta a un elenco di persone: un nome, un ruolo e una descrizione della ricerca chiari comunicano più di uno slogan promozionale. Nei siti reali, usa correttamente le denominazioni istituzionali e non aggiungere ai profili qualifiche non verificate.

Leggi la specifica di supporto

Michigan Forty Two Struttura delle persone e tassonomia del sistema di design

Separa la persona dall’etichetta del filtro

L’indice ufficiale dei corsi di formazione include la configurazione delle persone, l’aggiunta di un ruolo o di un’area di ricerca e due layout dei filtri: Query Sort e Sidebar. Queste voci indicano che le persone e le relative classificazioni sono contenuti gestiti, non blocchi duplicati manualmente in ogni pagina di elenco. Gli attributi esatti del plugin attualmente in uso non sono stati reperiti pubblicamente; questa guida quindi non inventa nomi di shortcode né chiavi di query.

Nell'esempio indipendente, ogni persona ha un ruolo e un'area. I due filtri si applicano insieme. Questo modello volutamente semplice rende visibile l'intersezione: Docenti più Robotica non restituisce risultati, mentre Personale di ricerca più Robotica restituisce un risultato. Una tassonomia di produzione può essere più articolata, ma il comportamento AND/OR dovrebbe essere definito con chiarezza prima di realizzare l'interfaccia.

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

Riferimento del codice

Leggi la specifica di supporto

Sistema di design Michigan Forty Two Filtraggio e recupero del sistema di progettazione

Mantieni comprensibile la selezione corrente

Quando si modifica un filtro, i profili visibili e un'area live per il conteggio dei risultati si aggiornano. Il focus non si sposta dal menu a discesa, così chi usa la tastiera può confrontare le opzioni senza dover tornare ogni volta al controllo. Il messaggio di nessun risultato spiega che la combinazione non produce risultati e suggerisce di modificare uno dei due campi o di svuotarli entrambi.

Svuota filtri ripristina i valori predefiniti e mostra di nuovo tutti i profili, quindi riporta il focus sul primo filtro. I profili mantengono un ordine stabile. In questo modo si evita un problema insidioso negli elenchi in cui ogni modifica a un filtro rimuove alcune persone e, inaspettatamente, riordina anche le altre. I nomi e le descrizioni qui presenti sono fittizi e non implicano incarichi reali presso un'università.

1. Seleziona Personale di ricerca e verifica che l'elenco si riduca a un solo profilo.
2. Combina Docenti e Robotica e controlla il messaggio di recupero dello stato senza risultati.
3. Svuota entrambi i filtri e verifica che tutti e tre i profili ricompaiano nell'ordine originale.

Leggi la specifica di supporto

Sistema di design Michigan Forty Two Blocchi, pattern e manutenzione del sistema di progettazione

Scegli un pattern aggiornato

L'inventario dei materiali di formazione include pattern per esperti, eventi, cicli di query, articoli recenti e persone. Scegli il pattern che corrisponde al modello dei contenuti, invece di assemblare una griglia dall'aspetto simile usando caselle di testo scollegate. Un pattern per le persone può mantenere il legame tra la scheda di una persona e l'elenco in cui compare.

Il vecchio Accordion Item è indicato esplicitamente come deprecato. La sua presenza nei materiali di formazione storici non è un invito a usarlo in una nuova implementazione. Se le pagine esistenti usano un blocco meno recente, consulta il sito di formazione aggiornato e il processo di manutenzione supportato prima di sostituirlo; conserva i contenuti significativi e le destinazioni esistenti mentre modifichi la presentazione.

• Schede delle persone: nomi, ruoli, aree e contenuti dei profili devono appartenere alla struttura dei contenuti supportata.
• Pattern: usa una composizione documentata e aggiornata per l'elenco o la sezione promozionale.
• Navigazione: considera i link di esplorazione contenuti da mantenere, non un effetto collaterale della pubblicazione di una pagina.

Leggi la specifica di supporto

Sistema di design Michigan Forty Two Flusso di lavoro pratico per l'editor del sistema di progettazione

Collega una nuova pagina al sito

La checklist ufficiale per le nuove pagine spiega che la pubblicazione non le rende automaticamente individuabili. Assegna la pagina a una pagina principale, quindi collegala all'intestazione, alla navigazione secondaria, ai filtri per ruolo/ricerca o al piè di pagina, a seconda delle necessità. Nel flusso di lavoro documentato per l'editor, apri Appearance, Editor e Navigation, seleziona il menu appropriato, aggiungi la pagina e regola la sua posizione nella visualizzazione elenco.

Per un progetto Forty-Two autorizzato, questo flusso nell'editor è il percorso concreto di integrazione. Questa risorsa non inventa comandi per un SDK pubblico. Il blocco di configurazione indica il percorso di hosting supportato e rimanda ai materiali di formazione; l'esempio completo di codice locale è presentato separatamente per lo studio indipendente.

Leggi la specifica di supporto

Sistema di design Michigan Forty Two Accessibilità e limiti d'identità del sistema di progettazione

Gli stili predefiniti non convalidano i contenuti

Le indicazioni sull'accessibilità di Engineering spiegano che i componenti Forty-Two predefiniti sono progettati per offrire un contrasto accessibile, ma la modifica dei colori può vanificare questo vantaggio. Anche i contenuti dei profili richiedono titoli significativi, etichette dei link chiare, testi alternativi accurati per le immagini e uno stato senza risultati comprensibile. L'anteprima verifica il layout adattivo e il comportamento dei filtri, ma non certifica la conformità istituzionale.

L'anteprima originale non usa Block M, il marchio dell'università né dati reali del personale. I loghi istituzionali sono distribuiti tramite canali di brand autenticati e appartengono a un sistema d'identità distinto da questi colori didattici. Un vero sito di Engineering dovrebbe seguire il processo supportato per il brand e la pubblicazione; un prototipo indipendente dovrebbe dichiarare con trasparenza la propria natura.

Leggi la specifica di supporto

Sistema di design Michigan Forty Two Esempi di componenti del sistema di progettazione

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