Schritt 01 / Planen und Budget

Werkzeuge und Vorlagen für die Webseitenplanung

Wenn Sie eine Website erstellen lassen oder selbst bauen, legen Sie zuerst Ziel, Inhalte und Seitenstruktur fest. Ein Briefing hält die Anforderungen fest. Eine Sitemap ordnet die Seiten. Ein Wireframe skizziert den Aufbau einer einzelnen Seite. Auf dieser Grundlage wählen Sie zwischen Baukasten, Content-Management-System und individueller Entwicklung.

Für den Start genügen ein Textdokument oder eine Tabelle. Miro und Figma erleichtern die gemeinsame Planung. Vorlagen strukturieren die Arbeit, ersetzen aber weder die Prüfung rechtlicher Anforderungen noch Tests mit echten Inhalten und Funktionen.

Erstellen Sie ein Website-Briefing

Halten Sie auf einer Seite fest, wozu die Website dienen soll und für wen sie gedacht ist. Beschreiben Sie auch, was Besucherinnen und Besucher nach dem Lesen tun sollen, zum Beispiel ein Angebot anfragen, Öffnungszeiten finden oder einen Termin buchen. Ein konkretes Ziel verhindert, dass die Planung sich früh in Farben und Dekoration verliert.

Diese Vorlage können Sie kopieren und ausfüllen:

Frage Ihre Notizen
Was soll die Website erreichen?
Wer soll sie nutzen?
Welche Inhalte oder Angebote sind am wichtigsten?
Welche Handlung sollen Besucherinnen und Besucher ausführen?
Welche Funktionen werden benötigt?
Wer liefert Texte und Bilder?
Wer pflegt Inhalte und technische Aktualisierungen nach dem Start?
Welche rechtlichen oder technischen Punkte müssen geprüft werden?

Wenn Sie eine Funktion eintragen, notieren Sie gleich den Zweck. Ein Kontaktformular soll beispielsweise Anfragen sammeln. Prüfen Sie dann, ob ein Formular wirklich nötig ist oder ob eine veröffentlichte E-Mail-Adresse für Ihr Angebot genügt. So planen Sie keine Funktionen ein, die später niemand pflegt oder braucht.

Ordnen Sie die Seiten mit einer Sitemap

Eine visuelle Sitemap zeigt, welche Seiten zur Website gehören und wie sie zusammenhängen. Beginnen Sie mit den Inhalten, die Besucherinnen und Besucher wirklich benötigen. Eine kleine Unternehmensseite könnte etwa eine Startseite, eine Angebotsseite, eine Über-uns-Seite und eine Kontaktseite enthalten. Häufige Fragen oder weitere Informationsseiten kommen hinzu, wenn sie konkrete Anliegen beantworten.

Seite Zweck Wichtigster Inhalt Gewünschte nächste Handlung
Startseite Orientierung geben Angebot und Einstieg passenden Bereich auswählen
Angebot Leistung erklären Umfang, Ablauf und Grenzen Anfrage stellen
Über uns Person oder Organisation vorstellen Erfahrung und Arbeitsweise mehr erfahren
Kontakt Kontakt ermöglichen Kontaktwege und gegebenenfalls Formular Nachricht senden

Das ist eine Arbeitshilfe, keine vorgeschriebene Seitenliste. Streichen Sie Seiten, die keinen eigenen Zweck erfüllen, und fassen Sie eng verwandte Inhalte zusammen. Eine Sitemap für die Planung ist außerdem etwas anderes als eine XML-Sitemap: Die visuelle Übersicht hilft Ihnen, Inhalte und Navigation zu ordnen. Eine XML-Sitemap ist eine technische Datei, die Suchmaschinen beim Auffinden von Seiten unterstützen kann.

Skizzieren Sie wichtige Seiten

Ein Wireframe ist eine grobe Skizze des Seitenaufbaus. Darin legen Sie beispielsweise fest, wo Überschrift, Erklärung, Bild, Kontaktmöglichkeit und wichtigste Schaltfläche stehen. Farben und endgültige Gestaltung können später folgen. Zeichnen Sie zunächst die Seiten, die den wichtigsten Zweck der Website erfüllen, etwa die Startseite und eine Angebotsseite.

Gehen Sie für jede Skizze dieselben Fragen durch: Was soll die Seite vermitteln? Was fällt zuerst ins Auge? Welche Inhalte und Funktionen braucht sie? Was soll die Besucherin oder der Besucher anschließend tun? Diese Fragen erleichtern frühes Feedback, solange Änderungen am Aufbau noch überschaubar sind.

Miro bietet Vorlagen für Sitemaps und Wireframes sowie Funktionen zum Kommentieren auf gemeinsamen Arbeitsflächen. Figma eignet sich, wenn Sie grobe Skizzen und ausgearbeitete Entwürfe am selben Ort erstellen möchten. Für eine einzelne Person oder eine einfache Website kann eine Zeichnung auf Papier oder eine Tabelle ausreichen. Entscheidend ist, dass andere die Struktur verstehen und Rückmeldungen geben können.

Wählen Sie Baukasten, CMS oder individuelle Entwicklung

