Erfolgreiche Website Tipp 12 – Struktur in die Website bringen, die Grundlagen

Webdesign Grundaufbau – was ist damit gemeint

Jede Website, unabhängig davon, ob es sich um eine Dokumentation, Präsentation, Information oder Verkauf handelt, benötigt für ihren Erfolg eine funktionierende Struktur. Einen sogenannten Grundaufbau. Der Grundaufbau ist in einzelne Bereiche aufgeteilt. Das Design an sich spielt dabei keine Rolle. Websites sehen unterschiedlich aus und dennoch haben die meisten einen ähnlichen Grundaufbau.

Der Grundaufbau ist bei der Erstellung einer Website ein entscheidendes Qualitätskriterium. Bei Google bringt dich ein hochwertiger Text und relevante Keywords alle nicht nach oben. Für die Suchmaschinen-Optimierung ist es entscheidend das ganze sorgfältig zu planen und technisch richtig umzusetzen.

Ein funktionierender Website-Aufbau beinhaltet viele Bereiche und Komponenten. Einige davon sehen auf der Startseite genauso aus wie auf den Unterseiten. Beispielsweise der Kopfbereich (Header) zu dem auch der Navigations-Bereich gehört oder der Fußbereich (Footer). Um welche Bereiche und Komponenten es sich dabei genau handelt, werden wir uns nun etwas genauer ansehen.

Zurücklehnen und keine aktuellen Ressourcen für Webdesigner und Entwickler mehr verpassen und lasse dir die Informationen direkt in dein Postfach überbringen.

Jederzeit Kündbar! Kein Spam!

Kopf- oder Header-Bereich

Website Struktur: Kopf- oder Header-Bereich
Webdesign Grundaufbau: Kopf- oder Header-Bereich

Der Kopf-Bereich oder auch als Header-Bereich bezeichnet, ist das erste, was ein jeder Website-Besucher zu sehen kommt. Daher ist es besonders wichtig, das dort alle relevanten Informationen untergebracht sind. Je nach Web-Projekt beinhaltet dies unterschiedliche Elemente. Damit sich ein Unternehmen mit der Website identifizieren kann, ist auf alle Fälle ein Logo vorteilhaft. Dies sorgt auch gleichzeitig für vertrauen. Zu einem Header gehört aber mehr als nur ein Logo. Es beinhaltet die Website-Navigation. Damit wird der Besucher zu den gesuchten Inhalten navigiert. Hilfreich sind Angaben wie Kontakt-Möglichkeiten, Telefon, E-Mail oder Social-Media Kanäle.

Bei den meisten Websites die in den vergangenen Monaten erstellt wurden, ist im Header-Bereich ein bis zum Seitenrand angebrachtes Hintergrundbild. Aufgewertet durch eine Headline oder einer Call-To-Action (CTA) Aufforderung. Auch Slideshows finden im Header ihre Beliebtheit. 

Content-Bereich

Website Struktur: Content-Bereich
Webdesign Grundaufbau: Content-Bereich

Im Content-Bereich befindet sich der Hauptinhalt der Website. Dieser Bereich benützt somit den größten Anteil einer Seite. Der Inhalt ist auf jeder Seite unterschiedlich. Nicht nur der Text, auch das Design der verwendeten Elemente können anders aussehen. 

Sitebar-Bereich

Website Struktur: Sitebar-Bereich
Webdesign Grundaufbau: Sitebar-Bereich

Im Sitebar-Bereich werden oft zusätzliche Informationen wie Ereignisse, Links oder Werbung eingeblendet. Sehr oft werden auch zusätzliche Navigations-Punkte angezeigt. Solche Sitebar-Bereiche haben bei Blogs ihre Beliebtheit gefunden. Sie befindet sich entweder links oder rechts, in den meisten Fällen jedoch rechts.

Fuß- oder Footer-Bereich

Website Struktur: Fuß- oder Footer-Bereich
Webdesign Grundaufbau: Fuß- oder Footer-Bereich

Der Fuß- oder Footer-Bereich befindet sich im unteren Bereich der Website. 

Wie könnte das Beispiel als HTML-Code aussehen

Dank des HTML 5-Standards gibt es jede Menge Elemente, mit denen du die semantische Struktur einer Website festlegen kannst. Der HTML-Code ist so aufgebaut, wie ich ihn in etlichen meinen Projekten bereits umgesetzt habe. Der einfachheitshalber habe ich alle unnötigen Elemente und Informationen hier entfernt. Da ich sehr selten mit Blogs arbeite, kommt natürlich auch keine Sitebar vor. Im Großen und Ganzen sieht es dann so aus:

See the Pen HTML Website-Struktur by Christian (@dermacher) on CodePen.

Wenn du dir den Code einmal genauer ansiehst, wirst du merken, das sich der Aufwand in Grenzen hält. Du kannst mit wenig Aufwand am Ende sehr viel erreichen. Obwohl dies gar nicht so schwer ist, findet man immer wieder Kleinunternehmen oder Selbständige mit schlecht umgesetzten Websites. Und dies muss absolut nicht sein. Mit Disziplin zum Erfolg.

Der Webdesign Grundaufbau einer zeitgemäßen Website

Anhand dieses Beispiels möchte ich dir den Grundaufbau einer zeitgemäßen Website zeigen. Mit Sicherheit hast du bereits Webseiten mit einem ähnlichen Aufbau gesehen.

Der Webdesign Grundaufbau einer zeitgemäßen Website
Der Webdesign Grundaufbau einer zeitgemäßen Website

Header-Bereich

Im linken oberen Bereich befindet sich das Logo, welches mit der Startseite verlinkt ist. Ganz rechts eine mögliche Suchfunktion. Dazwischen befindet sich die Seiten-Navigation, welche gleichzeitig die Erste Menüebene ist. Zentral im Blickfeld ist eine Headline angebracht und einem Emotion-Bild als Hintergrund. Die Headline dient zur Einführung in das jeweilige Thema.

Content-Bereich

Wie bereits erwähnt, ist der Content-Bereich der Bereich, der den meisten Platz einer Seite einnimmt. Je nach Thema und Design kann dies unterschiedlich lang sein. Das Ganze wird mit Farben Grafiken, Zwischenüberschriften und viel Text in möglichen Spalten intuitiv zugeordnet. Dem Inhalt sind da keine Grenzen gesetzt. Von einer Produktübersicht angefangen, Vorteile von Produkten bis hin zu Preisen oder Vertrauenssignale. Das wichtigste ist aber die Handlungsaufforderung.  

Footer-Breich

Im unteren und letzten Bereich befinden sich alle wichtigen Kerninformationen als Links. Zu den Links zählen Copyright, Datenschutz, Impressum, Kontakt genauso wie eine mögliche Sitemap. Social-Media-Icons sind auch keine Seltenheit sowie die Möglichkeit zur Anmeldung eines Newsletters.

Der Webdesign Grundaufbau dient zur Orientierung

Dies ist nicht die einzige Möglichkeit eine Website aufzubauen, sondern dient nur zu einer Orientierung. Jedoch möchte ich erwähnen, dass die meisten genauso aufgebaut sind. Warum? Weil es sich gezeigt hat, das sich der Website-Besucher damit sehr gut zurechtfindet. Ein durchdachter Grundaufbau ist die Basis für eine erfolgreiche Website. Nicht nur Crawler von Suchmaschinen, sondern auch die Website-Besucher können den Internetauftritt besser verstehen. Mit anderen Worten, es wird die Orientierung erheblich vereinfacht.

Es spielt keine Rolle, ob es sich um die Startseite, Unterseite oder Landingpage handelt. Entscheidend ist der erste Eindruck und wie schnell sich der Website-Besucher zurechtfindet. Zielgerechte Positionierung und Lösungen für Probleme sorgen für eine höhere Verweildauer.

Wie du dir sicher vorstellen kannst, gibt es über die drei Bereiche Header, Content und Footer sehr viel zu beachten. Es kann sehr viel falsch gemacht werden. Bei den Gesprächen mit meinen Kunden, merke ich stets das die genannten Begriffe nicht deren täglicher Sprachgebrauch ist. Für mich sind diese Begriffe meine tägliche Arbeit. Wenn es dir genauso ergeht, werde ich in den kommenden Beiträgen Licht ins Dunkel bringen und genauer darauf eingehen.

Zurücklehnen und keine aktuellen Ressourcen für Webdesigner und Entwickler mehr verpassen und lasse dir die Informationen direkt in dein Postfach überbringen.

Jederzeit Kündbar! Kein Spam!

So geht es weiter

Beim 13. Tipp der Artikelserie geht es um die 5 Elemente einer perfekten Startseitedie Besucher und Kunden bringen.

Wenn dir der Beitrag gefallen hat, empfiehl ihn bitte weiter oder hinterlasse einen Kommentar:

Add a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Shares