Website-Konzept: In 5 Schritten zur Website, die begeistert

Das Website-Konzept ist das Fundament deiner Website. Trotzdem wird dieser Schritt oft übersprungen. Einerseits, weil es verlockend ist einfach loszulegen und anderseits, weil gar nicht klar ist, was zu tun ist.

Warum du ein Website-Konzept für deine Homepage brauchst

Ein Website-Konzept oder auch Webseiten-Konzept zu erstellen, bedeutet im Prinzip nichts anderes, als geplant an deine Homepage heranzugehen.

Stell dir vor, du willst ein Haus bauen (lassen). Da würdest du auch nicht einfach loslegen. Und das nicht nur, weil du eine Baueingabe bei der Gemeinde machen musst, sondern weil du ein Ziel vor Augen hast.

Ein Konzept ist die Grundlage für eine erfolgreiche Website!

Du brauchst keine speziellen Tools, um das Website-Konzept zu erstellen

Es spielt keine Rolle, ob du dein Homepage-Konzept ganz «old school» mit Papier und Stift erstellst, mit einem Mindmap-Tool oder mit Notizzetteln.

Wichtig ist, dass du dir Gedanken zu diesen Schritten machst:

Schritt 1 des Website-Konzepts – Ziele festlegen
Was willst du mit deiner Website erreichen?

Mehr Kunden gewinnen.

Das ist sicher die häufigste Antwort auf diese Frage. Allerdings ist das deutlich zu kurz gegriffen. Es gibt auch andere Ziele, die du mit deiner Website verfolgen kannst und solltest.

Es gibt strategische und operative Ziele. Keine Angst, das ist nicht so kompliziert, wie es sich hier vielleicht anhört. Wir sehen uns die beiden verschiedenen Ziele nun zusammen an.

Wichtige strategische Ziele einer Website können sein:

• Deine Visionen und Werte zu zeigen.
• Deine Expertise zeigen durch Kundenstimmen und allenfalls Referenzprojekte.
• Zu zeigen, wie eine Zusammenarbeit ablaufen kann.
• Und noch viele mehr.

Du siehst, das sind alles essenzielle Punkte.

Wichtige operative Ziele können sein:

• Deine Produkte und/oder Dienstleistungen zu verkaufen.
• Dass sich neue Abonnenten in deinen Newsletter eintragen.
• Interessenten für Erstgespräche zu gewinnen.
• Und noch viele mehr, je nach Business

Eine Website kann mehr als ein Ziel verfolgen und tut das üblicherweise auch. Denn jede einzelne Webseite kann ein eigenes Ziel haben.

Wenn du wieder einmal durchs Netz surfst, achte einfach einmal auf die Buttons und deren Aufschrift. Diese sind oft mit «Ja, ich will den Newsletter abonnieren» und ähnlichen Handlungsaufforderungen beschriftet.

Daran kannst du gut das Ziel dieser Webseite erkennen.

Schritt 2 des Website-Konzepts – Deine Lieblingskunden und du
Kennst du deine Werte und deine Lieblingskunden?

Damit deine Website erfolgreich wird, muss sie von der ersten Sekunde an das richtige Look&Feel transportieren. Also das Gefühl, das sofort entsteht, wenn du eine Website öffnest.

Viele Websites sind einfach so lala. Aber andere Homepages vermitteln dir im ersten Augenblick das Gefühl da richtig zu sein. Bei anderen spürst du sofort, das passt nicht.

Deine Website soll auf keinen Fall in die Kategorie 1 gehören. Du willst deinen Lieblingskunden sofort vermitteln, dass sie bei dir richtig sind. Aber nur denen.

Das heisst, du wirst nicht alle Besucher deiner Website ansprechen, dafür die richtigen.

Buyer Persona? Nein, ich mag meine Lieblingskunden

Kennst du den Begriff «Buyer Persona»? Da geht es darum, einen typischen Menschen (Vertreter) deiner Zielgruppe zu beschreiben.

Ganz ehrlich: Das finde ich fürchterlich. Natürlich ist es unfassbar wichtig, dass du weisst, mit wem du arbeiten willst. Aber das geht auch menschlicher.
Ausserdem finde ich die übliche «Buyer Persona» nicht nützlich. Denn bei einer Buyer Persona notierst du normalerweise:

• Geschlecht, Alter, Familienstand, Wohnort, Einkommen
• Job, Position, Karriere
• Interessen und Hobby

Das nützt dir aber meiner Meinung nach herzlich wenig.

Deshalb machen wir das etwas anders. Wir schauen uns deine Lieblingskundin ganz genau an.

• Welche Werte sind ihr wichtig?
• Was treibt sie um?
• Auf welchen Plattformen (Social Media, Foren etc.) ist sie unterwegs?
• Was ist ihr in der Zusammenarbeit wichtig?

