2.2. Des Layout Ihrer Website planen

Last updated on
14 April 2025

Zielsetzung

Planung der Navigationsstruktur und des Layouts der Website, sowohl für mobile Geräte als auch für Desktop-Browser.

Arbeitsschritte

Es ist eine gute Idee, das Layout der Website zu planen, bevor Sie mit dem Erstellen der Website und der darauf vorhandenen Inhalte wie Texte und Bilder beginnen. Ihr Konzept muss jedoch möglicherweise überarbeitet werden. Entweder bevor Sie mit der Implementierung beginnen oder nachdem Sie einen Teil der Website mit Entwürfen der vorgesehenen Inhalte versehen haben, welche vom Budget und den Vorstellungen des Herausgebers der Website abhängen.

  1. Machen Sie eine Liste der Inhalte, die Ihre Website den Seitenbesuchern präsentieren soll. Auf das Szenario des Wochenmarktes bezogen, das wir hier anwenden, könnte diese Liste wie folgt aussehen:

    • Standort des Wochenmarktes, mit Wegbeschreibung und Karte
    • Öffnungszeiten des Wochenmarktes
    • Geschichte des Wochenmarktes
    • Liste der Lieferanten
    • Detailinformationen zu jedem Lieferanten
    • Durchsuchbare Liste von Rezepten
    • Einzelheiten zu jedem Rezept
    • Liste der zuletzt hinzugefügten Rezepte
  2. Entscheiden Sie, welche Informationen auf welchen Seiten oder welche Seitentypen auf der Website vorhanden sein sollen:

    Informationen, die auf allen Seiten sichtbar sein sollten
    Adresse, Öffnungszeiten und Liste der kürzlich hinzugefügten Rezepte
    Lieferanten-Detailseiten
    Informationen zu jedem Lieferanten auf einer eigenen Seite
    Rezept-Detailseiten
    Details zu jedem Rezept auf einer eigenen Seite
    Startseite
    Standort, Karte, Wegbeschreibung und Öffnungszeiten
    „Über uns“ Seite
    Geschichte des Wochenmarktes
    Seite mit der Liste der Lieferanten
    Liste der Lieferanten, mit Links zu Lieferanten-Detailseiten
    Seite mit der Rezeptliste
    Durchsuchbare Rezeptliste, mit Links zu Rezept-Detailseiten
  3. Entscheiden Sie, welche Informationen auf jeder Seite für die Besucher der Website am wichtigsten sind. Bei der Verwendung von Mobiltelefonen oder anderen kleinen Geräten werden oft nur die Inhalte angezeigt, die zuerst präsentiert werden. Manchmal kann der Besucher auch nicht nach unten scrollen, um alle Inhalte zu sehen.
  4. Entscheiden Sie, welche dieser Seiten in der Hauptnavigation der Website erscheinen sollen. Die Hauptnavigation könnte z. B. aus den Menüpunkten Startseite, Über uns, Lieferanten und Rezepte bestehen.
  5. Machen Sie für jede Seite eine grobe Entwurfsskizze, die zeigt, wie die Seite aussehen würde, wenn Sie sowohl auf einem kleinen Bildschirm, wie z. B. einem Mobiltelefon, als auch auf einem größeren Bildschirm, auf dem ein Desktop-Browser ausgeführt wird angezeigt werden würde. Angesichts der Tatsache, dass die meisten Besucher der Website kleinere Geräte, wie Mobiltelefone oder Tablets verwenden werden, ist es eine gute Idee, mit dem Layout in der Größe eines Mobiltelefons zu beginnen, um sicherzustellen, dass diese Besucher in der Lage sein werden, die benötigten Informationen zu finden, ohne viel durch die Website scrollen zu müssen.

    Bei der Erstellung dieser Seitenlayoutkonzepte werden Sie möglicherweise feststellen, dass Sie Ihre Ideen davon, welche Informationen auf welcher Seite zu sehen sein sollen nochmals überdenken müssen. Zum Beispiel könnten Sie entscheiden, dass die Adresse des Wochenmarktes, die Öffnungszeiten und die Liste der kürzlich hinzugefügten Rezepte gut in die rechte Seitenleiste der Website passen würden, um diese Informationen auf allen Seiten gleichermaßen anzeigen zu können, wenn die Website mittels eines Desktop-Browsers aufgerufen wird. Andererseits könnten Sie festlegen, dass diese angaben auf mobilen Geräten stattdessen in einer Kurzform am oberen Rand der Website dargestellt werden sollen und die Liste der Rezepte weiter unten auf der Startseite angezeigt werden soll.

Videos

Das Layout Ihrer Website planen (englisch)

Mitwirkende

Geschrieben von Jennifer Hodgdon.

Ins Deutsche übersetzt von Joachim Namyslo.

 

This page is generated from AsciiDoc source from the User Guide. To propose a change, edit the source and attach the file to a new issue in the User Guide project. PDF and e-book formats are available on the User Guide project page.

Source file: planning-layout.asciidoc

Help improve this page

Page status: No known problems

You can: