Sistema di design HarvardSites.

Sistema di design HarvardSites Una piattaforma per editor

Parti da una configurazione HarvardSites reale

Il sito pubblico del design system descrive componenti editoriali riutilizzabili e le opzioni disponibili nei siti dell’Università. Non dimostra l’esistenza di un pacchetto chiamato harvard-design-system né di un React API importabile. Un editor autorizzato del sito assembla i componenti della piattaforma; uno sviluppatore indipendente può studiare i modelli di contenuto documentati senza fingere di usare lo stesso CMS.

Il punto di partenza utile è il tipo di pagina: una pagina sintetica per una conferenza richiede una panoramica, un programma, la possibilità di trovare le sessioni e informazioni aggiuntive per i partecipanti. La ricetta di configurazione fornita associa ogni esigenza a un componente HarvardSites reale. L’esempio indipendente HTML mostra questa composizione senza dipendenze, con contenuti di fantasia e senza segni di identità istituzionale.

Leggi la specifica di supporto

Tipografia e leggibilità di sistema di design HarvardSites

Separa l’abbinamento dei font dallo stile

La piattaforma propone tre abbinamenti per titoli e testo: Baskerville con Source Sans Pro, Merriweather con Roboto e Inter con Inter. Sono scelte indipendenti dallo stile del sito. Passare da un layout con cornice a uno arrotondato non implica cambiare font.

Gli standard di progettazione grafica limitano il design a due caratteri tipografici, ne richiedono almeno uno sans serif e stabiliscono una dimensione minima del testo di 1rem. Menu, controlli, etichette e altri elementi di orientamento usano il sans serif. Il criterio pubblicato per l’altezza della x è 8.3px ±5% con impostazione a 16px: è più specifico di una semplice raccomandazione di usare un carattere leggibile. L’esempio usa Arial e Georgia come font alternativi visibili, senza affermare che siano abbinamenti forniti dalla piattaforma o che siano stati sottoposti a una verifica formale rispetto a tale criterio.

Leggi la specifica di supporto

L’allineamento fa parte dello standard

Blocchi di testo e titoli seguono la direzione di lettura, anziché essere centrati o giustificati. Il testo che non è un link non è sottolineato. Mantieni chiari i titoli e usa il peso del carattere per dare risalto; non creare effetti da titolo allungando le lettere, aggiungendo contorni o aumentando eccessivamente la spaziatura. Per questo l’anteprima mantiene tutte le etichette a 1rem o più e allinea a sinistra l’introduzione dell’evento.

Leggi la specifica di supporto

Tre scelte di stile indipendenti di sistema di design HarvardSites

Cornice, colore e tipografia sono impostazioni diverse

Light & Elegant presenta sezioni aperte, angoli leggermente arrotondati e immagini spostate in modo discreto. Bold & Compelling mette in risalto bordi diritti, contorni e separatori. Friendly & Approachable usa raggruppamenti arrotondati e pulsanti a pillola. Questi stili modificano la cornice visiva degli stessi contenuti e della stessa struttura dei componenti.

L’esempio offre un selettore dello stile di layout per esplorare le differenze senza modificare il testo, lo stato dell’Accordion o il comportamento del focus. Riproduce in modo approssimativo le idee visive documentate, usando valori CSS originali; non riproduce i fogli di stile del CMS. In particolare, gli spessori dei bordi e i raggi degli angoli sono scelte applicative, non token estratti da HarvardSites.

Leggi la specifica di supporto

Assegna i colori in base al ruolo

HarvardSites descrive i ruoli di testo, sfondi, pulsanti e accenti, con corrispondenze per temi chiari e scuri. La palette può variare mantenendo coerenti queste relazioni. Il riferimento pubblico non definisce un unico insieme obbligatorio di colori esadecimali per tutti i siti. Per questo l’anteprima indica l’inchiostro neutro, l’accento marrone e lo sfondo caldo come valori originali, invece di chiamarli token del brand Harvard.

Leggi la specifica di supporto

Componi la pagina sintetica dell’evento sistema di design HarvardSites

Mantieni visibile il programma principale

Usa Hero o Section Heading per presentare l’evento, quindi una tabella in linea per il programma. La guida ufficiale alle pagine sintetiche consiglia celle concise, un formato orario coerente e poche colonne per garantire la leggibilità su dispositivi mobili. L’esempio usa le colonne Ora e Sessione; il luogo e le informazioni sull’accessibilità sono riportati sopra o sotto la tabella, invece di creare un programma fitto di cinque colonne.

Un Accordion è adatto alle domande pratiche aggiuntive. Le informazioni essenziali su requisiti di partecipazione, accessibilità della sede, annullamenti o scadenze dovrebbero restare visibili, perché il testo chiuso potrebbe passare inosservato. Per un singolo evento può bastare una pagina breve e autonoma; un programma articolato, con abstract lunghi e molti percorsi paralleli, richiede pagine di dettaglio collegate, anziché sezioni a scomparsa annidate all’infinito.

