Motivation

Vor circa zwei Jahren wünschte sich meine Mutter, Katrin Ribbe, eine digitale Version ihres selbstgeschriebenen Magazins »Kultich« von ihrem Sohn – mich – umzusetzen.

Gewünscht. Getan.

Leider hatte ich (ehrlich gesagt) damals für dieses Projekt nur wenig Zeit übrig. Das Design des Blogs war schließlich auch nur eine Aufgabe von Vielen. Zusätzlich kümmerte ich mich auch um die Programmierung, das Content Management System, E-Mail Newsletter Funktionen und Continues Integration Scripts. Bei solch einer Wulst an Aufgaben musste leider eine Sache zu kurz kommen: das Design. Aus diesem Grund bot sich mir für die Abschlussaufgabe dieses Kurses die perfekte Vorlage:

Ein (Re)Design des Blogs muss her!

Sooooo… Butter bei die Fische. Das ist der Ist-Zustand:

Und hier nochmal als Screenshots:

Der Ist-Zustand (Screenshots der aktuellen Website) zeigt schon beim ersten Hinblick viele Probleme auf, die ich damals bei der Umsetzung überhaupt nicht bedacht hatte.

In meiner Endpräsentation (an der ich leider nicht teilnehmen konnte) habe ich mich vor Allem auf die Artikelseite fokussiert, dem Kernbaustein eines jeden Blogs. Deshalb möchte ich auch hier das Redesign dieser Seite vorstellen.

What da Font?!

Die Schriftauswahl ist mir damals nicht gut gelungen. Ich hatte die Bodoni als Headline und die Europa als Copy Font genommen. Ich war auch ziemlich verwirrt, da ich eigentlich im ersten Wurf des Designs doch ganz andere Schriften verwendet hatte. Das ging wohl » damals « echt alles ein wenig drunter und drüber.

Aber was gefällt mir denn jetzt nicht an der Bodoni? Oder der Europa? Nun ja…

Die Bodoni ist, so finde ich es zumindest, eine schöne Schrift. Sie wirkt sehr Nobel durch ihre filigranen senkrechten Grundstriche und Serifen. Doch leider bricht sie bei kleineren Headline Größen aber auch umso schneller weg und lässt sich nur noch schlecht lesen.

Aber das wichtigste ist eigentlich: der visuelle Charakter passt kein Stück zur Schreibweise meiner Mam. Sie schreibt sehr natürlich. Unaufgeblasen. Umgangssprachlich. Der Charakter einer Bodoni wirkt da schon eher wie ein Versicherungsvertreter mit Lackschuhen. Das passt einfach nicht und muss geändert werden.

Die Europa ist eine serifenlose Font. Sie ist leider etwas nüchterner ausgefallen. Hier hätte ich gerne auch eher eine Font mit Serifen, mit stärkerem Charakter.

Alegrey… yaaaah!

Da ich für dieses Projekt leider vorerst keinerlei Budget bereitgestellt bekommen habe, so wie das in solchen Familienprojekten vermutlich wohl immer so ist, musste ich mir eine schöne Open Source Variante suchen. Etwas mit Serifen und einem schönen, eher rustikalen Charakter. Am Besten eine Schrift, die ich für die Headlines und den Copytext verwenden kann. Nach einigen Tests bin ich bei der Alegreya hängen geblieben. Sie hat genau solch einen rustikalen Charakter und wirkt im perfektem Maße durch ihre Serifen verspielt und kantig bzw. aneckend zugleich. Das mag ich an ihr sehr. Sie hat zudem sehr viele Schriftschnitte, weswegen man sie auch prima als Headline Font verwenden kann. Sehr schön!

Das sind die verschiedenen Schriftschnitte der Alegreya:

Diese Schrift habe ich in meinem Redesign als Headline- und als Copyfont verwendet. So habe ich nicht das Problem des Font Pairings (was mir ehrlich gesagt noch nicht so gut liegt) und der eventuell dadurch verursachten » Unruhe « im Schriftbild. Ein weiterer Vorteil: man spart sich unnötigen Downloadtraffic, da man weniger Font Dateien beim Besuch der Website herunterladen muss. Yeah!

So. Das Schriftproblem ist behoben. JDoch wie sieht es aus mit dem …

Baseline Grid und Sizing

Ein ausgewogenes Baseline Grid zu finden war alles Andere als leicht. Ich wollte dass alle Schriftgrößen, ob H1 oder H4, ob Copytext, Sublime oder Bildunterschrift, in guten wie in schlechten Zeiten auf einem Baseline Grid zusammenfinden können.

Das hatte nicht so funktioniert wie ich wollte. Schnell habe ich mich aber auch gefragt: » Braucht es überhaupt so viele Schriftgrößen für einen Blog? «

