Der Ultimative Ratgeber zum Aufbau Deiner Website

Lerne den Aufbau einer Website von Kopf bis Fuß und weit darüber hinaus kennen.

Am Ende weißt du, worauf es bei einer guten Website wirklich ankommt und wie diese somit zu Deinem Unternehmenserfolg beiträgt

Wie nutzt Du diesen Ratgeber?

Gutes Webdesign ist kein Zufall. Daher haben wir die wichtigsten Informationen hier auf einer Seite gebündelt und geben dir mitunter einen Überblick darüber, welche psychologischen und technischen Faktoren du beachten solltest.

Werden Wörter, wie beispielsweise Begriffserklärung markiert, kannst du auf diese klicken und gelangst direkt zu weiteren, detaillierteren Informationen.

Dieser Ratgeber ist lebendig und wird stetig um neues Wissen erweitert. Teile den Link zu dieser Seite mit Kontakten aus deinem Netzwerk oder Teamkollegen, welche deiner Ansicht nach ebenfalls davon profitieren können.

Füge diese Seite am besten jetzt zu deinen Lesezeichen hinzu.

Nutze die Suchfunktion [Strg] + [F] um bestimmte Begriffe zu finden.

Inhaltsblöcke

Der Körper (Body) einer Website enthält die Informationen und Inhalte, um die es bei deiner Seite geht. Wenn du mit dem Design und der Anordnung variierst, hebst du dich nicht nur von anderes Websites ab, sondern verbesserst Die Nutzer-Erfahrung und folglich auch deine Conversions.

Bringe Abwechslung ins Spiel

Beispiel für die Verwendung von Website Icons
Website Icons Beispiel

Abschnitt in abweichender Farbe

Durch die Verwendung von unterschiedlichen Hintergrundfarben auf deiner Website, richtest du die Aufmerksamkeit auf bestimmte Informationen. Außerdem gestaltest du deine Website somit interessanter und sie lässt sich zudem angenehmer betrachten.

Icon

Visuelle Inhalte werden von uns Menschen deutlich schneller interpretiert als eine bloße Aneinanderreihung von Wörtern. Geht es also darum, wichtige Informationen wie die Vorteile deines Produktes, deiner Dienstleistung oder deines Unternehmens hervorzuheben, bringe diese mithilfe der passenden Icons hervor.

Emojis gehören spätestens seit dem riesen Erfolg von WhatsApp zu unserem Alltag. Kommunizierst du eher umgangssprachlich und persönlich, kannst du diese auch sparsam(!) auf deiner Website einbinden...aber nicht übertreiben... 🎃👺🤖😹🦆

So bindest du Emojis über deine Tastatur ein

Mac: [Ctrl] + [Befehlstaste] + [Leertaste]
Windows: [Windowszeichen] + [.]

Schlagwort

Das ideale Schlagwort unterstreicht das dazugehörige Icon und verstärkt dessen Aussage.

Beispiele:

Glühbirne - kreative Lösungen

Sprechblase - direkte Ansprechpartner

Blatt - umweltbewusst und nachhaltig

Kernaussage

Das Gehirn deines Besuchers konnte nun das Icon zusammen mit dem Schlagwort in kürzester Zeit verarbeiten. Nun solltest du bei deiner Kernaussage festhalten, welcher exakte Vorteil sich daraus für deinen Kunden ergibt.

Beispiel des Aufbaus

Icon: Sprechblase

Schlagwort: direkte Ansprechpartner

Kernaussage: Bei Anliegen berücksichtigen wir deine persönliche Ausgangssituation - jederzeit.

Bild- und Textabschnitte

Hierfür gibt es unzählige Kombinierungsmöglichkeiten. Wir halten die Beschreibung an dieser Stelle deshalb etwas allgemeiner und gehen auf die Kernkomponenten ein.

Beispiel für Text und Bilder auf einer Website
Anordnung von Text und Bild auf einer Website

Fotos oder Illustrationen

Verwende hierfür unbedingt hochwertige Fotos. Stockmaterial ist nicht an allen Stellen ratsam. Die beste Außendarstellung wird erreicht, wenn Du mit professionellen Fotografen, Videografen und/oder Illustratoren zusammenarbeitest. Nur auf diesem Wege ist es möglich, die Einzigartigkeit von dir und deinem Unternehmen abzubilden.