• Usa Hero o Section Heading per indicare lo scopo e orientare il lettore.
• Usa una tabella per gli orari che i partecipanti devono poter confrontare a colpo d’occhio.
• Usa un List basato su una tassonomia quando la ricerca di eventi o sessioni richiede filtri.

Leggi la specifica di supporto

Scegli la struttura della scheda più adatta sistema di design HarvardSites

Un contenuto in evidenza è diverso da una raccolta

Una 50/50 Card affianca un’immagine o una sezione di testo a un testo esplicativo. I campi documentati includono un’immagine, una didascalia, un occhiello facoltativo, un titolo, una descrizione e link di invito all’azione. Riservala a una storia o a un evento di particolare rilievo; le Vertical Cards sono più adatte a rappresentare più elementi di pari importanza, mentre le Button-Style Cards servono per le azioni rapide.

Una 50/50 Card ha bisogno di spazio. Le indicazioni sconsigliano di inserirla a forza in una zona stretta di navigazione laterale e raccomandano immagini che trasmettano significato, non decorazioni generiche. L’esempio usa una composizione divisa solo testuale, una variante mostrata negli esempi ufficiali: un breve tema da un lato, una descrizione e un link al programma dall’altro. In questo modo si evita di suggerire che una foto inventata del campus rappresenti un’autentica ambientazione di Harvard.

Leggi la specifica di supporto

Dimensioni e alternative delle immagini sistema di design HarvardSites

Prepara le risorse per il componente

La guida ufficiale alle immagini suggerisce esportazioni di circa 1920px per le immagini Hero, 800px per una 50/50 Card, 600px per le Vertical Cards e 400px per le miniature degli elenchi. Sono valori indicativi per la preparazione, non larghezze di visualizzazione fisse di CSS. La guida raccomanda che la maggior parte dei file resti sotto i 200KB, di usare JPG per le foto, PNG quando servono trasparenza o disegni al tratto e SVG per le grafiche semplici.

Fornisci un testo alternativo significativo per le immagini informative e aggiungi didascalie quando è utile mostrare il contesto o l’attribuzione dell’immagine. Una mappa della sede deve essere accompagnata da un percorso testuale o da una spiegazione equivalente della posizione. Modificando il ritaglio si può escludere un volto, un oggetto o un’etichetta a cui fa riferimento il testo; dopo il caricamento, controlla il layout effettivamente ridotto, senza presumere che un ritaglio pensato per lo schermo ampio vada bene su tutti i dispositivi.

Leggi la specifica di supporto

Comportamento e controlli dell’Accordion sistema di design HarvardSites

Informazioni secondarie con un titolo chiaro

HarvardSites documenta sia gli accordion che si chiudono automaticamente, sia una variante che resta aperta e include controlli per mostrare o chiudere tutte le sezioni. L’esempio sceglie deliberatamente il comportamento indipendente che mantiene aperte le sezioni, così chi visita la pagina può leggere insieme le informazioni su viaggio e preparazione. I singoli titoli descrivono l’argomento nascosto, senza che sia necessario aprire ogni pannello per identificarlo.

Il codice qui usa gli elementi nativi details e summary per un’implementazione indipendente. Non afferma che questo sia il markup generato da HarvardSites. I pulsanti per aprire e chiudere tutte le sezioni aggiornano la proprietà details.open di ogni elemento; il browser mantiene l’attivazione nativa da tastiera per ciascun summary. Non servono accordion annidati e le informazioni obbligatorie restano fuori da questo gruppo.

<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>

Riferimento del codice

Leggi la specifica di supporto

Sistema di design HarvardSites Un flusso di lavoro concreto per editor

Configura una volta, componi in modo coerente

In un progetto HarvardSites autorizzato, seleziona lo stile del sito approvato, l’abbinamento di caratteri tipografici e i ruoli dei colori prima di comporre la pagina dell’evento. Usa i componenti già presenti nella piattaforma, invece di incollare la demo indipendente HTML nell’editor aspettandoti che venga eseguito il suo script personalizzato. I controlli esatti dell’editor dipendono dal sito predisposto; questa procedura indica le scelte documentate senza inventare una schermata delle impostazioni.

Il selettore di stile della demo modifica solo l’inquadratura visiva. Dopo aver aperto entrambi i pannelli per i partecipanti, cambia stile e verifica che restino aperti. Poi chiudili tutti e riaprine uno con la tastiera. È un utile controllo di continuità: la presentazione visiva non dovrebbe far perdere al lettore il punto raggiunto né modificare il modello dei contenuti.

1. Prepara il titolo dell’evento, la data, il luogo, l’agenda, le informazioni sull’accessibilità e il nome del responsabile degli aggiornamenti, dopo averne verificato l’esattezza.
2. Componi l’introduzione, una breve tabella con l’agenda e un accordion secondario usando componenti documentati.
3. Verifica l’anteprima nei layout stretti e l’uso da tastiera; accertati che i link per la registrazione portino alla destinazione approvata effettiva.

Leggi la specifica di supporto

