Homepage-Sitemap

Homepage-Sitemap-Template

Diese Vorlage bildet die Top-Level-Navigation einer Homepage und den Footer in einem einfachen, farbcodierten Layout ab. Sie richtet sich an Produktmanager, UX-/UI-Designer, Marketingverantwortliche und Entwickler, die die Informationsarchitektur (IA) planen und sie Stakeholdern vermitteln.

Strukturaufteilung

• Produkte (Koralle/Rot #ff6464)

  • Rundes Symbol mit weißem Rand (Einkaufswagen)

  • Kopfzeile „Produkte“

  • Untertitel „Startseite und Filter“

  • Drei weiße Platzhalterkästen mit Label „Hier Text eingeben“

• Partner (Gelb/Gold #ffbe44)

  • Rundes Symbol mit weißem Rand (Handschlag)

  • Kopfzeile „Partner“

  • Untertitel „Landing-Pages und Filter“

  • Drei Platzhalter mit Label „Hier Text eingeben“

• Unternehmen (Türkis #5ec8b3)

  • Rundes Symbol mit weißem Rand (Stadt/Gebäude)

  • Kopfzeile „Unternehmen“

  • Untertitel „Startseite“

  • Drei Platzhalter mit Label „Hier Text eingeben“

• Kontakt (cyan #4fd8dd)

  • Rundes Symbol mit weißem Rand (Adressbuch)

  • Überschrift „Kontakt“

  • Kein Untertitel

  • Rechteck mit gestricheltem Rahmen mit der Beschriftung „YOUR LOGO“ für die Platzierung deiner Marke

Inhalts-Hierarchie

• Die Hauptnavigationsabschnitte befinden sich oben mit einem klaren Titel und einer kurzen Untertitelzeile (außer Kontakt).

• Unter Produkte, Partner und Comapny bieten drei rechteckige Felder Platz für Unterseiten, Filter oder Deep-Links.

Footer-Bereich

• Ein Footer-Bereich mit dem Titel „Footer (main + additional navigation)“ enthält vier Spalten, getrennt durch vertikale Trennlinien:

  1) Kontaktdaten, News, Hilfe

  2) Sektoren (unterstrichen, fett): Sektor 1, Sektor 2, Sektor 3

  3) Produkte (unterstrichen, fett): Support, Zubehör, Ausstattung

  4) Newsletter, Allgemeine Geschäftsbedingungen, Social Media

Visuelle Elemente

• Ein auffälliges lila Header-Banner (#6631d7) mit „Homepage Site Map“ in weißer Georgia-Schrift.

• Die Karten der Bereiche verwenden jeweils die oben aufgeführten Farben und sind mit einem runden Symbol versehen.

• Ein eigener Logo-Bereich befindet sich in der Spalte „Kontakt“.

• Ein dünner lila Streifen am unteren Rand verbindet das Farbschema.

So geht's

1) Ersetze alle „Text hier eingeben“ durch tatsächliche Unterseitennamen oder Links.

2) Aktualisiere bei Bedarf Abschnittstitel/-untertitel (Farbcodierung zur besseren Übersicht beibehalten).

3) Ersetze die Platzhalter-Symbole durch dein Marken-Symbolset.

4) Platziere dein Firmenlogo in der gestrichelten Fläche „YOUR LOGO“.

5) Fülle die Footer-Spalten mit endgültigen Navigationspunkten und rechtlichen Links.

Best Practices

• Für die frühe Website-Planung, IA/UX-Workshops, Stakeholder-Reviews und die Übergabe an die Entwicklung verwenden.

• Halte die Anzahl der Abschnitte gering; strebe drei bis fünf Einträge pro Spalte an.

• Behalte die Farbgebung bei, um die Übersichtlichkeit zu erhöhen.

• Beachte das “Comapny”-Label, wenn du die Vorlage exakt übernimmst, oder korrigiere es vor der Veröffentlichung.

Viele Grüße

Khawaja Rizwan