H2-Überschrift

Verwende in jedem Abschnitt Überschriften um das "scannen"deiner Seite durch die Augen des Besucher zu ermöglichen. Wir leben in einer riesigen Informationsflut und daher sollten wichtige Aussagen schnell, leicht und präzise auffindbar sein.

Textblock

Versuche auch hier, die Anzahl der Wörter möglichst gering zu halten. Aber wieso das? Die klassischen Seiten wie [Leistungen], [Produkt], [Team], [Über uns], [Kontakt] und vor allem die [Startseite] sollten lediglich dazu dienen, sich einen Überblick zu verschaffen. Kristallisiere deine Kernbotschaft also zu wenigen Worten heraus und setze diese dann gekonnt in Szene.

Halt Stop! Was ist aber mit jenen Seiten die meist hunderte oder gar tausende Wörter enthalten?

Möchtest du ausführlicher über ein bestimmtes Thema schreiben, so bringe diese Inhalte in Blog-Artikeln, Publikationen, Whitepaper oder anderen, passenden Formaten unter.

Du musst dich stets in die Lage deiner Zielkunden versetzen können. Dazu solltest du am besten das Prinzip der Buyers Journey in dir verinnerlichen.

Kurzgesagt: Biete stets zum passenden Zeitpunkt, die richtigen Inhalte und Formate an.

Handlungsaufforderung

Gibt es zu einer deiner Kernaussagen weitergehende Informationen, so binde einen Button mit einer Verlinkung zu den jeweiligen Inhalten ein.

Wenn dein Produkt oder deine Dienstleistung umfangreicher ist, so gebe deinem Besucher auch hier die Möglichkeit, eine Demo, Testzugang, Produktprobe oder ein gratis Erstgespräch zu beanspruchen.

So könnte deine Handlungsaufforderung lauten

[MEHR ERFAHREN]
[RÜCKRUF VEREINBAREN]
[TESTVERSION STARTEN]

Slider

Slider sind beim Aufbau einer Website heutzutage ein zweischneidiges Schwert. Falsch angewendet bringen sie keinen Nutzen für das Suchmaschinen-Ranking und sorgen außerdem dafür, dass der Besucher sich überfordert fühlt oder ihn gar komplett ignoniert. Stichwort: Bannerblindheit.

Dennoch gibt es sie und wir denken,richtig angewendet sind Slider eine gute Sache.

Beispiel eines Website Slider
Slider einer Website

Inhalt

Anstelle den Slider als Werbetafel zu benutzen, bringe spannende Bilder ein und erzähle dadurch eine Geschichte.

Möglich wäre es auch, die besten Blog-Artikel von Dir hervorzuheben oder euer Team vorzustellen.

Pfeil

Ermögliche deinem Besucher, sich durch deine Slider-Galerie durchzuklicken. Auf mobilen Geräten solltest du für eine gute Bedienbarkeit sicherstellen, dass der Slider auch durch wischen des Bildschirms funktioniert.

Vermeide zu schnelle, automatische Übergänge. Wäge ab, ob Du diese automatische Scroll-Funktion überhaupt erst aktivierst.

Ein Grund der gegen automatische Slider spricht ist, dass wir uns von bewegten Bildern ablenken lassen. Stelle dir vor, Dein Besucher möchte sich etwas durchlesen oder gar einen Call-To-Action verwenden und plötzlich schieben sich ständig neue Bilder durch sein Blickfeld. Deine Bemühungen seine Aufmerksamkeit zu gewinnen, wird dadurch unterbrochen.

Navigation

Auch hier gilt wieder, halte dich kurz. Als Richtwert solltest du den Umfang bei 3-7 Slides halten.

Fazit zu Slidern

Wäge ab, ob und wie du Slider beim Aufbau deiner Website verwendest. Bist du dir unsicher ob diese tatsächlich zum positiven beitragen, sehe lieber davon ab diese einzubinden.

Website-Check

Auswertung durch einen Menschen. Gratis.
Danke! Wir setzen uns schnellstmöglich mit Dir in Verbindung. 🎉
Oops! Something went wrong while submitting the form.
Solch ein Abschnitt hebt die Möglichkeit der Kontaktaufnahme zu dir hervor. Nutze ihn dafür, die direkte Kommunikation zu Deinem Besucher aufzubauen. Idealerweise bietest du ihm bereits im ersten Gespräch einen kostenfreien, aber dennoch enormen Mehrwert an.

