Teil 2
Das ist der zweite Teil meiner Website Redesign Dokumentation.
Falls du neu hier bist, empfehle ich dir beim ersten Teil anzufangen: Wie bereite ich mich auf ein Website Redesign vor?

Teil 2
Das ist der zweite Teil meiner Website Redesign Dokumentation.
Falls du neu hier bist, empfehle ich dir beim ersten Teil anzufangen: Wie bereite ich mich auf ein Website Redesign vor?

Artikel Übersichtsseite Teaser

Dieses Jahr habe ich intensiv versucht meine Website nicht nur als Präsentationsfläche zu nutzen, sondern auch eine richtige Lernplattform daraus zu machen. Ich wollte meine Erfahrungen als Webdesigner mit anderen teilen und auf diesem Wege auch neue Kunden anlocken.

Auch für mein Ziel, bei Suchmaschinen vorrangig aufzufallen, brauchte meine Homepage regelmäßig Veränderungen. Und jede Woche tausende neue Wörter zu veröffentlichen, waren die perfekte Grundlage dafür.

Dieser Blog gibt mir die Möglichkeit, alles, was ich gelernt habe, weiterzugeben und mich jede Woche erneut, intensiv mit Designthemen zu beschäftigen.

Bevor ich angefangen habe zu schreiben, war es für mich innerlich immer wie ein Staudamm. Ich hatte so viele gute Gedanken zu verschiedenen Designthemen, die ich zwar ab und zu in einem Gespräch mit anderen teilte, aber nie wirklich festhalten konnte. Jede Woche regelmäßig zu schreiben, half mir definitiv diese Blockade zu lösen. Jetzt ist es zu meiner Gewohnheit geworden und gehörte ganz klar zu meinem alltäglichen Arbeitsleben dazu.

Ich weiß, dass es ein langer Prozess ist, eine ordentliche Reichweite durch selbst geschriebene Beiträge zu bekommen, aber auf lange Sicht wird er sich für mich auszahlen.

Und in gewisser Weise hat es das auch schon. Es gibt viele, die sich für meine Artikel interessieren und sich in meinen Newsletter eingetragen haben. Und genau für dieses Publikum habe ich jetzt einige Verbesserungen parat.

Was waren meine neuen Ziele auf der Artikel Übersichtsseite?

  • Neue Besucher sollten direkt die Möglichkeit haben, meine besten Beiträge zu finden, ohne sich erst durch die Pagination klicken zu müssen
  • Ich wollte ein Aufbau, der auch Bilder integriert → Warum habe ich sonst zu jedem Beitrag ein Teaserbild vorbereitet?
  • Beiträge sollten schon auf der Übersichtsseite gefiltert werden können → Kategorien
  • Generell die Leserlichkeit und das Schriftbild verbessern

Das Layout und die Inhalte gestalten

Hier ist ein Screenshot von der Artikel-Übersichtsseite der alten Website:

Blog Übersicht alte Website

Das alte Layout war sehr schlicht und einfach gehalten. Es hatte die Informationen, die man für eine Artikel-Übersichtsseite braucht und zeigte auch alle Blogbeiträgen sinnvoll an. Aber irgendwie hat das gewisse Etwas gefehlt.

Zudem war es anstrengend für Besucher, nur über Headlines zu entscheiden, welchen Beitrag sie lesen möchten. Viele können sich leichter und vor allem schneller entscheiden, wenn sie ein Bild zu einem Beitrag sehen.

Um dir schneller ein Bild von meinem gestalterischen Prozess zu geben, habe ich in den folgenden Bildern die Änderungen grob beschrieben:

Blog Layout 1
Das erste Layout orientierte sich zu stark an der alten Website. Ich wollte mit dem Redesign zwar nicht zu viel Veränderungen einführen, aber in diesem Fall musste ich definitiv einen neuen Schritt gehen.
Blog Layout 2
Die integration von Bildern gibt dem ganzen einen neuen Look und lockert das Layout auf. Auch die gleichen Schriftgrößen von Headline und Subline helfen, eine Zugehörigkeit darzustellen. Die Filterfunktion ist deutlich zu erkennen und verleitet Besucher dazu, eine Kategorie zu wählen. Was mich immer noch nicht zufriedenstellte, war der Einleitungstext und die beliebtesten Beiträge. Ich wollte, dass die Besucher direkt etwas vom Blog sehen. Der Einleitungstext nahm deshalb einfach zu viel Platz in Anspruch.
Blog Layout 3
Die beliebtesten Beiträge ganz oben anzuzeigen und stattdessen den Einleitungstext wegzulassen, war zuerst ungewohnt, dann aber eine logische Entscheidung (wie ich weiter unten beschreibe). Auch vom Look her ist es ein Stil, der auch auf anderen Seiten vorkommt und deshalb auch an dieser Stelle passt.

Warum lege ich so viel Wert darauf, die beliebtesten Beiträge so prominent zu zeigen?

Ursprünglich war nur ein „Top 10“ Störer geplant, der neue Besucher direkt zu meinen beliebtesten Beiträgen führen sollte. Die Idee war gut, nur gab es ein Problem: Anstatt die besten Beiträge direkt anzuzeigen, wurde man auf eine neue Seite weitergeleitet. Das bedeutete einen Klick mehr und demzufolge auch eine längere Wartezeit.

Es ist sowieso schon nicht einfach, neue Besucher auf der Seite zu „halten“. Zu viele springen nach wenigen Sekunden ab. Wenn ich es also nicht schaffe, sie mit einem Beitrag zu „fangen“, kommen sie womöglich nie wieder. Und die Chance war größer, dass das funktioniert, indem ich ihnen direkt die beliebtesten Beiträge anzeige, wie wenn ich sie vom Geschehen weg leite.

Denn was will ein neuer Besucher sehen, der noch nie vorher auf meinem Blog gewesen ist? Das Beste, dass ich zu bieten habe!

In den Analytics Statistiken konnte man deutlich erkennen, wie das Verhalten meiner Besucher bisher war

Auf meinem Blog gibt es die folgenden zwei Besuchergruppen:

  1. Wiederkehrende Besucher: Diese kommen meistens durch meinen Newsletter auf die Seite. Sie gelangen also direkt auf einen neuen Beitrag und schauen sich die Artikel Übersichtsseite nur selten an, da sie diese auch schon von einem früheren Besuch kennen. Für sie ist die Detailseite wichtiger als die Übersichtsseite.
  2. Neue Besucher: Diese kommen von einer Suchmaschine oder über Soziale Netzwerke auf meinen Blog. Auch hier ist zu erkennen, dass sie meistens direkt auf einen Beitrag gelangen, und nicht auf die Blog Übersichtsseite. Erst wenn ihr Interesse durch den Beitrag geweckt ist, schauen sie sich weiter um und wollen eine Übersicht von anderen Beiträgen sehen. Da es mein Ziel ist, genau diese neuen Besucher für mich zu gewinnen, zeige ich ihnen zuerst meine stärksten Beiträge.

Wie entscheide ich, welche Beiträge die besten sind?

Diese entstehen durch Statistiken aus Google Analytics und eigenen Entscheidungen. Es ist sozusagen ein Mix aus „das gefällt vielen“, deshalb gefällt es einem neuen Besucher vermutlich auch und Beiträgen (oft aktuellere), die gut sind, aber noch nicht lange genug auf Google gelistet werden.

Weitere kleine Veränderungen

  • Journal in Blog geändert → Blog ist vertrauter und besser zu merken. Ich kommuniziere auch weiterhin noch ab und zu Journal, aber nutze Blog in der Hauptnavigation.
  • Beiträge, die in den Top 10 sind, werden auch als „Top Story“ in der Artikelübersicht hervorheben.
  • Top Stories erhalten als „spezielle Beiträge“ ein Teaserbild.
  • Die Kategorie eines Beitrags steht jetzt auch in der Metabeschreibung und ist auch als Filter klickbar → Mehr Beiträge aus der Kategorie anzeigen.
  • Die Pagination hat sich verändert (siehe auch: Mein Designprozess zur optimalen Pagination):