So erfährst du etwas über den Menschen hinter der Buyer Persona.

Auch deine Werte sollen auf der Website gezeigt werden

Natürlich geht es nicht nur um deine Lieblingskundin. Es geht auch um deine Werte. Meistens gibt es aber eine relativ grosse Schnittmenge. Gerade bei uns Einzelunternehmerinnen.

Sobald du also deine Lieblingskundin vor Augen hast, beschäftige dich unbedingt mit deinen Werten und notiere dir die auch.

Schreibe dir auch auf, was für dich in der Zusammenarbeit wichtig ist. Magst du es zum Beispiel überhaupt nicht per Telefon kontaktiert zu werden, dann schreibe das auf.

Mehr darüber, wie du eine authentische Website erstellst, erfährst du in diesem Blogartikel.

Schritt 3 des Website-Konzepts – Die visuelle Gestaltung deiner Website
Designkonzept entwickeln

Du hast es oben schon gelesen. Es beginnt alles mit dem ersten Eindruck, diesem Look&Feel.

Damit das passt müssen:

• das Layout
• die Farben
• die Schriften und
• die Bilder

eine Einheit bilden. Damit das gelingt, brauchst du das Website-Konzept.

So findest du die visuelle Metapher für deine Homepage

Deine Website dreht sich um deine Angebote. Das können Dienstleistungen und/oder Produkte sein. Auf jeden Fall geht es um ein bestimmtes Thema.

Nehmen wir an, du bist Hundetrainerin. In Schritt 2 hast du dir genau überlegt, was für dich und deine Lieblingskunden wichtig ist.

Du weisst nun, dass du als Hundetrainerin speziell mit kleinen Hunden arbeiten willst. Das ist dein Thema.

Jetzt geht es darum, das auf der ganzen Website fühlbar zu machen. Das geht einerseits direkt, indem du schreibst, dass du auf kleine Hunde spezialisiert bist. Anderseits aber auch subtiler. Durch entsprechende Bilder.

Brainstorming für das Webdesign

Notiere dir alles, was dir zu deinem Thema in den Sinn kommt. Wirklich alles.

Schlechte Ideen kannst du später aussortieren.

Hier siehst du anhand verschiedener Themen, wie die visuelle Metapher ein Thema unterstreicht:

Die Farben für deine Homepage

Mit Farben kannst du den Besuchern helfen, sich auf deiner Website zurechtzufinden. Das gelingt am besten mit einem klaren Farbkonzept.

Du legst da die Farben fest für:

• Überschriften
• Fliesstext und Links
• Button und Icons
• Hintergründe
• Hover-Farben (die werden beispielsweise angezeigt, wenn du mit der Maus über einen Button fährst)

Die Farben, die du verwendest, sollten sich an deinen Werten und denen deiner Lieblingskunden orientieren. Denn jede Farbe hat eine Bedeutung und beeinflusst unsere Gefühle unmittelbar.

Die Schriften/Typografie

Auch die Schriften helfen, die Botschaft deiner Website zu unterstützen. Es gibt unendlich viele verschiedene Schriftfamilien und viele kannst du kostenlos verwenden.

Wenn du die Auswahl triffst, beschränke dich auf maximal 3 verschiedene Schriftfamilien. Denn sonst wird das Design schnell sehr unruhig.

Wenn du dir die Schriften betrachtest, spürst du sicher einen grossen Unterschied:

Bei Google Fonts findest du eine riesige Auswahl. Lass die einzelnen Schriften auf dich wirken und wähle dann die passende(n) aus.

Viele weitere Tipps zur Schriftwahl findest du in meinem Artikel: Kostenlose Schriften von Google.

Bildsprache gezielt einsetzen

Bilder sind auf deiner Website ebenfalls ein sehr wichtiges Element. Denn über tausende von Jahren waren die Augen eines der wichtigsten Überlebenskriterien für uns. Deshalb ist die Hälfte unseres Gehirns darauf ausgelegt, visuelle Reize zu verarbeiten.

Deswegen erfassen wir die Bildsprache blitzschnell. Danach entscheiden wir, ob wir uns mit dem Text überhaupt befassen. Von alldem merken wir kaum etwas, denn es passiert in unserem Unterbewusstsein.

Bleiben wir beim Beispiel mit der Hundetrainerin für kleine Hunde. Auf ihrer Website sollen Bilder mit kleinen Hunden zu sehen sein. Logisch.

Aber es gibt auch noch weitere Punkte, die wichtig sind. Auch die Helligkeit/Licht oder die Art der Aufnahme beeinflusst die Bildsprache.

Schau dir auch diese beiden Fotos an. Spürst du den Unterschied?

Sehr nützlich ist es, ein Moodboard zu erstellen. Es hilft dir, das Look&Feel festzuhalten.

