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:

Der Ist-Zustand

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.
Aber das wichtigste ist eigentlich: der visuelle Charakter passt kein Stück zur Schreibweise meiner Mam. Sie schreibt sehr natürlich. Unaufgeblasen. Umgangssprachlich. Eine Bodoni wirkt da schon eher wie ein Versicherungsvertreter mit Lackschuhen. Das passt einfach nicht.

Die Europa ist eine serifenlose Font. Sie ist leider etwas sehr nüchtern. Hier hätte ich gerne auch eher eine Font mit Serifen.

Alegrey… yaaaah!

Da ich für dieses Projekt leider vorerst keinerlei Budget bereitgestellt bekommen habe, musste ich mir eine schöne Open Source Variante suchen. Etwas mit Serifen und einem schönen, eher rustikalen Charakter. 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. Aber nicht zuuuuu verspielt. Das mag ich an ihr sehr. Sie hat zudem sehr viele Schriftschnitte. Sehr schön!

Hier die verschiedenen Schriftschnitte:

Diese Schrift habe ich in meinem Redesign als Headline und als Copy Font genommen. So habe ich nicht das Problem des Font Pairings 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. Jetzt geht es weiter 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, in guten wie in schlechten Zeiten auf einem Baseline Grid zusammenfinden können.

Das hat 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 lieber doch maximal zwei verschiedene Größen für Headlines im Artikeltext anbieten, die eine gute Unterscheidung zwischen den beiden und dem Copy Text ermöglichen.

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

BILD

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.

What da Font???

Das erste was ich angegangen bin war natürlich die Font. Gerade das Font Pairing gefiel/gefällt mir überhaupt nicht. Eine Bodoni (Headline) und eine Europa (Body) passen einfach nicht zusammen. Gerade dann nicht, wenn man nicht weiß wie mit diesen beiden Schriften umzugehen ist.

Die Bodoni ist zwar sehr elegant in meinen Augen, jedoch bricht diese bei kleinen Schriftgrößen sehr schnell weg – nicht gerade die lesbarste Font des Universums für einen Blog. 

Die Europa ist hingegen schlichter. Sie erinnert mich ein wenig an eine Futura. Und futuristisch anmutend soll der Blog auf keinen Fall sein. Die verwendete Schrift sollte wesentlich » wärmer « sein. Der Blog und dessen Texte werden auch schließlich mit einem gewissen Charme und Stil geschrieben. Ich brauche (überspitzt gesagt) mehr Nostalgie! Ich brauche was mit Serifen !

Weniger ist mehr.

Und ja, das ist es wirklich. Wenn man – ich – nicht weiß welche Schriften man am Besten paart, dann nimmt man doch einfach eine Einzelne. Der Blog ist Vorerst ein » No Budget « Projekt. Deshalb konnte ich erstmal nur eine Google Font verwenden. 

Alegrey… yaaaaah!

Ich habe mich schließlich für die Serifenschrift » Alegreya « entschieden. Sie ist nicht so » glattgegelt « wie die Bodoni und nicht so futuristisch wie die Europa. Sie hat einen schönen, etwas schrofferen, doch herzlichen Charakter und passt perfekt zur Schreibweise und zum Schreibstil meiner Mam. Sooooo… und das ist sie:

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!

Schrift

Vorher

Damals hatte ich die Schrift Bodoni für Überschriften und Open Sans für den Bodytext verwendet ohne wirklich groß über die Schriftcharakteristiken nachzudenken. Es hat sich jedoch schnell gezeigt, dass gerade die Bodoni sehr gerne »wegbricht« und schnell schwierig lesbar wird. Auch die Paarung mit der Open Sans passte nicht wirklich. Die Open Sans ist für diesen Einsatzzweck viel zu ruhig und »steril«.

Nachher

Für das Redesign habe ich im Vornherein festgelegt: »Ich möchte nur noch eine Schrift verwenden, dann kann sich wenigstens im Schriftbild nix beißen. Aber langweilig darf sie nicht sein! Eine Serifenschrift sollte genug Dynamik hineinbringen.«

Die Alegreya