Wichtige Elemente & Begriffe für den erfolgreichen Website-Aufbau

So unterschiedlich Websites auch aussehen so ähnlich ist tatsächlich der grobe Aufbau vieler Websites.

Eine erfolgreiche geplante Website basiert auf der Anordnung von Elementen, der Farbpalette, Kontrasten, Typografie und Navigation. Das Webdesign sollte nicht nur ästhetisch ansprechend sondern vor allem funktional sein und die Botschaft und Werte des Unternehmens widerspiegeln.

In diesem Artikel geht es genau darum, nämlich die gängige Struktur einer Website mit ihren üblichen Elementen. Auch wenn Websites noch so ungewöhnlich aussehen, haben sie doch häufig Gemeinsamkeiten. Es lohnt sich diese einzelnen Elemente mit ihren Begriffen kennenzulernen, denn sie können einem bei der Erstellung einer Website eine große Hilfestellung sein.

Inhalte des Artikels

Die Vorteile den üblichen Aufbau einer Website zu nutzen

Kommen wir zu den Vorteilen eines gängigen Aufbaus einer Website: Sich an den bekannten Aufbau zu halten, hat sowohl für die Websitebesucher wie auch für die Personen, die sie erstellt, einige Vorteile.

Fangen wir mit den Besuchern an: Das menschliche Auge hangelt sich gerne an bekannten Elementen und Strukturen entlang. Die erleichtert die Informationsaufnahme ungemein. Kennt man sich intuitiv auf einer Website aus, dann kann man um einiges schneller dadurch navigieren und sich dementsprechend zurechtfinden. Ein bekanntes Beispiel ist hier für das Menü, das sich bei der Desktop-Ansicht meist am oberen Rand befindet. Bei der Smartphone Ansicht ist es oft in einer Ecke (z.B oben rechts) in Form eines Hamburger-Menüs. Kommt also jemand auf die Website kann er direkt auf den ersten Blick sehen was es hier alles zu entdecken gibt und findet sich leicht zurecht.

Aber nicht nur wo sich das Menü befindet, sondern ebenfalls was sich im Menü befindet ist erlernt: Nämlich, dass es die jeweiligen Unterseiten der Website aufzeigt. Wir können also den Websitebesuchern damit eine Hilfestellung und dementsprechend Orientierung und Überblick geben.

Wenn ihr also als Unternehmen eine neue Website erstellen möchtet (oder erstellen lassen möchtet), kann es euch helfen, euch diesem Aufbau bewusst zu werden. Gehen wir eine typische Website gemeinsam von oben nach unten durch:

Header (Kopfbereich)

Der oberste Teil einer Website heißt Kopfbereich oder auch Header. Der Header ist meistens auch der Teil, der sich auf den einzelnen Unterseiten wiederholt und auf allen Seiten einer Website identisch bleibt.

Die Navigationsleiste / Das Menü

Die Navigationsleiste befindet sich für gewöhnlich im Header und ermöglicht es den Besucher:innen der Website, direkt auf weitere Unterseiten zu gelangen. Es werden alle Hauptbereiche der Website abgebildet, sodass sich Besucher:innen einen Überblick über die Inhalte und den Website-Aufbau verschaffen können. Das Menü wird von links nach rechts in hierarchischer Reihenfolge angelegt: an erster Stelle sollte auch die wichtigste Seite stehen. Meine Empfehlung sind sich auf wesentliche Menüpunkte (3-6 Stück) zu beschränken und nicht alle Unterseiten in die erste Hierarchieebene aufzunehmen. Die Website-Inhalte sollten sinnvoll gruppiert werden und die Unterseiten werden erst nach Aufklappen des Menüs sichtbar. Außerdem ist eine kurze und klare Bezeichnungen optimal.

Beispielmenü

Es gibt verschiedene Arten von Navigationsleisten: Das Drop Down Menü, Das Mega Menü (besonders geeignet für umfangreiche Websites) und das Hamburger Menü (oft für mobile Gerräte, wie bei Smartphones eingesetzt mit drei Balken untereinander).

Das Logo

Ebenfalls im Header befindet sich in den meisten Fällen links oben das Unternehmenslogo. Klickt man auf das Logo gelangt man auf direktem Wege auf die Startseite.

Bühne / Hero

Als nächstes sehen wir die Bühne oder auch Hero genannt. Das ist der erste komplett sichtbare Bereich, wenn man auf eine Website gelangt. Dieser Bereich ist übrigens der Wichtigste der Website, denn hier entscheiden die Besucher innerhalb von Sekunden, ob Sie auf dieser Website verweilen oder sie sie wieder verlassen. Es bietet sich ein stimmungsvoller und emotionaler Einstieg ein!

