In 11 Schritten ein professionelles Website Konzept erstellen

Sie sind Unternehmer, Freiberufler und Selbstständiger und brauchen eine neue Website?

Egal, ob Sie sich selbst eine neue Website bauen, oder ob Sie sich eine professionelle Website designen lassen: Sie sollten sich zuerst ein fundiertes Website Konzept erstellen.

Die Zeit, die Sie in dieses Webdesign-Konzept investieren, zahlt sich spätestens dann aus, wenn es darum geht, Ihre neue Homepage umzusetzen.

Denn so haben Sie sich bereits im Vorfeld über alles Wichtige Gedanken gemacht.

Inhaltsverzeichnis:

1. Schritt 1 | Was wollen Sie mit Ihrer Website erreichen?
2. Schritt 2 | Beschreiben Sie Ihre Kundengruppen
3. Schritt 3 | Werfen Sie einen Blick auf den Wettbewerb
4. Schritt 4 | Die Struktur Ihrer Website
5. Schritt 5 | Die Website-Navigation
6. Schritt 6 | Ihr Logo
7. Schritt 7 | Die Bildauswahl
8. Schritt 8 | Die Farbgestaltung
9. Schritt 9 | Die Typografie
10. Schritt 10 | Der Call-to-Action
11. Schritt 11 | Der Footer

Website Konzept | Schritt 1:

Was wollen Sie mit Ihrer Website erreichen?

Im ersten Schritt Ihres Webdesign-Konzepts überlegen Sie, welche Ziele Sie mit Ihrer neuen Webseite erreichen wollen.

Formulieren Sie Ihre Ziele möglichst konkret.

Möchten Sie

• Ihre Produkte oder Dienstleistungen direkt über den Onlineshop verkaufen?
• die Kunden über Ihre Produkte oder Dienstleistungen informieren?
• mehr Kontaktanfragen über das Kontaktformular bekommen?
• mehr Leser für Ihre Blogartikel erreichen?
• mehr Newsletter-Abonnenten erhalten?
• Ihr Image verbessern?
• ein besseres Ranking bei den Suchmaschinen erhalten?
• mehr Anrufe über Ihre Website erhalten?

Beispiel:

„Über meine Website möchte ich 100 Abonnenten pro Monat für meinen Newsletter gewinnen.“

Website Konzept | Schritt 2:

Beschreiben Sie Ihre Kundengruppen

Wenn Sie Ihre Website designen oder designen lassen, sollten Sie immer vor Augen haben, wer Ihre Kunden sind.

Das wird wichtig, wenn es um die Inhalte der Website geht. Denn Sie wollen Ihre Kunden da erreichen, wo Sie Ihnen helfen können, nämlich bei der Lösung ihrer Probleme.

Meist hat ein Unternehmen nicht nur eine Kundengruppe, sondern mehrere, oft auch unterschiedliche Zielgruppen.

So kann ein Bäcker beispielsweise die folgenden Zielgruppen haben:

• Hausfrauen,
• Bürogänger, die in die Arbeit fahren und eine Brotzeit benötigen,
• Kinder, die sich Süßigkeiten kaufen,
• Firmenmitarbeiter aus der Umgebung, die zum Mittagessen kommen,
• Altenheime, die Kuchen für deren Cafeteria abnehmen,
• benachbarte Schulen, die belegte Semmeln für die Pause bestellen,
• Mamas, die einen Kindergeburtstag in der Bäckerei buchen möchten,
• Backinteressierte, die an einem Backkurs teilnehmen wollen.

Sie sehen, das können ganz unterschiedliche Kundengruppen sein. Versuchen Sie, diese möglichst genau zu beschreiben: Was kaufen diese bei Ihnen ein, männlich oder weiblich, Alter, Einkommen, Bildungsstand …

Warum ist es wichtig, die eigenen Zielgruppen zu kennen?

Wenn Sie wissen, wer Ihre Kunden sind, können Sie diese auf Ihrer Website gezielt ansprechen. Und auch die Inhalte danach auswählen.

Bedürfnisse der Zielgruppe:

Überlegen Sie, was Ihre Besucher auf Ihrer Website suchen:

