Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Fiktive Website erstellen: Prototyp & Übungsprojekt

    · Weswegen-Redaktion
    Sonstiges

    Eine fiktive Website ist eine Seite ohne echtes Geschäft dahinter: erfundene Marke, erfundene Produkte, Platzhalter-Texte. Sie brauchen so etwas, wenn Sie Webdesign lernen, ein Portfolio-Stück bauen, einem Kunden eine Idee vorführen oder ein WordPress-Theme testen wollen. Der Trick liegt weniger in der Technik als darin, dass die Seite glaubwürdig wirkt, ohne dass Sie echte Firmennamen, echte Personen oder geschützte Logos verwenden. Dieser Leitfaden zeigt Konzept, Inhalte, Werkzeuge und die rechtlichen Stolperfallen.

    Wozu eine fiktive Website?

    Die häufigsten Anlässe unterscheiden sich stärker, als es scheint, und sie bestimmen, wie viel Aufwand sinnvoll ist:

    • Lernprojekt: Sie üben HTML, CSS oder ein CMS. Hier zählt der Bauprozess, nicht das Ergebnis.
    • Portfolio-Stück: Personaler und potenzielle Kunden sollen Ihr Können sehen. Die Seite muss poliert wirken.
    • Kunden-Pitch oder Mockup: Sie zeigen einer echten Firma, wie ihre spätere Seite aussehen könnte.
    • Test-Umgebung: Sie prüfen ein Theme, ein Plugin oder ein A/B-Layout mit realistischen Dummy-Inhalten.

    Legen Sie diesen Zweck zuerst fest. Ein Lernprojekt darf lokal auf Ihrem Rechner bleiben; ein Portfolio-Stück muss online erreichbar und mobil sauber sein.

    Konzept vor Code: die fiktive Marke festlegen

    Bevor Sie eine Zeile schreiben, brauchen Sie eine erfundene Marke. Notieren Sie in drei Sätzen: Name, Branche, Zielgruppe. Beispiel: „Nordlicht Kaffee, Rösterei aus Kiel, richtet sich an Büros mit Abo-Lieferung.” Aus diesem Kern ergeben sich Farben, Tonfall und Seitenstruktur fast von selbst.

    Zwei Regeln von Anfang an:

    • Keine echten Marken oder Logos nachbauen. „Nordlicht Kaffee” ist frei erfunden, „Starbucks” wäre eine Markenrechtsverletzung, sobald die Seite öffentlich ist.
    • Reservierte Test-Domains nutzen. Die Endungen .example, .test, .invalid und .localhost sowie die Domains example.com, example.org und example.net sind laut RFC 2606 dauerhaft für genau solche Zwecke reserviert und werden nie an echte Betreiber vergeben. Für E-Mail-Platzhalter passt kontakt@example.com.

    Platzhalter-Inhalte, die glaubwürdig wirken

    Der Unterschied zwischen einer überzeugenden Demo und einer offensichtlichen Attrappe sind die Inhalte. Reiner „Lorem ipsum”-Text auf jeder Seite wirkt unfertig.

    Texte

    Für langen Fließtext reicht Lorem Ipsum. Überschriften, Buttons und Menüs dagegen schreiben Sie besser als echte, thematisch passende deutsche Sätze – der Aufwand ist gering, der Gewinn an Glaubwürdigkeit groß. Faustregel: sichtbare, strukturgebende Elemente selbst formulieren, reinen Fülltext als Blindtext (Lorem Ipsum) stehen lassen.

    Bilder

    Nutzen Sie Platzhalter-Dienste, die Bilder per URL ausliefern – ideal, solange Sie noch keine echten Fotos haben:

    • https://picsum.photos/600/400 liefert ein zufälliges Foto in der angegebenen Größe.
    • https://placehold.co/600x400 liefert eine graue Box mit Maßangabe – gut für Layout-Tests.

    Für ein Portfolio ersetzen Sie diese später durch echte, lizenzfreie Fotos von Unsplash oder Pexels. Achten Sie auch dann auf die Lizenz: Beide erlauben kommerzielle Nutzung ohne Namensnennung, aber Personen und Markenlogos auf den Fotos können eigene Rechte haben – prüfen Sie das im Zweifel vor der Veröffentlichung.

    Fake-Daten für Namen und Adressen

    Erfundene Kundenstimmen, Team-Mitglieder oder Bestelldaten erzeugen Sie am schnellsten mit einem Generator. In JavaScript-Projekten leistet das die Bibliothek @faker-js/faker mit deutscher Lokalisierung:

    import { fakerDE as faker } from '@faker-js/faker';

