Webdesign, Anfänger

Aufbau einer Webseite – 10 Basic Seitentypen erklärt

Jede Webseite ist je nach bestimmten Zweck individuell aufgebaut. In diesem Artikel zeige ich dir 10 typische Seitentypen einer Webseite und Tipps wie du diese effektiv aufbauen kannst.

Drei Tablets zeigen Webseiten mit unterschiedlichen Seitentypen.

01. Startseite

Webseite humble.
humblemotors.com
Webseite starlight.
starlight.money

Jede Webseite besitzt eine Startseite. Diese ist gleichzeitig die strategisch wichtigste Seite einer Webseite. In der Regel landen die meisten Webseite Besucher durch Suchmaschinen oder eine Verlinkung auf der Startseite. Auf der Startseite finden User wichtige Informationen, welchen Zweck die Webseite erfüllt und werden von dort mit Links auf Unterseiten weitergeleitet. 

Die Startseite ist oft die meist besuchte Seite einer Webseite und daher ein wichtiger Startpunkt für die Reise der Besucher. Folgende Elemente findet man auf einer typischen Startseite:

  • Navigation
  • Hero-Image
  • Textbereich mit Slogan oder Claim
  • Weiterführende Links auf Unterseiten
  • Trust-Builder: Logos oder Kundefeedback
  • Login-/Registrierungsbereich
  • Suchfeld

Das Design einer Startseite hängt ganz vom Marketingziel der Webseite ab. Bei einigen Seiten steht der Informationsgehalt im Vordergrund, andere Seiten versuchen durch Animationen oder Videos eher einen Wow-Effekt zu erzeugen. Bei E-Commerce Webseiten stehen natürlich die Produkte im Vordergrund. In jedem Fall sollte das Design das Interesse des Besuchers zu wecken und ihn so zum verweilen anregen. 

Ratschläge zum Aufbau einer Landingpage im Detail findest du in dem Artikel "6 Tipps für den optimalen Aufbau deiner Landingpage".


02. About Seite

Webseite helped.
tryhelped.com
Webseite PointCard.
point.app

Auf der About Seite erhalten Webseite Besucher mehr Informationen zur verantwortlichen Person einem Unternehmen oder zu einem Produkt. Folgende Elemente werden hier oft aufgeführt: 

  • Entstehungsgeschichte
  • Unternehmensphilosophie
  • Informationen zur Person/Gründer
  • Informationen zum Produkt
  • Unternehmens- und Markenwerte

03. Suche mit Ergebnisseite

Webseite spinn.
spinn.com
Webseite stripe.
stripe.com

Viele Webseiten erleichtern ihren Usern die Navigation durch eine Suche. Oft wird mit dem typisch gelernten Lupen-Icon auf ein Suchfeld hingewiesen. Zu einem Suchfeld gehört auch immer eine passende Ergebnisseite, auf der die Suchergebnisse aufgelistet werden. Das Aussehen der Suchergebnisse kann sehr unterschiedlich gestaltet sein. 

Manche Suchergebnisse bestehen nur aus einfachen Textelementen. Andere Suchergebnisse enthalten mehrere Blöcke mit Bildern, Beschreibungstexten und einen Link, auf welcher Seite das Ergebnis zu finden ist. Wichtig beim Layout ist eine hohe Scannbarkeit der Inhalte mit gut lesbaren Überschriften, damit der User schnell das gewünschte Ergebnis findet. Um den Besuchern die Usability zusätzlich zu erleichtern, ist es wichtig, den Suchbegriff in den Ergebnissen visuell zu markieren. 


04. Kontaktseite

Webseite banky.
banky.io
Webseite interstellarlab.
interstellarlab.com

Beinahe jede Webseite besitzt eine Kontaktseite. Die Hauptfunktion ist klar: dem Besucher die Möglichkeit zu geben den Webseitebetreiber oder ein Support-Team zu kontaktieren. Wichtig bei Kontaktseiten, ist hauptsächlich, dass sie schnell laden und übersichtlich gestaltet sind. Viele Webseiten nutzen für die Kontaktaufnahme ein Formular. Weitere Elemente die häufig auf Kontaktseiten zu finden sind: 

  • Klarer Hinweis zur Kontaktmöglichkeit (Formular, E-Mail, Telefon etc.)
  • Öffnungszeiten
  • Verschiedene Ansprechpartner
  • Adresse
  • Wegbeschreibung mit Karte
  • Verlinkung auf soziale Medien
  • Chat-Bot mit künstlicher Intelligenz oder Mitarbeiter

05. Serviceseite

Webseite Aston.
astoncurrencymanagement.com
Webseite Bureau BCM.
bureaubcm.com

Auf diesen Seiten sollen User ein klares Bild von den angebotenen Services erhalten. Unternehmen stellen auf Service Seiten ihre Dienstleistungen und wie sie potentiellen Kunden helfen können. Auf klassischen Produktseiten werden eher die Funktionen und Vorteile eines Produktes aufgelistet, um Kunden zu einem Kauf anzuregen. 

Bei der Gestaltung sollte reiner Fließtext vermieden werden. User halten sich nicht damit auf große Textmengen zu lesen. Stattdessen sollten wichtige Informationen leicht überschaubar und mit wenig Text dargestellt werden. Auflistungen und kurze prägnante Beschreibungen helfen den Besuchern die Texte schnell zu erfassen. Icons, Illustrationen oder passende Bilder verstärken die Visualisierung der Services oder Dienstleistungen.