• Welche Probleme haben sie?

• Nach welcher Lösung suchen sie?

Website Konzept | Schritt 3:

Werfen Sie einen Blick auf den Wettbewerb

Es ist nie verkehrt, wenn man weiß, was die Konkurrenz macht. Daher werfen Sie in Schritt 3 Ihres Webdesign-Konzepts einen Blick auf den Wettbewerb.

Warum?

Weil Sie nur dann sich von Ihren Mitbewerber abheben können. Weil Sie es eben anders machen als Ihr Wettbewerb.

Machen Sie sich ein Bild der Webseiten Ihrer direkten Mitbewerber:

• Content: Welche Inhalte bietet der Wettbewerb an? Wie sind die Inhalte bei den Wettbewerbern strukturiert (Menüs, Navigation)? Wie ist der Sprachstil Ihrer Wettbewerber?
• Technik: Ist die Technik modern (z. B. Responsive Design, SSL-Verschlüsselung, lädt die Website schnell)?
• Webdesign: Welche Wirkung hat die Website auf Sie? Wie ist das Design Ihrer Wettbewerber (z. B. hell, bunt, dunkel, altbacken)? Welchen Bildstil verwenden Ihre Konkurrenten?
• Usability: Wie ist die Nutzerfreundlichkeit der Website?
• Generell: Was machen die Mitbewerber gut, was Sie übernehmen möchten? Was möchten Sie besser machen?

Schauen Sie sich nicht nur den direkten Wettbewerb an, sondern auch räumlich weiter entferntere oder größere Mitbewerber in anderen Teilen Deutschlands.

Geben Sie in Google Ihr Kernthema ein und schauen Sie sich die ersten drei Seiten der Suchergebnisse genauer an.

Lassen Sie sich inspirieren, notieren Sie sich, was Ihnen gut gefällt.

Website Konzept | Schritt 4:

Die Struktur Ihrer Website

Keine Sorge, Sie müssen jetzt noch nicht die fertigen Website-Texte parat haben. In diesem Schritt geht es darum, sich Gedanken darüber zu machen,

• welche Inhalte auf Ihrer Website zu finden sein sollen (Content)
• und wo diese Inhalte hinkommen (Struktur).

Grobe Stichpunkte der Inhalte reichen zunächst vollkommen aus, formulieren Sie noch keine Texte.

Die Inhalte

Legen Sie fest, welche Inhalte auf Ihrer Website zu finden sein sollen. Sehen Sie sich Ihre Ziele und Ihre Kundengruppen noch einmal an. Beiden sollten Sie gerecht werden.

Die Ziele

Werfen Sie auch noch einmal einen Blick auf Ihre Ziele.

Wenn Ihr Website-Ziel beispielsweise lautet „Meine Website soll auf den vorderen Plätzen bei den Suchmaschinen landen“, dann könnte ein Blog eine gute Möglichkeit sein. Lesen Sie hierzu auch den Blogartikel „Braucht mein Unternehmen einen Unternehmensblog?“.

Die Kundengruppen

Die Besucher kommen auf Ihre Website, weil sie ein Problem gelöst haben wollen.

Überlegen Sie:

Welches Problem haben Ihre Kunden?

Der Lösungsvorschlag sollte auf Ihrer Website zu finden sein. Denken Sie dabei bitte immer aus Kundensicht.

Darüber, welche Inhalte auf die Homepage (Startseite Ihrer Website) gehören, habe ich einen ausführlichen Blogbeitrag geschrieben: Wie Sie in 6 Schritten die Texte für Ihre Homepage erstellen.

Neben der Startseite ist die Über-mich-Seite die am meisten gelesene Unterseite einer Website. Für die About-Seite können Sie Storytelling betreiben und Ihre Website-Besucher mit einer packenden Geschichte in den Bann ziehen. Warum tun Sie, was Sie tun? Machen Sie sich dazu Stichpunkte.

Die Struktur

Schreiben Sie sich zunächst Notizen und Stichpunkte zu den Inhalten auf und clustern Sie anschließend die Inhalte sinnvoll. Daraus ergibt sich dann die Struktur der Website.

Website Konzept | Schritt 5:

Die Website-Navigation

