In 7 Schritten zu deiner erfolgreichen Website

01.04.2021 | Webdesign

Eine Website zu erstellen, ist ähnlich wie ein Hausbau.

Du kannst die Wände irgendwohin setzen.

Ist dann halt blöd, wenn die Wand zwischen Bad und Schlafzimmer fehlt oder der Architekt die Öffnung für die Haustür vergisst.

Eine Website zu bauen, ist ganz ähnlich.

Eine gute Planung vorab bringt dich am Ende schneller und erfolgreicher ans Ziel.

Ich zeige dir die einzelnen Schritte, die du gehen solltest, um eine erfolgreiche Website zu erstellen.


Schritt 1: Überlege dir, wer deine Zielgruppe ist.

Klammere dich dabei nicht an irgendwelchen demografischen Daten fest. Überlege vielmehr, welches Problem deine Zielgruppe hat.

Weitere Fragen, die dir helfen, deine Zielgruppe zu definieren:

  • Welches Ziel will sie erreichen?
  • Warum hat sie ihr Problem noch nicht gelöst?
  • Welche Schritte hat sie schon unternommen, um das Problem zu lösen?
  • Was hält sie davon ab, ihr Ziel zu erreichen?
  • Welche Eigenschaften hat deine Zielgruppe, damit du wirklich gerne mit ihr zusammenarbeitest?
  • Welche Werte hat deine Zielgruppe (und sind das auch deine Werte)?

Nur, wenn du deine Zielgruppe genau kennst, kannst du sie auch mit deinen Texten ansprechen.

Eine gängige Methode, um eine Zielgruppe zu definieren, ist die Erstellung von Personas. Du überlegst dir eine konkrete Person mit Namen, Alter, Hobbies usw. die für deine Zielgruppe steht.

Das ist ein guter Anfang – du solltest aber nicht bei diesem Schritt stehen bleiben. Denn die Persona spiegelt sonst nur deine Vorstellungen von der Zielgruppe wider. Vielleicht tickt sie ganz anders als du dachtest.

Darum empfehle ich dir, deine Zielgruppe zu befragen. So kannst du feststellen, ob die Probleme, die du bei ihnen vermutest, wirklich zutreffen oder der Schuh ganz woanders drückt. Führe dazu Umfragen und Interviews durch.

So erfährst du auch, wie deine Zielgruppe spricht. Dieses Wissen ist Gold wert, denn du kannst diese Formulierungen später für deine Texte verwenden. Die Texte sprechen deine Zielgruppe so viel besser an, als wenn du dir die Formulierungen aus den Fingern saugst.

Vielleicht merkst du bei den Befragungen, dass die vermutete Zielgruppe gar nicht deine Zielgruppe ist. Das erspart dir vorab viele Nerven. Stell dir vor, du hättest deine Zielgruppe nicht befragt und Monate damit verbracht, ein Angebot zu erstellen, dass hinterher niemand will.

Achtung! Falls du jetzt denkst: „Ich will alle ansprechen – sonst verliere ich Kunden“. ALLE ist keine Zielgruppe. Wenn du alle ansprichst, sprichst du niemanden an.

Je enger du deine Zielgruppe definierst, desto leichter gelingt die Ansprache und desto mehr wird sich deine Zielgruppe in deinen Worten wiederfinden.


Schritt 2: Überlege dir dein Ziel.

Überlege dir, was du mit deiner Website erreichen willst.  Vielleicht ist dir das schon bewusst. Aber viele vergessen diesen Schritt tatsächlich. Eine solche Ziellosigkeit spiegelt sich auf deiner Website wider.

Du willst, dass sich deine Besucher*innen in deinen Newsletter eintragen?

Dann mache es ihnen leicht und gib ihnen dazu auf jeder Seite die Möglichkeit. Das ist nicht aufdringlich, sondern zielführend (bitte ohne Blinke-Blinke und ständige Pop-ups – damit vergraulst du tatsächlich deine Besucher*innen).

Grundsätzlich sollte deine gesamte Website EIN Hauptziel haben. Willst du etwas verkaufen? Sollen die Besucher*innen ein Erstgespräch mit dir vereinbaren? Die einzelnen Unterseiten sollten dieses Ziel unterstützen.

Ziel meiner Website ist es, meine Besucher*innen dazu zu bringen, ein Erstgespräch bei mir zu buchen. Mein Blog dient auf den ersten Blick der Information und Weiterbildung der Leser*innen. Das dahinterliegende Ziel ist es, Vertrauen bei meinen Leser*innen zu schaffen und ihnen als Expertin im Kopf zu bleiben. Damit sie irgendwann einmal ein Erstgespräch bei mir buchen oder mich jemand anderem weiterempfehlen.