Baukasten, Content-Management-System (CMS) und individuelle Entwicklung lösen unterschiedliche Aufgaben. Ein Baukasten stellt meist die Werkzeuge bereit, mit denen Sie eine Website erstellen und veröffentlichen. Ein CMS verwaltet Ihre Inhalte und braucht dafür eine passende technische Umgebung. Bei einer individuellen Entwicklung werden Gestaltung und Funktionen auf das Projekt zugeschnitten. Welche Lösung sinnvoll ist, hängt unter anderem von Umfang, Pflegeaufwand und verfügbaren Fähigkeiten ab.

Prüffrage Was Sie klären sollten
Welche Seitentypen und Funktionen brauchen Sie? Eine Informationsseite stellt andere Anforderungen als ein Shop oder ein Buchungssystem.
Wer pflegt Inhalte und Aktualisierungen? Legen Sie Zuständigkeit und nötige Kenntnisse vor der Auswahl fest.
Welche technische Arbeit übernehmen Sie selbst? Berücksichtigen Sie Hosting, Updates und laufende Wartung.
Welche Funktionen sind tatsächlich nötig? Vergleichen Sie die Anforderungen mit dem, was die Lösung bereitstellt.
Welche Anforderungen gelten für Ihr Angebot? Prüfen Sie Datenschutz, Barrierefreiheit und Informationspflichten passend zum konkreten Fall.

WordPress ist ein Beispiel für ein CMS, das eine geeignete Hosting-Umgebung benötigt. Planen Sie deshalb neben der Einrichtung auch Hosting und technische Pflege ein. Bei Baukästen oder Entwicklungsaufträgen sollten Sie ebenfalls prüfen, welche Leistungen im Angebot enthalten sind und wer später Änderungen oder Fehler behebt. Pauschale Aussagen dazu, welche Variante immer günstiger oder einfacher ist, helfen wenig: Aufwand und Kosten hängen vom Projekt und den vereinbarten Leistungen ab.

Prüfen Sie Barrierefreiheit und rechtliche Anforderungen

Berücksichtigen Sie Barrierefreiheit schon beim Briefing und prüfen Sie sie beim Entwurf, beim Erstellen der Inhalte und vor dem Start. Achten Sie beim Entwurf zum Beispiel darauf, dass Überschriften die Inhalte gliedern, Formulare verständliche Beschriftungen haben und zentrale Funktionen mit der Tastatur bedienbar sind. W3C-Einstiegstests können erste Hinweise geben. Automatisierte Prüfungen allein belegen jedoch nicht, dass eine Website alle Anforderungen erfüllt; eine umfassendere Bewertung braucht auch menschliche Prüfung.

Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für die darin erfassten Produkte und Dienstleistungen. Dazu zählen bestimmte Dienstleistungen im elektronischen Geschäftsverkehr. Eine reine Informationsseite fällt nicht automatisch unter dieselben Anforderungen wie ein Angebot, über das Verbraucherinnen und Verbraucher Dienstleistungen online abschließen. Für Dienstleistungsanbieter sieht das Gesetz außerdem eine begrenzte Ausnahme für Kleinstunternehmen vor. Prüfen Sie, ob das Gesetz für Ihr konkretes Angebot gilt. Eine allgemeine Checkliste ersetzt keine rechtliche Prüfung.

Berücksichtigen Sie auch Anbieterinformationen und Cookies früh. Für geschäftsmäßige digitale Dienste nennt das Digitale-Dienste-Gesetz Angaben, die leicht erkennbar, unmittelbar erreichbar und ständig verfügbar sein müssen. Das Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz verlangt grundsätzlich eine Einwilligung, wenn Informationen auf einem Endgerät gespeichert oder dort ausgelesen werden. Es gibt Ausnahmen, etwa für Vorgänge, die unbedingt erforderlich sind, um einen ausdrücklich gewünschten Dienst bereitzustellen. Ob eine Ausnahme greift, hängt vom konkreten Einsatz ab.

Prüfen Sie den Entwurf vor dem Start

Vergleichen Sie die fertigen Seiten mit der Sitemap und prüfen Sie, ob Navigation und Inhalte zusammenpassen. Lesen Sie Überschriften und Seitentitel auf Verständlichkeit durch; testen Sie Formulare und andere zentrale Funktionen auch mit der Tastatur. Kontrollieren Sie außerdem, ob Bilder dort passende Textalternativen haben, wo diese für das Verständnis nötig sind.

Für die technische Prüfung können Sie nach dem ersten Entwurf oder nach der Veröffentlichung die Google Search Console nutzen, um die Leistung in der Google-Suche zu beobachten. PageSpeed Insights gibt Hinweise zur Ladeleistung. Sie können auch eine XML-Sitemap für Suchmaschinen erstellen und einreichen. Diese Werkzeuge liefern Prüfhinweise, aber keine Garantie für eine Aufnahme in den Suchindex oder eine bestimmte Platzierung.

Legen Sie vor dem Start fest, wer Inhalte aktualisiert, technische Änderungen übernimmt und auftretende Probleme prüft. Ohne klare Zuständigkeit veralten selbst gut geplante Seiten.