Punkteraster

02

Inhalt & Struktur der Webseite entwickeln

Die grobe Idee für deinen Relaunch steht. Jetzt gießen wir das Ganze in ein schlüssiges, konkretes Konzept.

Sitemap / Seitenstruktur erstellen

Wireframes für alle Seitentypen

Hinterfragen der Entwürfe

Von der Seitenstruktur zu den finalen Wireframes

Sitemap erstellen

Eine Sitemap ist eine strukturelle Übersicht über alle Unterseiten deiner neuen Webseite. An einer Sitemap lassen sich alle enthaltene Themenbereiche und Themen-Schwerpunkte erkennen.

1. Mögliche Themen sammeln: Wir beginnen mit einem Überblick über mögliche Themen. Dazu nutzen wir die Keyword-Recherche, die Liste der Unternehmensleistungen, die Informationen zur Zielgruppe (Customer Journey, Bedürfnisse, Probleme etc.), die Inhalte der aktuellen Seite und deren Rankings. Und ja: wir schauen uns auch an, wofür deine Wettbewerber ranken.

2. Themen sortieren & clustern: Im nächsten Schritt sortieren wir die Themen semantisch und fassen sie zu größeren Themengebieten zusammen.

3. Optimale Unterseiten-Struktur entwickeln: Mit dem so geschaffenen Überblick, können wir eine Seitenstruktur entwickeln. Welche Themen erhalten eine eigene Unterseite? Welche werden zusammengefasst? Wie stehen die Themen in Zusammenhang und wie müsste eine intuitiv-bedienbare Seitenstruktur dafür aussehen?

4. Inhalte priorisieren: Die meisten Themen sind (fast) endlos und die optimale Webseite hat für die bestmögliche Themenabdeckung viele hundert oder gar Tausende von Seiten. Für ein begrenztes Budget und eine schnelle Umsetzung priorisieren wir die Inhalte deshalb. Konkret müssen wir entscheiden, was wir beim Relaunch direkt umsetzen (1), was nachgelagert noch dazu kommen wird (2) und was wir aus Kapazitätsgründen überhaupt nicht realisieren werden (3).

Tool: Card-Sorting

Eine Flut an Themen in eine logische Struktur zu bringen, wirkt mitunter als kaum bezwingbare Aufgabe. Eine Möglichkeit, dies fast spielerisch zu tun, ist das sogenannte „Card-Sorting“.

Beim Card-Sorting werden alle relevanten Themen (z.B. die Themen möglicher Unterseiten) auf Karten notiert. Diese Karten werden anschließend auf dem Tisch ausgebreitet und Stück für Stück zu Themenstapeln zusammengefasst. Anschließend können die Themenstapel noch in logische Zusammenhänge gebracht werden.

Die Themenstapel und ihr Verhältnis zueinander kann als Basis für die grobe Sitemap-Struktur dienen. Die Sortierung der Themenstapel in Unterthemen wiederum kann bei der Entwicklung der Detail-Struktur innerhalb dieser Themen helfen.

Das sagen die Waldhirsch-Expert:innen

 

Eine gute Struktur ist die halbe Miete. Gemeinsam mit dir entwickeln wir eine Seiten- und Informationsarchitektur, die dein Unternehmen optimal repräsentiert, für deine Zielgruppe intuitiv navigierbar ist und die maximale Reichweite auf Google & Co. ermöglicht.

Punkteraster

Aileen Pfefferle, SEO-, Struktur- & Prozessexpertin, Geschäftsführerin bei Waldhirsch Marketing

Aileen Pfefferle

Wireframes für alle Seitentypen erstellen

Die Struktur zwischen den zukünftigen Unterseiten steht. Jetzt geben wir auch den Unterseiten selbst eine erste, grobe Struktur.

 

1. Festlegen der Seitentypen: Meist ergeben sich in einer Sitemap bestimmte Arten von Seitentypen, wie z.B. Produktseiten, Informationsseiten, Landingpages usw. sowie einmalige Seitentypen wie die Über-uns-Seite oder die Startseite. Diese Seitentypen legen wir im ersten Schritt fest.

2. Benötigte Inhalte der einzelnen Unterseite auflisten: Welche Inhalte benötigen wir bei den einzelnen Seitentypen, um Kunden optimal abzuholen und zu konvertieren? Eine Produktseite beispielsweise enthält meist die Produktbezeichnung, Produktbilder, Produktbeschreibung, eine Liste der Produktfeatures, Kommunikation von Nutzen und Vorteilen, Links zu technischen Datenblättern und Bedienungsanleitungen und einiges mehr.