Eiiiiiigentlich nicht ! Zu viele verschiedene Schriftgrößen machen es zudem schwierig zwischen den einzelnen Headlines und Sinnesabschnitten im Artikeltext zu unterscheiden, ohne die Schriften extrem groß oder klein ausfallen zu lassen. Dann biete ich lieber doch maximal zwei verschiedene Größen für Headlines im Artikeltext an, die eine gute Unterscheidung zwischen den Beiden und dem Copytext ermöglichen. Zudem eliminiere ich dadurch zu viele Möglichkeiten im Editorial Bereich des Blogs, die falsche Headline Größen zu verwenden 😛.

Das finale Baseline Grid mit den verschiedenen Schriftgrößen sieht dann so aus:

Und hier nochmal ohne Baseline Grid:

Farben

In der derzeitigen Version der Website sind die Farben noch viel zu schrill. Gerade im Footer wird das sehr deutlich:

Zusammen mit der dünnwandigen Bodoni kann man den Text kaum noch entziffern. Ich habe daher die Primärfarbe etwas dezenter ausfallen lassen und von dieser einige Abwandlungen für den Text, Hintergründe und Buttons erstellt.

Buttons und Links sind nun einheitlich in der Primärfarbe gehalten ( Cinnabar ).

Der Hintergrund ( Snow ) der Website wird nun in einem leichten rot-grau Ton gehalten. Weißer Hintergrund wäre einfach zu viel Kontrast gewesen und wäre anstrengend für die Augen.

Text. Headlines und Bodytext sind nun in einem ruhigen und dunklen Ton ( Dark sienna ) gehalten.

Der Footer ( Dark jungle green ) wird nun dunkel eingefärbt und nimmt sich angenehm zurück.

Redesign der Artikelseite

Die Navigation

Ich habe Ewigkeiten mit dieser Navigation gehadert. Da es eigentlich nur sehr wenig zu navigieren gibt auf dieser Website sah die Navigation immer sehr trist aus. Sie sollte auch nur eigentlich genau drei Links beherbergen:

1. Logo → Navigation zur Startseite
2. Erstes Ressort → „Ans Herz Gelegt“
3. Zweites Ressort → „Meine Geschichten“

Das ist einfach zu wenig für ein Menü. Es rechtfertigt auch daher nicht diese » Platzverschwendung « der Viewporthöhe. Aaaaaalso… habe ich statt der Navigationbar einfach nur einen „Zurück“-Link stehen lassen und alles weitere hinausgeworfen:

Da es nur drei Navigationsebenen in diesem Blog geben soll (Startseite → Ressortseite → Artikelseite) lässt sich die Navigation auch getrost weglassen. Es ist ein etwas gewagterer Schritt. Aber ihr wisst ja, wer nicht wagt …

Artikelseite – Der Aufmacher

Der Aufmacher der Artikelseite ist vom Layout her gleich geblieben. Kleines Gimmick: der riesige Titel des Artikels hat im Gegensatz zum Copy Text einen etwas helleren Farbton bekommen, da dieser sonst zu viel Kontrast erzeugt hätte. 

Vorher/Nachher:

Artikelseite – Der Artikeltext

Der Artikeltext hat eine gut lesbare Textbreite und einen angenehmen Zeilenabstand bekommen:

Artikelseite – Zitate

Es gibt nun Zitate! Diese stechen besonders durch ihre besonders groß gewählte Schriftgröße heraus:

Artikelseite – Eckdaten

Meine Mam stellt in ihren Artikeln gern Personen aus unserer Umgebung (Brandenburg) vor. Diese Personen brauchen natürlich noch einen Platz für Daten wie die Anschrift und Kontaktdaten:

Artikelseite – Read More …

Der Besucher/Leser dieses Blogs soll natürlich nicht im Dunklen gelassen werden, wenn er einen Artikel gelesen hat. Weiterführende oder ähnliche Artikel werden nach jedem Artikel angeboten und sollen den Leser  fesseln. Und wenn einmal nichts Passendes für den Leser dabei ist, dann kann er sich mit einem Klick auf »Zufälliger Artikel« ganz einfach einen komplett zufälligen Artikel anzeigen lassen

Und so sieht das aus:

Der Footer

Der Footer ist im Vergleich zur alten Variante nun wesentlich dezenter und lenkt den Leser weniger vom Inhalt des Artikels ab.

Vorher:

Nachher:

ENDE.

Das Ende? Das ist noch lange nicht das Ende! Das Redesign des Blogs hat gerade erst begonnen. In unserer vorlesungsfreien Zeit werde ich weiter an diesem Redesign arbeiten. Das Resultat der Artikelseite kann sich doch aber schon mal sehen lassen! Ehrlich gesagt habe ich auch Blut gelegt und habe voll Bock auf die Redesigns der anderen Unterseiten dieses Blogs! Ich hoffe, dass das neue Design noch dieses Jahr stehen wird (inklusive Programmierung etc.). Also schaut gerne später mal auf der blog.kultich.de Website vorbei, Ich freue mich!

Vielen Dank für’s Lesen
Euer Joseph!