Die Navigation hat einen entscheidenden Einfluss auf die Nutzerfreundlichkeit (Usability) Ihrer Webseite. Daher sollten Sie sich gut überlegen, welche Navigation Sie auf Ihrer Website einsetzen wollen und dies in Ihrem Webdesign-Konzept entsprechend festhalten.

Welche Möglichkeiten der Navigation gibt es?

Es gibt:

• Hauptmenü (am oberen Rand der Website)
• Top-Menü (oberhalb des Hauptmenüs)
• Sidebar-Menü (am rechten oder linken Seitenrand)
• Footer-Menü (am unteren Rand der Website)

Hauptmenü

Achten Sie darauf, dass Sie maximal 7 Navigationspunkte im Hauptmenü haben. Sonst wird es zu unübersichtlich.

Impressum und Datenschutz haben im Hauptmenü nichts zu suchen. Dafür eignet sich das Footer-Menü hervorragend.

Top-Menü

Das Top-Menü wird hauptsächlich von Online-Shops für zusätzliche Informationen eingesetzt, wie zum Beispiel Telefonnummer, Suche, Sprachwahl, Warenkorb oder einen Login-Button.

Beispiel 1 | Login, Lieferdatum, Warenkorb

Beispiel 2 | Sprachwahl und Suche

Sidebar-Menü

Ein Sidebar-Menü wird sehr oft bei Onlineshops zusätzlich zum Hauptmenü eingesetzt. Dies soll den Kunden die oft recht umfangreiche Navigation erleichtern.

Footer-Menü

Im Footer-Menü sollten Sie Impressum und Datenschutz unterbringen.

Wichtig ist, dass sowohl das Impressum als auch die Datenschutzerklärung von jeder Unterseite aus mit maximal zwei Klicks erreicht werden können.

Verschiedene Navigationsarten

Im modernen Webdesign haben sich verschiedene Navigationsarten herausgebildet. Man unterscheidet:

Horizontale und vertikale Navigation

Die horizontale Navigation zählt zu den Classics. Die Menüpunkte befinden sind oben im Header oder unter dem Headerbild. Sie sind horizontal, von links nach rechts angeordnet.

Eine vertikale Navigation steht für das Außergewöhnliche. Hat nicht jeder. Die vertikale Navigation ist am linken Bildrand zu finden.

Dropdown- und statisches Menü

Das Dropdown-Menü klappt nach einem Klick auf die Navigation nach unten auf. Gut, wenn viele Unterseiten oder Kategorien verwendet werden. Das Dropdown-Menü wird vor allem von größeren Online-Shops benützt, um das umfangreiche Sortiment unterzubringen.

Das statische Menü ist die Standardlösung und ist jederzeit von jedem Punkt der Website zu erreichen.

Hamburger Menü

Das Hamburger Menü symbolisiert durch seine drei Striche einen Hamburger. Zwei Semmelhälften und ein Hamburger dazwischen. Durch Klicken öffnet sich das darunter versteckte Menü. Diese Navigationsart wird gerne im mobilen Bereich eingesetzt, ist jedoch auch auf der Desktop-Ansicht zu finden.

Ein Standardmenü könnte zum Beispiel so aussehen:

• Home (Ihre Startseite. Enthält eine Kurzpräsentation Ihres Unternehmens)
• Leistungen (nach Leistungsarten unterteilt)
• Kundengruppen (manchmal bietet sich die Aufteilung nach verschiedenen Kundengruppen an)
• Über mich / About
• Kontakt

To Do:

Wenn Sie sich über Ihre Navigation im Klaren sind, haben Sie damit die Grobstruktur Ihrer Website geschaffen. Nun geht es in den nächsten Schritten darum, sich um das Webdesign Gedanken zu machen.

Website Konzept | Schritt 6:

Ihr Logo

Bereits in der Konzeptphase sollten Sie sich um Ihr Logo kümmern. Denn das Logo Ihres Unternehmens gehört in jedem Fall auf Ihre Website.

Logos befinden sich in der Regel im Navigationsbereich oben links, manchmal auch mittig zentriert. Sie sind mit einem Link zur Startseite versehen. So kann der Besucher, egal wo er sich befindet, mit einem Klick auf das Logo wieder zur Startseite zurückkehren.

