Tipps für die Gestaltung
deiner Website-Inhalte

Tipps, die die Gestaltung deiner Website-Inhalte verbessern.

1. Baue deine Seiten gleichbleibend nach festen Regeln auf.

Ja, so ein eigentlich selbstverständlicher Allerwelts-Tipp gleich am Anfang. ;-)
Mach dir den Aufbau bewusst, den die Seiten haben sollen bzw. den bisherige Seiten schon haben. Welchen roten Faden gibt es? Ist zum Beispiel oben immer ein großes Bild und ein auffälliger Einleitungstext platziert? Welche Regeln gibt es, die auf allen Seiten eingehalten werden?

Du kannst auch verschiedene Darstellungen der Inhalte als Module betrachten, die immer nach dem gleichen Prinzip aufgebaut sind und die du je nach Bedarf auf deinen Seiten anders kombinieren kannst.

Ordne Inhalte innerhalb dieser Module an und geh nicht einfach zufällig mit der Darstellung von neuen Inhalten um.
Und versuche, Inhalte gleicher Art immer gleich darzustellen. Wenn du in einem Artikel auf ein dazu passendes Produkt hinweist, zum Beispiel in einem leicht farbig hinterlegten Kasten, dann mach das auf anderen Seiten auch immer genau so. Dann können sich Besucher leichter orientieren und Inhalte thematisch zuordnen.

2. Versuch regelmäßig die Sicht des Besuchers / der Besucherin einzunehmen.

Diesen Tipp hast du bestimmt schon oft in Bezug auf deine Website gehört aber wendest du ihn schon konkret an?
Nimm beim Überprüfen deiner gestalteten Inhalte immer mal wieder die Sicht eines Besuchers ein.

Stell dir vor, jemand anderes (dein Website-Besucher) sieht die Seite zum ersten Mal an. Oft fallen dabei Details auf, die du noch verbessern kannst. Zum Beispiel, dass der Button zu deinem Angebot oder zu einer weiterführenden Seite viel zu unauffällig ist und ein Besucher diesen vielleicht gar nicht auf den ersten Blick findet. Oder du stellst fest, dass zu viele Auszeichnungen und Überschriften miteinander konkurrieren und jemand, der die Seite noch nicht in- und auswendig kennt, damit überfordert sein könnte.

Beobachte auch, wie du selbst dich auf Websites von anderen verhältst und was dich dort stört oder anspricht. Und nutze diese Erfahrungen für die Gestaltung deiner Inhalte.

3. Erkenne den Wert von Details.

Häufig sehe ich auf den Websites von anderen Selbstständigen gestalterische Kleinigkeiten, die etwas holperig aussehen oder einfach nicht konsequent durchgezogen wurden.

Das kommt auf ›gewachsenen‹ Websites vor, weil sich im Laufe der Zeit Zufälligkeiten eingeschlichen haben aber auch auf Anfänger-Websites, die noch etwas laienhaft mit Leben gefüllt wurden.

• Eine Überschrift ist versehentlich größer als die anderen Überschriften der gleichen Kategorie.
• Oder es wird an manchen Stellen eine andere Schriftart genutzt, die nicht zur Logik der restlichen Darstellung passt.
• Bilder wurden in einer zu kleinen Größe eingebunden und sehen etwas verschwommen aus.
• Manchmal haben wichtige Buttons runde Ecken und manchmal nicht, obwohl es keinen Grund dafür gibt.

Du hast dir beim Anlegen der Inhalte vielleicht nichts dabei gedacht.
Aber solche Details machen oft genau den Unterschied, der Websites etwas ›selbstgebastelt‹ oder stimmig und professionell wirken lässt. Es sind die Details, die dafür sorgen, dass die Website insgesamt vertrauenswürdig wahrgenommen wird und die Erwartungen der Besucher eher übertrifft als enttäuscht.

4. Weniger ist mehr.

Wenn du unsicher bist und noch nicht so viel trainiert hast, deine Website-Inhalte zu gestalten, begrenze dich selbst und halte es im Zweifelsfall einfach. Auch wenn es dir vielleicht etwas eintönig vorkommt. Das ›gewisse Etwas‹ und Aufmerksamkeitsverstärker kannst du später immer noch hinzufügen. Und schon ein ansprechendes Bild oder einige gute Zwischenüberschriften lockern ein zu gleichförmiges Gesamtbild schnell wieder auf.

Oft erlebe ich bei meinen KundInnen, dass sie irgendwie unzufrieden sind, weil sie das Gefühl haben, sie müssten irgendetwas Besonderes mit den Inhalten anstellen. Aber das muss gar nicht unbedingt sein.

Geh erst einmal vom Inhalt aus und sorge dort für Qualität. Hier gibt es Tipps für gute Inhalte. Die Gestaltung ergibt sich dann leichter, weil es darum geht, die Inhalte sinnvoll in Szene zu setzen.

