Website richtig gestalten – vermeide diese 9 Fehler

Website richtig gestalten – vermeide diese 9 Fehler

von | Dez. 11, 2020 | Design, Startseite, Text, WordPress

Gestalte deine Website für deine Besucher: lesbar

Egal womit du unterwegs bist: WordPress, Joomla, Typo 3 oder Baukastensysteme wie Jimdo, Squarespace oder Wix: Jedes System stellt unterschiedliche Anforderungen. Aber eine Arbeit musst du überall machen: Du musst dir Gedanken darüber machen, wie du deine Website richtig gestalten kannst. Richtig heißt: lesbar und verständlich. Als WordPress-Coach bewege ich mich in diesem Artikel in erster Linie im System WordPress. Aber die hier erwähnten Fehler werden mit jedem System gemacht.

In meinem Blogartikel „Wie du ein genial einfaches Konzept für deine Website erstellst“ hab ich es geschrieben: Wenn du eine Website baust, bist du als Texter, Designer und Techniker unterwegs. Wenn du mit WordPress und einem guten Premium-Theme wie dem Divi arbeitest, dann nimmt dir das Theme viele Arbeiten ab. Ein professionelles Theme unterstützt dich in Design und Technik.

Ein bisschen gesunder Menschenverstand, Logik und Einfühlungsvermögen ist trotzdem nicht verkehrt. Häufig beobachte ich auf Websites dieselben Fehler in der Gestaltung. Die schlimmsten Fehler sind aus meiner Sicht mangelnde Lesbarkeit der Texte. Damit du auf deiner Website diese Fehler vermeidest, hab ich diesen Blogpost geschrieben.

Mach es besser. Ich zeige dir hier, wie du deine Website richtig gestalten kannst, damit deine Besucher deine Texte gern lesen.

Fehler Nr. 1

Schlechte Lesbarkeit durch zu breite Text-Zeilen

Viel zu breite Textblöcke ist ein häufig zu beobachtendes Phänomen. Warum so viele Websitebetreiber diesen Fehler machen ist mir ein Rätsel. Breit laufende Zeilen lesen sich einfach extrem anstrengend. Ich bekomme davon Kopfschmerzen. Probier mal: Nimm ein normal großes Lineal (30 cm). Falls du das nicht hast: Halte ein DinA4-Blatt quer vor deinen Augen. In dem Abstand, den du vor einem Monitor einnimmst. Also ca. 50 cm. Und nun wandere mit deinen Augen die gesamte Kante des Lineals oder des Blatts entlang: Von links, nach rechts, wieder zurück nach links, wieder nach rechts. Hin und her, von Ecke zu Ecke. Ein paar mal.

Das ist Schwerstarbeit für deine Augen. Das tut weh. Ich bekomme davon Kopfschmerzen. Jetzt wirst du einwenden: Okay, aber ich kann von links nacht rechts auch den Kopf bewegen. Klar. Beim Zuschauen eines Tennisspiels ist das normal. Da bewegt man den Kopf. Aber: Das macht keiner vor dem Monitor.

Es gibt verschiedene Kniffe, wie du dich an eine ideale Breite deiner Texte hältst. Eine einfache Möglichkeit ist: Lass den Text nicht breiter laufen als 15 – 20 cm. Abhängig von der Auflösung deines Displays. Natürlich ist dieses Hilfsmittel relativ. Relativ zu der Auflösung deines Notebook-Displays, von der Schriftgröße und dem Schrifttyp. Aber als grobe Richtung hilft diese Angabe.

Eine andere Empfehlung ist, die Texte nicht breiter laufen zu lassen als 800 Pixel. Aber dieser Tipp hat 2 Haken: Der 1. Haken: Pixel ist nicht gleich Pixel. Die Pixel eines Displays mit einer hohen Auflösung sind kleiner als die Pixel eines Displays, dessen Auflösung weniger groß sind. Das heißt: 800 Pixel sind nicht gleich 800 Pixel. Auf dem einen Display sind 800 Pixel 20 cm breit, auf einem anderen Display sind 800 Pixel 18 cm breit. Und 2 cm mehr oder weniger machen für die Lesbarkeit eines Textblocks viel aus!

Der 2. Haken: Die Breite eines Elements in responsiv programmierten Themes – wozu auch professionelle Premium-Themes von WordPress gehören – geben die Breite auch in Prozent an. Und selbst wenn die Breite eines Elements in Pixel angegeben ist – siehe oben. Eine sinnvolle Empfehlung ist die Anzahl der Zeichen in einer Zeile. Meine Empfehlung: Nimm 70 bis 80 Zeichen (ohne Leerzeichen) in einer Zeile. Wobei dieser Wert wieder abhängig ist von der Schriftgröße und der Schriftart. Je größer die Schrift, desto weniger Zeichen. Je schlanker der Schriftschnitt, desto mehr Zeichen. Letztlich ist alles relativ. Behalt deshalb die Lauflänge in cm im Auge. Also gefühlt 18 – 20 cm ist ein guter Wert.

Fehler Nr. 2

Textwüsten: Die Textblöcke haben zu wenig Absätze

Ein wesentliches Element, wenn du deine Website richtig gestalten möchtest, ist die Gestaltung der Texte.

Leider wird häufig zu wenig auf dieses wichtige Element geachtet. Dabei nehmen die Texte einen Großteil der Fläche auf den Seiten ein. Wenn man von Foto-Websites absieht. Fehlende Absätze sind einer der Fehler: Häufig sieht man auf schlecht strukturierten Webseiten riesige Textblöcke ohne Gliederungen, mit wenig Absätzen. Die berüchtigten Textwüsten. Die Absatzlänge ist ein wichtiges Kriterium, wenn man eine Website richtig gestalten will. Warum? Weil zu lange Absätze die Seite unübersichtlich machen. Mach es besser. Gliedere deine Texte in kurze, leicht verdauliche Happen. Plane viele Absätze ein. Mit höchstens 3 bis 4 Zeilen. Das Lesen am Rechner ist sehr anstrengend. Wenn du möchtest, dass deine Leser deine Seite nicht fluchtartig verlassen, dann strukturiere deine Texte. Setze viele Absätze, baue Listen ein, setze Grafiken in den Text. Da gibt’s viele Möglichkeiten. Sei kreativ. Gut sind Listen:

  • Listen bringen Abwechslung
  • Listen sind gut für das SEO
  • Listen lockern Texte auf
  • Listen lassen sich prima lesen
  • Listen bleiben super im Gedächtnis