Das gebe ich offen zu. Und das ist auch der Sinn der meisten Unternehmens-Blogs.

Was ist dein Ziel?

Erst, wenn du eine Antwort auf diese Frage hast, solltest du zum nächsten Schritt übergehen.


Schritt 3: Überlege dir eine Struktur für die Website

Um eine Struktur für die Website zu erstellen, beschäftige dich mit diesen Fragen:

  • Welche Informationen braucht deine Zielgruppe und wo willst du diese auf deiner Website platzieren?
  • Welche Unterseiten soll deine Website haben?
  • Falls du einen Blog planst: Welche Kategorien soll es geben?
  • Welche Menü-Punkte brauchst du? Wie sollen diese hierarchisch geordnet sein? Tipp: Verwende nicht zu viele Hauptmenü-Punkte. Das ist schnell unübersichtlich. Du kannst stattdessen ein Untermenü als Drop-Down-Menü erstellen.
  • Welche Texte und Bilder sollen an welcher Stelle stehen?
  • Wo sollen die Buttons platziert werden?
  • Brauchst du eine Sidebar? Welche Inhalte soll diese enthalten?


Visualisiere diesen Schritt. Das hilft dir später beim Design der Website. Dazu reicht eine Skizze per Hand.

Etwa so:

Skizze Website
Erstelle eine Skizze für die Struktur deiner Website

Du siehst, es muss nicht perfekt aussehen. Verwende beim Skizzieren einfache Symbole. Ein Rechteck mit einem X drin steht bspw. für ein Bild. Fließtext kennzeichnest du mit Wellenlinien.
Übrigens: Profis arbeiten auch mit solchen Skizzen – wir nennen das Wireframe.

Denke immer daran: Inhalt und Struktur deiner Website sind enorm wichtig. Nur wenn deine Besucher schnell finden, was sie suchen, kannst du sie in Kund*innen verwandeln.

Viele lassen diesen Schritt aus und beginnen sofort mit dem Design. Macht auch mehr Spaß, kann ich verstehen. Aber der Fokus liegt dann eben beim Design.

Lieber blau? Oder doch grün?

Der Inhalt bleibt auf der Strecke. Aber eine inhaltliche schwache Website wird auch mit einem wunderschönen Design keine Kunden ansprechen.

Tipp: Verlinke die Unterseiten auch im Inhalt miteinander. So finden deine Website-Besucher*innen schneller, was sie suchen. Damit erhöhst du die Nutzerfreundlichkeit deiner Website und verringerst die Absprungrate. Die Wahrscheinlichkeit, dass aus deinen Besuchern Kunden werden, erhöht sich.


Schritt 4: Erstelle fehlende Inhalte

Überlege, welche Bilder und Texte dir noch fehlen.  

Leitfaden für Texte

Damit deine Inhalte auf der ganzen Website einheitlich sind, kannst du einen Leitfaden erstellen. Das hilft vor allem dann, wenn mehrere Personen Inhalte produzieren.

Aber auch, wenn du solo-selbstständig bist, ist es hilfreich, wenn du diese Punkte festlegst. Das verhilft dir zu einer einheitlichen Sprache.

Der Leitfaden kann z.B. folgende Kriterien definieren:

  • Werden Website-Besucher*innen gesiezt oder geduzt?
  • Wie ist die Tonalität des Textes? Gibt es bestimmte Begriffe, die verwendet oder vermieden werden sollen?
  • Welche Länge sollten Blogbeiträge haben? Wie viele Zwischenüberschriften sollte es geben?

Die Texte sollten stehen, bevor du mit dem Design beginnst. Denn wie willst du etwas designen, von dem du nicht weißt, wie lang es ist und welche Aussage es hat?

Wähle authentische Bilder

Wahrscheinlich fehlen dir noch Bilder. Verfalle nicht dem Fehler, einfach auf Stockfotos zurückzugreifen. Sie sind nicht auf dein Unternehmen zugeschnitten, ohne Aussage und verwechselbar.

Damit wirkt deine Website beliebig und hinterlässt keinen bleibenden Eindruck bei deinen Besucher*innen.

Willst du das?

Wohl kaum. Also mach dir die Mühe, eigene Fotos und Grafiken zu erstellen bzw. erstellen zu lassen.

Falls du noch mehr über das Thema lesen möchtest: Ich habe einen Blogartikel über Stockbilder und die Auswahl guter Fotos geschrieben.