Website Pagination Überarbeitet


Portfolio Redesign: Blog Artikel Übersichtsseite erstellen
  • Dieser Beitrag enthält eine Podcastfolge!

    Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.

  • Dieser Beitrag enthält ein Video!

    Das Video wird dir auf Patreon freigeschalten.

Diesen Beitrag als Podcast hören

Artikel Übersichtsseite Teaser

Dieses Jahr habe ich intensiv versucht meine Website nicht nur als Präsentationsfläche zu nutzen, sondern auch eine richtige Lernplattform daraus zu machen. Ich wollte meine Erfahrungen als Webdesigner mit anderen teilen und auf diesem Wege auch neue Kunden anlocken.

Auch für mein Ziel, bei Suchmaschinen vorrangig aufzufallen, brauchte meine Homepage regelmäßig Veränderungen. Und jede Woche tausende neue Wörter zu veröffentlichen, waren die perfekte Grundlage dafür.

Dieser Blog gibt mir die Möglichkeit, alles, was ich gelernt habe, weiterzugeben und mich jede Woche erneut, intensiv mit Designthemen zu beschäftigen.

Bevor ich angefangen habe zu schreiben, war es für mich innerlich immer wie ein Staudamm. Ich hatte so viele gute Gedanken zu verschiedenen Designthemen, die ich zwar ab und zu in einem Gespräch mit anderen teilte, aber nie wirklich festhalten konnte. Jede Woche regelmäßig zu schreiben, half mir definitiv diese Blockade zu lösen. Jetzt ist es zu meiner Gewohnheit geworden und gehörte ganz klar zu meinem alltäglichen Arbeitsleben dazu.

Ich weiß, dass es ein langer Prozess ist, eine ordentliche Reichweite durch selbst geschriebene Beiträge zu bekommen, aber auf lange Sicht wird er sich für mich auszahlen.

Und in gewisser Weise hat es das auch schon. Es gibt viele, die sich für meine Artikel interessieren und sich in meinen Newsletter eingetragen haben. Und genau für dieses Publikum habe ich jetzt einige Verbesserungen parat.

Was waren meine neuen Ziele auf der Artikel Übersichtsseite?

  • Neue Besucher sollten direkt die Möglichkeit haben, meine besten Beiträge zu finden, ohne sich erst durch die Pagination klicken zu müssen
  • Ich wollte ein Aufbau, der auch Bilder integriert → Warum habe ich sonst zu jedem Beitrag ein Teaserbild vorbereitet?
  • Beiträge sollten schon auf der Übersichtsseite gefiltert werden können → Kategorien
  • Generell die Leserlichkeit und das Schriftbild verbessern

Das Layout und die Inhalte gestalten

Hier ist ein Screenshot von der Artikel-Übersichtsseite der alten Website:

Blog Übersicht alte Website

Das alte Layout war sehr schlicht und einfach gehalten. Es hatte die Informationen, die man für eine Artikel-Übersichtsseite braucht und zeigte auch alle Blogbeiträgen sinnvoll an. Aber irgendwie hat das gewisse Etwas gefehlt.

Zudem war es anstrengend für Besucher, nur über Headlines zu entscheiden, welchen Beitrag sie lesen möchten. Viele können sich leichter und vor allem schneller entscheiden, wenn sie ein Bild zu einem Beitrag sehen.

Um dir schneller ein Bild von meinem gestalterischen Prozess zu geben, habe ich in den folgenden Bildern die Änderungen grob beschrieben:

Blog Layout 1
Das erste Layout orientierte sich zu stark an der alten Website. Ich wollte mit dem Redesign zwar nicht zu viel Veränderungen einführen, aber in diesem Fall musste ich definitiv einen neuen Schritt gehen.
Blog Layout 2
Die integration von Bildern gibt dem ganzen einen neuen Look und lockert das Layout auf. Auch die gleichen Schriftgrößen von Headline und Subline helfen, eine Zugehörigkeit darzustellen. Die Filterfunktion ist deutlich zu erkennen und verleitet Besucher dazu, eine Kategorie zu wählen. Was mich immer noch nicht zufriedenstellte, war der Einleitungstext und die beliebtesten Beiträge. Ich wollte, dass die Besucher direkt etwas vom Blog sehen. Der Einleitungstext nahm deshalb einfach zu viel Platz in Anspruch.
Blog Layout 3
Die beliebtesten Beiträge ganz oben anzuzeigen und stattdessen den Einleitungstext wegzulassen, war zuerst ungewohnt, dann aber eine logische Entscheidung (wie ich weiter unten beschreibe). Auch vom Look her ist es ein Stil, der auch auf anderen Seiten vorkommt und deshalb auch an dieser Stelle passt.

Warum lege ich so viel Wert darauf, die beliebtesten Beiträge so prominent zu zeigen?

Ursprünglich war nur ein „Top 10“ Störer geplant, der neue Besucher direkt zu meinen beliebtesten Beiträgen führen sollte. Die Idee war gut, nur gab es ein Problem: Anstatt die besten Beiträge direkt anzuzeigen, wurde man auf eine neue Seite weitergeleitet. Das bedeutete einen Klick mehr und demzufolge auch eine längere Wartezeit.

Es ist sowieso schon nicht einfach, neue Besucher auf der Seite zu „halten“. Zu viele springen nach wenigen Sekunden ab. Wenn ich es also nicht schaffe, sie mit einem Beitrag zu „fangen“, kommen sie womöglich nie wieder. Und die Chance war größer, dass das funktioniert, indem ich ihnen direkt die beliebtesten Beiträge anzeige, wie wenn ich sie vom Geschehen weg leite.

Denn was will ein neuer Besucher sehen, der noch nie vorher auf meinem Blog gewesen ist? Das Beste, dass ich zu bieten habe!

In den Analytics Statistiken konnte man deutlich erkennen, wie das Verhalten meiner Besucher bisher war

Auf meinem Blog gibt es die folgenden zwei Besuchergruppen:

  1. Wiederkehrende Besucher: Diese kommen meistens durch meinen Newsletter auf die Seite. Sie gelangen also direkt auf einen neuen Beitrag und schauen sich die Artikel Übersichtsseite nur selten an, da sie diese auch schon von einem früheren Besuch kennen. Für sie ist die Detailseite wichtiger als die Übersichtsseite.
  2. Neue Besucher: Diese kommen von einer Suchmaschine oder über Soziale Netzwerke auf meinen Blog. Auch hier ist zu erkennen, dass sie meistens direkt auf einen Beitrag gelangen, und nicht auf die Blog Übersichtsseite. Erst wenn ihr Interesse durch den Beitrag geweckt ist, schauen sie sich weiter um und wollen eine Übersicht von anderen Beiträgen sehen. Da es mein Ziel ist, genau diese neuen Besucher für mich zu gewinnen, zeige ich ihnen zuerst meine stärksten Beiträge.

Wie entscheide ich, welche Beiträge die besten sind?

Diese entstehen durch Statistiken aus Google Analytics und eigenen Entscheidungen. Es ist sozusagen ein Mix aus „das gefällt vielen“, deshalb gefällt es einem neuen Besucher vermutlich auch und Beiträgen (oft aktuellere), die gut sind, aber noch nicht lange genug auf Google gelistet werden.

Weitere kleine Veränderungen

  • Journal in Blog geändert → Blog ist vertrauter und besser zu merken. Ich kommuniziere auch weiterhin noch ab und zu Journal, aber nutze Blog in der Hauptnavigation.
  • Beiträge, die in den Top 10 sind, werden auch als „Top Story“ in der Artikelübersicht hervorheben.
  • Top Stories erhalten als „spezielle Beiträge“ ein Teaserbild.
  • Die Kategorie eines Beitrags steht jetzt auch in der Metabeschreibung und ist auch als Filter klickbar → Mehr Beiträge aus der Kategorie anzeigen.
  • Die Pagination hat sich verändert (siehe auch: Mein Designprozess zur optimalen Pagination):
Website Pagination Überarbeitet