Und ja, der Website-Check funktioniert tatsächlich. Probiere ihn doch jetzt aus!🤗

Formulare

Bleiben wir gleich bei den Eingabefeldern. Diese dienen wie oben bereits umschrieben dazu, den direkten Draht zu einem Interessierten Besucher herzustellen.

Schauen wir uns nun den idealen Aufbau an.

Website Formular Beispiel
Aufbau eines Website Formulares

Die Fläche

Dein Kontaktformular kann auf unterschiedliche Art und Weise angezeigt werden. Wir empfehlen dir, es entweder im letzten Abschnitt Deiner Seite(n) zu platzieren, oder es über ein Popup-Fenster darzustellen.

Letzteres Beispiel eignet sich hervorragend, wenn dein Besucher einen Call-To-Action tätig und sich daraufhin das Kontaktformular öffnet.

Überschrift

Kommuniziere hier, worum es sich genau handelt. Geht es um einen Rückruf, die Zusendung einer Produktprobe, eine Anmeldung zum Newsletter oder gar um die Buchung eines Vor-Ort-Termin?

Feld-Label

Beschrifte an dieser Stelle die Eingabefelder. Gehe bei der Reihenfolge so vor, dass du zuerst allgemeine Informationen wie den Namen und den Grund der Kontaktaufnahme aufnimmst.

Stelle die Frage nach der Telefonnummer oder der Mail-Adresse erst zum Schluss.

Frage außerdem nur die allernötigsten Informationen ab. Je länger es dauert das Formular zu beantworten, desto weniger Personen werden es tatsächlich auch bis zum Ende hin ausfüllen und an dich abschicken.

Eingabefeld

Hier tätigt der Besucher seine Eingabe. Trage in dieses Feld jeweils einen Platzhalter ein und animiere Deinen potenziellen neuen Kunden somit zur Eingabe seiner Informationen.

Tipp: Verfügst du über mehrere Formulare auf deiner Website, dann versehe diese mit einem verdeckten Eingabefeld, welches die URL der jeweiligen Seite enthält. So kannst du stets nachvollziehen, von welcher Seite die einzelnen Anfragen kommen.

Einwilligung

Spätestens seit dem inkrafttreten der DSGVO (Datenschutz-Grundverordnung) am 24. Mai 2016, ist dieses Element gesetzlich Pflicht. Betrachte das ganze aber nicht als eine weitere, rechtliche Hürde, sondern schaffe damit Ehrlichkeit und Transparenz gegenüber Deiner Besucher.

Benenne hier also den genauen Grund der Datenerhebung und beschreibe, wofür du diese nutzt. Verlinke außerdem direkt zu deiner Datenschutzerklärung.

Um diesen Vorgang abzurunden, benötigst du noch die aktive Zustimmung (Opt-in) jener Personen, die Ihre Informationen mit dir teilen. Hole dir diese durch entsprechendes Kontrollkästchen, welches nicht vorausgefüllt sein darf ein.

Bestätigung

Sind alle Pflichtfelder deines Formulares ausgefüllt, findet hierüber die Übermittlung der Daten zu dir statt.

Visuelles Element

Binde eine Anfahrtsbeschreibung oder das Bild des Ansprechpartners neben dem Formular ein. Das macht das ganze weniger anonym. Außerdem baust du somit weiter Vertrauen auf und folglich wird sich auch die Anzahl der Einsendungen für dich erhöhen.

Hinweis: Achte darauf, dass deine Seite über ein SSL-Zertifikat verfügt. Erst damit kann sichergestellt werden, dass alle Datenübertragungen verschlüsselt und somit sicher erfolgen.
Tipp: Verbinde dein Formular über eine API direkt mit Deinem CRM-System.

Testimonials

Vertrauen sind das A und O im Internet. Bewertungen und Testimonials helfen dir dabei, deine Reputation zu erhöhen.

Gehe also auf deine bestehenden Kunden zu und bitte diese um ein kurzes Statement.

Testimonial Beispiel
Website Testimonials Beispiel

Bild der Person

Binde hier ein Bild vom Gesicht deines Kunden ein. Für diesen Fall müsst ihr kein extra Fotoshooting abhalten, das aktuelle Profilbild der Social-Media-Kanäle reicht aus. Achtet aber dennoch auf ein gute Auflösung und Beleuchtung.
Wähle den Bildausschnitt außerdem so, dass das Gesicht deutlich zu erkennen ist.