Dieser Bereich besteht meist aus einer einzigen großen, auffälligen Grafik oder einem attraktiven Bild, auf das eine plakative Überschrift platziert ist. Meist erstrecken sich diese über die gesamte Seitenbreite. Auch ein durchlaufender Slider (eine Art Diashow mit wechselnden Bildern oder auch Videos) wird gerne verwendet.

Die Überschrift soll bitte nicht “Herzlich Willkommen” lauten, denn dieser wertvolle Platz kann mit viel wichtigeren, aussagekräftigeren Botschaften genutzt werden. Zusätzlich kann eine Handlungsaufforderung wie „Mehr erfahren“ mit einer Schaltfläche (Button) hier eingesetzt werden.

Inhaltsbereich / Body

Nach dem Einstieg auf die Website mit dem Hero kommt der Inhaltsbereich. Gängig sind hier eine, zwei oder drei Spalten mit nur kleine Informationshäppchen (sogenannten Teasern) auf der ersten Seite zu zeigen. Teaser sind übrigens visuell ansprechende Verlinkungen: sie verweisen auf eine Unterseite mit weiteren Informationen. Teaser sind ein extrem häufiger Website-Baustein.

Der Inhaltsbereich der Website unterscheidet sich je nach Ziel der Website, Unternehmen, Art des Produkts oder der Dienstleistung.

Folgende Stilmittel prägen den Body:

Bilder & Videos

Bilder können komplexe Informationen effektiv vermitteln, da das menschliche Gehirn visuelle Reize besser und vor allem schneller verarbeitet als reinen Text. Bilder lösen Emotionen aus, erzählen Geschichten und wecken somit das Interesse der Seitenbenutzer. Außerdem helfen sie ein ausgewogenes Layout zu erzeugen. Wird eine konsistente Bildsprache – also ein einheitlicher Stil – beibehalten, verbessert das die Benutzererfahrung auf der Website. Bilder können einzeln oder in einer Gallerie angeordnet werden.

Farbgestaltung

Die Wahl der passenden Farben ist ein entscheidender Faktor für die visuelle und emotionale Wirkung einer Website. Mit der Farbwahl haben wir die Möglichkeit gezielt Stimmungen zu erzeugen, Botschaften zu vermitteln und die Benutzererfahrung maßgeblich zu beeinflussen

Typografie & Text

Der Text mit der passenden Typographie ist der Kern der Seite: Er ist so allgegenwärtig, dass er oft nicht als Komponente erkannt wird. Texte erfüllen keine rein informative Funktion, sondern sind ebenso entscheidendes gestalterisches Element. Durch eine bewusste Schriftwahl kann nicht nur die Lesefreundlichkeit, sondern auch die visuelle Ästhetik und die Benutzererfahrung einer Website maßgeblich beeinflusst werden. Die passende Schriftart, Schriftgröße und Zeilenabstände gewährleisten dies.

Um die Lesenden nicht zu langweilen und Wichtiges deutlich zu machen, bietet es sich an visuelle Abwechslung zu schaffen: Durch Stichpunkte, Aufteilung in Spalten und auch farbliche Hervorhebungen kann Spannung auch in längere Textabschnitte gebracht werden.

Animationen & Interaktionen

Animationen sind ein absoluter Trend im Webdesign und sind nicht nur ein netter Zusatz, sondern können auch das Nutzererlebnisses essentiell verbessern. Sie reichen von Mikroanimationen bis hin zu beeindruckenden Parallax-Effekten und Scroll-Animationen (Inhalte schrittweise einblenden).
Mikroanimationen oder auch -interaktionen sind subtile Reaktionen auf Benutzerinteraktionen, wie das Klicken auf einen Button oder das Ausfüllen eines Formulars. Sie vermitteln so den Eindruck, dass die Webseite auf die Aktionen des Benutzers reagiert. Ladesequenzen (zB. ein Ladebalken), interaktive Menüs, bewegte Slider, Dropdown-Menüs und Hover-oder auch Mouse-Over-Effekte gehören ebenfalls dazu.

Solche Effekte verleihen der Webseite Leben und sorgen für eine aktive Benutzerbeteiligung / erhöhen das Benutzerengagement und steigern die Benutzerfreundlichkeit. Gerade Mikroanimationen schaffen ein angenehmes und interaktives Website-Erlebnis.

Wichtig finde ich, das die Animationen auf das Niveau der Endnutzer ausgerichtet sind und diesen weder überfordern, noch von den eigentlichen Inhalten und Zielen der Website ablenken. Sie sollten also sparsam und gezielt eingesetzte werden. Hier heißt es auch Ladezeit beachten! Durch Animationen verleiht ihr einer Webseite eine professionelle und dynamische Note.

