Effektiver Website-Aufbau – Must-haves für ein professionelles Website-Layout


Online Shop mit Frau als Beispiel für Website-Aufbau


Der strukturelle Aufbau deiner Website spielt eine wichtige Rolle für das Surferlebnis, das Nutzer:innen auf deiner Website haben werden. Damit deine Website eine gute Benutzererfahrung bietet, müssen die einzelnen Bestandteile deines Website-Layouts gut miteinander zusammenarbeiten. Nur so kann es deiner Website gelingen, Besucher:innen in Kund:innen zu konvertieren und sie langfristig zu binden.


Gutes Website-Layout ist also für jeden wichtig, der eine Website erstellen will, die sich gut navigieren lässt und überzeugt. Obwohl, laut Aristoteles das Ganze mehr ist, als die Summe seiner Teile, wollen wir uns in diesem Artikel den einzelnen Website-Elementen widmen, die zusammenwirken, um ein gutes Website-Layout zu erzeugen.



Effektiver Website Aufbau: Bestandteile des Website-Layouts


Es gibt Website-Elemente, die für das Webdesign so wichtig sind, dass alle Websites sie enthalten müssen, um richtig zu funktionieren. Andere Elemente sind hingegen optional und nicht zwingend für das Gelingen einer Website nötig. Im Folgenden schauen wir uns die wesentlichen und zusätzlichen Elemente für effektiven Website-Aufbau sowie einige weitere wichtige Faktoren.



Wesentliche Elemente für effektiven Website-Aufbau



01. Header


Der Header, auch bekannt als Kopfzeile, ist der oberste Teil einer Website. Oft beinhaltet der Header das Firmenlogo, die Navigationsleiste bzw. das Menü und einen Button mit dem Call-to-Action. Der Header ist mit das Erste, was Besucher:innen auf einer Website wahrnehmen, daher sollte er möglichst übersichtlich gestaltet sein. Oft ist er schlicht gehalten und die Inhalte sollten mit einer klaren und gut lesbaren Schrift geschrieben sein.


Der Header ist meistens auch der Teil, der sich auf den einzelnen Unterseiten wiederholt und auf allen Seiten einer Website identisch bleibt. Wir empfehlen dir einen Header zu erstellen, der beim Scrollen verschwindet, um wichtige Inhalte nicht zu verdecken.



02. Navigationsleiste


Die Navigationsleiste oder auch Menü und Navigationsmenü genannt, befindet sich auf den meisten Websites im Header. Es ermöglicht die einfache Navigation zu den wichtigsten Unterseiten und ist somit ein wichtiger Anker für die Orientierung auf einer Website. Hier werden die Hauptbereiche deiner Website abgebildet, sodass sich Besucher:innen einen Überblick über die Inhalte und den Website-Aufbau verschaffen können.


Damit die Navigation deiner Website durch das Menü auch tatsächlich vereinfacht wird, solltest du es logisch und intuitiv strukturieren und dir gut überlegen, welche Unterseiten du abbilden möchtest und welche du in der Dropdown-Leiste verbirgst. Typischerweise enthält die Navigationsleiste die wichtigsten Unterseiten, wie die „Über-uns”-Seite, die „Kontakt”-Seite und Hauptelemente wie Shop, Blog oder Portfolio.



03. Titelbild


Als Titelbild, Featured Image oder Headerbild bezeichnet man das Bild, welches sich unterhalb des Headers befindet. Es muss sich hierbei nicht unbedingt um ein Bild oder Foto handeln. Viele Websites verwenden Grafiken, Animationen oder Videos, um die Aufmerksamkeit ihrer Besucher:innen zu halten.


Unabhängig davon, welches Medium du verwendest, sollte es gut veranschaulichen, worum es auf deiner Website, bei deiner Marke, deiner Firma oder deinen Produkten und Dienstleistungen geht. Das Titelbild sollte also zur Gesamtästhetik deines Website-Layouts passen.


Das Titelbild bildet zusammen mit dem Header und der Navigationsleiste den Bereich, der allgemein als „above the fold“ bezeichnet wird. Der Begriff stammt aus dem Pressebereich und wurde ursprünglich für Tageszeitungen verwendet. „Above the fold“, also „über dem Knick” ist im Website-Aufbau der Abschnitt einer Webseite, der für Nutzer:innen ohne Scrollen auf den ersten Blick sichtbar ist. Achte also besonders darauf, dass dieser Bereich deiner Website ansprechend und übersichtlich ist, um einen optimalen ersten Eindruck zu erzeugen.



