Die Geschichte von Version 1

Das erste Design von kurzgedanke.me ist mittlerweile ca. ein Jahr alt. Es war das erste goHugo Theme, welches ich mit meinen eigenen Händen geschrieben habe. Ich war lange sehr stolz darauf, aber nach der Zeit haben sich einige Design-Schwächen aufgetan. Gar nicht mal so sehr in der Strukturierung der Website, sondern mehr auf der farblichen Ebene. Dazu kam, dass ich kurzgedanke.me als einen “schlichten” und “schnellen” Blog geplant hatte. Mit jedem einzelnen CSS und Javascript verschwand vor allem die Schnelligkeit. Am Ende war es Bootstrap, jQuery, HighlightJS, OpenDyslexic, Source Code Pro von Google und eigenes Javascript zum Wechseln der Themes. Eigentlich eine ganz schöne Menge und gerade durch meinen eigenen, zugegeben nicht ganz perfekten, Theme Changer dauert es für die ersten meaningful Builds eine Weile.

Design Entscheidungen bei Version 2

Ein Screenshot von KurzGedanke.me

Die Design-Entscheidungen von kurz-hugo-v2 ist dieselbe wie bei der Version 1. Es soll schnell und schlicht sein. Ich schreibe meinen Blog nicht für Werbung, sondern für meinen Content. Und der soll im Vordergrund stehen.

Farben

Zu Beginn stand eine Farbwahl auf dem Plan, das war ja schließlich mein eigener und größter Kritikpunkt an Version 1.

Ich entschied mich also für Folgendes:

$white-bg: #FDFFFC;
$blue-link: #507B8E;
$purple-link: #53375C;
$gray-highlight: #46494C;
$text-black: #020100;

Was wohl am ehesten auffällt ist, dass schwarz und weiß kein 100 % schwarz und weiß sind. Dies kommt noch ein wenig aus meiner 3D Design- und Bildbearbeitungszeit. Im wahren Leben gibt es kein 100 % weiß oder schwarz und ich finde den Anblick davon ein wenig angenehmer, als wenn ich auf einen strahlend weißen Bildschirm schauen. Und das, obwohl die Abweichungen so minimal sind.

Die anderen Farben sind alle durch einen Online-Generator entstanden, da ich es mir nicht zugetraut habe, selber eine komplette Palette zu erstellen. Gerade aber mit dem lila und blau bin ich sehr zufrieden, da es meiner Meinung nach perfekt in die Schlichtheit reinpasst.

Layout

Mit dem Layout kommt mein zweiter Ansatzpunkt:

No more navigation bar!

Ich wollte es schlicht haben. Eine große, dicke, vollgestopfte NavBar, die mit über den Bildschirm schwebt, ist nicht schlicht. Das geht natürlich ein wenig auf die Navigation und ich habe auch noch keine gute Idee, wie ich da etwas einbauen kann, was zum restlichen Design passt und nicht “drauf geklatscht wirkt”. Bis dato sind die unsichtbaren Tags die einzige Möglichkeit, durch den Blog zu suchen.

Das Layout der Blog Einträge gefällt mir schon sehr so, wie es ist, hier muss ich nur noch an dem CSS arbeiten und vor allem an der Responsiveness dessen. Aber auch das kriege ich noch hin - allerdings ist CSS nicht meine allergrößte stärke. g

Technologien

Nicht nur die Farben und das Layout sind geschrumpft, sondern auch die Technologien, die ich nutze.

Von Bootstrap (in der minified Version 127kb) bin ich auf Milligram umgestiegen, welches in der minified Version nur 7kb hat. Plus normalize.css, welches für Milligram notwendig ist, kommen wir damit auf ingesamt 14kb. Das sind 113kb weniger als ein Bootstrap allein. Leider bin ich durch den ‘Theme Changer’ immer noch auf jQuery angewiesen, allerdings mit der voranschreitenden Browser-und Javascript-Technologie ist das das nächste, welches ich gerne loswerden möchte.

Auch wenn die Zahlen in Zeiten des Gigabit-Internets und Edge auf dem Land recht klein klingen, bedeuten diese am Ende des Tages doch Millisekunden, welche erheblich wahrnehmbar sind.

Die Font opendyslexic.org ist als von mir extern geladene Schriftart die Einzige. Der Rest des Blogs nutzt die Georgia Font Family, welche vor allem aus dem Buchdruck bekannt ist und insbesondere auf Geräten mit einer hohen Pixeldichte wunderschön aussieht und ein Buch-Feeling vermittelt.

Cyberpunk

KurzGedanke.me in seinem schwarz und neonpinken Cyberpunk-Theme

Als großer Freund des Cyberpunks war es für mich nur einen kurzen Weg entfernt zu der Entscheidung: “Es muss ein Cyberpunk-Theme geben!”

Inspiration dafür kam dann von der Mastodon Instanz computerfairi.es, bei der ich mir dann die ein oder andere Farbe geklaut habe, welche ich dann auf meinem normalen Dark-Theme aufbaute. Ich weiß bis heute nicht, ob ich dieses Theme selber benutzen möchte, aber irgendwie reizt es mich und meinem inneren Cyberpunk doch schon sehr.

Fazit

Dafür, dass ich kein Designer und auch kein Web-Designer bin, finde ich, dass ich hier etwas abgeliefert habe, wo ich für mich persönlich stolz drauf sein kann. Weitere Arbeiten werden auf jeden Fall folgen und davon gibt es noch recht viele.

Falls du dir anschauen möchtest, was genau ich hier fabriziert habe, findest du das goHugo Theme auf GitHub unter einer MIT License: kurz-hugo-v2

Wahrscheinlich hast du so gar noch Ideen oder Verbesserungsvorschläge für diesen Blog. Diese kannst du mir gerne auf Mastodon mitteilen: chaos.social/@KurzGedanke

Ansonsten wünsche ich dir noch viel Spaß auf kurzgedanke.me!

Lade diesen Artikel als .pdf herunter