5. Schau dir deine Inhalte auf verschiedenen Geräten an.

Dein Inhalt sieht auf dem großen Bildschirm schon ziemlich ansprechend aus. Glückwunsch. Allerdings wächst die mobile Nutzung des Internets. Viele Besucher kommen vielleicht mit einem Smartphone auf deine Website. Vielleicht sind es sogar schon mehr als diejenigen mit einem großen Bildschirm. Und erfahrungsgemäß ist die Darstellung auf mobilen Geräten nicht immer vom System schon optimal vorbereitet.

Hier gibt es also durchaus Potential deine Inhalte noch anzupassen und zu optimieren. Auf dem kleinen Bildschirm kannst du auch sehr gut überprüfen, ob deine Inhalte einfach konsumierbar sind und trotz der begrenzten Darstellungsmöglichkeiten gut funktionieren.

6. Trainiere und probiere aus.

Gestalten ist weniger ein exklusives kreatives Talent als vielmehr regelmäßiges Training.

Also geh bitte nicht mit der Einstellung daran, dass du so etwas einfach nicht kannst. Du kannst es vielleicht NOCH nicht. Aber das ist ein Riesenunterschied.

Akzeptiere, dass dir die Ergebnisse am Anfang vielleicht überhaupt noch nicht gefallen. Nicht direkt am Anfang sieht alles harmonisch und toll aus. Auch nicht bei mir. Aber wenn du gar nicht erst trainierst und es nicht ausprobierst, wirst du vielleicht immer unzufrieden bleiben und die Ergebnisse können mit der Zeit nicht besser werden.

7. Gewichte die Inhalte durch die Gestaltung.

Frag dich, welche Inhalte auf der jeweiligen Seite am wichtigsten sind oder an welchen Stellen Besucher hängen bleiben sollen. Auf welche Inhalte und Botschaften möchtest du besonders aufmerksam machen? Gewichte diese Inhalte optisch, indem du sie beispielsweise mit einer Hintergrundfarbe abgrenzt, größer machst oder durch ein grafisches Element (ein Icon oder einen Trennstrich) hervorhebst.

Aber geh bitte auch nicht zu inflationär mit Hervorhebungen um. Hervorhebungen können nur wirken, wenn es als Gegenstück auch ausreichend zurückhaltendere Elemente gibt.

Zur Erinnerung:
Gestaltung ist mächtig, wenn es darum geht, wie Besucher deine Website bewerten.

Wenn deine Besucher die Website holprig, hässlich oder unprofessionell finden und sich nicht schnell zurechtfinden, verlassen sie die Website vielleicht schon wieder, bevor du sie mit den Inhalten überzeugen konntest. Lies dazu auch meinen Blog-Artikel Was du dir zu deinen Website-Besuchern schönredest.

Noch Konkreter: Tipps für die Gestaltung von Inhalten im Editor.

Die Tipps waren jetzt noch etwas mehr auf einer Meta-Ebene. Jetzt schauen wir, was du ganz konkret im Editor für die Gestaltung tun kannst, um deine Inhalte attraktiv, nutzerfreundlich und verständlich zu gestalten.

1. Nutze Abstände und Weißraum.

Mein absoluter Lieblingstipp!
Wenn Inhalte keine ausreichenden Abstände zueinander haben, sieht die Seite schnell unübersichtlich und etwas vollgestopft aus. Vielleicht auch ohne, dass es dir bewusst auffällt.

Abstände helfen dem Besucher deutlich zu erkennen, welche Elemente zusammengehören und wo ein neuer Abschnitt anfängt. In der Gestaltung kennt man das auch als das ›Gesetz der Nähe‹.

Mir begegnet dieser Fehler auf Websites recht häufig und es kribbelt mich dann immer in den Fingern, für Platz und Freiraum zu sorgen. Auch in der mobilen Ansicht, wenn alle Inhalte linear untereinander folgen, tun Abstände gut. Wenn es keine deutlichen Abstände gibt, ist man nämlich plötzlich nicht mehr sicher, ob zum Beispiel ein Bild eigentlich zum Text darunter oder darüber gehört. Alles wirkt gleichwertig zusammenhängend, man weiß nicht mehr wo etwas aufhört oder etwas neues anfängt.

Die Inhalte entfalten durch den Platz viel mehr Wirkung und das Auge findet sich leichter zurecht. Abstände und Weißraum sind also definitiv kein verschenkter Raum.

Im WordPress-Editor gibt es einen passenden Block ›Abstandshalter‹ dafür. Aber auch Container-Blöcke lassen sich mittlerweile zielgerichteter mit Abständen einstellen (padding und margin).

2. Setze Bilder und Grafiken als Verstärker und zur Auflockerung ein.

Wenn dein Inhalt noch etwas eintönig wirkt und die eigentlich interessanten Texte gar nicht so richtig rüberkommen, lockern Bilder oder Grafiken das Layout auf.