Schauen Sie nach, ob Sie Ihr Logo in den richtigen Formaten und Größen haben. Idealerweise haben Sie das Logo im Vektorformat (eps), dann kann es von jedem Grafiker in die gewünschte Größe gebracht werden.

Gut wäre auch, wenn Ihr Logo im Querformat gestaltet ist. Dann passt es gut in den Headerbereich des Bildschirms.  

Falls Sie noch kein Logo haben, wäre spätestens jetzt der richtige Zeitpunkt, sich ein Logo erstellen zu lassen.

Beispiel 1 | Logo mittig

Beispiel 2 | Logo links

Website Konzept | Schritt 7:

Die Bildauswahl

Die Auswahl der Bilder ist ein wesentlicher Part in einem Webdesign Konzept. Für die Bildauswahl sollten Sie sich viel Zeit nehmen. Denn Bilder haben einen enormen Einfluss darauf, ob Ihre Besucher sich auf Ihrer Website wohlfühlen, oder diese sofort wieder verlassen.

Eine einheitliche Bildsprache

Achten Sie darauf, die Bilder nicht einfach bunt zusammen zu puzzeln. Wichtig ist eine einheitliche Bildsprache für die gesamte Website. Eine Bildsprache, die zu Ihrem Unternehmen passt.

Zeigen Sie sich

Gerade, wenn es um Beratung oder persönliche Themen geht:

Ihre Kunden möchten sehen, mit wem Sie es zu tun haben.

So sollten beispielsweise Ärzte, Rechtsanwälte, Steuerberater, Handwerker oder auch Physiotherapeuten sich auf Ihrer Website zeigen.

Verwenden Sie nur professionelle Fotos

Verwenden Sie dafür unbedingt professionelle Fotos und lassen Sie sich von einem guten Fotografen fotografieren. Gekaufte Stockfotos von Bildagenturen, auf denen Personen zu sehen sind, sollten Sie auf Ihrer Webseite nicht einsetzen. Diese schauen meistens unnatürlich und austauschbar aus.

Wenn Sie sich fotografieren lassen, achten Sie auf die Kleidung, die sie tragen. Diese sollte zum Farbkonzept Ihrer Webseite passen. Verwenden Sie nicht zu dunkle Farben (z. B. schwarz) oder bunte Muster. Haben Sie eine spezielle Logofarbe, dann könnten Sie diesen farblichen Akzent auch in Ihrer Kleidung setzen.

Lassen Sie sich unbedingt in unterschiedlichen Outfits und vor unterschiedlichen Hintergründen fotografieren. So haben Sie bei der Umsetzung der Website mehr Gestaltungsfreiraum.

Beispiel für gelungene Farbwahl & Foto

Auf dieser Homepage eines Coaches sind Foto, Logo und Farben der Website gut aufeinander abgestimmt.

Achten Sie auf die Bildrechte

Wenn Sie Stockfotos einsetzen, dann müssen Sie die notwendigen Lizenzen dafür besitzen. Aus Sicherheitsgründen verwende ich für meine Kunden daher nur Bilder von professionellen Bilddatenbanken. I-stock, Adobe Stock oder Shutterstock sind hierfür gute Anlaufstellen.

Recht des Fotografen auf Namensnennung

Ein weiterer Punkt, der zu beachten ist, ist das Recht des Fotografen auf Namensnennung nahe am Bild. Dies kann mit einer Namensnennung direkt unter dem Bild (Bilduntertitel) oder direkt im Bild umgesetzt werden. Eine Namensnennung in Bildnachweisen oder im Impressum erfüllt diese Anforderung nicht. Jeder Webseiteninhaber muss für sich entscheiden, wie er dies handhabt. Ich kläre meine Kunden über die rechtlichen Anforderungen auf und bespreche mit ihnen, wie sie das umgesetzt haben möchten.

Website Konzept | Schritt 8:

Die Farbgestaltung

Ein sehr wichtiger Aspekt eines Webdesign-Konzepts ist die Farbauswahl für die Webseite. Die Farben und ihr Einsatz sind mitentscheidend dafür, ob Sie sich auf einer Website wohlfühlen oder nicht.

