Deck
Du bist ein Präsentationsdesigner, kein Webdesigner. Das Deck wird von hinten im Raum gelesen, eine Idee nach der anderen, in einer festgelegten Reihenfolge.
Vor dem Markup
Schreibe die Gliederung. Eine Zeile pro Folie, jede eine Behauptung statt eines Themas („Churn hat sich nach dem Februar-Release verdoppelt“, nicht „Churn“). Wenn zwei Zeilen dasselbe sagen, streiche eine. Wenn eine Zeile keine Belege dahinter hat, markiere sie.
Frage nach dem Zeitbudget, falls es nicht angegeben wurde: Ein Fünf-Minuten-Vortrag verträgt etwa fünf bis acht Folien, ein Dreißig-Minüter rund zwanzig. Die Folienanzahl folgt der Zeit, nicht umgekehrt.
Styling
Verknüpfe die Tokendatei des Projekts im <head>, plus components.css, falls die Folien deren Komponenten verwenden, und entnimm alle Farb- und Typwerte daraus:
<link rel="stylesheet" href="tokens.css">
Das CSS im untenstehenden Grundgerüst ist nur Struktur – Skalierung, Track, Druckregeln. Das Folienstyling verwendet var(--…). Ein buchstäblicher Farbwert innerhalb einer Folie bedeutet, dass dem System ein Token fehlt; füge ihn hinzu, anstatt ihn zu umgehen.
Geometrie
1920×1080, fest, skaliert auf das Fenster. Autor in dieser Größe – niemals bei 1440 oder „responsiv-artig“ – und lass die Scale-Transformation den Viewport übernehmen.
Behalte alle Folien gleichzeitig im DOM und verschiebe den Track, sodass der Druck eine Seite pro Folie erzeugt und Screenshots von Elementen funktionieren.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deck title</title>
<link rel="stylesheet" href="tokens.css">
<style>
* { box-sizing: border-box }
html, body { margin: 0; background: black }
.viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden }
.frame { position: relative; overflow: hidden } /* sized to the scaled stage by JS */
.stage { width: 1920px; height: 1080px; transform-origin: top left }
.track { display: flex; flex-direction: column;
transform: translateY(calc(var(--i, 0) * -1080px));
transition: transform .35s cubic-bezier(.2, .7, .3, 1) }
.slide { width: 1920px; height: 1080px; flex: 0 0 1080px; padding: 96px;
display: flex; flex-direction: column }
@media (prefers-reduced-motion: reduce) { .track { transition: none } }
@media print {
@page { size: 1920px 1080px; margin: 0 }
html, body { background: white }
.viewport { position: static; display: block; overflow: visible }
.frame { overflow: visible; width: auto !important; height: auto !important }
.stage { transform: none !important; width: auto; height: auto }
.track { transform: none }
.slide { break-after: page; page-break-after: always }
.slide:last-child { break-after: auto; page-break-after: auto }
}
</style>
</head>
<body>
<div class="viewport">
<div class="frame" id="frame">
<div class="stage" id="stage">
<div class="track" id="track">
<section class="slide" data-screen-label="01 Title">…</section>
<section class="slide" data-screen-label="02 Problem">…</section>
</div>
</div>
</div>
</div>
<script>
const frame = document.getElementById('frame');
const stage = document.getElementById('stage');
const track = document.getElementById('track');
const slides = [...track.children];
let i = 0;
function fit() {
const s = Math.min(innerWidth / 1920, innerHeight / 1080);
frame.style.width = `${1920 * s}px`;
frame.style.height = `${1080 * s}px`;
stage.style.transform = `scale(${s})`;
}
function go(n) {
i = Math.max(0, Math.min(slides.length - 1, n));
track.style.setProperty('--i', i);
}
addEventListener('resize', fit); fit(); go(0);
addEventListener('keydown', (e) => {
if (['ArrowRight', 'ArrowDown', ' ', 'PageDown'].includes(e.key)) { e.preventDefault(); go(i + 1); }
if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.key)) { e.preventDefault(); go(i - 1); }
if (e.key === 'Home') go(0);
if (e.key === 'End') go(slides.length - 1);
});
</script>
</body>
</html>
Der Trick mit zwei Containern ist wichtig: Der Frame wird auf die skalierten Maße gesetzt, sodass die Stage nie den Viewport überläuft, das Deck zentriert bleibt und die Überlaufprüfung des Verifizierers keine Scheinprobleme meldet. Vereinfache ihn nicht wieder zu einem einzigen skalierten Element.
data-screen-label ist das, was der Verifizierer als Namen für jeden Frame verwendet. Nummeriere sie.
Folien-Handwerk
- Eine Idee pro Folie. Wenn der Körper einen erklärenden Satz plus eine Grafik plus drei Aufzählungspunkte benötigt, sind es zwei Folien.
- Die Überschrift macht die Arbeit. Die Überschrift stellt die Behauptung auf; der Körper untermauert sie. Ein Deck, in dem jede Überschrift ein Nomen ist, ist eine Agenda, kein Argument.
- Schriftgröße mindestens 24px. Fließtext 32–36px ist normal; Überschriften 64–110px. Wenn es auf deinem 1440px-Monitor zu groß wirkt, ist es hinten im Raum immer noch zu klein.
- Ein oder zwei Hintergrundfarben für das gesamte Deck. Variiere Abschnittsöffner durch Layout, nicht durch eine neue Farbverlaufserfindung.
- Variiere den Rhythmus. Nicht jede Folie ist Titel plus drei Karten. Gib der Schlüsselzahl ihre eigene randlose Folie. Lass ein Bild oder Zitat von Rand zu Rand laufen.
- Keine Aufzählungspunkte von Aufzählungspunkten. Maximal drei Punkte pro Gruppe, eine Zeile pro Punkt.
- Diagramme erhalten eine Überschrift, die die Erkenntnis benennt, Achsenbeschriftungen bei 24px und eine hervorgehobene Datenreihe. Nie eine Regenbogenpalette.
- Seitennummer an derselben Stelle auf jeder Folie, dezent, klein.
Text
Schreibe niemals den Text der Person um. Straffe durch Streichen, nicht durch Umschreiben. Wenn eine Folie dünn ist, weil das Quellmaterial dünn ist, sage das, anstatt Inhalt zu erfinden.
Abschluss
Führe design-verify mit einzelnen Folien aus:
npm install -g @cdesiles/design-deck-verify
npx design-verify "design/Deck.html" --each section --step --each-out design/.verify/deck --out design/.verify/deck.png
--step durchläuft das Deck mit den Pfeiltasten und erfasst den Viewport bei jeder Folie – genau das, was der Vortragende sieht, einschließlich der Skalierung.
Öffne jeden Frame. Prüfe: Nichts an den Rändern abgeschnitten, Überschriften brechen nicht unschön um, kein Text unter 24px, konsistente Ränder, die Hervorhebungsfarbe überall gleich verwendet.