Cloudlike
Atelier

Strukturell hebt sich das Layout bewusst von gängigen Webseiten ab, die häufig in gleichmäßigen, rechteckigen Blöcken aufgebaut sind. Bei DESIGNSTIMMEN sind die einzelnen Bereiche diagonal bzw. quer aufgeteilt, was dem Design einen dynamischeren Charakter verleiht, ohne die klare Linie des eleganten Ansatzes zu brechen.

Die Landingpage folgt einer bewussten inhaltlichen Hierarchie: Beim Aufrufen der Seite wird zunächst ein einzelner, groß inszenierter Beitrag in den Vordergrund gestellt, bevor darunter weitere, kleinformatigere Beiträge folgen. Dieses Prinzip orientiert sich an der Steigerung der Conversion-Rate. Die Aufmerksamkeit der Besucherin bzw. des Besuchers wird gezielt auf einen Beitrag gelenkt, was die Wahrscheinlichkeit erhöht, dass der Artikel geöffnet und gelesen wird. Erst im Anschluss öffnet sich der Blick auf das breitere Angebot der Plattform.

Seitenstruktur und Komponenten — Wireframe-Übersicht der DesignStimmen Blog-Landingpage

Im Vergleich zum vorgegebenen Wireframe wurden mehrere gezielte Erweiterungen vorgenommen.

Der Header wurde neu strukturiert: Die Suchfunktion ist direkt im Header integriert, während Kategorien und Themen zu einem gemeinsamen Filterbereich zusammengeführt und unterhalb des Headers platziert wurden. Nutzerinnen und Nutzer können gezielt eine Kategorie anwählen oder über den Button „Alle Beiträge“ den gesamten Feed aufrufen.

Im Inhaltsbereich wurde die Artikelvorschau um eine Subline, Kategorie-Tags sowie das Profilbild und den Namen der jeweiligen Autorin bzw. des jeweiligen Autors ergänzt. Die einzelnen Beiträge werden dabei in einem Card-Design dargestellt, das die Inhalte klar strukturiert und visuell voneinander abgrenzt.

Die Bilder der einzelnen Cards wurden dabei bewusst passend zur jeweiligen Blogbeitragsüberschrift ausgewählt, um den Inhalt auf den ersten Blick greifbar zu machen und die Neugier der Lesenden zu wecken. Dadurch entsteht von Anfang an ein persönlicher Bezug zu den Inhalten.

Ebenfalls im Inhaltsbereich wurde der Newsletter-Bereich um ein zusätzliches Eingabefeld für Vor- und Nachname erweitert, damit die Leserinnen und Leser im Newsletter direkt und persönlich angesprochen werden können.

Die Paginierung am Ende der Beitragsübersicht folgt demselben gestalterischen Prinzip: Pfeile ermöglichen die Navigation zwischen den Seiten, während die aktuell aktive Seite schlicht, intuitiv und konsistent im Gesamtbild durch einen Kreis visuell hervorgehoben wird.

Der Footer greift das Logo erneut auf und ergänzt es um den Slogan, der im Header, einerseits aus Platzgründen, andererseits um den Fokus auf die Inhalte zu lenken, bewusst weggelassen wurde. Im Footer findet der Slogan seinen natürlichen Platz als abschließende Botschaft der Seite.