Fehler Nr. 3

Schriften im Fließtext, die schlecht lesbar sind

Wie du ohne Arial, Tahoma oder Times deine Website richtig gestalten kannst

Vorbei die Zeit, als Websites mit der winzigen Auswahl von 3 bis 4 Schriften unterwegs waren. Damals musste man die Schriften für seine Website nehmen, von denen man ausgehen konnte, dass die auch auf dem Rechner des Websitebesuchers vorhanden sind. Nutzt du Google-Fonts? Oder hast du schon mal davon gehört? Ein super Tool. Nie war es so einfach wie heute, wirklich schöne und dennoch lesbare Schriften auf seiner Website zu nutzen. Die Auswahl an schönen Schriften ist fast grenzenlos. Aber wer die Wahl hat, hat die Qual. Die meisten Websitebetreiber sind keine Designer. Und wissen eben nicht, welche Schriften zusammen harmonieren und welche nicht. Das ist allerdings noch das kleine Problem. Das größte Problem ist: Viele Websiteinhaber nehmen Schriften, die in Fließtexten nur sehr schwer zu lesen sind. Beispiel: Es gibt Schriften, die sehr schlank gestaltet sind. Ich finde solche Schriften schick, sie sehen meist edel aus. Wie die Condensed-Schnitte mancher Schrifttypen. Die Schrift hier in den Überschrifte meiner Posts haben eine Condensed-Schrift. Sie ist schmal und schlank geschnitten. Aber: Im Fließtext eingesetzt, also in längeren Texten, sind solche Schriften eine Katastrophe. Besonders ältere Augen ab 50 haben größte Schwierigkeiten, solche Schriften zu lesen. Damit du siehst, was ich meine: Die Roboto zum Beispiel. Eine sehr gern und häufig genutzte Schrift, die auch in den Google-Fonts enthalten ist. Diese Schrift hat einen normalen Schnitt (wie dieser Text), aber auch einen, der sehr schmal läuft (Roboto Condensed). Im Bild unten links die Roboto, rechts die Roboto Condensed.
Roboto und Roboto Condensed

Schriften im Vergleich: Roboto und Roboto Condensed. Im Fließtext ist ein normaler Schriftschnitt wie Roboto regular einfacher zu lesen als eine schmal geschnittener Schrift wie die Roboto Condensed
Im Vergleich siehst du sehr gut, was besser zu lesen ist. Zum Stichwort Google Fonts ein wichtiger Tipp: Setze Google Fonts DSGVO-konform ein! Was das bedeutet und welche Auswirkungen es haben kann, wenn du die Google Fonts falsch anwendest, hab ich in diesem Artikel beschrieben. Dort liest du auch, wie du die Google Fonts richtig einsetzt.

Formatierungen, die die Schrift unleserlich machen

Unnötige Formatierungen sind genauso schlimm. Wenn du deine Website richtig gestalten möchtest, kannst du auch auf diesen Punkt achten. Was verstehe ich unter „unnötigen Formatierungen“? Auf einer Website mit Rezepten hab ich neulich einen Text lesen müssen, der in 6 längeren Absätzen mit Kursivschrift geschrieben wurde. Wie hier, diese schräg gestellt Schrift. Ich musste 3 mal lesen, um den Text erfassen zu können. Im längeren Fließtext ist Kursivschrift das reinste Augenpulver.

Eine andere Problemschrift: Script-Schriften

Script-Schriften sind Schriften, die aussehen wie von Hand geschrieben. Sie haben diesen menschlichen Touch, wirken nahbar und authentisch, bringen die emotionale Note in den Text, den Human Touch. Und zu vielen Branchen passen sie wunderbar. Zum Beispiel zu DIY-Angeboten.

Ich mag Script-Schriften. Aber: Sie sind oft miserabel lesbar. Kann man leider nicht anders sagen. Neulich ist mir genau das passiert: Eine wunderschön schnörkelige, weit geschwungene Schrift als Überschrift auf einer Website. Aber: Ich konnte einfach nicht auf dem ersten Blick erkennen, ob es sich beim f um ein f oder um ein s handelt. Ich kam ins Stocken. Ich musste mehrmals lesen. Es war ein s. Ungünstig, wenn man 5 Sekunden braucht, um überhaupt die Schrift entziffern zu können. Und dann weitere wertvolle Sekunden um zu erfassen, welches Produkt die werte Dame bietet. (Sorry an dieser Stelle, aber Scriptschriften sieht man zu 99,9 Prozent bei AnbieterInnen). Daher meine Empfehlung: Sei vorsichtig im Gebrauch von Scriptschriften.
Website richtig gestalten

Fehler Nr. 4

Zu kleine Schrift und ungünstiger Zeilenabstand

Du merkst: Zu Schriften gibt es viel zu schreiben.

Leider machen sich die wenigsten wirklich Gedanken um diesen so wichtigen Punkt. Denn was nützt das schönste Layout der Website, die tollsten Farben, die brilliantesten Bilder, der hilfreichste Inhalt – wenn ich Probleme habe, die Schrift zu lesen? Wenn du die Website richtig gestalten möchtest, achtest du auch auf die Schriftgröße und den Zeilenabstand. Häufig sehe ich auf Websites zu kleine Schrift und / oder zu enge Zeilenabstände. Das ist echt eine Herausforderung für jeden Leser. Und wenn du möchtest, dass wirklich alle Altersgruppen deine Inhalte sehen, dann lass auch mal ältere Augen deine Texte lesen. Die werden mit der Lesbarkeit nämlich weit mehr Probleme haben als deine 20 Jahre jüngeren Leser und Leserinnen. Auch ein falscher Zeilenabstand kann die Lesbarkeit beeinflussen. Ist der Zeilenabstand zu gering, wird das Lesen anstrengend. Ist der Zeilenabstand zu weit, besteht die Gefahr, dass sich dein Leser auf deiner Website verliert. Und es muss unnötig gescrollt werden.
Website richtig gestalten

