HarvardSites tasarım sistemi.

HarvardSites tasarım sistemi editörlere yönelik bir platform

Gerçek bir HarvardSites yapılandırmasıyla başlayın

Kamuya açık tasarım sistemi sitesi, üniversite web sitelerinde kullanılabilen yeniden kullanılabilir editoryal bileşenleri ve seçenekleri açıklar. harvard-design-system adlı bir paketin veya içe aktarılabilir bir React API’in varlığını kanıtlamaz. Yetkili bir site editörü platformun bileşenlerini bir araya getirir; bağımsız bir geliştirici ise aynı CMS’i çalıştırıyormuş gibi davranmadan belgelenmiş içerik kalıplarını inceleyebilir.

İşe yarar başlangıç noktası sayfanın türüne karar vermektir: konferans için tek sayfalık bir tanıtımda genel bakış, program, oturumları keşfetme ve katılımcılara yönelik ek bilgiler bulunmalıdır. Sunulan yapılandırma tarifi her ihtiyacı gerçek bir HarvardSites bileşeniyle eşleştirir. Bağımsız HTML, bu bileşen düzenini kurgusal içerikle ve kurumsal kimlik işaretleri kullanmadan örnekler.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi tipografi ve okunabilirlik

Yazı tipi eşleşmesini stilden ayrı tutun

Platformda üç başlık/gövde metni eşleşmesi sunulur: Baskerville ile Source Sans Pro, Merriweather ile Roboto ve Inter ile Inter. Bunlar site stilinden bağımsız seçeneklerdir. Sayfayı çerçeveli düzenden yuvarlatılmış düzene geçirmek, yazı tiplerinin de değişeceği anlamına gelmez.

Grafik tasarım standartları, tasarımda en fazla iki yazı tipi kullanılmasını şart koşar; en az birinin sans serif olmasını ve metin boyutunun en az 1rem olmasını ister. Menülerde, kontrollerde, etiketlerde ve diğer yön bulma öğelerinde sans serif kullanılır. Yayımlanmış x-yüksekliği ölçütü, 16px boyutunda ayarlandığında 8.3px ±5%’tir; bu, yalnızca okunaklı bir yazı tipi önermekten daha özgül bir gerekliliktir. Örnekte görünür yedek yazı tipleri olarak Arial ve Georgia kullanılır; bunların platformda sağlanan bir eşleşme olduğu veya ölçüte göre resmî olarak denetlendiği iddia edilmez.

Destekleyici belirtimi okuyun

Hizalama standardın bir parçasıdır

Metin blokları ve başlıklar, ortalanmış veya iki yana yaslanmış hizalama yerine okuma yönünü izler. Bağlantı olmayan metinlerin altı çizilmez. Başlıkları belirgin tutun ve vurgu için yazı kalınlığını kullanın; harfleri esneterek, dış çizgi ekleyerek veya harf aralığını fazla açarak gösterişli bir görünüm oluşturmayın. Bu nedenle önizlemede her etiket en az 1rem boyutundadır ve etkinlik tanıtımı sola hizalanmıştır.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi birbirinden bağımsız üç stil seçeneği

Çerçeve, renk ve tipografi farklı ayarlardır

Light & Elegant; açık bölümler, hafif yuvarlatılmış köşeler ve ince bir ofsetle yerleştirilmiş görseller sunar. Bold & Compelling; düz kenarları, dış çizgileri ve ayırıcıları öne çıkarır. Friendly & Approachable; yuvarlatılmış gruplandırma ve kapsül biçimli düğmeler kullanır. Bu seçenekler, aynı içeriğin ve bileşen yapısının görsel çerçevesini değiştirir.

Örnekte, metni, akordeon durumunu veya odak davranışını değiştirmeden farkları incelemeyi sağlayan bir düzen stili seçicisi bulunur. Belgelenmiş görsel yaklaşımları özgün CSS ile yaklaşık olarak yansıtır; CMS’in stil sayfalarını yeniden üretmez. Özellikle kenarlık genişlikleri ve köşe yarıçapları, HarvardSites tokenlarından alınmış değil, uygulamaya özgü tercihlerdir.

Destekleyici belirtimi okuyun

Renkleri rollerine göre atayın

HarvardSites; metin, arka plan, düğme ve vurgu renkleri için açık ve koyu eşlemeler içeren roller tanımlar. Bu ilişkiler tutarlı kaldığı sürece palet değişebilir. Kamuya açık başvuru, tüm siteler için zorunlu tek bir onaltılık renk kümesi belirlemez. Bu nedenle önizlemedeki nötr metin rengi, kahverengi vurgu ve sıcak arka plan, Harvard marka tokenları olarak değil, özgün değerler olarak belirtilir.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi etkinlik tek sayfalık tanıtımını oluşturun

Ana programı görünür tutun

Etkinliği tanıtmak için Hero veya Section Heading kullanın, ardından programı satır içi bir tabloyla gösterin. Resmî tek sayfalık tanıtım kılavuzu; kısa hücreler, tutarlı saat gösterimi ve mobilde okunabilirlik için az sayıda sütun önerir. Örnekte Saat ve Oturum sütunları kullanılır; mekân ve erişim bilgileri, beş sütunlu sıkışık bir programa dönüştürülmek yerine tablonun üstünde veya altında verilir.

Ek pratik sorular için akordeon uygundur. Uygunluk koşulları, mekâna erişim, iptal veya son tarihler gibi temel bilgiler görünür kalmalıdır; çünkü daraltılmış içerikler gözden kaçabilir. Tek bir etkinlik kısa ve kendi başına yeterli bir sayfada sunulabilir. Uzun özetleri ve aynı anda yürüyen çok sayıda oturumu olan kapsamlı bir program için, iç içe açılır bölümleri durmadan çoğaltmak yerine ayrıntı sayfalarına bağlantı verin.