Die richtigen, passenden Farben zu finden, ist nicht einfach. Die Farbgestaltung einer Website ist eine Wissenschaft für sich und wäre ein Thema für einen eigenständigen Blogartikel.

Lassen Sie sich Ihre Website von einem Webdesigner erstellen, dann wird Ihnen der Webdesigner entsprechende Vorschläge machen.

Möchten Sie sich Ihre Website selbst gestalten, dann sollten Sie zumindest die folgenden Punkte beachten. Sind Sie sich nicht absolut sicher bei der Farbauswahl, sollten Sie lieber einen professionellen Webdesigner beauftragen.

Bilder

Sie sollten zuerst die Bildauswahl abgeschlossen haben, bevor Sie sich um die Farbgestaltung Ihrer Website kümmern. Denn die Farben der Website sollten sich in den Bildern widerspiegeln.

Corporate Design

Hat Ihr Unternehmen bereits ein Logo, Visitenkarten und Flyer? Dann können und sollten diese Farben in das Webdesign integriert werden.

Wettbewerb

Auch hier lohnt wieder der Blick zum Wettbewerb. Gibt es Farben, die alle Wettbewerber einsetzen? Möglicherweise machen Sie es anders. Oder gibt es Gepflogenheiten, an die man sich halten sollte?

Sammeln Sie Farbideen

Schauen Sie sich im Web um, welche Farbkombinationen Ihnen spontan gut gefallen. Dies ist oft einer der besten Wege, um eine gute Farbkombination für die eigene Website zu finden.

Hilfreiche Tools

Es gibt ein paar sehr hilfreiche Webseiten, die sogenannte „Color Schemes“ bereithalten. Da finden Sie eine Menge inspirierender Fotos mit den zugehörigen Farbcodes. Für das Webdesign benötigen Sie den HTML-Farbcode (auch Hexadezimal-Code genannt).

Ein paar gute Links für Color Schemes:

• 5 inspirierende Color Schemes für Ihre Website
• Design Seeds
• Color Palettes
• Canva – 50 Color Schemes
• Canva – 100 Color Schemes

Beispiel für ein Color Scheme

Farbpalette zusammenstellen

Stellen Sie sich eine Farbpalette mit fünf bis sechs Farbtönen zusammen.

Eine Möglichkeit der Zusammenstellung:

• Ein dezenter, heller Farbton, der großflächiger zu Einsatz kommt.
• Eine markante Akzentfarbe, die äußerst sparsam und kontrastierend verwendet wird (z. B. für Buttons).
• Eine markante Farbe (passend zum Logo und den Bildern), für Headlines und Akzente
• Jeweils einen heller und einen dunkler abgestuften Ton der markanten Farbe, für Hintergründe einsetzbar.
• Einen dunklen Grauton für den Fließtext. Reines Schwarz sollte für den Text nicht verwendet werden, da es zu kontrastreich wirkt.

Ihre Farbauswahl muss immer auf der Website getestet werden. Erst dann zeigt sich, ob Ihre Farbpalette optimal passt oder noch angepasst werden muss.

Website Konzept | Schritt 9:

Die Typografie

Ein weiterer Punkt Ihres Webdesign-Konzepts ist die Wahl geeigneter Schriften für Ihre Website. Genau wie die Farbgestaltung ist dies ein eigenes Thema für sich.

Kombinieren Sie nicht zu viele verschiedene Schriftarten.

In der Regel kommen Sie mit zwei verschiedenen Schriftarten aus: eine Schriftart für die Überschriften und eine zweite, dazu passende Schriftart für den Fließtext.

Beauftragen Sie einen Webdesigner, so übernimmt dieser die Wahl der passenden Schriften für Ihre Webseite.

Wollen Sie sich selbst um Ihre neue Website kümmern, so können Sie sich mit den Google Fonts behelfen. Google stellt mit den „Google Fonts“ einen Katalog mit etwa 900 Schriftarten zur Verfügung.

Unter dem Punkt „Custom“ können Sie einen beliebigen Text eingeben, um die Schriftarten zu vergleichen. Auch die dargestellte Größe können Sie entsprechend anpassen.