04. Website Inhalte


Die Hauptinhalte bilden klassischerweise den mittleren Teil einer Website und stehen sozusagen im Zentrum. Hier vermittelst du deinen Kund:innen, wer du bist, was du auf deiner Website anbietest und wie sie dieses Angebot wahrnehmen können.


Auf den meisten Websites findet man einen Großteil der Inhalte in geschriebener Form als Textabschnitte vor. Bilder und Videos sind jedoch ebenso wichtig wie die Texte, da sie das Geschriebene visualisieren.



05. Whitespace


Als Whitespace, Weißraum oder auch Leer- und Negativraum, bezeichnet man im Webdesign die Teile einer Website, die keine Informationen enthalten und somit inhaltsleer sind. Auf den meisten Websites handelt es sich hierbei einfach um helle, leere Hintergründe.


Solche, oft informationsfreien Flächen sind besonders wichtig, da sie dein Website-Layout auflockern und somit die Auffälligkeit wichtiger Inhalte hervorheben. Du solltest den Leerraum also auf keinen Fall außer Acht lassen, wenn du einen effektiven Website-Aufbau gestalten willst.



06. Footer


Der Footer, oder auch die Fußzeile, steht am unteren Ende einer Website und bildet ihren Abschluss. Er ist der ideale Ort, um wichtige Inhalte zu verlinken, die nicht in den Header oder den Hauptinhalt gehören.


Der Footer enthält normalerweise eine Sitemap mit Links zu den auf deiner Website verfügbaren Unterseiten wie Rechtstexte, Kontaktinformationen und Rückgabebedingungen. Außerdem kannst du hier die Icons deiner Social-Media-Kanäle integrieren und zu deinen Profilen zu verlinken.


Website-Layout eines Shops für Sportbekleidung als Beispiel für den Website Aufbau


Zusätzliche Elemente für den Website-Aufbau


Auch wenn du lediglich die oben genannten Elemente zu deiner Website hinzufügen würdest, hättest du bereits eine vollständige Homepage mit einer logischen Website-Struktur. Im Folgenden findest du einige zusätzliche Elemente, die von den meisten Website-Betreiber:innen gern verwendet werden, um die Benutzererfahrung noch zu verbessern:



07. Logo


Wenn du eine Marke aufbauen möchtest, dann ist das Logo ein wichtiger Teil deiner Branding-Bemühungen. Ein Logo repräsentiert dein Unternehmen und macht es sowohl für bestehende als auch für potenzielle Kund:innen erkennbar und einprägsam.


In der Regel befinden sich Logos in der oberen linken Ecke des Website-Headers und ist mit der Startseite verlinkt. Somit können Besucher:innen jederzeit direkt zur Startseite navigieren.


Wenn du ein Logo erstellen willst, dann kannst du entweder Designer:innen engagieren oder ein Logo-Maker-Tool nutzen, um dein Logo selbst zu gestalten. Egal, wofür du dicht entscheidest, wenn du dein Logo im Header abbilden möchtest, solltest du das bei der Wahl des Formates beachten. Außerdem sollte dein Logo auch in der mobilen Version deiner Website gut aussehen, also füge nicht zu viele kleine Details hinzu.



08. Calls-to-Action


Ein Call-to-Action (CTA) ist ein kurzer Text, der als Handlungsaufforderung formuliert ist und Besucher:innen dazu anregen soll, den nächsten Schritt in Richtung Conversion zu gehen.


CTAs werden normalerweise als Schaltfläche bzw. als Button angezeigt und farblich vom Rest des Webdesigns hervorgehoben. Der CTA-Text sollte kurz und klar formuliert sein und auffallen wie zum Beispiel: „Jetzt starken”; „In den Warenkorb”; „Herunterladen” und so weiter.


Platziere den CTA-Button gut sichtbar an mehreren relevanten Stellen auf deiner Website, zum Beispiel neben einer Produktbeschreibung oder direkt im Header, wo er gut sichtbar ist.


CTA Buttons als wichtige Elemente im Website-Aufbau