• Amaç ve yön duygusu kazandırmak için Hero veya Section Heading kullanın.
• Katılımcıların saatleri bir bakışta karşılaştırması gerekiyorsa tablo kullanın.
• Etkinlik veya oturum keşfi filtreleme gerektiriyorsa taksonomi odaklı bir List kullanın.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi doğru kart yapısını seçin

Tek bir öne çıkan öğe, bir koleksiyondan farklıdır

50/50 Card, görseli veya metin alanını açıklayıcı içerikle bir araya getirir. Belgelenmiş alanları arasında görsel, altyazı, isteğe bağlı üst etiket, başlık, açıklama ve eylem bağlantıları bulunur. Bunu tek bir öne çıkan hikâye veya etkinlik için ayırın; eşit öneme sahip birden çok kayıt için Vertical Cards, hızlı eylemler içinse Button-Style Cards daha uygundur.

50/50 Card’ın etkili olabilmesi için yeterli alana ihtiyacı vardır. Kılavuz, kartın dar bir yan gezinme alanına sıkıştırılmamasını ve görsellerin stok süslemeler yerine anlam taşımasını önerir. Örnekte resmî örneklerde gösterilen, metinden oluşan bölünmüş bir düzen kullanılır: bir tarafta kısa bir tema, diğer tarafta açıklama ve programa bağlantı. Böylece uydurma bir kampüs fotoğrafının gerçek bir Harvard ortamını yansıttığı izlenimi yaratılmaz.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi görsel boyutları ve alternatifleri

Varlıkları bileşene göre hazırlayın

Resmî görsel kılavuzu; Hero görselleri için 1920px, 50/50 Card için 800px, Vertical Cards için 600px ve liste küçük resimleri için 400px civarında dışa aktarma boyutları önerir. Bunlar yaklaşık hazırlık hedefleridir; görüntülenen CSS genişlikleri için kesin değerler değildir. Çoğu dosyanın 200KB altında tutulmasını, fotoğraflarda JPG, şeffaflık veya çizgi çalışması gerektiğinde PNG, basit grafiklerde ise SVG kullanılmasını önerir.

Bilgilendirici görsellere anlamlı alternatif metin ekleyin; görselin yanında görünür bağlam veya kaynak bilgisi gerekiyorsa altyazı kullanın. Bir mekân haritasının yanı sıra metinle tarif edilen bir güzergâh veya eşdeğer konum açıklaması da sunulmalıdır. Kırpmayı değiştirmek, metnin atıfta bulunduğu bir yüzü, nesneyi veya etiketi kesebilir. Geniş masaüstü kırpımının tüm cihazlarda işe yarayacağını varsaymak yerine yükledikten sonra dar ekran düzenini de kontrol edin.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi akordeon davranışı ve kontroller

Açık bir adla sunulan ikincil bilgiler

HarvardSites, otomatik kapanan akordeonların yanı sıra tüm bölümleri açan veya kapatan denetimlere sahip, açık kalan bir seçeneği de belgeler. Örnek, ziyaretçilerin seyahat ve hazırlık notlarını birlikte okuyabilmesi için her bölümün bağımsız olarak açık kalmasını özellikle seçer. Her başlık, okuyucunun konuyu anlamak için paneli açmasını gerektirmeden gizli içeriği açıklar.

Buradaki kod, bağımsız bir uygulama için yerel details ve summary öğelerini kullanır. HarvardSites tarafından oluşturulan biçimlendirmeyi temsil ettiği iddia edilmez. Tümünü aç ve tümünü kapat düğmeleri her details.open özelliğini günceller; tarayıcı, her summary için yerel klavye etkinleştirme davranışını korur. İç içe akordeon gerekmez ve zorunlu bilgiler bu grubun dışında tutulur.

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

Kod referansı

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi Somut bir editör iş akışı

Bir kez yapılandırın, tutarlı biçimde oluşturun

Yetkili bir HarvardSites projesinde etkinlik sayfasını oluşturmadan önce onaylı site stilini, yazı tipi eşleşmesini ve renk rollerini seçin. Platformun mevcut bileşenlerini kullanın; bağımsız demoyu HTML bir düzenleyiciye yapıştırıp özel betiğinin çalışmasını beklemeyin. Kullanılabilir düzenleyici denetimleri, siteye tanımlanan özelliklere bağlıdır; bu tarif, var olmayan bir ayarlar ekranı uydurmadan belgelenmiş tercihleri belirtir.

Demonun stil seçicisi yalnızca çerçevelemeyi değiştirir. Her iki katılımcı panelini de açtıktan sonra stilleri değiştirin ve panellerin açık kaldığını doğrulayın. Ardından hepsini kapatın ve klavyeyle birini yeniden açın. Bu, sürekliliği denetlemek için yararlıdır: görsel sunum, okuyucunun kaldığı yeri silmemeli veya içerik modelini değiştirmemelidir.

1. Doğrulanmış etkinlik başlığını, tarihi, yeri, programı, erişim bilgilerini ve güncellemelerden sorumlu kişiyi hazırlayın.
2. Girişi, kısa program tablosunu ve ikincil akordeonu belgelenmiş bileşenlerle oluşturun.
3. Dar ekran düzenlerini ve klavye kullanımını önizleyin; kayıt bağlantılarının onaylanmış gerçek hedefe yöneldiğini doğrulayın.

Destekleyici belirtimi okuyun

HarvardSites tasarım sistemi Bileşen Örnekleri

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