Name, Position

Hier findet der Name der Person sowie ihre Positionsbeschreibung Platz. Mehr muss dort nicht hin.

Zitierung der Aussage

Hier zählt der Inhalt. Füllt diese Aussage entweder mit konkreten Daten, Zahlen und Fakten, welche aus dieser Zusammenarbeit entstanden sind oder baut sie auf einer rein emotionalen Basis auf. Beschränkt euch auch hier auf eine knackige, kurze Nachricht.

Nützlich: Kopiere dir hier die korrekten Anführungszeichen aus den Klammern heraus.

[„] + [“]

Slider-Navigation

Die Nutzung von Slidern haben wir bereits oben beschrieben. Hier siehst du nun einen weiteren, praktischen Anwendungsfall welcher es dir ermöglicht, mehrere Testimonials nebeneinander anzuzeigen.

Collection List - Auflistung dynamischer Seiten

Dynamische Seiten werden vor allem für Blogbeiträge oder Produktseiten in einem Online-Shop angewendet. Sehr einfach ausgedrückt, wird einmalig ein Layout für den Aufbau einer Seite festgelegt und anschließend werden alle Elemente einem besonderen Feld einer Datenbank zugeordnet.

Auch bekannt als Content-Management-System (CMS)

Möchte man nun einen neuen Artikel in den Shop stellen, so legt man über ein Eingabeformular oder einer Excel-Tabelle alle Informationen wie

  • Name
  • Preis
  • Artikelbeschreibung
  • Produktfoto(s)
  • etc.

fest. Diese werden anschließend über eine Schnittstelle auf das zugeordnete Layout angewendet. Der Vorteil liegt darin, dass man einheitlich gestaltete Seiten in kürzester Zeit erstellen kann, ohne jedes mal von vorne mit dem Design und dem Aufbau zu beginnen.

Sehen wir uns nun an, wie Du die Verlinkung zu diesen Unterseiten am besten darstellst.

Beispiel CMS Kategorie
Verlinkung zu CMS Seiten

Vorschaubild

Bleiben wir beim Beispiel an einem Online-Shop. Hier fügst Du ein Vorschaubild deines Artikels ein.

Das Vorschaubild sollte sich ebenfalls direkt und gut sichtbar auf der Produktseite befinden um den Besucher nicht zu irritieren.

Tipp: Passe die Datei der Vorschaubilder an. Meistens werden diese nur verkleinert dargestellt und somit solltest du hier eine niedrige Auflösung um die Ladezeiten zu verbessern.

Name

Nenne entweder den Namen des Produktes oder das Thema, mit welchem sich die entsprechende Seite beschäftigt.

Beschreibung

Im Falle eines Produktes kann hier der Preis stehen. Verlinkst du einem Blog-Artikel, so beschreibe ihn in einem Satz interessant genug, damit du die Neugierde deiner Leser weckst.

Mehr-Erfahren-Button

Beim Klick auf diesen Button gelangt man zu der gewünschten Seite. Ergänzend dazu, solltest du auch die Überschrift oder das Vorschaubild klickbar machen und somit ebenfalls eine Verlinkung zu der entsprechenden Seite ermöglichen.

Preistabellen und Paketübersichten

Wer mag sie nicht, die saubere, übersichtliche Anordnung der Leistungsmerkmale und Preise.

Diese Auflistung ist mittlerweile für einige Produkte oder Dienstleistungen unerlässlich.

Beispiel Preistabelle auf Website
Prreistabelle Website Beispiel

Abbildung

Setze die Unterschiedlichen Pakete durch entsprechende Abbildungen voneinander in Relation.

Auflistung der Leistungen

Beschreibe Stichpunktartig die Leistungen, welche im jeweiligen Paket enthalten sind.

Paketname

Gebe den Paketen angenehm klingende Namen.


Beispiele

[Free] - [Standard] - [Business]
[Gold] - [Platin] - [Diamant]
[Starter] - [Basic] - [Basic Plus]

Preis

Richtig, hier findet dein Preis Platz. Stelle die Summe nicht zu groß dar, indem du eine kleine Schriftgröße verwendest. Markiere den Betrag mit einem Sternchen und füge den Hinweis über die Mehrwertsteuer unter den Paketen ein.