3. Inhalte in Form eines Wireframes anordnen: Im Wireframe bilden wir jetzt ab, wie die Inhalte pro Seitentyp grob angeordnet sind. Dies betrifft die Reihenfolge auf der Seite (von oben nach unten), sowie die horizontale Darstellung (z.B. Bild rechts, beschreibender Text links daneben).

4. Stockwerke definieren: Ein „Stockwerk“ oder auch „Segment“ ist ein abstrakter, vertikal abgeschlossener Abschnitt innerhalb einer Webseite, also z.B. eine Anordnung „Bild links – Text rechts“, „Bild auf volle Breite“ oder eine „zentrierte Überschrift“. Fixe, schlank codierte Stockwerke sorgen für eine einfache, konsistente Gestaltung der Seiten sowie für schnelle Ladezeiten.

5. Technische Anforderungen definieren: Enthält der Wireframe-Entwurf technische Funktionen, die nicht Standard sind? Das könnten z.B. mehrstufige Kontaktformulare, eine Integration in dein CRM-System, ein Filialfinder oder auch ein Preisrechner sein. Wichtig hierbei: Nicht-Standard-Funktionen machen mitunter eine aufwendige Programmierung nötig, die entsprechende Ressourcen verschlingen kann. Lass dich hierzu am besten von deinem Projektmanager bzw. Webentwickler beraten.

process-tip

Praxis-Tipp: Wireframes exemplarisch befüllen

Je konkreter ein Wireframe, umso besser kann er bewertet und optimiert werden. Aus diesem Grund befüllen wir unsere Wireframe-Entwürfe meist direkt mit konkreten Texten. So können wir und unsere Kunden schnell feststellen, ob die Struktur vollständig ist, die Reihenfolge für das Kundenverständnis zielführend ist und der gesamte Entwurf „rund“ wirkt.

Entwürfe kritisch hinterfragen lassen

Ob die erstellten Seiten zielführend sind, hängt von einer Vielzahl von Faktoren ab: Angefangen bei der gewählten Strategie und den Zielen, über die konsistente Markendarstellung, die Wahrnehmung und Customer Journey der unterschiedlichen Zielgruppen, bis hin zu Gesichtspunkten, um bei Google optimal gefunden zu werden.

Aufgrund der hohen Komplexität ist es hilfreich, die Entwürfe von Experten aus den Themenbereichen UX / Interaction Design, Information- und Persuasion-Architecture, Zielgruppen-Research, SEO uvm. kritisch hinterfragen zu lassen. Dies ist umso zielführender, weil Anpassungen zu diesem Zeitpunkt noch ohne großen Aufwand vorgenommen werden können.

Unsere Mission

Wir helfen zukunftsorientierten Unternehmen zu mehr Wachstum und leisten damit einen Beitrag für eine bessere Zukunft.

Webwild

Die Webdesign &
Relaunch
Agentur aus
Freiburg & Lörrach

Unsere Passion: Webseiten, die performen und überzeugen. Wir verweben Design mit Funktion und SEO – nahtlos und effektiv.

Seit 2016 haben wir über 300 Projekte für kleine und mittelständische Unternehmen erfolgreich umgesetzt – wann dürfen wir dich unterstützen?

Über uns

Gruppenbild des Waldhirsch-Teams
Kontakt

Kontakt

Sichere dir jetzt deine unverbindliche Potenzial-Beratung:

Großes Webwild-Ehrenwort: Deine kostenlose Potenzial-Beratung wird kein reiner Sales Pitch. Wir liefern dir mehr Mehrwert als du erwartest. Wir analysieren:

  • Performance: Sichtbarkeit, Wettbewerb & Technik
  • Inhalte: Zielgruppenmatch & Customer Journey
  • Engpass: Lösungsansätze für dein Wachstum
Bitte aktiviere JavaScript in deinem Browser, um dieses Formular fertigzustellen.

Mit dem Absenden des Formulars erklärst du dich mit der verschlüsselten Übermittlung und Verarbeitung deiner Daten sowie der Kommunikation mit unserem Unternehmen einverstanden.
Weitere Informationen findest du in der Datenschutzerklärung.

=