Fehler Nr. 5

Komplizierter Satzbau macht das Lesen schwer

Die Wesite richtig gestalten mit dem richtigen Inhalt

Zugegeben: Jetzt hab ich mich sehr weit aus dem Fenster gehängt: Denn der Inhalt hat nicht wirklich etwas mit der Gestaltung der Website zu tun. Aber: Mit der Formulierung deiner Texte kannst du dazu beitragen, wie gern die Besucher deine Texte lesen. Durch zu komplizierten Satzbau kannst du das Lesen erschweren. Je einfacher die Texte zu lesen sind, desto besser für deine Website, weil deine Besucher dann länger auf deiner Website bleiben. Und das ist nebenbei bemerkt gut für das SEO. Auf dem PC oder Smartphone lesen ist anstrengend für die Augen. Und wenn du in einfachen Worten und kurzen Sätzen schreibst, machst du es deinen Lesern leichter. Du wirkst nicht schlauer oder professioneller, wenn du Thomas-Mann-Schachtelsätze baust oder Fachbegriffe wie ein Wissenschaftler anwendest.

Wenn du komplizierte Sätze bildest, passiert nur eins: Du wirst nicht verstanden. Worauf musst du also achten?

  • Einfachheit: Kurze Sätze, kurze Wörter, überflüssige Fachbegriffe vermeiden Syntax: Pro Satz sollte nur ein Gedanke ausgedrückt werden. Das Wesentliche steht am am Anfang des Satzes.
  • Prägnanz: viele Verben und die Anwendung von Metaphern machen den Text lebendig (und leichter verständlich)

Übrigens gibt es zur Ermittlung der Lesefreundlichkeit sogar eine wissenschaftliche Herangehensweise.

Der Flesch Reading Ease

Hast du schon mal was von Flesch Reading Ease gehört? Der Flesch Reading Ease (FRE) wird für die Lesbarkeit von Texten angewendet. Dazu wird der FRE aus verschiedenen Faktoren berechnet. Unter anderem die oben genannten. Der Grad der Lesbarkeit wird mit einem Index ausgedrückt. Diesen Index kannst du sogar überprüfen lassen. Gib hier deinen Text ein und du erhältst den Index: fleschindex.de/berechnen Ein hilfreiches Buch zu dem Thema ist das Buch „Deusch für junge Profis“ von Wolf Schneider. Lesenswert auch „Das Leben und das Schreiben“ von Stephen King. Wie, DER Stephen King? Der mit „The Shining“ oder „Carrie“? Genau. Dass ich Horrofilm-Fan bin kann ich nicht gerade sagen. Das Buch empfehle ich trotzdem gern.
Website richtig gestalten

Fehler Nr. 6

Zu wenig Kontrast

Ich bleibe bei den Schriften: Ungünstige Kontraste wirken sich besonders bei den Texten negativ auf die Lesbarkeit aus. Beispiel: Wenn die Farbe der Schrift auf deiner Website ein heller Grauton ist und der Text auf weißem Grund steht, dann ist der Kontrast zu gering. Besonders ältere Augen haben Schwierigkeiten, solche Texte zu lesen. Oder gelbe Schrift auf rotem Grund. Das geht gar nicht. Bei der Gelegenheit: Bestimmt achtest du vor dem Erstellen deiner Website auf deine Zielgruppe. Wenn du Studenten ansprichst musst du auf andere Dinge achten, als wenn du deine Website für Rentner konzipierst. Trotzdem weißt du nie, wie gut die Augen deiner Leser sind. Egal ob jung oder alt. Deshalb achte immer darauf, dass die Kontraste ausreichend sind. Du musst es deinen Leser ja nicht unnötig schwer machen. Auch wenn es megaschick aussieht…
Website richtig gestalten

Fehler Nr. 7

Zu viele unterschiedliche Farben

Wie du mit Farben deine Website richtig gestalten kannst

Wie häufig hab ich das gesehen: Websites, die aussehen wie zugeklebte Litfasssäulen. Hier ein Bild, da eine Grafik, viele unterschiedliche Farben: knallbunt und überladen waren die Websites. Die Elemente einer Website haben zwei Aufgaben:

  • die Leser informieren und
  • die Leser beim Lesen führen.

Form follows Function: Die Inhalte sollten immer der Maßstab sein für die Gestaltung. Das betrifft Texte, Grafiken, Fotos, Farben, Schriften, Weißräume – alle Gestaltungsmerkmale einer Website. Farben: Wenig Akzentfarben sind sinnvoll. Farbliche Akzente helfen beim Lesen und strukturieren die Seite. Biete Abwechslung und mach mit sparsam und klug eingesetzten Akzentfarben das Lesen angenehmer. Wenn du zu viel Bilder und Farben einsetzt, dann ermüdet das Auge schnell, der Leser ist in nullkommanix von der Reizüberflutung übersättigt und hat wenig Lust, weiterzulesen. Außerdem führt zu viel Bunt schnell dazu, dass der Leser das Wesentliche aus den Augen verliert. Du möchtest ja, dass deine Leser deine Texte lesen. Dein Produkt kaufen. Zu viel unterschiedliche Farben lenken dabei ab. Manchmal ist weniger mehr…

Fehler Nr. 8

Ungünstige Farben für dein Angebot