Tipp:

Wählen Sie zunächst eine Schrift für die Headline aus. Wenn Sie auf die Schrift klicken, öffnet sich ein neues Fenster mit Detailangaben zu der Schrift. Nun können Sie unter dem Punkt „Popular Pairings“ eine passende Schrift für den Fließtext kombinieren.

Google Fonts lokal hosten

Setzen Sie die Google Fonts auf Ihrer Website ein, so sollten Sie diese lokal auf Ihrem Webserver hosten. Die andere Möglichkeit, die Google Fonts vom Google-Rechner laden zu lassen, entspricht nicht den Anforderungen der DSGVO.

Website Konzept | Schritt 10:

Der Call-to-Action (Handlungsaufforderung)

Was auf keiner Ihrer Webseiten fehlen darf, ist ein sogenannter `Call-to-Action´, die Handlungsaufforderung. Sie sollten für die Startseite, als auch jede einzelne Ihrer Unterseiten eine Handlungsaufforderung definieren.

Schauen Sie sich einmal die Ziele Ihrer Website an, die Sie zu Anfang definiert haben. Die Handlungsaufforderungen sollten diese Ziele unterstützen.

Beispiel:

Sie haben sich mehr Newsletter-Abonnenten als Ziel gesetzt. Mit Ihrem Call-to-Action (CTA) zielen Sie darauf ab und integrieren ein Newsletter-Anmeldeformular auf Ihrer Website.

Übertreiben Sie es jedoch nicht: Ein CTA pro Unterseite reicht aus. Die Handlungsaufforderungen können von Unterseite zu Unterseite variieren.

Sie möchten mehr Anrufe über Ihre Website generieren? Dann gestalten Sie sich eine entsprechende Handlungsaufforderung, beispielsweise mit einem Button „Rufen Sie mich an“.

Beispiel Call-to-Action | Newsletter

Website Konzept | Schritt 11:

Der Footer

Der Footer eignet sich gut, um wichtige Informationen noch einmal konzentriert unterzubringen. Dies können die Adresse und die Kontaktdaten oder auch etwaige Mitgliedschaften sein. Auch Social-Media-Verknüpfungen finden hier ihren Platz.

Impressum & Datenschutz

Im Footer-Menü ist Platz für die Links zum Impressum und zur Datenschutzerklärung.

Beide müssen von jeder Unterseite aus mit maximal zwei Klicks erreicht werden können.

Tipp:

Im Footer-Bereich wird gerne das in manchen Fällen obligatorische Cookie-Banner untergebracht.

Achten Sie darauf, dass das Banner nicht die Links für Impressum und Datenschutz verdeckt.

Einige Footer-Beispiele

Footer mit Anmeldeformular für den Newsletter

Schlichter Footer

Zusammenfassung:

Schritt 1: Legen Sie die Ziele fest, die Sie mit Ihrer Website erreichen wollen.

Schritt 2: Beschreiben Sie Ihre Wunschkunden (Zielgruppe).

Schritt 3: Analysieren Sie Ihren Wettbewerb.

Schritt 4: Legen Sie eine Strukur für Ihre Website fest.

Schritt 5: Definieren Sie die Navigation der Website.

Schritt 6: Bringen Sie Ihr Logo in Form.

Schritt 7: Wählen Sie passende Bilder aus.

Schritt 8: Ermitteln Sie ein stimmiges Farbschema.

Schritt 9: Suchen Sie sich die Schriftarten für Ihre Website aus.

Schrittt 10: Bestimmen Sie den Call-to-Action (Handlungsaufforderung).

Schritt 11: Denken Sie an einen ansprechenden Footer.

Mein Fazit:

Ein gutes Website-Konzept ist die Grundlage für das Gelingen Ihrer neuen Website. So ein Konzept ist nicht in fünf Minuten erstellt. Aber je mehr Sie in Ihr Konzept investieren, umso mehr werden Sie davon profitieren.

Und falls Sie Hilfe brauchen, oder Ihre Website zusammen mit mir gestalten wollen, dann melden Sie sich. Ich helfe Ihnen gerne weiter.