Blogdesign: Wie herrseitz.de entstand

Nachdem für mich klar war, dass ich mit dem Bloggen beginnen möchte, das Konzept dafür immer reifer wurde und außerdem viele Ideen für mögliche Artikel und Inhalte vorhanden waren, machte ich mich an die Umsetzung und Realisierung meines Blogs – meines ersten Blogs. Nachfolgend zeige ich Dir verschiedene Phasen des Projekts. 

Entscheidung für ein Blogsystem

Da ich für mein Vorhaben kein individuelles System benötigte, habe ich mich relativ schnell für die Realisierung mit WordPress entschieden. Warum ich mich für WordPress entschieden habe kann ich nicht genau erklären, aber da es weltweit von mehreren Millionen Bloggern eingesetzt wird, kann es ja wohl nicht so schlecht sein. Weiter gibt es eine schier unendliche Zahl mehr oder weniger nützlicher Plug ins und Erweiterungen.

Ich habe rudimentäre Kenntnisse in HTML und CSS. Da ich aber zum einen noch nie mit WordPress gearbeitet habe und zum anderen sehr genaue Vorstellungen vom Design hatte, habe ich mir das Buch WordPress-Themes von Jonas Hellwig und Christian Gatzen besorgt.

Buch über WordPress: jetzt kann ja nichts mehr schief gehen

Klasse Buch! Super schnelle Einführung in HTML, CSS (inkl. HTML5 und CSS3), PHP und die WordPress-Theme-Architektur. Das Buch ist super verständlich geschrieben und damit sollte meinem Vorhaben nichts mehr im Wege stehen.

Das Screendesign

Ich hatte sehr schnell konkrete Vorstellungen in Bezug auf die Optik meines Blogs. Einerseits sollte es sehr minimalistisch werden, im Idealfall sogar Schwarz/Weiß, anderseits sollte es aber auch nicht streng wirken. Vielmehr soll die visuelle Erscheinung im klaren Kontrast zum förmlichen Blogtitel „herrseitz.de“ stehen.

Unter diesen Vorraussetzungen habe ich mich an’s Layouten und Gestalten gemacht.

Screendesign: der Grundlook

Screendesign: der Grundlook

Die Typografie

Bei der Definition der zu verwendenden Schriften war mir vor allem eines wichtig: anders als die Anderen. Deshalb schloss ich Arial, Helvetica, Tahoma, Verdana und Times New Roman von Anfang an aus. Allerdings muss der Text gut und angenehm zu lesen sein. Nach einigen Variationsversuchen habe ich mich schließlich für die Kombination Dorid Serif (für die Copy) und Cabin (für die Headlines) entschieden.

Typotest: die finale Auswahl der Schriften

Das Farbklima

Schwarz/Weiß oder so ähnlich sollte es werden. Ich entschied mich letzten Endes für „so ähnlich“ und habe mit Hilfe des Pantone Farbfächers vier verschiedene Grautöne definiert, welche für die Textauszeichnungen verwendet werden sollen. Daneben habe ich noch einige eher bunte Farben definiert um für den Fall der Fälle auch mal farbig arbeiten zu können.

Definition der Grautöne mit Hilfe des Pantonefächers

Das WordPress Theme

Nachdem alle notwendigen Entschiedungen gefällt und Layouts erstellt waren, konnte ich mich an die Umsetzung des Themes in WordPress machen. Das müsste ja schnell gehen, immerhin habe ich ja das Buch gelesen. Pustekuchen!

Grundwissen in HTML und CSS reichen eben nicht aus um ein stabiles CSS-Layout zu schreiben. Und die Sache mit PHP und den WordPress-Befehlen (template_tags) ist noch einmal ein Kapitel für sich. Schnell war dann wohl mal nix. Außerdem wollte ich ja erstmal Blogger und kein Programmierer werden.

Das Bugis Theme von elmastudio

Die Rettung kam aus dem „Ländle“. Durch Zufall entdeckte ich das Theme Bugis von dem in Stuttgart ansässigen elmastudio. Es hatte alles, was ich haben wollte, und noch viel mehr: HTML5 + CSS3, für WordPress 3 geschrieben, responsives Layout und, und und. Aber das Beste war, dass ich das Theme – auch mit geringen CSS-Kenntnissen – optisch nahezu an mein ursprüngliches Screendesign anpassen konnte. Einfach weil die Basis stimmte.

So habe ich mir für 12 Euro das Bugis Theme gekauft. Es gibt in den Weiten des Netzes auch eine Menge Themes, die in Hinblick auf verwendeter Technologie und Dokumentation weniger umfangreich sind und weit mehr kosten.

An dieser Stelle möchte ich noch mal explizit den Support von elmastudio erwähnen loben. Auf meine Fragen – waren sie auch noch so laienhaft – habe ich selten so freundliche, zeitnahe, fundierte, umfangreiche und individuelle Antworten bekommen wie bei elmastudio. WordPress Themes von elmastudio kann ich zu mehr als 100 % empfehlen.

Icon und Schriftzug

Bei der Gestaltung des Icons und des Schriftzugs (der Wort-/Bildmarke) im Header war mir wichtig, dass erkennbar ist, dass die Förmlichkeit, die der Name „herrseitz.de“ impliziert, nicht ganz ernst zu nehmen ist. So entschied ich mich bei dem Icon – einer Kamera – für einen illustrativen Stil, der dieser Förmlichkeit entgegen wirkt. Gleiches gilt für den Schriftzug. Hier habe ich mich für die im Schriftbild nicht ganz konventionelle Museo (Schnitt 900) entschieden. In meinen Augen erfüllt sie diese Aufgabe perfekt.

Entwurf des Headers für den Blog in Adobe Illustrator

Screenshots

Alles in Allem war das mein Weg vom leeren Screen zum fertigen Blog. Nachfolgend noch einige Shoots von den Schritten dazwischen.

Ich weiß, dass ich u. a. mit Apfel+Shif+4 auch Screenshots erstellen kann, aber ich finde meine Variante in dem hiesigen Anwendungsfall „a little bit more charming“.

Wie findest Du’s?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.