06. Portfolioseite

Webseite Josh Warner.
joshwarner.design
Webseite structured agency.
structured.agency

Portfolio Seiten sind die beste Möglichkeit um Projekte oder Arbeiten auf einer Webseite zu präsentieren. Ziel dieser Seiten ist eine professionelle und visuelle Präsentation eines Portfolios oder Case Studies. Häufig findet man diese Bereiche auf Webseiten mit folgenden Themen:

  • Fotografie
  • Kunst
  • Mode
  • Design
  • Videografie
  • Handwerk

Auf Portfolio Seiten sollen Besucher ein gutes Bild von den Fähigkeiten oder Services bekommen.  Ziel ist es mögliche Kunden anzusprechen und zu überzeugen. Bilder im Portfolio sollten in einer ausreichenden Auflösung hochgeladen werden, damit sie nicht unscharf wirken. Beschreibungstexte mit bewältigten Problemen, Arbeitsprozesse und Lösungen helfen den Besuchern einen besseren Einblick in das Projekt zu bekommen. 

07. Karriereseite

Webseite Everyday Robots.
everydayrobots.com
Webseite Polsetar.
polestar.com

Viele Unternehmen nutzen ihre Webseite um auf Jobangebote hinzuweisen und so neue Mitarbeiter anzuwerben. Um eine Karriere Seite für potentielle Mitarbeiter wirklich interessant zu gestalten, sollten folgende Dinge beachtet werden. Stellenbeschreibungen wirken interessanter wenn sie prägnant, detailliert und verlockend geschrieben sind. Neben den typischen Informationen zu den Stellenangeboten ist es hilfreich mehr über die Werte des Unternehmens zu erfahren. Bilder die Situationen und die Atmosphäre im Unternehmen wiederspiegeln, lockern das Layout zusätzlich auf. 

Erfolgsgeschichten von anderen Mitarbeitern oder weitere Vorteile der Arbeit bieten einen zusätzlichen Anreiz für mögliche Bewerber. Interessenten wollen ein möglichst umfangreiches Bild vom Unternehmen bekommen. Je besser sich sich informiert fühlen, desto größer ist die Chance, dass sie den Schritt machen sich zu bewerben. 


08. Blogseite

Webseite Pixel Union.
pixelunion.net
Webseite slack design.
slack.design

Heutzutage hat fast jede größere Webseite eine Blog oder Journal Seite. Die Themen der Blog Seiten können vollkommen unterschiedlich sein: 

  • Fachwissen
  • Problemfälle und Lösungansätze
  • Unterhaltung
  • Persönliche Gedanken 
  • Tipps und Ratgeber
  • Aktuelles/Nachrichten

Ein Blog wird hauptsächlich genutzt um weitere Informationen zu einem bestimmten Fachwissen zu teilen. Unternehmen verwenden Blog Seiten um Neuigkeiten oder Erfolge zu teilen. Ebenso ist ein Blog eine gute Möglichkeit immer wieder neue Inhalte auf eine Website zu bringen und sie so interessanter zu machen. Blogartikel sind auch ein guter Weg, um organische Besucher-Traffic auf die Webseite zu leiten und so eine höhere Platzierung in Suchmaschinen zu erreichen. 

Die Gestaltung ist von Blog Seiten ist häufig ähnlich aufgebaut. Auf einer Übersichtsseite sieht der Besucher alle aktuellsten Blogartikel, die meist mit einem Filter sortiert werden können. Artikelseiten selbst bestehen oft aus einer Überschrift, einem Titelbild und dem Artikeltext. 

Tipps zum Aufbau von deinem Blog findest du auch in meinem Artikel "In einfachen Schritten zum erfolgreichen Blog – mit Webflow".


09. Registrierungsseite

Webseite Dropbox.
dropbox.com
Webseite Pianity.
pianity.com

Auf vielen Webseiten können sich Benutzer registrieren und ein personalisiertes Konto erstellen. Dabei ist es wichtig, den Registrierungsprozess so einfach wie möglich zu gestalten. Wenn User zu viele Felder ausfüllen müssen, schreckt sie das eher ab. Daher verlangen die meisten Webseiten bei der Registrierung nur Felder wie Name, E-Mail und Passwort. Außerdem ist es hilfreich, mehrere Möglichkeiten zur Registrierung durch soziale Netzwerke anzubieten. Achte bei der Gestaltung darauf, den Besucher nicht durch unnötige Elemente oder Bilder vom Formular abzulenken.


10. Produktseite

Webseite Couplet Coffee.
coupletcoffee.com
Webseite LifeLabs.
lifelabs.design

Die Produktseite ist wohl die wichtigste Seite von E-Commerce Webseiten. Auf diesen Seiten finden User nähere Informationen zum Produkt wie Detailbilder, Beschreibungstexte, Produktfunktionen und Bewertungen. Auf der Produktseite stellt sich heraus, ob Kunden wirklich ein Produkt in den Warenkorb legen und damit einen Kauf tätigen. Bei der Gestaltung sollte ein klarer CTA-Button, einfache Usability und verständliche Beschreibungstexte im Fokus liegen. 

Portrait von Lukas Rudrof, Webflow Designer aus Nürnberg.

Lukas Rudrof

May 2, 2023

Du hast Fragen oder benötigst Hilfe bei deinem Projekt?