Sistema di design HarvardSites Esempi di componenti del sistema di progettazione

<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research forum — HarvardSites pattern interpretation</title><style>*{box-sizing:border-box}body{margin:0;font:1rem/1.6 Arial,sans-serif;color:#242424;background:#fff}main{max-width:70rem;margin:auto;padding:2rem 1.25rem}.config{padding:1rem 0;border-bottom:1px solid #b9b4ac;margin-bottom:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}select,button{font:inherit;color:inherit;background:white;border:1px solid #615a51;padding:.65rem .9rem}button{cursor:pointer}h1,h2{font-family:Georgia,serif;line-height:1.15}h1{font-size:clamp(2.5rem,6vw,4rem);max-width:15ch;margin:1rem 0}h2{font-size:1.75rem}a{color:#653f3a;text-underline-offset:4px}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #005fcc;outline-offset:4px}.hero{padding-bottom:2rem;border-bottom:1px solid #b9b4ac}.meta{color:#653f3a;font-weight:bold}.split{display:grid;gap:1.5rem;margin:2rem 0;padding:1.5rem;background:#f4f1ec}.split h2{margin:0}.split p{margin:0 0 1rem}table{width:100%;border-collapse:collapse;margin:1rem 0 2rem}caption{text-align:left;font-weight:bold;margin-bottom:1rem}th,td{text-align:left;padding:1rem .5rem;border-bottom:1px solid #b9b4ac;vertical-align:top}th:first-child,td:first-child{width:7rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}details{border-top:1px solid #b9b4ac;padding:1rem 0}details:last-of-type{border-bottom:1px solid #b9b4ac}summary{font-weight:bold;cursor:pointer}details p{max-width:55ch;margin-bottom:0}.note{margin:2rem 0 0;padding:1rem;border-left:4px solid #653f3a;background:#f4f1ec}footer{padding-top:2rem;margin-top:2rem;border-top:1px solid #b9b4ac}body[data-style="bold"] .split{border:2px solid #242424}body[data-style="friendly"] .split{border-radius:1.5rem}body[data-style="friendly"] button{border-radius:3rem}body[data-style="light"] .split{border-radius:.3rem;background:#faf9f6}@media(min-width:48rem){.split{grid-template-columns:1fr 1fr;padding:2rem}.body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}main{padding:2.5rem}}</style></head><body data-style="bold"><main><div class="config"><label for="style">Explore framing</label><select id="style"><option value="bold">Bold &amp; Compelling interpretation</option><option value="light">Light &amp; Elegant interpretation</option><option value="friendly">Friendly &amp; Approachable interpretation</option></select></div><header class="hero"><p class="meta">An original academic event example</p><h1>Ideas across disciplines</h1><p>A one-day forum on how researchers turn shared questions into new methods.</p><p><strong>Friday, 16 October · 9:30–16:00 · Example Learning Centre</strong></p><p>Fictional programme. No registration or university affiliation is implied.</p></header><section class="split" aria-labelledby="theme"><h2 id="theme">One question.<br>Many ways of seeing.</h2><div><p>Historians, scientists, and designers compare the evidence they work with and the assumptions they bring to it.</p><a href="#agenda">Explore the day’s programme →</a></div></section><div class="body-grid"><section id="agenda" tabindex="-1"><h2>The day at a glance</h2><table><caption>Illustrative programme</caption><thead><tr><th scope="col">Time</th><th scope="col">Session</th></tr></thead><tbody><tr><td>09:30</td><td><strong>Welcome and questions</strong><br>Shared framing for the day</td></tr><tr><td>10:00</td><td><strong>Working with evidence</strong><br>A conversation across disciplines</td></tr><tr><td>13:30</td><td><strong>Methods in practice</strong><br>Small-group demonstrations</td></tr><tr><td>15:30</td><td><strong>What changes next?</strong><br>Reflection and closing discussion</td></tr></tbody></table></section><section><h2>Attendee information</h2><div class="controls"><button id="open-all" type="button">Open all sections</button><button id="close-all" type="button">Close all sections</button></div><details><summary>What will I need?</summary><p>Bring a notebook. All reading material is provided in this fictional programme, and no specialist preparation is required.</p></details><details><summary>Can I join part of the day?</summary><p>The example schedule has morning and afternoon sessions. A real event page should state whether individual sessions require separate registration.</p></details><p class="note"><strong>Access information stays visible.</strong><br>A real event must provide verified venue access details and an accommodation contact here, outside collapsed panels.</p></section></div><footer>Independent interpretation of HarvardSites editorial guidance. Original layout values and colors; Arial and Georgia fallbacks. This is not a HarvardSites CMS page.</footer></main><script>document.querySelector('#style').addEventListener('change',e=>document.body.dataset.style=e.target.value);const panels=[...document.querySelectorAll('details')];document.querySelector('#open-all').addEventListener('click',()=>panels.forEach(p=>p.open=true));document.querySelector('#close-all').addEventListener('click',()=>panels.forEach(p=>p.open=false));</script></body></html>