Es gibt viele Fotograf*innen, die sich auf Personal Branding spezialisiert haben. Sie kennen sich damit aus, deine (Personen-)Marke auf Fotos festzuhalten und ein einheitliches Gesamtbild mit ihren Fotos zu kreieren. Es steigert auch den Wiedererkennungseffekt, wenn du solche Fotos auf Social Media verwendest.

Solltest du keinen Personal Branding Fotografen kennen, empfehle ich dir gerne jemanden aus meinem Netzwerk.

Wenn du das Geld für einen Fotografen nicht ausgeben kannst, hast du vielleicht Freund*innen, die passable Fotos machen.

Oder du lernst es selbst. Schau dir ein paar YouTube-Videos an, um zu lernen, wie Lichtsetzung funktioniert. Mach dich mit Fotobearbeitung vertraut. Dafür gibt es sogar kostenlose Apps fürs Handy. Schon bald gelingen dir immer bessere Fotos.


Schritt 5: Entwickle das Design


Die Struktur und der Entwurf aus Schritt 3 sind das Grundgerüst für das Design.

Definiere deine Farben

Hast du bereits Unternehmensfarben? Dann sollten sich diese auch auf der Website wiederfinden.

Wenn du noch keine hast, definierst du sie in diesem Schritt. Sie machen dich und dein Unternehmen wiedererkennbar. Darum solltest du sie nicht nur auf deiner Website verwenden, sondern auch auf deinem Briefpapier, auf Social Media und auf deiner Visitenkarte…

Analysiere als erstes deine Wettbewerber*innen. Gibt es Farben, die in deiner Branche üblich sind? Im IT-Bereich ist dies bspw. die Farbe Blau. Wenn du in diesem Bereich unterwegs bist, wäre Blau also eine gute Wahl.

Aber du kannst dich auch bewusst gegen Blau entscheiden, weil du dich von der Konkurrenz abheben willst. Tue dies wohlüberlegt. Denn die typische Farbwahl in einer Branche hat sich durchgesetzt, weil sie bewährt und erfolgreich ist.

Wähle deine Farben so, dass sie deine Werte widerspiegeln und ansprechend für die Zielgruppe sind. Bist du im IT-Bereich unterwegs und willst Frauen ansprechen, könntest du Blau und Rosa kombinieren.

Es hilft auch, wenn du dir überlegst, welches Bauchgefühl deine Website hervorrufen soll. Lies dich dazu am besten in die Farbpsychologie ein. Sehr hilfreich ist das Quizz von Grasshopper (allerdings nur auf Englisch).

Hast du bereits Kontakt zu deiner Zielgruppe? Dann frage sie, ob sie deine Farbkombination mag.  

Achte bei der Farbauswahl auf die Kontraste. Hellgelbe Schrift auf weißem Hintergrund ist nicht gut lesbar. Gut lesbar ist dagegen Dunkelblau auf Weiß. Wähle eine Schriftfarbe, die einen hohen Kontrast zu Weiß bildet. Ich habe einen Blogartikel darüber geschrieben, was du beachten solltest, um deine Schrift gut lesbar zu machen.

Definiere deine Schriftarten

Du solltest nur wenige Schriftarten auf deiner Website verwenden. In der Regel genügen zwei und höchstens drei. Weniger ist mehr. Zu viele Schriftarten wirken chaotisch und laienhaft.

Am leichtesten lassen sich serifenlose und serifenhafte Schriftarten miteinander kombinieren. Um gut miteinander harmonisierende Schriftarten zu finden, kannst du z.B. Google Fonts nutzen. Wähle dort eine Schriftart aus, die dir gefällt. Klicke auf der Detailseite auf den Reiter „Pairings“. Google Fonts zeigt dir nun passende Schriftarten an.

Serifenhafte Schriftarten lassen sich genauso gut am Bildschirm lesen wie serifenlose. Es galt lange als No-Go eine serifenhafte Schrift für den Fließtext zu verwenden. Dieser Mythos ist inzwischen aber widerlegt.

Wähle bevorzugt solche Schriftarten, die sich leicht lesen lassen. Schriftarten der Kategorie Handwriting sollten nur für kurze Überschriften verwendet werden, nicht aber für Fließtext. 

Hole dir Inspiration auf anderen Websites

Schau dir andere Websites an und hole dir dort Ideen (nein, du sollst die Websites nicht kopieren).

Besonders hilfreich sind Konkurrenz-Websites, die Google ganz oben listet. Denn wenn Google sie dort oben anzeigt, machen sie wohl irgendetwas richtig. ? Lerne davon!

Gibt es Elemente, die auf allen diesen Websites zu finden sind? Welche Gestaltungselemente gefallen dir dort? Welche nicht?