Ohne Fotos von dir geht es nicht

Natürlich muss auch mindestens ein Foto von dir auf die Website. Besser mehrere. Ideal sind Fotos, auf denen du bei der Arbeit zu sehen bist.

Schritt 4 des Website-Konzepts – Struktur erstellen
Jetzt erstellst du die Informations-Architektur

Jetzt geht es darum, deine Inhalte sinnvoll zu strukturieren. Deine Website soll klar und übersichtlich werden, damit sich die Besucher einfach zurechtfinden. Denn Besucher sind ungeduldig.

Sie haben keine Lust nach den für sie relevanten Informationen zu suchen.

Damit du eine klare Informationsstruktur entwerfen kannst, musst du genau wissen, welche Inhalte auf deine Website kommen.

Webseiten-Konzeption

Notiere dir die Inhalte auf kleine Notizzettel. Ich arbeite gern mit Papier-Notizzetteln oder dem Jamboard von Google.

Schreibe einfach auf jeden Notizzettel einen Inhalt.

Nun sortierst du diese Notizzettel thematisch. Welche Gruppen kannst du bilden?

Sobald du die Gruppen hast, suchst du einen Oberbegriff zur jeweiligen Gruppe. Das wird dein Navigationspunkt.

Hier ist ganz wesentlich, dass du einen allgemein verständlichen Begriff nutzt. Das ist oft nicht ganz einfach. Es lohnt sich hier genügend Zeit zu investieren.

Wenn dieser Begriff dann auch noch ein Schlüsselwort (Keyword) für Google enthält, ist das, das i-Tüpfelchen.

Nicht alle Besucher kommen über die Homepage

Vergiss nicht, dass nicht alle Besucher auf deiner Startseite landen. Einige kommen allenfalls auch über Blogartikel auf deine Website oder starten auf einer Angebotsseite.

Auch für diese Besucher muss deine Website klar verständlich sein.

Nicht alle Besucher haben die gleichen Wünsche

Jeder Besucher ist anders. Die einen sind schon mehrfach auf deiner Website gewesen und wollen jetzt zu deinen Angeboten. Sie sind in der Kaufphase.

Andere sind zum ersten Mal bei dir und wollen sich lediglich informieren. Sie sind in der Aufmerksamkeitsphase.

Man nennt das auch die Kundenreise oder Customer Journey.

Jeder dieser Besucher hat unterschiedliche Wünsche und Ziele. Versuche allen die entsprechenden Informationen auf einfache Art zugänglich zu machen.

Impressum und Datenschutz nicht vergessen

Vergiss nicht auch je einen Link für Impressum und Datenschutz zu setzen. Üblicherweise werden diese beiden Links in die Fusszeile gesetzt.

Wichtig ist, dass sie sich mit maximal 2 Klicks von jeder Seite erreichen lassen.

Schritt 5 des Website-Konzepts – Storyboard entwickeln
Wie sollen die wiederkehrenden Elemente auf deiner Website angeordnet sein

Hier geht es um die Kopfzeile, die Navigation, allfällige Seitenelemente, die Fusszeile und natürlich die Texte, Bilder, Videos etc.

Um herauszufinden, was für dich passt, lohnt sich ein Blick auf andere Websites. Das können Websites von Kolleginnen sein oder auch ganz andere.

Surfe einmal durchs Netz und schreibe dir von mindestens 3 Websites auf, was dir daran gefällt und was nicht.

Danach nimmst du Papier und legst es im Querformat vor dich hin. Zeichne nun ganz grob auf, wie deine Seiten aussehen sollen.

• Geht die Kopfzeile über die ganze Breite des Bildschirms?
• Gibt es eine oder gar zwei Sidebars (diese Seitenleisten) oder gar keine? Entscheide das für jede Seite neu.
• Wie soll die Fusszeile aussehen?
• Welche Elemente soll es sonst noch geben? Mach dir hier unbedingt auch Gedanken zu den Buttons, allenfalls Icons, die du verwenden möchtest.
• Gibt es Boxen, die zum Beispiel auf den Newsletter aufmerksam machen?

Das kann dann so aussehen:

So kannst du deine Website vorausplanen und ganz einfach ein Gefühl dafür bekommen.

Wenn du magst, kannst du hier auch schon etwas mit Farben arbeiten.

Video: Website-Konzeption

Hier findest du nochmals die einzelnen Schritte kurz zusammengefasst

Du siehst, ein Website-Konzept braucht Zeit. Aber es lohnt sich, denn du hast danach ein starkes Fundament für deine Website geschaffen.

Meine persönlichen Erfahrungen mit dem Relaunch meiner eigenen Website habe ich vor zwei Jahren aufgeschrieben. Hier erfährst du mehr.

Wenn du dabei Hilfe benötigst, bin ich gern für dich da.