Welche Farben kannst du nehmen für dein Thema? Welche Farben passen? Es müssen nicht deine Lieblingsfarben sein. Im Gegenteil, häufig sind es völlig andere Farben als die Lieblingsfarben des Anbieters der Website. Die Farben müssen zum Produkt passen. Und sollten die Zielgruppe erreichen können. Denn die Website soll in erster Linie die potentiellen Kunden ansprechen. Als Designerin nehme ich mir Tools zur Hilfe. Damit kann ich gezielt bestimmte Farbkombinationen heraussuchen. Bevor ich mit der Gestaltung anfange, überlege ich, welche Farbbereiche zum Thema passen könnten und wo und wie ich die Farben einsetze. Sind eher kalte Farben sinnvoll? Braucht mein Thema eher warme Farben? Was soll rüberkommen: Verspieltheit, Information, wissenschaftlicher Hintergrund, unterkühlte Distanz, menschliche Wärme, möchte ich Appetit machen, die Sinne ansprechen…

Dann überlege ich Farbkombinationen. Ein schönes Tool für die Zusammenstellung von passenden Farbpaletten ist das Color-Wheel von Adobe color.adobe.com Übrigens: Farben werden im Web in einem 6-stelligen Hexadezimalcode angegeben. Dieser Code besteht aus insgesamt 6 Ziffern und/oder Buchstaben mit einem # davor. Die Farbe schwarz hat den Code: #000000 Die Farbe weiß hat den Code: #ffffff Ein helles Grau hat den Code: #f2f2f2 Such dir einige wenige oder auch nur 2 harmonierende Farben und setze sie gezielt ein.

Fehler Nr. 9

Fehlender Weißraum lässt deine Seiten unruhig wirken

Jeder kennt die Start-Seite von Google: Minimalistisch, pur, reduziert. Ein weißes, ziemlich leeres Feld. In der Mitte das Suchfeld, in das man sein Suchbegriff eingeben kann. Mehr nicht. Jeder weiß sofort, was er/sie dort auf der Seite machen soll: ein Suchbegriff eingeben. Nichts lenkt vom eigentlichen Inhalt ab. Keine Werbung links, keine nervigen Banner, keine Links. Alle weiteren Produkte von Google findet man – unauffällig und nicht störend – in der oberen rechten Ecke. Die gesamte Seite wirkt sehr aufgeräumt und klar. Das ist kein Zufall. Der Besucher der Seite soll sich voll und ganz auf seine Suche konzentrieren. Nichts soll ihn ablenken. Kein Link soll ihn auf eine andere Seite locken. Und das Suchfeld ist in der Mitte des Viewports, damit der sofort beim Öffnen der Seite zu sehen ist.

Erklärung: Viewport ist der sichtbare Bereich innerhalb deines Browserfensters, den du siehst, ohne scrollen zu müssen. Natürlich werden deine Seiten nicht so weiß sein, so leer. Du möchtest ja Inhalte zeigen, deine Besucher sollen wissen, wie du helfen kannst, was du anbietest. Aber: Wenn du deine Seite zupflasterst wie ein Litfaßsäule, dann wissen deine Leser nicht, wo sie anfangen sollen. Nichts gegen Litfaßsäulen. Ich finde, Herr Ernst Litfaß hatte damals eine tolle Idee mit seiner Säule. Sogar im Zeitalter des Internets ist eine Säule zum Anbringen von Nachrichtigen eine tolle Sache. Litfaßsäulen beleben Innenstädte. Nicht selten lese ich beim Warten auf eine S-Bahn an der Litfaßsäule und schau mir die Poster an. Leider denken viele Websitebetreiber, dass ihre Website dieselbe Aufgabe hat wie ein Litfaßsäule. Ein Grafikelement, ein Banner, eine Foto, ein Textblock neben dem nächsten.

Was fehlt ist der Weißraum. Was ist Weißraum?

Weißraum bezeichnet den Raum zwischen den einzelnen Elementen einer grafischen Gestaltung. Also der Raum zwischen 2 oder mehreren Textblöcken, der Raum zwischen dem Menü und dem Text, der Raum zwischen Fotos und Textblöcken und so weiter. Den Effekt von Weißraum kennt jeder von Bildern. Um wieviel toller fühlt sich der Piratenknabe beim linken Bild? Genau. Links ist der Weißraum größer als im rechten Bild, der Pfannkuchen hat mehr Abstand zum Jungen, also hat er es höher geworfen. Oder der Pfannkuchen ist rechts wieder runtergekommen…
Zeichnung Junge mit Pfanne, der einen Pfannkuchen hochwirft

Zwischen Junge und fliegendem Pfannkuchen ist ein Raum. Auch dies ist ein Beispiel von Weißraum, der die Beziehung zwischen den Motiven definiert. Genauso gibt es Beziehungen zwischen Text-Bild, Bild-Rand etc. Der sogenannte Weißraum ist wichtig für die Wirkung von Text und Bild.

Weißraum bringt also zusätzliche Aussagen. Eine gute Lesbarkeit einer grafischen Oberfläche (die lesbare Fläche eine Webseite ist auch eine grafische Oberfläche) wird durch den Weißraum gefördert. Der Weißraum hat mehrere Aufgaben:

  • Weißraum sorgt für Aufgeräumtheit,
  • Weißraum führt den Blick der Leser
  • Weißraum trennt die einzelnen Bereiche einer Webseite
  • Weißraum sorgt dafür, dass sich das Auge beim Lesen immer wieder ausruhen kann

Mein Tipp also: Versuche, Weißraum in deine Seiten zu integrieren. Sei sparsam mit grafischen Elementen oder Fotos. Und gliedere Texte in einzelne Abschnitte. Auch so entsteht der wichtige Weißraum. Konnte ich dir mit meinen Tipps helfen? Fallen dir weitere haarsträubende Designsünden auf Websites auf? Dann schreib hier im Kommentar. Falls du etwas mehr Hilfe brauchst:

Das Website Konzept genial einfach in 5 Schritten

Das Website Konzept genial einfach in 5 Schritten

von | Dez. 1, 2020 | Anleitungen, Startseite, Text

Ein schlaues Website Konzept ist die Blaupause für deine Online-Präsenz.

