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.
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.
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.
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.
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.
Screenshots
Alles in Allem war das mein Weg vom leeren Screen zum fertigen Blog. Nachfolgend noch einige Shoots von den Schritten dazwischen.
Work in Progress: Das Screendesign 
Festlegen der Farbwerte 
Festlegen der Grauwerte 
Dokumentation der gewählten Farben 
Formfindungsphase für Icon und Schriftzug 
Daumen hoch für die vorbildliche Dokumentation des Bugis Theme von elmastudio 
Meine Herkunft (Print) lässt sich nicht verleugnen: Screendesign in InDesign 
Entwurf für die Sidebar 
Für mich ein Muss: eine ordentliche Projektstruktur 
Dokumentation und Definitionen für den Blog 
Zu schreibende Seiten vor dem Launch 
Zu schreibende Seiten vor dem Launch / Dokumentation 
Es geht voran. Die letzen Artikel vor dem Launch 
Dokumentation der gewählten Farben 
By the way: I like Lamy 
Mein Blog kurz vor dem Launch 
Ziemlich fertig. Der Blog 
Formfindungsphase für Icon und Schriftzug 
Formfindungsphase für Icon und Schriftzug 
Es wird ernst: die Daten werden auf den Server geladen
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?