Bilder sind Blickfänger, bringen Abwechslung und es macht einfach mehr Spaß als nur ›Textwüsten‹ durchzuscrollen. Aber sei auch hier achtsam und nutze Bilder gezielt und nicht inflationär. Besucher merken meist auch, wenn ausschließlich oberflächliche Stockfotos genutzt werden.

Um Einheitlichkeit zu erzeugen, ist es zudem super, wenn die im Inhalt verwendeten Bilder und Grafiken alle das gleiche Format / Seitenverhältnis haben. Zum Beispiel quadratisch oder 3 : 2.
Grafische Icons setze ich zudem gern alle auf die selbe Pixelgröße, damit die Icons immer gleich groß wirken.

3. Strukturiere Texte in angenehme Häppchen.

Nicht nur Suchmaschinen lieben Zwischenüberschriften und gut strukturierte Inhalte. Auch Besucher freuen sich über angenehme Textportionen und gute Überschriften, um den Text leichter ›scannen‹ zu können. Was angenehm und passend ist, hängt immer vom Kontext ab. Frag dich auch hier hier im Zweifelsfall wieder, wie würdest du selbst gern den Text lesen.

Setze Auszeichnungen und Überschriften logisch und möglichst konsequent ein und nicht irgendwie zufällig. Vergleiche deine Seiten und Inhalte miteinander, um zu prüfen, ob ein Muster bzw. ein Rhythmus in deinen Texten erkennbar bleibt.

4. Verbessere die Lesbarkeit durch genügend hohe Kontraste und Schriftgrößen.

Ab und zu begegnen mir bei der Recherche Websites, bei denen die Schriftgröße zu klein ist und/oder der Grauwert der Textes zu gering ist. Der Text hebt sich zu wenig vom Hintergrund ab, weil der Kontrast zu gering ist.

Und auch wenn ich verstehen kann, dass man gern ein elegantes Grau auf einen leicht beigen Hintergrund setzten möchte, damit alles schön dezent ist: Lesbarkeit geht vor. Und dafür sollte der Kontrast hoch genug sein und die Schriftgröße auch angenehm großzügig.

Fließtextgrößen auf Desktop-Bildschirmen sollten ca. zwischen 18 und 22 Pixel liegen. Auf mobilen Geräten kann der Wert etwas verkleinert werden, damit es noch angenehme Zeilenlängen gibt.

Apropos Zeilen: Die Zeilenlänge eines Textblocks sollte auch nicht einfach mal bis zum Bildschirmrand laufen. Nur etwas bis zu 80 Zeichen pro Zeile ergeben eine angenehme Lesbarkeit, damit das Auge mit wenig Mühe von einer Zeile in die nächste wechseln kann (so wie hier).

Darum ist meine Rolle als Designerin auch bei weitem nicht überflüssig, nur weil jeder mit Hilfe von Tools selbst zum Designer seiner Inhalte wird. Es kommt immer noch auf den Anwender, also auf dich und mich an. Es kommt auf Feingefühl und inhaltliche Auseinandersetzung an. Apropos inhaltliche Auseinandersetzung: Dazu findest du hier den passenden Blog-Artikel Tipps für gute Website-Inhalte.

Es ist wichtig, zwischendruch die Sichtweise deiner Website-Besucher einzunehmen und die eigenen Fertigkeiten weiterzuentwickeln und zu trainieren.

Von welchem Startpunkt startest du beim Bearbeiten deiner Website?

Mein vielleicht wichtigster Tipp zum Schluss:
Wenn du mehr oder weniger auf dich gestellt deine Website-Inhalte pflegen und gestalten willst, bleib hartnäckig und hab Geduld mit dir. Sei nicht zu streng mit dir, wenn die Gestaltung am Anfang bescheiden aussieht und deinen Ansprüchen noch nicht genügt.

Ich kenne den Zustand von mir selbst (ja, wirklich, ich bin auch niemand, bei dem sofort alles perfekt aussieht) und von meinen KundInnen natürlich auch. Das ist ganz normal und kein Beweis dafür, dass du einfach unfähig oder untalentiert bist.

Wenn du feststeckst oder überfordert bist.

Wenn du aber länger steckenbleibst oder das Gefühl hast, dass das Projekt Website dich in seiner Gesamtheit zu sehr überfordert, überleg dir, ob gezielte Unterstützung der passende Weg für dich sein könnte. Als Designerin setze ich mit dir die Design-Basis deiner Website auf. Und dadurch, dass ich deine Inhalte für den ersten Stand der Website gestalte, bekommst du eine optimale Grundlage.

Du hast dadurch sozusagen eine Schablone für die weitere Gestaltung und Pflege und startest nicht einfach bei null.
Und ich helfe dir beim Einstieg in die Bearbeitung (mit WordPress als Redaktionssystem), damit du in Zukunft nicht abhängig sondern in der Lage bist, selbst weiterzumachen. Check dafür gern meine Design-Pakete aus.