Wer eine Website plant, denkt oft zuerst an den Baukasten oder das Design. Dabei entscheidet die Vorarbeit, ob die Seite später funktioniert. Gute Planung beginnt damit, zu klären, für wen die Website gedacht ist, was Besucher dort tun sollen und welche Inhalte und Seiten es dafür braucht. Aus den Antworten entsteht die Seitenstruktur, danach ein grobes Layout der einzelnen Seiten. Dafür reichen Papier, eine Liste und eine einfache Skizze. Digitale Vorlagen für Sitemaps (Seitenübersichten) und Wireframes (grobe Seitenentwürfe) erleichtern die Abstimmung, ersetzen aber keine inhaltlichen Entscheidungen.
Webseite, Website und Sitemap unterscheiden
Eine Webseite ist eine einzelne Seite im Browser. Eine Website ist das zusammengehörige Angebot aus verknüpften Seiten und Dateien, meist unter einer Domain. Die Startseite ist oft der erste Einstieg. Daneben gibt es Single-Page-Anwendungen, bei denen Inhalte dynamisch innerhalb einer einzigen Seite erscheinen.
Beim Aufbau einer Website sind drei Dinge auseinanderzuhalten. Die Website-Struktur beschreibt, welche Seiten es gibt, wie sie gruppiert sind und wie man zwischen ihnen wechselt. Der Seitenaufbau betrifft die Bereiche einer einzelnen Seite, etwa Kopfbereich, Navigation, Hauptinhalt und Fußbereich. Die technische Sitemap ist eine Datei mit URLs, die Suchmaschinen hilft, Seiten zu entdecken. Diese drei Ebenen werden im Alltag oft vermischt, obwohl sie unterschiedliche Aufgaben haben.
Ziele und Inhalte vor dem Entwurf klären
Bevor Sie Seiten skizzieren, klären Sie, was die Website leisten soll. Mögliche Ziele sind informieren, Kontakt ermöglichen, Buchungen annehmen oder Produkte präsentieren. Fragen Sie außerdem, wer die Seite nutzen wird. Diese Entscheidungen bestimmen, welche Seiten überhaupt nötig sind.
Sammeln Sie danach alle vorhandenen und benötigten Inhalte. Listen Sie Seiten, Themen und Funktionen auf, ohne schon das endgültige Menü festzulegen. Gruppieren Sie zusammengehörige Themen, etwa mit einer einfachen Kartensortierung: Schreiben Sie jeden Inhalt auf eine Karte und legen Sie verwandte Karten zusammen. Aus diesen Gruppen entsteht die grobe Sitemap, also eine Übersicht der Seiten und ihrer Beziehungen. Zeichnen Sie die Seiten als Kästen und markieren Sie die typischen Wege, die Besucher durch die Website nehmen.
Werkzeuge für Sitemap und Wireframe
Für eine kleine Website reichen Papier, Whiteboard oder eine einfache Liste. Sie sammeln Inhalte, gruppieren sie und zeichnen die Seitenstruktur in wenigen Minuten. Das ist oft schneller als jedes Programm und zwingt zu klaren Entscheidungen.
Für verteilte Teams oder viele Seiten bieten sich digitale Vorlagen an. Miro stellt Sitemap- und Wireframe-Vorlagen bereit, mit denen Sie die Seitenhierarchie und grobe Layouts gemeinsam auf einer Fläche bearbeiten. FigJam von Figma bietet eine ähnliche Wireframe-Vorlage für kollaboratives Entwerfen. Diese Anbieter beschreiben ihre Vorlagen als anpassbar. Einen unabhängigen Vergleich der Werkzeuge gibt es nicht. Ein Tabellenprogramm oder Textdokument eignet sich, um ein Seiteninventar mit Zuständigkeiten und offenen Fragen zu führen.
Sitemap und Wireframe nicht verwechseln
Die Sitemap im Planungsprozess ist eine visuelle Übersicht der Seiten und ihrer Verbindungen. Ein Wireframe zeigt dagegen den groben Aufbau einer einzelnen Seite. Darin ist festgelegt, wo die Navigation sitzt, wo Überschrift und Text stehen und wo ein Bild oder ein Button vorgesehen ist. Beide ergänzen sich: Erst die Sitemap, dann Wireframes für die wichtigsten Seitentypen. Wiederkehrende Bereiche dienen als Startpunkt für die Skizze, etwa Kopfbereich, Navigation, Hauptinhalt und Fußbereich. Welche Module darüber hinaus sinnvoll sind, hängt vom Zweck der Seite ab. Ein Produktangebot braucht andere Bereiche als ein Blogbeitrag oder eine Kontaktseite.
Die XML-Sitemap ist ein separates Format: eine Datei mit URLs für Suchmaschinen. Sie ersetzt weder eine verständliche Navigation noch die visuelle Sitemap für die Planung. Google weist darauf hin, dass eine Sitemap das Entdecken von URLs unterstützen kann, aber nicht garantiert, dass Seiten gecrawlt oder indexiert werden.
Navigation, URLs und Auffindbarkeit
Für Menschen sollten URLs verständlich und beschreibend sein. Google empfiehlt lesbare Wörter statt kryptischer Kennungen. Für Googles Verständnis der Seitenstruktur sind vor allem die Verlinkungen zwischen Seiten wichtig. Wichtiges Angebot sollte über Navigation und interne Links erreichbar sein. Eine reine Sucheingabe auf der Website reicht nicht. Eine XML-Sitemap ist eine zusätzliche Entdeckungshilfe, kein Ersatz für interne Verlinkung.
Barrierefreiheit früh einplanen
Die Strukturierung betrifft auch die Zugänglichkeit. Klare, logisch verschachtelte Überschriften helfen Screenreadern und allen Nutzenden, sich auf einer Seite zu orientieren. Das World Wide Web Consortium (W3C) empfiehlt aussagekräftige Überschriften und eine erkennbare Gliederung. Problematisch sind dichte Textblöcke, unklare Hierarchien und fehlende Abschnittsüberschriften. Planen Sie die Überschriftenstruktur deshalb schon beim Wireframe ein, nicht erst beim Schreiben der Inhalte.