Du hängst fest. Deine Gedanken rotieren: Wie fange ich mit einer Website an?
Was ist wichtig für die Website? Was ist der erste Schritt für eine Website?
Oder du bist ganz mutig und denkst:
Ich leg einfach los. Ich hab im Kopf, was ich machen muss… Ich brauche kein Konzept für eine Website…

Ohne Plan eine Website zu starten ist so doof, wie ohne Navi zu fahren.

Mein Partner nutzt selbst auf kurzen Strecken das Navi. Ich finde das ständige Plappern der Navistimme ehrlich gesagt ziemlich nervig. Aber ich kann ihn verstehen: Er möchte sich ohne Ablenkung aufs Fahren konzentrieren.

Ich fahr gern ohne Navi. Ich mag es, mich den Herausforderungen der Leitsysteme zu stellen. Es macht mir auch deshalb Spaß, weil ich mir die Route vorher auf Google Maps ansehe und einpräge.

Das ist ein nettes Gehirnjogging.

Aber: „Aus dem Kopf fahren“ klappt nicht ganz ohne unfreiwillige Stopps. Denn regelmäßig passiert das: anhalten, Fahrzeug wenden und dieselbe Strecke bis zu letzten Kreuzung zurück… Entspannt reisen geht anders. Und wenn man ein fast idiotensicheres Navigationssystem hat, wärs doch blöd, hier falsche Eitelkeit zu zeigen.

Was hat ein Navi mit einem Website Konzept zu tun?

Ganz einfach: Für die Planung der Website brauchst du Leitlinien. Ein Fahrplan mit System, der dir jede einzelne Station auf dem Weg zu einer perfekten Website zeigt. Du brauchst ein Website Konzept, das dir sagt, was du wo wann und wie konkret machst.

Du brauchst einen eindeutigen Weg, der dich direkt zum Ziel führt. Ohne Umwege. Damit du nicht an jeder Kreuzung stehen bleibst oder sogar zu letzten Kreuzung zurückfahren musst.

Ein Website Konzept ist dein Navigationssystem zu deiner Website.

Warum?
Der Aufbau einer Website erfordert sehr unterschiedliche Arbeiten. Du bist als Texter, Designer und als Techniker unterwegs. Ohne Plan bist du völlig aufgeschmissen. Und wie bei allen Arbeiten ist es schlau, die unterschiedlichen Arbeitsbereiche voneinander zu trennen. Du kommst schneller voran, wenn du erst einen Arbeitsbereich abhaken kannst, bevor du den nächsten startest.

Website Konzept

Schritt 1
Teile die Arbeit an deiner Website in Arbeitsbereiche ein

Als ich vor 15 Jahren anfing, Websites umzusetzen, bin ich ziemlich intuitiv vorgegangen:

  • Was brauche ich? Was hab ich?
  • Eine kurze Skizze reicht.
  • Das andere hab ich im Kopf.
  • Ein Konzept für eine Website brauch ich nicht.

Dachte ich. Dann: Noch während der Arbeit an der Technik hatte ich ständig neue Ideen. Ergebnis: die Codierung der HTML-Bausteine musste geändert werden. Dann fiel mir eine Textänderung ein. Ein Bild hier, ein Textbaustein dort… Jetzt stimmte das Design nicht mehr. Die Folge: Ich musste wieder an den HTML-Code…

Du merkst was?
Ich bin hin und her gesprungen zwischen 3 Arbeitsbereichen, die komplett unterschiedlich sind. Mal war’s der Inhalt, mal die Technik, zwischendurch das Design, dann wieder der Inhalt…

Ergebnis: Stress.

Das ist alles andere als effektiv.

Zwar hast du es mit den heutigen WordPress-Versionen und den idiotensicheren Themes technisch sehr einfach. Dennoch: Der Weg bleibt derselbe.

Ein guter Plan für eine Website bedeutet: ähnliche Arbeiten bündeln.

Das heißt in deinem Fall:

  • erst die Inhalte überlegen und strukturieren,
  • dann die Gestaltung überlegen,
  • dann die Technik umsetzen.

Viele haben eine ungefähre Idee, welche Inhalten sie haben. Und suchen dann ein Theme, also ein Layout. Aber Form follows Content. Und das im besonderen Maße auf Websites.

Erst wenn für dich der Inhalt glasklar ist, überleg dir Ideen für die Gestaltung. Notiere deine Ideen zum Layout. Aber leg dich noch nicht fest. Denn alles kann umgeschmissen werden, wenn du erst deine eindeutigen Texte und Bilder hast. Erst wenn du die Texte hast, mach dich an die Umsetzung. Wenn die Basisarbeit fertig ist, fällt es dir viel leichter, deine inhaltlichen Ideen und Vorstellungen technisch umzusetzen.

Du wirst dann nicht mehr abgelenkt.
Die Arbeit gelingt dir zügiger und leichter.

Website Konzept

Schritt 2
Dein Inhalt deiner Website: Diese Fragen solltest du dir stellen

Bevor du deinen Plan zeichnest, stellst du dir zuerst deine Keller-Fragen:

  • Für wen schreibe ich?
  • Wen will ich erreichen?
  • Was will ich mit der Website erreichen?
  • Wer ist meine Wunschkundin?
  • Welche Probleme hat meine Wunschkundin?
  • Was erwartet die Kundin auf meiner Website zu lesen?
  • Wie kann ich dem Kunden/der Kundin helfen?

Erst wenn du diese Fragen beantwortet hast, wenn du dich in deine Kundin hineinversetzen kannst und für sie perfekte Texte geschrieben hast, solltest du loslegen. Erst jetzt weißt du, was auf deine Website soll – und was nicht. Sprich nicht darüber, was du kannst, sondern darüber, welches Problem du für deine Kundin löst.

So, irgendwann sind die Texte fertig.

Die Texte hast du am besten in einem Dokument wie Word zusammengefasst.