const person = {
  name: faker.person.fullName(),
  stadt: faker.location.city(),
  text: faker.lorem.sentence(),
};

    Die Namensräume person und location gelten ab @faker-js/faker v8; ältere Versionen hießen hier faker.name und faker.address – ein häufiger Grund für „is not a function”-Fehler nach einem Update.

    Wichtig: Prüfen Sie stichprobenartig, dass keine real existierende Person zufällig getroffen wird, wenn Sie diese Daten öffentlich zeigen. Bei einem lokalen Test ist das unkritisch.

    Werkzeuge: von No-Code bis Handcode

    Schnell und ohne Programmierung

    • Carrd – Einseiter, in einer Stunde fertig, gut für ein einfaches Mockup.
    • Framer oder Webflow – visuelle Baukästen mit sehr sauberem Output, geeignet fürs Portfolio.
    • WordPress lokal – wenn die Zielseite später echtes WordPress werden soll. Installieren Sie es mit „Local”, XAMPP oder Laragon auf dem eigenen Rechner – alle drei bringen Apache/Nginx, PHP und MySQL bereits fertig eingerichtet mit, sodass ein Klick genügt.

    Volle Kontrolle mit Code

    Für ein Lern- oder Portfolio-Projekt genügt oft handgeschriebenes HTML/CSS. Ein minimales, valides Gerüst sieht so aus:

    <!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nordlicht Kaffee</title>
</head>
<body>
  <header><h1>Nordlicht Kaffee</h1></header>
  <main>
    <img src="https://picsum.photos/800/400" alt="Rösterei">
  </main>
</body>
</html>

    Das <meta name="viewport">-Tag ist die Grundvoraussetzung dafür, dass die Seite auf dem Handy nicht winzig dargestellt wird – ohne dieses Tag skaliert der Browser die Seite auf eine feste Desktop-Breite und zoomt sie verkleinert hinein. Für Layout und Optik ohne viel eigenes CSS greifen Sie zu einem Framework wie Tailwind CSS oder Bootstrap. Wollen Sie mehrere Seiten statisch und schnell, eignen sich Generatoren wie Astro oder Eleventy.

    Lokal bauen oder online zeigen

    Ein reines Übungsprojekt läuft am besten lokal – Sie öffnen die HTML-Datei direkt oder nutzen einen kleinen Entwicklungsserver. Ein Portfolio-Stück muss dagegen online erreichbar sein. Kostenlose Hosting-Optionen für statische Demo-Seiten:

    • Netlify und Vercel – Deployment per Git-Push, kostenlose Stufe für kleine Projekte.
    • GitHub Pages – kostenlos direkt aus einem Repository, ideal für reines HTML/CSS.

    Rechtliche Fallstricke bei „fiktiv, aber öffentlich”

    Solange die Seite nur lokal läuft, gibt es keine rechtlichen Fragen. Sobald sie öffentlich erreichbar ist, ändert sich das:

    • Impressumspflicht: Öffentliche Websites in Deutschland unterliegen der Impressumspflicht nach DDG (dem Nachfolger des TMG). Ein rein privates Übungsprojekt ohne geschäftlichen Zweck fällt meist nicht darunter, die Grenze ist aber fließend.
    • Marken und Personen: Keine echten Logos, keine echten Prominenten-Fotos, keine real existierenden Firmennamen.
    • Kontaktformulare: Ein funktionierendes Formular verarbeitet echte Besucherdaten – dann greift die DSGVO mit Datenschutzerklärung und Einwilligung. Bei einer Demo lassen Sie das Formular besser ohne echten Versand.
    • Bildlizenzen: Platzhalter-Dienste sind für Tests gedacht; für die dauerhaft öffentliche Version brauchen Sie sauber lizenzierte Bilder.

    Typische Fehler

    • Überall derselbe Lorem-Ipsum-Block – die Seite wirkt tot. Variieren Sie Länge und Inhalt.
    • Bilder ohne alt-Text und ohne feste Größenangabe – das kostet Barrierefreiheit und lässt das Layout beim Laden springen.
    • Nur am Desktop getestet. Prüfen Sie jede Seite zusätzlich in der mobilen Ansicht der Entwicklertools (F12).
    • Echte, aber erfundene Adressen, die zufällig existieren – bei öffentlichen Seiten vorher gegenprüfen.

    FAQ

    Braucht eine fiktive Website ein Impressum? Läuft sie nur lokal, nein. Ist sie öffentlich und hat geschäftlichen Charakter – etwa als Portfolio, mit dem Sie Aufträge gewinnen wollen – spricht viel für ein Impressum. Bei einem reinen Privat-Übungsprojekt ist es in der Regel nicht nötig.

    Welche Domain nutze ich für eine erfundene Marke? Für Beispiele und Platzhalter die reservierten Domains example.com bzw. Endungen wie .test und .example. Diese kollidieren garantiert nie mit einer echten Website. Nur wenn Ihr Portfolio-Stück dauerhaft online sein soll, lohnt eine eigene Domain.

    Womit fange ich als Anfänger am schnellsten an? Mit einem No-Code-Baukasten wie Carrd oder Framer sehen Sie in einer Stunde ein Ergebnis. Wollen Sie das Handwerk lernen, starten Sie stattdessen mit dem HTML-Gerüst oben und bauen Schritt für Schritt aus – langsamer, aber lehrreicher.

    → Mehr zum Thema: Alle Artikel unter Sonstiges