Dieser könnte beispielsweise lauten

"*Alle Preise verstehen sich zzgl. xx% Mehrwertsteuer"

"*Alle Preise inkl. xx% Mehrwertsteuer"

Bestell-Button

Hier möchten wir den Bestellprozess initiieren. In der Regel findet hier noch kein verbindlicher Vertragsabschluss statt. Beschrifte den Button daher also nicht mit "Jetzt kaufen", sondern verwende stattdessen etwas unverbindlicheres wie "Auswählen".

Sei immer transparent. Gibt es tatsächlich kein zurück mehr, so beschrifte den entsprechenden Button ganz klar mit:

[Jetzt kaufen]
[Kostenpflichtig bestellen]
[Verbindlich buchen]

Topseller

Dir ist sicherlich auch schon aufgefallen, dass bei diesen Übersichten immer ein bestimmtes Paket hervorgehoben ist -das ist natürlich kein Zufall. Vielmehr steckt hier eine ganze Klaviatur an Verkaufspsychologischen Mechanismen dahinter. [Ein ausführlicher Beitrag hierzu folgt]

Zusammengefasst merke dir:

Hebe das mittlere Paket grafisch hervor und versehe es mit Worten wie "Topseller" oder "Beliebt". Das erleichtert den Entscheidungsprozess und führt folglich dazu, dass dieses Paket tatsächlich am meisten beansprucht wird.

Wie optimiert man eine Website?

Eine gute Website wird niemals fertig sein...und das soll sie auch nicht. Sehe sie als dein lebendiges Herzstück in der digitalen Welt an. Auch eine gute Position in den Suchergebnissen wird enorm hilfreich für dich sein. Die abschließenden Punkte sollen dir einen Einblick darüber geben, worauf es bei deiner Website ankommt, wenn diese Erfolgreich werden und bleiben soll.

Die Inhalte

Erstelle stets hochwertige, aktuelle Inhalte, die perfekt auf deine Zielgruppe zugeschnitten sind. Außerdem werden dich Suchmaschinen erst dann auf den ersten Platz in den Suchergebnissen bringen, wenn deine Website wirklich relevant ist.

Die ideale Struktur

Der richtige Aufbau einer Website ist entscheidend. Nur wenn alle Elemente an den richtigen Stellen positioniert sind, können sie ihre Funktion am besten erfüllen. Die Grundlagen wie man einzelne Elemente gestalten sollte, hast du in diesem Ratgeber erhalten. Die richtige Reihenfolge und Anordnung dieser, hängt stark von deinen individuellen Zielen ab. Hole dir also ständig Feedback ab und beobachte, wie die Besucher mit deiner Website interagieren.

Das passende Hosting

Es macht einen riesen Unterschied aus, ob du für das Hosting deiner Website 1€; 15€ oder 100€ monatlich bezahlst.

Billigangebote führen häufig dazu, dass sich deine Website einen einzigen Server mit dutzenden weiteren, fremden Websites teilt. Das ist nicht nur schlecht für die Ladezeiten und einer Gewährleistung für die Erreichbarkeit, sondern spiegelt sich auch durch mögliche Abstrafungen im Suchmaschinen-Ranking wieder.

Der Code

Eine fehlerhaft programmierte Website und/oder die Verwendung von (veralteten) Plugins, können gewisse Schwachstellen in puncto Sicherheit nach sich ziehen. Ein weiterer unerwünschter Nebeneffekt sind sehr häufig auch lange Ladezeiten, an denen vor allem Website-Baukästen zu knabbern haben.

Kommen wir auch hier wieder auf die Positionierung in den Suchergebnissen zu sprechen. Die Indexierung von Websites erfolgt durch sogenannte Crawler. Das sind Programme, welche automatisch und unermüdlich das Internet nach Inhalten absuchen.

Damit diese alle relevanten Informationen auslesen können, gilt es einige Regeln und Befehle zu beachten, damit diese Ihre Arbeit sauber und ordentlich erledigen können. Geschieht das nicht, dann kommt es auch hier zur Abstrafung seitens Google und Co..

Website-Check

Auswertung durch einen Menschen. Gratis.
Danke! Wir setzen uns schnellstmöglich mit Dir in Verbindung. 🎉
Oops! Something went wrong while submitting the form.