Die nächste Frage: Gibt es Bilder, mit denen du deine Texte auflockerst oder mit denen du Inhalte besser beschreibst? Menschen behalten Informationen am besten visuell. Oder sind Bilder ein wichtiger Bestandteil deiner Website?

Am besten sind eigene Fotos, sie sind unverwechselbar. Und du hast keine Rechte-Probleme. Ansonsten: Es gibt diverse Bilddatenbanken, auf denen du sogar kostenfreie Fotos erhältst. Wenn du vorsichtig und sparsam damit umgehst, sind sie durchaus eine Alternative. Abhängig von deinem Produkt. Nimm Bilder, die nicht zu perfekt sind. Perfekte Bilder sind schnell austauschbar und beliebig. Besser sind Bilder, die eher wie gute Schnappschüsse daherkommen und dadurch authentischer wirken – ohne dilettantisch zu sein. Hier musst du genau schauen. Es kann sich lohnen.

Wer weiß, dass ich ausgebildete Fotografin bin wird denken: Hm, das klingt jetzt etwas widersprüchlich… Schließlich will ich doch nur „gute“ und „professionelle“ Bilder auf meine Website. Ja, stimmt im Prinzip. Aber sehr gut ausgeleuchtete und perfekt gestylte Bilder mit gestochener Schärfe wirken schnell künstlich. Kommt natürlich auf die Branche an.

Zwei Beispiele, Nr. 1: ein Versicherungsmakler. Im Header hat er ein Bild, dass Büroarbeit, Kommunkation, Freundlichkeit, Kundenzugewandheit etc. darstellen soll. Als Bild hat er ein Stockfoto aus einer Bilddatenbank: 3 Personen, die miteinander sprechen, ein Laptop im Arm, alle lachen und zeigen ihre blendend weißen Zähne, alle sind zwischen 25 und 30… Ein schickes Bild, super fotografiert, tolle Ausleuchtung. Aber eine typische Arbeitssituation? Eher nicht.

Beispiel Nr. 2: eine Ernährungsberaterin. Im Header ein Bild von einem Markt. Die Sonne scheint, Gewusel von Menschen, hier und da sieht man leckeres Gemüse. Das Bild ist nicht super perfekt, manche Ecken sind unscharf – aber die Sonne scheint und man denkt sofort: Toll, ich möchte auch wieder auf den Markt. Frisches, gesundes Gemüse holen… Obwohl kein Profifoto, vielleicht ein Ausschußbild, würde ich eher so ein weniger perfektes Bild nehmen. Es ist eher authentisch. So ein Bild vermittelt das Gefühl, das die Ernährungsberaterin gern rüberbringen möchte: Frisches Gemüse einkaufen kann richtig Spaß machen. Und gesundes Essen beginnt beim Einkauf.

Website Konzept

Schritt 3
Fang mit einer groben Skizze an: als Basis für das Konzept deiner Website

Schnapp dir ein DinA4-Blatt und ein Stift.

Leg das Blatt quer. Du überlegst nun:

  • Was ist dein Thema
  • Welche Stichworte hast du?
  • Unter welchen Themen können deine Inhalte zusammengefasst werden?
  • Wie können deine Texte strukturiert werden?

Wie so eine Überlegung aussehen könnte zeige ich am Beispiel einer Ernährungsberatung:

Nun überlegst du:

Wie könnten die Seiten benannt werden?

Denk hier schon an das SEO, indem du im Titel wichtige Keywords für dein Thema einbaust.
Wie könnten die Menüpunkte lauten, die zu den jeweiligen Seiten führen?
Mach es deinen Besuchern so einfach und eindeutig wie möglich.
Auf welchen Seiten können deine Inhalte aufgeführt werden?
Sei bei der Benennung der Menüpunkte so kurz und konkret wie möglich.

Je kürzer, konkreter und eindeutiger der Menüpunkt, desto besser. Keine Phantasiebegriffe, sondern Bekanntes. Und wenn der Menüpunkt bereits ein Keyword ist – noch besser.

  • Reicht ein Menü oder müssen Untermenüs erstellt werden?
  • Welche Seiten bzw. Inhalte sind am wichtigsten, welche müssen zuerst gesehen werden?
  • Welche Inhalte sind untergeordnet und können deshalb in ein Untermenü?
  • Sieh dir andere Websites an.

Jetzt werden auf deinem Blatt wahrscheinlich einige Kästchen sein und Striche, die die einzelnen Kästchen verbinden. Die Skizze gleicht eher einer Mindmap.

In der folgenden Skizze siehst du ein Beispiel, wie die Website der Ernährungsberaterin grob strukturiert sein könnte. Was genau du hier schreibst hängt natürlich von deinem Angebot ab.

Wichtig ist: Oben hast du die wichtigsten Seiten. Sie sind gleichzeitig die Menüpunkte.

In dieser Skizze siehst du 5 Menüpunkte:

  • Start (die Startseite)
  • Leistungen
  • Ablauf
  • Über mich
  • Kontakt

Drei der Seiten führen zu weiteren Seiten. Die blauen Kästchen im Bild (grün umrahmt) stehen für Seiten, die in einem sogenannten Submenü bzw. Pull-Down-Menü stehen. Dies ist sinnvoll, wenn nicht alle Links im obersten Menü passen. Hinweis: Mehr als 7 Menüpunkte sollte das Hauptmenü nicht haben.

Die Skizze zeigt:

  • die Titel deiner Seiten,
  • die Verteilung der Seiten auf deiner Website, also die Hierarchie der einzelnen Seiten,
  • die Inhalte der einzelnen Seiten, stichwortartig.

Schritt 4
Strukturiere deine Texte in einzelne Elemente

Du hast jetzt eine Übersicht deiner gesamten Website.

Je nachdem, wie konkret du vorgehst, hast du bereits die einzelnen Seiten der Website.

Jetzt gehst du ins Detail:

Wie sollen die Seiten strukturiert werden?

Dazu musst du wissen:

Deine Texte sind nicht der einzige Inhalte auf deinen Seiten (hast du Bilder oder PDF-Dokumente?)
Es ist sinnvoll, wenn du deine Texte nochmal überprüfst: Gehört das, was ich „Über mich“ geschrieben habe, wirklich nur auf die Seite „Über mich“? Oder kann ein Teil bereits auf die Startseite? Wie kann ich die Texte gliedern?
Habe ich einen Newsletter? Wie sollen die KundInnen mit mir Kontakt aufnehmen?
Jede Seite hat ihre eigene Seitenarchitektur

Eine Startseite hat andere Anforderungen als eine Angebotsseite. Je nach Inhalten und Aufgabe der Seiten musst du die Texte anders strukturieren. Die unterschiedlichen Texte der Startseite sollten nur kurz sein und besonders übersichtlich sein. Auf der Startseite erhalten die BesucherInnen die erste Orientierung der gesamten Website.

Überlege: Was will ich mit der Startseite erreichen? Wenn du an E-Mailmarketing denkst: In dem Fall sollte auf die Startseite unbedingt mindestens 1 Call-to-Action (also ein Button, der zu einer Handlung aufruft), besser 2 oder 3 CtA. Und vielleicht auch auf anderen Seiten deiner Website.

Geh in dein Worddokument (oder wo auch immer du deine Texte hast) und schau sie in Ruhe an. Überlege, ob die Aufteilung so richtig ist, ob und wie du einzelne Texte inhaltlich gliedern kannst.

Sind deine Texte stellenweise sehr lang?
Teile sie auf in appetitliche und einfach zu verdauende Happen. Wir Menschen sind von Natur aus bequem, das Lesen langer Textpassagen auf dem PC ist eher die Ausnahme. So wie jetzt, weil du unbedingt meinen Plan kennenlernen möchtest 😉

Mit einer Strukturierung deiner Seite machst du es deinen Besuchern leichter, deine Inhalte zu lesen. Und mit einer ansprechenden Gestaltung und kurzen Textbrocken „führst“ du deine Besucher auf deiner Seite.

Website Konzept

Schritt 5
Die Strukturierung der Seiten ist das Finetuning in deinem Konzept

Jetzt kommt der Clou der Planung: Damit du bei der technischen Umsetzung nachher in WordPress (oder anderen Systemen) nicht ständig grübeln musst, welchen Text und welches Bild du wohin setzt, machst du dir nun eine schematische Struktur jeder einzelnen Seite.

Bei dieser Arbeit darfst du kreativ sein – doch nicht zu kreativ. Die Seiten sollten einem bekannten Schema folgen (Stichwort „Userbility“).

Die Strukturierung machst du entweder mit Papier und Stift. Oder, wenn du gut mit Grafik- oder Schreibprogrammen umgehst, kannst du diese Struktur auf dem PC machen.

Es ist wurscht, ob du einen Stift oder die Maus in die Hand nimmst.

Für die PC-Freaks erkläre ich weiter unten, wie das geht.

Nimm dir wieder ein Blatt Papier (DinA4) und deinen Stift.

Die Seite nimmst du diesmal im Hochformat.
Dann zeichnest du auf das Blatt mehrere Kästchen.
Zeichne die Kästen in der Breite deiner Papierseite.

Jeder Kasten steht für ein Seitenelement mit seinen Textbausteinen. Oder anderen Bausteinen, wie z.B. Produktbilder etc.

Plan

Aufbau und inhaltliches Konzept deiner Webseite: die Seitenelemente

Eine sehr einfache Seite einer Website kann sich in 3 Bereiche gliedern. Es gibt auch andere Möglichkeiten einer Gliederung. Hier zeig ich dir eine Strukturierung, wie sie am häufigsten für kleine Websites zu sehen ist. Nicht ohne Grund, denn diese Struktur hat sich bestens bewährt und ist tausendfach erprobt (Stichwort Usability, ein Artikel dazu folgt später).

Die Bereiche:

  • Header
  • Content
  • Footer

Und diese 3 Bereiche skizzierst du jetzt auf dein Blatt Papier, indem du ihnen Inhaltsbereiche zuordnest:

  • 1 Kasten für den Header
  • 3 bis 5 Kästen für den Content
  • 1 Kasten für den Footer

In die einzelnen Kästen notierst du, welche Inhalte rein sollen.

Header:
Wie der Name Header andeutet: Dieser Bereich ist der Anfang einer Webseite.

Hast du bestimmt schon häufig gesehen: Am Anfang, ganz oben einer Seite, siehst du ein horizontales Menü, dass dich auf die Seiten führt. Hier steht meistens auch ein Logo.

Sinnvollerweise notierst du hier deine Menüpunkte.

Häufig sieht man unter dem eigentlichen Header (unter dem Menü) ein großes Bild. Derzeit gibt es den Trend, dieses Bild – das Headerbild oder auch Heroimage – in der gesamten Breite des Browserfensters anzulegen. Das Bild dient u.a. dazu, auf die Seite einzustimmen. Denn, wie du weißt: Ein Bild sagt mehr als 1.000 Worte. Gleichzeitig soll es eine grobe Orientierung bieten: Was wird auf dieser Website geboten?

Auf dem Bild steht eine Überschrift oder ein Slogan. Wichtig ist der Zweck dieser Headline: Sie soll in möglichst 3 Sekunden deutlich machen, was du anbietest. Vielleicht steht auf dem Bild auch ein Button mit einer Aufforderung (z.B. die Möglichkeit, sich zum Newsletter anzumelden). Natürlich kannst du den Kopfteil der Webseiten auch anders gestalten. Das horizontale Menü oben ist aber auf jeden Fall sinnvoll (abgesehen von Landingpages, die kein Menü erhalten sollten).

Content:
Hierhin kommt der eigentliche Content, dein Text und deine Bilder. Diesem Contentbereich kannst du mehrere Kästchen geben, damit du deine unterschiedlichen Bereiche hast. Die Appetithäppchen, du weißt schon…

Diese Elemente solltest du gut überlegt auf der Seite anordnen. Dazu später.

