Webdesign II: Seitenbaum und Mockup

Der erste Schritt zu Struktur und Inhaltsplanung ist eine Themensammlung. Trennen Sie hier direkt

  • Inhalte für Ihre Kunden
  • Pflichtinhalte und Standards

Während sich Pflichtinhalte (Impressum, Datenschutz, AGB, Lieferbedingungen…) aus den allgemeinen Vorschriften bzw. aus Ihrem Tätigkeitsfeld ergeben, sind Standards das, was Ihre Kunden erwarten: dazu gehören eine Kontaktseite, die Anfahrtsbeschreibung (mit Routenplanung oder wenigstens Karteneinbindung), womöglich eine Händlersuche oder ein Fillialfinder und eine FAQ-Seite (frequently asked questions, also Antworten auf immer wieder gestellte Fragen – dies dient nicht zuletzt auch der Entlastung Ihrer Kontaktseite).

Damit haben Sie dann den lästigen Bereich zumindest schon geplant.

Bei den Inhalten ist mehr erforderlich: Je nach Unternehmensgröße und Angebot kann es zweckmäßig sein, Untergruppen anzulegen die dann später auch als Navigationshilfen erscheinen (zum Beispiel “Leistungen”, “Shop”, “Wir als Arbeitgeber”, “Franchisepartner”).

Damit genug der Vorgaben, im nächsten Schritt sollte eine ungezwungene Sammlung erstellt werden.

Wege zu einer Webseitenstruktur

  • ein klassisches Brainstorming mit allen relevanten Mitarbeitern der verschiedenen Bereiche
  • Themensammlung der Mitarbeiter (Sammlung per Mail, über eine offene Website, z.B. Google-Docs, oder mit Post-It-Zetteln an einer zentralen Stelle des Unternehmens)
  • Ihre eigerne Stichwortsammlung, die Sie über mehrere Wochen in einem Notizbuch zusammengetragen haben

Versuchen Sie zunächst ohne den Vergleich mit anderen Seiten (vor allen denen Ihrer Wettbewerber) auszukommen. Das würde Ihren Blick einschränken; Sie wollen aber etwas eigenes Neues erschaffen.

Da nun immer noch keine Inhalte zur Verfügung stehen, legen Sie jetzt grob die Text- und Bildermenge fest. Damit ergibt sich eine erste wichtige Vorgabe für die Mitarbeiter, die diese Informationen zusammenstellen müssen sowie für den verfassenden Texter.

Je umfangreicher der Text ist, desto mehr muss er bebildert werden. Einheitliche Grafiken können hier stilbildender sein, als zu allgemeine Fotos. Sie helfen, komplexe Textaussagen in eine verständliche Form zu bringen.

Fotos sind, nebenbei bemerkt, ein umfangreiches (und problematisches) Thema, deshalb habe ich diesem ein eigenes Kapitel gewidmet.

Bilder in der Planung beim Webdesign berücksichtigen

Für einige Inhalte werden sich die Bilder zwangsläufig ergeben: Produktvorstellungen und -anwendungen, Mitarbeiter und Produktionsanlagen sowie die zum direkten Kauf angebotenen Artikel werden sicher bebildert sein.

Eine besondere Form von Inhalt sind alle Formen interaktiver Module, begonnen beim Kontaktformular, Fillialfinder, Konfiguratoren, Leistungsberechnungen etc.

Diese setzen in der Regel einen Folgeinhalt in Gang (Ergebnisseite, Bestätigung, Fehlermeldung).

Für eine erste Strukturplanung erstellen Sie jetzt einen “Baum”. Es ist eine hierarchische Abfolge der Seiten, beginnend bei der Startseite, die unter Ihrer Webadresse als erstes angezeigt wird. Dieses Modell ist der wichtigste Teil der gesamten Planung, da er Ihnen auch in Zukunft hilft, die Übersicht selbst bei komplexen Seiten zu behalten. Zudem wird er Ihnen auch in den Analysen der Seitennutzung immer wieder begegnen.

Diese Informationen reichen aus, um einen Ablaufplan zu erstellen. An dieser Stelle wird zum ersten Mal Konkretes sichtbar und hier kommen auch die ersten Designüberlegungen ins Spiel.

Diese sind jedoch noch sehr grob und weitgehend unverbindlich. Aus der Themensammlung werden sich nun aber schon Umfang und eine mögliche Gliederung ergeben. Damit lässt sich eine erste Skizze erstellen, was üblicherweise noch mit Stift und Papier geschieht.

Neben dem Logo und einem groben Kopfbereich der Seite wird das Menü skizziert, darunter dann die verschiedenen Inhalte als Platzhalter. Nach diesem Muster werden die Unterseiten erstellt, im Schema Ihres Seitenbaumes. Dabei werden natürlich nicht alle Seiten skizziert – wichtig sind die verschiedenen Inhaltstypen und Verzweigungen.

Mockup-Programme helfen beim Webdesign

Jetzt kann es sinnvoll werden, eine Mockup-Software zu verwenden. Diese setzt die Replizierung der Skizzen (und späteren Variationen) um und hilft Ihnen bei der Darstellung von Verknüpfungen und Ablaufprozessen.

Neben den variablen Inhalten der Seiten kann jetzt bereits berücksichtigt werden, welche Inhalte immer (oder in bestimmten Abschnitten) erscheinen sollen. So kann im gesamten Produktbereich in der rechten Spalte eine Warenkorbfunktion angezeigt werden oder in der Unternehmensvorstellung die Nachrichtenübersicht.

Neben dem immer verfügbaren Hauptmenü kann ein, je nach Bereich wechselnder, Kasten mit Unterthemen angeboten werden.

Erst wenn diese Planung abgeschlossen und “rund” ist, kann die grafische Entwicklung beginnen. Selbstverständlich sollten Sie auch in den folgenden Phasen immer offen für Änderungen sein, die sich aus der realen Umsetzung ergeben.

Relaunch! Buch mit Astronaut Cartoon

Leseprobe aus meinem im September 2020 erschienen Buch

Relaunch!

Mit neuen Webseiten in die Zukunft

Stefan Schmidt, Simone Sarodnick, Christian Behrends

Das Handbuch, ca. 192 Seiten
September 2020

ISBN 9783751954310