CTAs

CTA steht für „Call-To-Actions” und ist ein klarer Handlungsaufruf. Er motiviert Besucher zum Handeln und fördert gewünschte Aktionen. Oft erscheint er in Form eines Button und ist so eine visuell klar ersichtliche Interaktionsfläche mit einer Verlinkung. Ein Button kann einen unterschiedlichen Status haben, der sich ändern, wenn man mit dem Button interagiert.

Dabei spielt die Farbgebung eine wichtige Rolle, um den Button von anderen Website-Elementen abzuheben und die Aufmerksamkeit der Besucher zu erregen. Man sollte CTAs an prominenten Stellen auf der Website zu platzieren, wo sie leicht sichtbar und zugänglich sind.

Weitere optionale Funktionen

Die Breadcrumb-Navigation: die “Brotkrümelnavigation” zeigt dem User wo auf der Website er sich gerade befindet
Sidebar oder Seitenleiste: Meistens findet man dort eine Navigation und Extras, gerne verwendet in Blogs
Formulare: Kontakt-, Bestell-, Bewerbungs-, Newsletter-Anmeldungs-Formulare etc.
Testimonials & Trust-Elemente: Helfen Vertrauen aufzubauen
Suchfunktion: Schneller Zugriff auf gewünschte Informationen
Interne und externe Verlinkungen: Besuchende aktiv durch deine Website zu den wichtigen Inhalten führen

Footer

Analog zum Header gibt es im unteren Bereich der Website den „Footer“. Ein strategischer Einsatz des Footers erleichtert dem Website-Besucher die Nutzung, denn er muss nicht zurückscrollen, um das Hauptmenü wieder zu erreichen Dieser Fußbereich ist – wie auch der Header – über alle Unterseiten hinweg gleich und enthält folgende typische Elemente:

Kontaktinformationen
Ein sekundäre Menü (Submenü) mit rechtlichen Informationen (Impressum, Datenschutz, Cookies etc.)
Verlinkungen zu sozialen Netzwerken (Facebook, Instagram, Twitter etc.)
wichtige Infos wie Zahlungsmethoden- und Versandbedingungen oder Öffnungszeiten
Siegel, Zertifikate
Bei Webshops: Links zu den Allgemeinen Geschäftsbedingungen (AGB) und der Widerrufsbelehrung
Newsletter-Anmeldung

Fazit

Der Aufbau einer Website sollte im wahrsten Sinne des Wortes von Kopf (Header) bis Fuß (Footer) gut durchdacht und geplant sein, um Benutzer wie auch Suchmaschinen gleichermaßen zu überzeugen: Wichtiges sollte auf den ersten Blick ersichtlich oder schnell auffindbar sein – tiefergehende Informationen dagegen gehören auf separate Unterseiten.

Eine wirkungsvolle und erfolgreiche Websitebietet dem Besucher einiges an Service: angefangen von einer benutzerfreundlichen Navigation über Details zum Unternehmen bis hin zu Kontaktmöglichkeiten, Öffnungszeiten, Anfahrtsbeschreibungen und Co. Natürlich dürfen auch wichtige rechtliche Angaben wie Impressum, AGB oder Datenschutzhinweise nicht fehlen.

Orientiert man sich nicht nur inhaltlich an den gängigen Aufbau einer Website, sondern ebenfalls an häufigen Design-Elementen und -Farben, kann die Webseite schnell in einem Einheitsbrei untergehen. Das Besondere und Individuelle, das euer Unternehmen widerspiegeln sollte, ist dann nicht mehr vorhanden. Deswegen ist es wichtig sich zu überlegen wie diese gängigen Elemente aussehen und wie sie dargestellt werden, um euren Unternehmen auffällig zu repräsentieren. Vielleicht vielleicht wollt ihr auch gerade ein untypisches Auftreten und als Besonderheit hervorstechen? Vielleicht wollt ihr experimentieren und die Websitebesucher herausfordern? In diesem Fall könnt ihr bewusst überdenken die üblichen Struktur ein wenig aufzubrechen und ein paar Besonderheiten und Kniffe einzubauen.

Ihr möchtet auch ein professionelles, durchdachtes Erscheinungsbild, um die Zielgruppe gezielt anzusprechen und die nötige Aufmerksamkeit und den Wiedererkennungseffekt zu erlangen? Meldet euch gerne bei mir. Ich erstelle euer Logo, entwickle das Corporate Design und auch entsprechende digitale oder gedruckte Anwendungen bis hin zur Website.