09. Sidebar


Websites mit einer komplexen Seitenstruktur und vielen Unterseiten wie zum Beispiel Online-Shops mit den verschiedenen Produktkategorien, verwenden häufig eine Sidebar, um die Navigation auf ihrer Website zu erleichtern.


Eine Sidebar oder Seitenleiste ist eine zusätzliche Navigationsleiste, die am linken oder rechten Rand einer Website abgebildet wird und die niedrigere Navigationsebenen einer Website abgebildet.



10. Blog


Ein Blog ist im Wesentlichen nichts anderes als eine Ansammlung von Artikeln zu den Themen deiner Branche. Heutzutage kommt es immer häufiger vor, dass Unternehmen einen Corporate Blog erstellen, um die Vorteile des Bloggens zu nutzen. Blogs können als eigenständige Website erstellt werden oder als Unterseite in der Navigationsleiste verlinkt werden.


Obwohl Blogs optionale Elemente im Website-Aufbau sind, sind sie eine tolle Möglichkeit, um ausführliche Informationen zu einem Thema mit deinem Publikum zu teilen, für das du im regulären Aufbau deiner Website keinen Platz hast. Viele Kund:innen schätzen diesen zusätzlichen Content wodurch sich das Bloggen positiv auf dein Markenimage auswirken kann. Außerdem werden mit jedem Blogbeitrag zusätzliche Seiten unter deiner Domain indexiert, was wiederum dein Ranking in den Suchmaschinen optimieren kann (SEO).


Ein Blogs als optionales Element im Website-Aufbau


11. Online-Formulare


Ebenso optional wie der Blog ist die Integration eines Online-Formulars auf deiner Website. Online-Formulare werden von Website-Betreiber:innen dazu genutzt, Besucher-Daten zu erheben und diese zur Leadgenerierung, zum Versenden von Newslettern, zum Zahlungsempfang und Versand von gekauften Produkten an Kund:innen zu nutzen.


Je nachdem, welche Art von Website du betreibst, kannst du ein Kontaktformular, Anmeldeformular oder ein Zahlungsformular zu deiner Website hinzufügen.



Weitere wichtige Faktoren für den Website-Aufbau



12. Barrierefreiheit


Das Thema Barrierefreiheit spielt im Webdesign eine wichtige Rolle, da es dafür sorgt, dass auch Menschen mit physischen oder psychischen Einschränkungen deine Website-Inhalte konsumieren können. Zu einer barrierefreien Website gehören unter anderem:


  • Visuelle Indikatoren wie blaue Rahmen.

  • Vereinfachte Navigation, zum Beispiel durch Links zur Startseite oder Pfeile, mit denen man an den Anfang einer Seite springen kann.

  • Das Hinzufügen von Alt-Text zu Bildern, damit sie von Screenreadern gelesen werden können.


Wenn du deine Website mit Wix erstellst, hast zu Zugriff auf den Wizard für Barrierefreiheit, der dir Schritt-für-Schritt dabei hilft, deine Website für alle zugänglich zu machen.


Eine Website mit Funktionen des Wix Wizard für Barriereferibeit als Element im Website Aufbau


13. Website-Aufbau von Unterseiten


Neben der Startseite, auch Homepage genannt, besteht das Layout der meisten Websites aus verschiedenen Unterseiten. Eine mögliche Unterseite, nämlich den Blog, haben wir bereits erläutert. Unterseiten können verschiedene Themen haben, die je nach Art der Website variieren. Wenn du zum Beispiel einen Online-Shop erstellen willst, dann gehörten Produktbeschreibungen zu den wichtigsten Unterseiten deiner Website.


Genau wie die Startseite enthalten auch sämtliche Unterseiten deiner Website einen Header, einen Inhaltsbereich, sowie visuelle Elemente und einen Footer. Ausnahmen bilden hierbei Websites, die keine Unterseiten enthalten wie der One-Pager oder Landingpages.



Wir hoffen, dass dir dieser Artikel für den Aufbau deiner Website nützlich ist. Wenn dich das Thema Webdesign noch genauer interessiert, haben wir auf unserem Blog ein paar interessante Artikel für dich bereitgestellt.




Alexandra Eger

Content-Managerin

Erstelle eine Website

Dieser Blog wurde mit Wix Blog erstellt.