Footer:
Jeder Anfang hat ein Ende: Der Footer ist, wie der Name erahnen lässt, der Fuß, das Ende, der Abschluß einer Seite.

Hier steht häufig eine Kontaktangabe, die Wiederholung des Menüs von oben (häufig ein reduziertes Menü mit den wichtigsten Seiten), ein Kontaktformular, eine Handlungsaufforderung. Oder was auch immer, das entscheidest du. Hierhin stellst du, was du „zum Abschied“ sagen möchtest.

Sinnvoll sind hier Impressum und Datenschutzhinweis. Denn beides ist eine Pflichtangabe und darf auf keinen Fall fehlen. Diese Angaben sind mehr für die Anwälte und Datenschützer wichtig, weniger für deine Besucher. Deshalb sind diese Angaben gut im Footer aufgehoben. Du kannst das Impressum auch in die sogenannte Fußleiste stellen, das ist eine schmale bzw. niedrige Leiste unter dem eigentlichen Footer.

Dein Content: Meine Tipps zur Aufteilung deiner Seiten

Wo Header und Footer erscheinen ist klar.

Wie du gelernt hast kann dein Content unterschiedliche Aussagen und Aufgaben haben. Deshalb ist es sinnvoll, sich über eine Aufteilung des Contents (Texte und Bilder) Gedanken zu machen.

Die Reihenfolge der Elemente

Für den Inhalt deiner Kästchen im Contentbereich stellst du dir vor, was deine Besucher zuerst lesen sollen. Die Reihenfolge ist nicht unwichtig, denn du möchtest, dass deine Besucher neugierig sind, auf deiner Seite bleiben und ganz nach unten scrollen.

Wie bringe ich Abwechslung auf meine Seite

Stell dir die Frage: Mit welchen Inhalten kann ich meine Besucherin so neugierig machen, dass sie auf meiner Seite bleibt? Mit welchen Inhalten bring ich die Besucherin dazu, nach unten zu scrollen, also die nicht sichtbaren Bereiche meiner Seite anzusehen?

Gibt es Inhalte, die auf jeden Fall im Viewport zu sehen sein sollen? (Viewport ist das, was dein Browserfenster von einer Website zeigt, ohne dass du scrollen musst).

Du findest heraus: Hab ich für meine Besucherin ein Versprechen, eine Lösung eines Problems? Wie gewinne ich das Vertrauen der Besucherin?

Und wenn der Besucher nach unten scrollt: Welche Inhalte haben Priorität? Was kann ganz nach unten, was sollte möglichst oben zu sehen sein, also ohne langes Scrollen? Wo sollte eine Handlungsaufforderung stehen?

Sei kreativ. Aber nicht nur kreativ. Auch ein wenig Einfühlungsvermögen und Verständnis für die Lesegewohnheiten von Menschen ist wichtig. Und ein wenig Psychologie kann an dieser Stelle sowieso nicht schaden.

Zusätzlich zum Text überlegst du, ob und wo du Fotos oder Grafiken einsetzt. Damit kannst du deine Seiten aufpeppen: Abhängig natürlich von deinem Angebot, von deinem Produkt. So machst du es deinen Besuchern leichter. Und sie werden es dir danken, indem sie bis an Ende der Seite scrollen und alles lesen.

Wichtig auch für Suchmaschinen bzw. für die Auffindbarkeit deiner Site in Google: Je länger deine Besucher auf deiner Seite sind, desto wichtiger ist deine Seite für Google, umso besser dein Ranking in Google…

Wie oben beschrieben gehst du Seitenelement für Seitenelement vor.

Und du schreibst in jedes Kästchen die wichtigsten Aufgaben des Elements. Soll oben z.B. ein Header mit Hintergrundbild, etwas Text und ein Button, dann schreib das in das Kästchen.

Hat dein Contentbereich ein großes, wichtiges Bild: aufschreiben.
Soll unter das große Bild ein Text: aufschreiben.

Das machst du für jede Seite.
Damit hast du eine gute Struktur und Übersicht.

Diese Struktur ist quasi die Blaupause für deine Webseite.

Statt einer Handzeichnung kannst du die Struktur wie gesagt in einem Programm machen. Sieht schicker aus und du kannst immer wieder ändern, falls du eine andere Idee hast.

Wie du das am PC machst erkläre ich am Schreibprogramm Page (das geht auch mit Word oder Excel):

In Page erstellst du ein neues Dokument.

Auf der leeren Seite fügst du jetzt mehrere Tabellen untereinander ein. Jede Tabelle entspricht einem Seitenelement. Den Tabellen gibst du einen Rahmen (damit du die „Elemente“ siehst).

Die Tabelle kann aus nur einer Zeile und einer Zelle bestehen. Falls ein Element unterschiedliche Text- oder Bildelemente haben soll, gibst du der Tabelle einfach mehrere Zellen und Zeilen.

Seitenplan ConstanzeStraub

Falls du gern bastelts ein weiterer super Tipp:

  • Druck die einzelenen Elemente deines Contens aus.
  • Schneide dann die Elemte aus
  • Lege die Elemente auf den Fußboden (oder Tisch)
  • Nun kannst du spielerisch und frei deine Elemente so lange schieben, bis du damit zufrieden bist.

Und wenn du fertig bist, schnappst du dir einen Klebestift und klebst die Elemente aneinander. Bis du eine „gescrollte“ Website als Ansicht hast. Das hilft ungemein, denn auf dem PC siehst du ja immer nur ein Teil der Website bzw. des Entwurfs. Was ziemlich schnell verwirren kann.

Ich spreche aus eigener Erfahrung. Du hast jetzt ein Konzept für deine Website, einen konkreten Plan, der dich sicher durch die Arbeit an deiner Website führt. Wenn du mal nicht weiter weist, schau dir einfach deinen Plan an.

Das ist die wichtigste Basis deiner Website.

Wenn du Fragen zur Gestaltung deiner Website hast lies hier:
9 Fehler bei der Gestaltung einer Website