Sei spezifisch.

  • Welche Buttons gefallen dir? Eckige oder abgerundete? Welche Effekte findest du gut, wenn die Maus darüberfährt?
  • Welches Menü-Design findest du gut?
  • Gibt es Verzierungen für deine Texte, die du gerne auf deiner Website hättest?

Mach Notizen und Screenshots. Du kannst deine Ideen auch auf einer Pinnwand auf Pinterest sammeln.

Von deiner Sammlung kannst du dich zu deinem eigenen Design inspirieren lassen. Du musst nur aufpassen, dass die einzelnen Elemente zusammenpassen.

Achtung: Vermeide es, andere Websites 1:1 nachzubauen. Auch Webdesigns sind kreative Werke und können dem Urheberrecht unterliegen.


Schritt 6: Setze dein Design um

Arbeitest du mit einem PageBuider wie Divi oder Elementor? Dann suche dir ein Template aus, dass mit deinen Vorstellungen am besten harmoniert. Aber verfalle nicht der Struktur des Templates. Halte dich an deine Struktur und baue das Template passend um.

Gleiches gilt, wenn du lieber mit einem vorgefertigten Theme arbeiten willst. Suche dir ein passendes Theme aus, aber verfalle nicht der vorgegebenen Struktur aus den Demo-Ansichten.

Solltest du dich mit einem Grafikprogramm auskennen, empfehle ich dir dein Design zuerst in deinem Lieblingsprogramm (ich liebe Adobe XD) zu entwerfen. Änderungen lassen sich dort schneller vornehmen, als wenn du das Design direkt in WordPress anlegst. Du arbeitest auf diese Weise freier. Später setzt du es dann z.B. mit Divi um.

Solltest du Schwierigkeiten haben, unterstütze ich dich gerne.


Schritt 7: Teste deine Website

Deine Website ist fertig.

Aber Stopp!

Bevor du sie jetzt überall promotest, teste sie ausgiebig. Funktionieren alle Buttons und Links? Das Menü? Versuche mit den Augen deiner Besucher*innen zu gucken. Sind alle Informationen leicht zu finden?

Idealerweise kennst du ein paar Personen, die zu deiner Zielgruppe gehören und die deine Website testen. Gib ihnen den Auftrag, eine bestimmte Information auf der Website zu finden. Schau ihnen dabei über die Schulter.

Haben sie irgendwo Schwierigkeiten? Dann solltest du daran arbeiten. 

Falls du keine Testpersonen hast, die zu deiner Zielgruppe gehören, kannst du auch Freund*innen fragen. Aber sei vorsichtig, denn sie gehören nicht zu deiner Zielgruppe und fühlen sich von deiner Website wahrscheinlich nicht angesprochen. Lass dich davon nicht in die Irre leiten. Die Funktionen deiner Website können sie trotzdem testen.

Überspring diesen Schritt nicht, weil du denkst, dass das schon passt.

Ich habe schon viele selbsterstellte Websites gesehen, auf denen die Buttons nicht funktionierten. Die Betreiber*innen hatten das nicht bemerkt. Und wunderten sich dann, dass über die Website keine Anfragen kamen…


Ich wünsche dir viel Erfolg!

Solltest du Fragen oder Schwierigkeiten bei der Umsetzung haben, unterstütze ich dich gern.

– Über mich –

Sylvia Klatt Autor

Hi, ich bin Sylvia Klatt, Webdesignerin und WordPress-Expertin. Hier blogge ich über WordPress und Divi.

Erfahre mehr über mich…

– Divi-Workshop –

Lerne zeitsparende Divi-Techniken in unserem Kurz-Workshop!

-> Klick hier für mehr Infos zum Workshop

– Meine Empfehlung* –

Affiliate Link Raidboxes

Ich empfehle Raidboxes aus voller Überzeugung: schnelle Ladezeiten, klimapositiv, super Support, auf WordPress spezialisert.
*Dies ist ein Affliate Link, d.h. ich bekomme eine Provision, wenn du auf diesen Link klickst und Raidboxes buchst. Dir entstehen dadurch keine zusätzlichen Kosten.

Diese Blogbeiträge könnten dich auch interessieren:

Stockfotos – ja oder nein? Über die Vorteile und Nachteile.

Stockfotos – ja oder nein? Über die Vorteile und Nachteile.

Der Text für die Website ist fertig, aber die Fotos fehlen - und du fragst dich, welche du am besten nehmen solltest? Lieber das hübsche Stockfoto mit dem Schreibtisch, den Blumen und dem Mac-Book drauf? Oder das mit den lachenden Menschen? So wie du stellen sich...