27 Jan In 4 Schritten zur Struktur der werdenden Webseite (2/6)
Die Erstellung einer Webseite kann man mit der Renovierung einer Küche vergleichen. Zunächst gilt es zu beschreiben was die neue Küche können muss, kann, darf – bevor an Design, Layout, Geräte, Stecker & Anschlüsse, Fliesen, Beleuchtung, Furniere, Möbel oder Vorhänge gedacht werden kann.
Gutes Webdesign erfordert immer auch eine solide Seitenarchitektur, basierend auf klaren Zielen und einer realistisch definierten Zielgruppe. Zusammengefasst finden sich diese Erwägungen in der Projektbeschreibung (1/6) wieder.
Die Struktur eine Webseite kann mit der Architektur der Küchenrenovierung verstanden werden. Folgende Schritte sind dafür – in einfacher oder komplexerer Umsetzung – erforderlich:
- Inhalts- und Funktionalitätsentwurf
- Strukturskizze
- Unterseitenbeschreibungen
- Modelldarstellungen
Die vorbenannten Schritte laufen in Sequenzen, als eine Einheit ab. Die Entstehung der Stuktur ist nicht gleich der Entstehung der eigentlichen Seite.
1. Inhalts- und Funktionalitätsentwurf
Der Inhalts- und Funktionalitätsentwurf umfasst alle bestehenden Inhalte und Funktionalitäten die bereits vorhanden sind, sowie weitere Ideen für Inhalt und Funktionalität die noch geschaffen werden könnten. Der gesammelte Inhalt wird überprüft und Verbesserungen unterzogen. Was nicht zu den in der Projektbeschreibung verdeutlichten Zielen oder zur Zielgruppe passt, geht über Bord.
Es gilt in die Zukunft zu blicken und sich die Frage zu stellen wie der Seiteninhalt an den Fortschritt angepasst werden müsste. Um Raum für Wachstum zu lassen. Als nächstes wird der Inhalt in Kategorien unterteilt. Der Kunde kann in diesen Prozess mit eingebunden werden. Sobald die Kategorien stehen, erfolgt eine Zusammenfassung, um mit dem Kunden die Richtigkeit abschließend zu überprüfen.
2. Strukturskizze
Basierend auf der Zusammenfassung der Inhaltskategorien entsteht eine Strukturskisse, auch Sitemap genannt. Dabei handelt es sich um eine visuelle Darstellung des auf der Webseite zu veröffentlichen Inhalts. Oft wird der Schritt der Erstellung einer solchen Darstellung als “Boxes & Arrows” bezeichnet. Mehr können Interessierte darüber bspw. bei http://boxesandarrows.com/ herausfinden.
3. Unterseitenbeschreibungen
Nicht immer, aber immer häufiger wird die Unterseitenbeschreibung als Teil der Modellierung einer Webseite genutzt. Die zunehmende Relevanz einzelner Unterseiten einer Webseite gewinnen mehr und mehr an Bedeutung. Verständlich. Die Möglichkeiten sind schließlich vielfältig.
Im Fokus stehen Zwei Fragen die hingegen einer Skala “höchste bis niedrigste Priorität” beantwortet werden sollten:
- Welcher Inhalt gehört auf die (Unter)Seite?
- Wie gestaltet sich die Priorität jedes einzelnen Inhaltsbausteins?
Typischerweise beschreibt die x-Achse die Priorität des Bausteins. Die y-Achse lässt Platz für Bausteine. In einer 3-Spalten-Darstellung bringen wir drei Priotäten für den Inhalt einer bestimmten Unterseite unter. In die erste Spalte füllt sich der wichtigste Inhalt, in der zweiten Spalte der etwas weniger wichtige und in der dritten Spalte der am wenigsten wichtigste Inhalt wieder.
Die Vorteile dieser Methode liegen auf der Hand
verdeutlicht den gesamten Inhalt einer bestimmten Unterseite…
verdeutlicht die Priorität jedes Inhaltsbausteins…
betrachtet Inhalt unabhängig von der visuellen Darstellung (design)…
4. Modelldarstellung
Die Modelldarstellung bspw. in Form eines sog. Drahtgittermodels ist eine nicht-graphische Darstellung einer Webseite. Eine einfache Zeichnung zumeist, die die Informationen und Funktionalität einer jeden Seite in einfachen Blöcken zusammensetzt. Für die Startseite, jede wichtige Unterseite oder anders angeordnete Seite ist die Erstellung dieses Modells relevant.
Ein Drahtgittermodell beinhaltet alle wichtigen Elemente einer Webseite. Die Navigation, Bilder, Inhalt, funktionale Elemente (bspw. Suche) und Footer.
Zugegeben, Strukturskizzen für ein Webseitenprojekt zu verwenden, zu Modellieren, zu Beschreiben… das wirkt alles etwas aufwändig. Spielt es doch eine wichtige Rolle, wenn ein koordiniertes Ergebnis am Ende stehen soll.
Ohne Struktur – keine Webseite. Vergesst nicht. Der Inhalt, also die eigentlichen geschriebenen Worte der Webseite, sind Teil ihrer Struktur. Die technische Umsetzung und grafische Darstellung sind die eine. Die Botschaft in Worten die andere Seite ihrer Struktur.
Im dritten Schritt unserer Serie erfahrt ihr mehr zur Visualisierung des Designs der Webseite.
Credits
Author: Sebastian, Tobias
Image, MINDPOLE