Muster / Musterseiten
Musterseiten
Musterseiten zeigen komplette Seitenwirkungen. Sie sind größer als Vorschauen und kombinieren Header, Navigation, Inhalte, Komponenten, Musterblöcke und Footer.
Ziel ist der direkte Eindruck: Eine Nutzerin oder ein Nutzer soll sofort erkennen, wie FWT für echte Webseiten, Tools, Dokus oder Adminbereiche eingesetzt werden kann.
Musterseiten sind Startpunkte. Texte, Farben, Bilder, Links und Struktur müssen
immer zum echten Projekt passen.
Landingpage
Landingpage-Muster
Eine klassische Start- oder Landingpage mit Header, Hero, Vorteilen, CTA und Footer.
Live-Beispiel
Landingpage-Muster
Eine fertige Startseite mit klarer Wirkung
Dieses Muster zeigt, wie Header, Hero, Vorteile, Karten und CTA zu einer vollständigen Seitenwirkung zusammenkommen.
Vorteile
Warum dieses Muster funktioniert
Die Seite zeigt nicht alles auf einmal, sondern führt Nutzer Schritt für Schritt.
Schneller Einstieg
Die Botschaft ist sofort sichtbar und verständlich.
Klare Struktur
Abschnitte, Karten und Aktionen greifen sauber ineinander.
Gut erweiterbar
Weitere Bereiche können später ergänzt werden.
Nächster Schritt
Aus einem Muster wird eine echte Seite
Texte, Bilder, Links und Farben werden angepasst. Die Grundwirkung bleibt erhalten.
HTML-Code anzeigen
<div class="fwt-sample-page fwt-sample-page-soft">
<div class="fwt-sample-page-inner">
<header class="fwt-sample-header">
<a class="fwt-sample-brand" href="#">
<span class="fwt-sample-logo" aria-hidden="true">F</span>
<span>Freie Webtools</span>
</a>
<nav aria-label="Landingpage Muster Navigation">
<ul class="fwt-sample-nav">
<li><a class="is-active" href="#">Start</a></li>
<li><a href="#">Vorteile</a></li>
<li><a href="#">Beispiele</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<section class="fwt-sample-hero fwt-sample-hero-center">
<p class="fwt-sample-kicker">Landingpage-Muster</p>
<h2 class="fwt-sample-title">
Eine fertige Startseite mit klarer Wirkung
</h2>
<p class="fwt-sample-lead">
Dieses Muster zeigt, wie Header, Hero, Vorteile, Karten und CTA
zu einer vollständigen Seitenwirkung zusammenkommen.
</p>
<div class="fwt-sample-meta">
<span class="fwt-badge fwt-badge-new">Neu</span>
<span class="fwt-badge fwt-badge-success">barrierearm gedacht</span>
<span class="fwt-badge fwt-badge-info">modular</span>
</div>
<div class="fwt-sample-actions">
<a class="fwt-btn fwt-btn-primary" href="#">Projekt starten</a>
<a class="fwt-btn fwt-btn-secondary" href="#">Mehr erfahren</a>
</div>
</section>
<section class="fwt-sample-section">
<div class="fwt-sample-section-head fwt-sample-section-head-center">
<p class="fwt-sample-kicker">Vorteile</p>
<h3 class="fwt-sample-heading">
Warum dieses Muster funktioniert
</h3>
<p class="fwt-sample-text">
Die Seite zeigt nicht alles auf einmal, sondern führt Nutzer Schritt für Schritt.
</p>
</div>
<div class="fwt-sample-feature-grid">
<article class="fwt-card fwt-card-hover">
<span class="fwt-card-icon" aria-hidden="true">1</span>
<h3 class="fwt-card-title">Schneller Einstieg</h3>
<p class="fwt-card-text">Die Botschaft ist sofort sichtbar und verständlich.</p>
</article>
<article class="fwt-card fwt-card-hover">
<span class="fwt-card-icon fwt-card-icon-success" aria-hidden="true">✓</span>
<h3 class="fwt-card-title">Klare Struktur</h3>
<p class="fwt-card-text">Abschnitte, Karten und Aktionen greifen sauber ineinander.</p>
</article>
<article class="fwt-card fwt-card-hover">
<span class="fwt-card-icon fwt-card-icon-info" aria-hidden="true">i</span>
<h3 class="fwt-card-title">Gut erweiterbar</h3>
<p class="fwt-card-text">Weitere Bereiche können später ergänzt werden.</p>
</article>
</div>
</section>
<section class="fwt-cta fwt-cta-primary">
<p class="fwt-cta-kicker">Nächster Schritt</p>
<h3 class="fwt-cta-title">
Aus einem Muster wird eine echte Seite
</h3>
<p class="fwt-cta-text">
Texte, Bilder, Links und Farben werden angepasst. Die Grundwirkung bleibt erhalten.
</p>
<div class="fwt-cta-actions">
<a class="fwt-btn fwt-btn-primary" href="#">Anfrage senden</a>
<a class="fwt-btn fwt-btn-secondary" href="#">Beispiele ansehen</a>
</div>
</section>
<footer class="fwt-sample-footer">
<div class="fwt-sample-footer-grid">
<div>
<h3 class="fwt-sample-footer-title">Freie Webtools</h3>
<p class="fwt-sample-footer-text">
Musterseite für Startseiten, Landingpages und kleine Projektseiten.
</p>
</div>
<div>
<h3 class="fwt-sample-footer-title">Bereiche</h3>
<ul class="fwt-sample-footer-list">
<li><a href="#">Start</a></li>
<li><a href="#">Vorteile</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div>
<h3 class="fwt-sample-footer-title">Rechtliches</h3>
<ul class="fwt-sample-footer-list">
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</div>
<div>
<h3 class="fwt-sample-footer-title">Kontakt</h3>
<p class="fwt-sample-footer-text">
Beispiel-Footer für echte Seiten.
</p>
</div>
</div>
</footer>
</div>
</div>Toolseite
Toolseiten-Muster
Eine Toolseite mit Seitennavigation, Eingabebereich, Ergebnisbox und Hinweis.
Live-Beispiel
Beta
Kostenlos
Webtool-Muster
Eine Toolseite mit Eingabe, Ergebnis und Hilfe
Toolseiten brauchen eine klare Aufgabe, gute Eingaben, eine verständliche Ausgabe und kurze Hinweise, was mit den Daten passiert.
Kontrastprüfung bestanden
Dieses Muster zeigt, wie Eingaben und Ergebnisbereich auf einer Toolseite zusammenwirken.
Datenschutz-Hinweis
Bei echten Tools sollte klar erklärt werden, ob Daten lokal verarbeitet oder gespeichert werden.
HTML-Code anzeigen
<div class="fwt-sample-page">
<div class="fwt-sample-page-inner">
<header class="fwt-sample-header">
<a class="fwt-sample-brand" href="#">
<span class="fwt-sample-logo" aria-hidden="true">T</span>
<span>Toolseite</span>
</a>
<div class="fwt-badge-group">
<span class="fwt-badge fwt-badge-beta">Beta</span>
<span class="fwt-badge fwt-badge-free">Kostenlos</span>
</div>
</header>
<section class="fwt-sample-tool">
<div class="fwt-sample-section-head">
<p class="fwt-sample-kicker">Webtool-Muster</p>
<h2 class="fwt-sample-heading">
Eine Toolseite mit Eingabe, Ergebnis und Hilfe
</h2>
<p class="fwt-sample-text">
Toolseiten brauchen eine klare Aufgabe, gute Eingaben, eine verständliche Ausgabe
und kurze Hinweise, was mit den Daten passiert.
</p>
</div>
<div class="fwt-sample-tool-layout">
<aside class="fwt-sidenav">
<div class="fwt-sidenav-header">
<h3 class="fwt-sidenav-title">Werkzeuge</h3>
<p class="fwt-sidenav-text">Beispielhafte Tool-Navigation.</p>
</div>
<nav aria-label="Toolseiten Muster Navigation">
<ul class="fwt-sidenav-list">
<li><a class="fwt-sidenav-link is-active" href="#">Kontrast prüfen</a></li>
<li><a class="fwt-sidenav-link" href="#">Farben wählen</a></li>
<li><a class="fwt-sidenav-link" href="#">Code kopieren</a></li>
</ul>
</nav>
</aside>
<main class="fwt-sample-tool-main">
<form class="fwt-form" action="#" method="post">
<div class="fwt-form-row">
<div class="fwt-form-group">
<label class="fwt-label" for="sample-tool-text">
Textfarbe
</label>
<input class="fwt-input" id="sample-tool-text" type="text" value="#0f172a">
</div>
<div class="fwt-form-group">
<label class="fwt-label" for="sample-tool-bg">
Hintergrund
</label>
<input class="fwt-input" id="sample-tool-bg" type="text" value="#ffffff">
</div>
</div>
<div class="fwt-btn-form-actions fwt-btn-form-actions-start">
<button class="fwt-btn fwt-btn-primary" type="button">Prüfen</button>
<button class="fwt-btn fwt-btn-secondary" type="button">Zurücksetzen</button>
</div>
</form>
<section class="fwt-sample-tool-result">
<span class="fwt-status fwt-status-success">
<span class="fwt-status-dot" aria-hidden="true"></span>
Ergebnis gut lesbar
</span>
<h3 class="fwt-card-title">Kontrastprüfung bestanden</h3>
<p class="fwt-card-text">
Dieses Muster zeigt, wie Eingaben und Ergebnisbereich auf einer Toolseite zusammenwirken.
</p>
</section>
<div class="fwt-alert fwt-alert-info">
<h3 class="fwt-alert-title">Datenschutz-Hinweis</h3>
<p class="fwt-alert-text">
Bei echten Tools sollte klar erklärt werden, ob Daten lokal verarbeitet oder gespeichert werden.
</p>
</div>
</main>
</div>
</section>
</div>
</div>Doku
Doku-Seiten-Muster
Eine Dokumentationsseite mit linker Kapitelnavigation, Inhaltsbereich und rechter Kontextnavigation.
Live-Beispiel
Doku-Muster
Eine Doku-Seite mit Navigation, Hinweis und Beispiel
Gute Dokumentation zeigt nicht nur Code. Sie erklärt, wann ein Muster sinnvoll ist, und macht die Wirkung direkt sichtbar.
Hinweis
Musterseiten sind als Startpunkte gedacht. Inhalte müssen immer angepasst werden.
Live-Beispiel
Die Wirkung ist sofort sichtbar.
Hinweise
Kurze Erklärungen helfen beim richtigen Einsatz.
HTML-Code anzeigen
<div class="fwt-sample-page fwt-sample-page-soft">
<div class="fwt-sample-page-inner">
<header class="fwt-sample-header">
<a class="fwt-sample-brand" href="#">
<span class="fwt-sample-logo" aria-hidden="true">D</span>
<span>Dokumentation</span>
</a>
<nav aria-label="Doku Muster Navigation">
<ul class="fwt-sample-nav">
<li><a href="#">Grundlagen</a></li>
<li><a class="is-active" href="#">Muster</a></li>
<li><a href="#">Hilfe</a></li>
</ul>
</nav>
</header>
<div class="fwt-sample-doc-layout">
<aside class="fwt-sidenav">
<div class="fwt-sidenav-header">
<h3 class="fwt-sidenav-title">Kapitel</h3>
<p class="fwt-sidenav-text">Navigation durch die Doku.</p>
</div>
<nav aria-label="Doku Kapitel">
<ul class="fwt-sidenav-list">
<li><a class="fwt-sidenav-link" href="#">Farben</a></li>
<li><a class="fwt-sidenav-link" href="#">Typografie</a></li>
<li><a class="fwt-sidenav-link" href="#">Komponenten</a></li>
<li><a class="fwt-sidenav-link is-active" href="#">Musterseiten</a></li>
</ul>
</nav>
</aside>
<main class="fwt-sample-doc-main">
<article class="fwt-sample-doc-article">
<p class="fwt-sample-kicker">Doku-Muster</p>
<h2 class="fwt-sample-heading">
Eine Doku-Seite mit Navigation, Hinweis und Beispiel
</h2>
<p class="fwt-sample-text">
Gute Dokumentation zeigt nicht nur Code. Sie erklärt, wann ein Muster sinnvoll ist,
und macht die Wirkung direkt sichtbar.
</p>
<div class="fwt-alert fwt-alert-info">
<h3 class="fwt-alert-title">Hinweis</h3>
<p class="fwt-alert-text">
Musterseiten sind als Startpunkte gedacht. Inhalte müssen immer angepasst werden.
</p>
</div>
<div class="fwt-card-grid fwt-card-grid-2">
<article class="fwt-card">
<h3 class="fwt-card-title">Live-Beispiel</h3>
<p class="fwt-card-text">Die Wirkung ist sofort sichtbar.</p>
</article>
<article class="fwt-card">
<h3 class="fwt-card-title">Hinweise</h3>
<p class="fwt-card-text">Kurze Erklärungen helfen beim richtigen Einsatz.</p>
</article>
</div>
</article>
</main>
<aside class="fwt-contextnav">
<h3 class="fwt-contextnav-title">Auf dieser Seite</h3>
<nav aria-label="Doku Inhaltsverzeichnis">
<ul class="fwt-contextnav-list">
<li><a class="fwt-contextnav-link is-active" href="#">Überblick</a></li>
<li><a class="fwt-contextnav-link" href="#">Beispiel</a></li>
<li><a class="fwt-contextnav-link" href="#">Hinweise</a></li>
</ul>
</nav>
</aside>
</div>
</div>
</div>Dashboard
Admin-/Dashboard-Muster
Eine dunkle Dashboard-Seite mit Navigation, Kennzahlen, Statusmeldungen und Highlight-Karte.
Live-Beispiel
online
FWT
Dashboard-Muster
Kennzahlen, Status und Aufgaben auf einen Blick
24
Bausteine
+48
Komponenten
stabil3
Muster
neuII
Ausblick
geplantLetzte Aktionen
Komponenten abgeschlossen
Buttons, Cards, Alerts, Navigation und Rainbow stehen.
Musterseiten ausbauen
Weitere Branchen- und Projektvorlagen können folgen.
HTML-Code anzeigen
<div class="fwt-sample-page fwt-sample-page-dark">
<div class="fwt-sample-page-inner">
<header class="fwt-sample-header">
<a class="fwt-sample-brand" href="#">
<span class="fwt-sample-logo" aria-hidden="true">A</span>
<span>Adminbereich</span>
</a>
<div class="fwt-badge-group">
<span class="fwt-badge fwt-badge-success">online</span>
<span class="fwt-badge fwt-badge-info">FWT</span>
</div>
</header>
<section class="fwt-sample-dashboard">
<div class="fwt-sample-dashboard-layout">
<aside class="fwt-sidenav fwt-nav-dark">
<div class="fwt-sidenav-header">
<h3 class="fwt-sidenav-title">Admin</h3>
<p class="fwt-sidenav-text">Dashboard und Verwaltung.</p>
</div>
<nav aria-label="Admin Muster Navigation">
<ul class="fwt-sidenav-list">
<li><a class="fwt-sidenav-link is-active" href="#">Dashboard</a></li>
<li><a class="fwt-sidenav-link" href="#">Inhalte</a></li>
<li><a class="fwt-sidenav-link" href="#">Module</a></li>
<li><a class="fwt-sidenav-link" href="#">Systemcheck</a></li>
</ul>
</nav>
</aside>
<main class="fwt-sample-dashboard-main">
<div class="fwt-sample-section-head">
<p class="fwt-sample-kicker">Dashboard-Muster</p>
<h2 class="fwt-sample-heading">
Kennzahlen, Status und Aufgaben auf einen Blick
</h2>
</div>
<div class="fwt-sample-dashboard-grid">
<article class="fwt-card fwt-dashboard-card">
<p class="fwt-dashboard-value">24</p>
<p class="fwt-dashboard-label">Bausteine</p>
<span class="fwt-dashboard-trend">+4</span>
</article>
<article class="fwt-card fwt-dashboard-card">
<p class="fwt-dashboard-value">8</p>
<p class="fwt-dashboard-label">Komponenten</p>
<span class="fwt-dashboard-trend">stabil</span>
</article>
<article class="fwt-card fwt-dashboard-card">
<p class="fwt-dashboard-value">3</p>
<p class="fwt-dashboard-label">Muster</p>
<span class="fwt-dashboard-trend fwt-dashboard-trend-neutral">neu</span>
</article>
<article class="fwt-card fwt-dashboard-card">
<p class="fwt-dashboard-value">II</p>
<p class="fwt-dashboard-label">Ausblick</p>
<span class="fwt-dashboard-trend fwt-dashboard-trend-neutral">geplant</span>
</article>
</div>
<div class="fwt-sample-dashboard-content">
<article class="fwt-card">
<h3 class="fwt-card-title">Letzte Aktionen</h3>
<div class="fwt-system-message fwt-system-message-success">
<span class="fwt-system-message-dot" aria-hidden="true"></span>
<div class="fwt-system-message-content">
<p class="fwt-system-message-title">Komponenten abgeschlossen</p>
<p class="fwt-system-message-text">Buttons, Cards, Alerts, Navigation und Rainbow stehen.</p>
</div>
</div>
<div class="fwt-system-message fwt-system-message-warning">
<span class="fwt-system-message-dot" aria-hidden="true"></span>
<div class="fwt-system-message-content">
<p class="fwt-system-message-title">Musterseiten ausbauen</p>
<p class="fwt-system-message-text">Weitere Branchen- und Projektvorlagen können folgen.</p>
</div>
</div>
</article>
<aside class="fwt-card fwt-rainbow-card">
<span class="fwt-rainbow-badge">Highlight</span>
<h3 class="fwt-card-title">Sichtbare Wirkung</h3>
<p class="fwt-card-text">
Dashboard-Muster zeigen, wie FWT für Adminbereiche eingesetzt werden kann.
</p>
</aside>
</div>
</main>
</div>
</section>
</div>
</div>Kontakt
Kontakt-/Anfrage-Muster
Eine Kontaktseite mit erklärendem Infobereich, Formular, Datenschutz-Checkbox und klaren Aktionen.
Live-Beispiel
HTML-Code anzeigen
<div class="fwt-sample-page">
<div class="fwt-sample-page-inner">
<header class="fwt-sample-header">
<a class="fwt-sample-brand" href="#">
<span class="fwt-sample-logo" aria-hidden="true">K</span>
<span>Kontaktseite</span>
</a>
<nav aria-label="Kontakt Muster Navigation">
<ul class="fwt-sample-nav">
<li><a href="#">Start</a></li>
<li><a href="#">Leistungen</a></li>
<li><a class="is-active" href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<section class="fwt-sample-contact">
<aside class="fwt-sample-contact-info">
<p class="fwt-sample-kicker">Kontakt</p>
<h2 class="fwt-sample-heading">
Eine Anfrage-Seite mit Erklärung und Formular
</h2>
<p class="fwt-sample-text">
Kontaktseiten sollten nicht nur ein Formular zeigen. Nutzer brauchen kurze Hinweise,
was passiert und welche Angaben sinnvoll sind.
</p>
<div class="fwt-alert fwt-alert-info">
<h3 class="fwt-alert-title">Antwortzeit</h3>
<p class="fwt-alert-text">
Beispielhinweis: Antworten erfolgen normalerweise innerhalb weniger Werktage.
</p>
</div>
<div class="fwt-badge-group">
<span class="fwt-badge fwt-badge-success">klar</span>
<span class="fwt-badge fwt-badge-info">freundlich</span>
<span class="fwt-badge fwt-badge-primary">barrierearm</span>
</div>
</aside>
<form class="fwt-sample-contact-form" action="#" method="post">
<div class="fwt-form-row">
<div class="fwt-form-group">
<label class="fwt-label" for="sample-contact-name">
Name
</label>
<input class="fwt-input" id="sample-contact-name" name="name" type="text">
</div>
<div class="fwt-form-group">
<label class="fwt-label" for="sample-contact-email">
E-Mail
</label>
<input class="fwt-input" id="sample-contact-email" name="email" type="email">
</div>
</div>
<div class="fwt-form-group">
<label class="fwt-label" for="sample-contact-topic">
Thema
</label>
<select class="fwt-select" id="sample-contact-topic" name="topic">
<option value="">Bitte wählen</option>
<option>Webseite</option>
<option>Designsystem</option>
<option>Technische Hilfe</option>
</select>
</div>
<div class="fwt-form-group">
<label class="fwt-label" for="sample-contact-message">
Nachricht
</label>
<textarea class="fwt-textarea" id="sample-contact-message" name="message" placeholder="Worum geht es?"></textarea>
</div>
<label class="fwt-check">
<input type="checkbox" required>
<span class="fwt-check-label">
<span class="fwt-check-title">Datenschutzhinweis gelesen</span>
<span class="fwt-check-text">Die Angaben werden nur zur Bearbeitung der Anfrage genutzt.</span>
</span>
</label>
<div class="fwt-btn-form-actions">
<button class="fwt-btn fwt-btn-secondary" type="button">Zurück</button>
<button class="fwt-btn fwt-btn-primary" type="submit">Anfrage senden</button>
</div>
</form>
</section>
</div>
</div>Hinweise
Musterseiten richtig verwenden
Nicht 1:1 übernehmen
Musterseiten zeigen Wirkung. Inhalte und Reihenfolge müssen zum echten Projekt passen.
Zielgruppe beachten
Eine Toolseite braucht andere Schwerpunkte als eine Landingpage oder Kontaktseite.
Mobile Ansicht prüfen
Komplette Seiten müssen auf kleinen Bildschirmen besonders sorgfältig getestet werden.
Barrierefreiheit bleibt Pflicht
Überschriften, Labels, Kontraste, Fokuszustände und Linktexte müssen stimmen.
Nicht überladen
Eine Musterseite soll führen. Zu viele Effekte, Badges oder CTAs schwächen die Wirkung.
Später ausbauen
Branchen- und Projektvorlagen können später als eigene Musterseiten ergänzt werden.