In 7 Schritten zu einem guten Blogredesign

Ihr wollt euer Blog redesignen? Dann hilft euch vielleicht dieser Beitrag. Mein neues Design ist seit kurzer Zeit online und ich zeige euch in diesem Beitrag die Hintergründe meiner Entscheidungen und den Prozess in 7 Schritten.

• von Lennart Prange

Foto von foxypar4 – Einige Recht vorbehalten

Ihr wollt euer Blog redesignen? Dann hilft euch vielleicht dieser Beitrag. Mein neues Design ist seit kurzer Zeit online und ich zeige euch in diesem Beitrag die Hintergründe meiner Entscheidungen und den Prozess in 7 Schritten. Allerdings versuche ich euch noch mehr zu helfen und habe deswegen einige interessante Links mit eingebaut.

Seit Anfang 2008 beschäftige ich mich nun mit der Gestaltung von Blogs. Seitdem habe ich einige Beiträge darüber geschrieben, das Ganze aber nie an einem Praxisbeispiel erläutert. Ich denke, dass mein Redesign eine gute Gelegenheit dafür ist, das nachzuholen.

Kommentare und Social Bookmarks würden mich sehr freuen. Viel Spaß mit dem Artikel.

Schritt 1 – Allgemeinbildung

Zielgruppe kennen lernen

Achtung: Es geht nicht um die Frage, wer das Blog besucht, sondern wer es besuchen soll. Diese beiden Dinge stimmen nicht zwangsläufig überein. In meinem Fall besuchen diese Seite vor allem junge Webdesigner. Ich will aber alle Webdesigner ansprechen. Von jung bis alt. Von erfahren bis unerfahren. Was will meine Zielgruppe hier? Ich kann es nicht 100%ig wissen. Aber ich gehe davon aus, dass meine Leser kommen, um die Inhalte zu lesen und sich, teilweise, an Diskussionen zu beteiligen.

Zugegen, viele Webseiten würden mit einer so kurzen Definition der Zielgruppe nicht auskommen. Für mich reicht das aber komplett. Ich brauche keine Merkmale wie Geschlecht, Einkommen oder Religion. Das kann von Blog zu Blog unterschiedlich sein und ihr solltet euch bemühen, eure Zielgruppe möglichst genau einzugrenzen.

Was macht das alte Design falsch?

Bei der Gestaltung von Webseiten dreht sich alles um den Nutzer. Anhand meiner Zielgruppe kann ich entscheiden, was dem Nutzer nicht entgegenkam. Darunter fällt die überladene Sidebar. Sie enthält einige sehr wichtige Funktionen. In der Menge gingen diese aber unter. Die Präsentation der Inhalte war mir ein weiterer Dorn im Auge. Das Lesen hat einfach nicht genug Spaß gemacht. Und da ich als Hauptinteresse der Zielgruppe das Lesen der Inhalte festgelegt habe, musste hier auf jeden Fall nach gebessert werden. Weiterhin war mir die Gestaltung zu offen. Soviel weiße Fläche strahlt förmlich. Mehr Kritikpunkte findet ihr hier.

Was macht das alte Design richtig?

Viele, sehr viele, extrem viele sehen nur das Negative. Natürlich ist das wichtig, aber nur in den seltensten Fällen, ist beim alten Design alles falsch gelaufen. Deshalb frage ich mich auch, was das Alte richtig gemacht hat. Da fallen mir die Bewegung auf der Startseite durch die Slideshow ein. Außerdem das Weglassen dieser Bewegung auf den Unterseiten. Weiterhin wirkte das Design freundlich und schlicht. Es verzichtete auf viele Grafiken und schaffte so gute Voraussetzungen für die Konzentration auf den Content. Ebenfalls haben mir einige Funktionen sehr gut gefallen, die unbedingt in das neue Design integriert werden sollten. Zum Beispiel die Nutzer Links.

Schritt 2 – Layout und Funktionen

Was braucht das Blog?

Hier unterscheidet man zwischen zwei Kategorien: Die Anforderungen der Leser und die Anforderungen des Autors. Die erste Kategorie ist dabei natürlich um einiges wichtiger. Da ich über Webdesign schreibe werden meine Leser erwarten, dass mein Design gut ist und meinen eigenen Ratschlägen entspricht. Weiterhin wollen sie Spaß beim Lesen haben und keine übermäßige Funktionsvielfalt. Vielmehr möchten sie, dass das Design sich auf das Wesentliche konzentriert. Ich habe die gleichen Anforderungen wie meine Leser. Ich stelle also folgende Liste der benötigten Dinge auf:

• Logo – Ich habe mich für ein komplett neues Design entschieden. Alles wird anders. Aus diesem Grund will ich wenigstens das Favicon und so auch das Logo erhalten.
• Navigation – Fast jede Internetseite braucht eine Navigation. Die Frage nach der Navigationsstruktur ist aber überall anders zu beantworten. In meinem Fall habe ich mich für eine Navigation nach Kategorien entschieden. Für mich ist die Struktur nachvollziehbar und für Blogs eine recht gute Sache. Die Leser können die Artikel so ganz gut filtern und wer etwas zum Thema Photoshop sucht, findet die Tutorials schneller. Ich hoffe so auch den Besuchern von Suchmaschinen und anderen schnell einen Ãœberblick über unsere Themenbereiche geben zu können und so vielleicht den ein oder anderen Leser mehr halten zu können.
• Featured Posts als Slideshow – Wie schon erwähnt hat mir die Bewegung im alten Design gefallen. Das wollte ich auch in das neue Design bringen. Das System wollte ich aber umbauen. Beim alten Design fand man in der Slideshow die letzten 5 Beiträge und daneben waren diese noch mal aufgelistet. Mit dieser Struktur konnte ich mich schon am Anfang nicht wirklich anfreunden. Jetzt ist die Slideshow größer und zeigt nicht nur die Ãœberschriften sondern auch einen Auszug. Außerdem sind es nicht mehr die letzten Beiträge sondern ausgewählte Beiträge. So kann ich auch ältere Beiträge in den Vordergrund stellen.
• Content – Der Content muss natürlich wieder rein. Er sollte übersichtlich und gut lesbar sein.
• RSS Feed – Der RSS Feed hat für mich zentrale Bedeutung. Deshalb muss er deutlich auf jeder Seite zu sehen sein. Er bindet Leser und ist für mich fast die wichtigste Statistik.
• Werbung – Braucht man nicht zu besprechen.
• Nutzer Links – Seit Version 2 haben Nutzer die Möglichkeit ihre Artikel und Seiten bei uns zu verlinken. Das Feature wurde nur selten genutzt. Dafür mache ich die überladene Sidebar und die geringe Aufklärung verantwortlich. Ich habe mich dazu entschlossen das Feature noch mal zu integrieren und eine Hilfeseite hinzuzufügen.
• Kurzer Ãœber Uns Text – Gehört für mich zu jedem Blog, ist aber nicht so wichtig. Trotzdem möchte ich uns wie beim alten Design knapp vorstellen.
• Zu Vorschlägen auffordern – Wieso muss ich immer alle Ideen haben? Wenn jemand ein Photoshop Tutorials sucht oder über ein bestimmtes Thema sprechen möchte kann er mir gerne einen Vorschlag zusenden oder einen Gastbeitrag schreiben. Diese Möglichkeit will ich deutlich machen.
• Meta Navi – Die Navigation hat jetzt keinen Platz mehr für Ãœber Uns, Impressum und Kontakt. Deshalb gibt es jetzt auch eine weitere Navigation.
• Blogroll – Die Blogrolle habe ich nur sehr selten genutzt. Mit dem neuen Design sollte sich das etwas ändern. Die Blogrolle kommt wieder rein und hat nun auch ein wenig mehr Platz.
• Accounts wie Twitter, Bloggerei und Technorati – Leider brauche ich die Integrierung dieser Accounts. Ich möchte die Funktionen und Möglichkeiten der Portale gerne weiter nutzen. Seit kurzem ist daswebdesignblog auch bei Twitter und diesen “Umstand” wollte ich gerne hervorheben. Im alten Design fehlte die Integration komplett.
• Suche – Ich für meinen Teil benutze die Suche auf Blogs nur sehr selten. Trotzdem gehört sie zu einer guten Internetseite.

Layout

Ich möchte jetzt in die Gestaltungsphase übergehen. Als Grundlage für das spätere Design werde ich erst mal eine Layout Skizze erstellen. Dabei will ich die Elemente, die im zweiten Schritt erarbeitet wurden, positionieren und schon ein paar Gestaltungsvorgaben machen. Jetzt ist es wichtig, die benötigten Dinge, welche ich oben bereits aufgezählt habe, miteinander zu vergleichen. Auf die wichtigen Dinge soll das Auge des Betrachters schnell fallen. Hier sollte man sorgfältig vorgehen und alles genau überdenken. Die Entscheidungen beeinflussen entscheidend den Erfolg des Blogs.

Wie ihr seht, habe ich einfach ein Rechteck auf ein Blatt gemalt und die benötigten Elemente aufgeschrieben. Wer mehr über diese einfache aber gute Methode wissen möchte, findet hier ein Video von From the Couch.

Schritt 3 – Design

Gestaltung

Mit dem Layout-Entwurf auf dem Schreibtisch geht es nun zur eigentlichen Gestaltung. Das Blog braucht ein Gesicht. Im ersten Schritt haben wir die Zielgruppe kennen gelernt. Aus diesen Erkenntnissen können wir Ziele für das neue Design formulieren: Das neue Design soll den Inhalt besser und gut präsentieren. Das neue Design soll den Lesern die Teilnahme an Diskussionen erleichtern bzw. verschönern. Zudem weiß ich, dass die Leser mir grobe Schnitzer nicht verzeihen werden. Das Design sollte sich an die gängigen Regeln halten. Schließlich werden die Besucher hauptsächlich Webdesigner sein.

Ich lasse mir für die Umsetzung in Photoshop, auch wenn ich schon alles genau im Kopf habe und es in 3-4 Stunden fertig machen könnte, immer mehrere Tage Zeit. Es ist einfach besser, ein paar Nächte darüber zu schlafen. Das Ganze soll letztendlich ja auch möglichst gut aussehen. Problemstellen tauchen auch bei fast jedem Design auf. Dieses Mal war es die Slideshow auf der Startseite. Ich habe deswegen an jedem Tag eine Version erstellt. Meistens habe ich die alte einfach jeden Tag verbessert. Die letzte war schließlich die beste. Also nicht immer gleich den ersten Entwurf akzeptieren, wenn ihr noch nicht 100% zufrieden seid. Ihr habt genug Zeit. Lasst es einen Tag liegen und macht euch dann wieder ans Gestalten. Das bringt häufig sehr viel.

Entwurf 1

Auf den ersten Blick sieht das dem finalen Design ziemlich ähnlich. Allerdings fehlt die Slideshow. Wie schon angesprochen war das eine Problemstelle. Außerdem war die Schriftwahl noch anders und das Blau noch etwas dunkler. Die Überschrift war auch noch nicht blau. Sie hatte einen Verlauf.

Es entstanden daraufhin noch einige weitere Entwürfe. Alle hatten eine andere Slideshow. Leider hab ich die nicht mehr auf dem Rechner. Schließlich bin ich zu dem gekommen, was ihr jetzt vor euch seht.

Falls ihr euch noch nie mit der Gestaltung von Blogs befasst habt, könnten euch diese Link helfen:

• Der Weg zu einem guten Blogdesign
• Blog design Blog for Blog Designers
• Blogdesign – Besonderheiten, Grundlagen und Inspiration
  

Schritt 4 – Design #2

Unterseiten

Mit der Startseite in Petto sollte die Gestaltung der Unterseiten kein großes Problem mehr sein. Ich habe es mir auch recht einfach gemacht und nicht mehr viel geändert. Ich habe die Startseite praktisch übernommen.

Trotzdem musste ich mich einigen Fragen stellen

• Wie soll der Kommentarbereich aussehen? – Erst mal wusste ich, dass mit dem Update auf WordPress 2.7 die Möglichkeit hinzukommt, auf Kommentare zu antworten. Das wollte ich auf jeden Fall integrieren. Weiterhin habt ihr Kritik an dem Formular geäußert. Diese wollte ich ebenfalls berücksichtigen. Außerdem habe ich mich dazu entschlossen, eine Live Vorschau für Kommentare einzubauen. CommentLuv habe ich während der Gestaltungsphase komplett vergessen. Im Endergebnis ist das deutlich zu erkennen. Da muss ich noch was tun.
  Natürlich wollte ich auch wieder Gravatare benutzen.
• Will ich die Slideshow auch auf den Unterseiten haben? – Nein. Wie beim alten Design wollte ich darauf verzichten. Der Leser sollte nicht vom Content abgelenkt werden und die Ladezeiten nicht unnötig verlängert werden.
• Wie soll Social Bookmarking integriert werden? – Besucher über Social Bookmarking Plattformen. Für mich eine Seltenheit. Bei der letzten Version war die Werbung für Bookmarks ziemlich aggressiv. Ich habe sie jetzt dezenter eingebaut. Wer Lust hat, kann meine Beiträge gerne speichern. Ich freue mich darüber!
• Brauche ich irgendwelche Meta Infos? – Ihr seht, dass ich auf Angaben wie Kategorien, Tags und Autor verzichtet habe. Bis heute bin ich noch unschlüssig, ob das so bleibt. Hier tut sich vielleicht noch was.

Entwurf

Mir hat der erste Entwurf bereits zugesagt. Ich habe daran nichts mehr verändert, ich hatte kein Problem bei der Gestaltung. Blöd nur, dass ich ein paar Sachen vergessen habe. Beispielsweise habe ich nicht genau festgelegt, wie Kommentare vom Admin aussehen sollen. Gravatare habe ich auch nicht integriert.

Schritt 5 – Umsetzung

CSS/xHTML

Nun habe ich erst mal alles in valides CSS und xHTML umgesetzt. Mich haben die Fehler bzw. die vergessenen Sachen im Gestaltungsprozess etwas aufgehalten. Ich hatte ganz vergessen das Aussehen von Listen zu definieren. Jetzt musste ich mir während der Umsetzung auch noch Gedanken über solche Dinge machen. Das lenkt ab und reißt mich immer ein wenig aus dem Workflow. Die Umsetzung sollte eigentlich schnell gehen. Ich sollte wie eine Maschine vor dem Computer sitzen und den Code einkloppen. Das geht aber nur, wenn man vorher alles festgemacht hat.

Ihr wollt lernen, wie man ein Design in valides xHTML/CSS umsetzt? Dann helfen euch vielleicht diese Links:

• The best Tutorials on Converting PSD to XHTML
• 20 Useful CSS Tips For Beginners
• Using CSS to Do Anything: 50+ Creative Examples and Tutorials
• 30 Excellent CSS Based Navigation and Buttons Tutorial
• 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started
• 30 HTML Best Practices for Beginners

WordPress

Nachdem das ganze valide auf meinem Rechner lag, habe ich WordPress lokal installiert und mich an die Anpassung des Ganzen gemacht. Da ich nicht zum ersten Mal mit WordPress gearbeitet habe, ging das Ganze recht problemlos. Der größte Stolperstein war die neue Kommentarstruktur von WordPress 2.7. Die hatte ich mir noch nie vorher angeguckt. Naja, geschafft habe ich es trotzdem.

Wer noch nie mit WordPress gearbeitet hat, kann vielleicht etwas mit diesen Links anfangen:

• Hack Together a User Contributed Link Feed with WordPress Comments
• How to Create a WordPress Theme from Scratch
• How to Create a WordPress Theme from Scratch: Part 2
• Top 10 Tutorials for Developing WordPress Themes
• WordPress auf themeforest

Schritt 6 – Präsentation auf dem Blog

Das Schöne an Blogs ist, dass man seine Besucher sehr leicht fragen kann, ob sie das Redesign gut finden. Das habe ich auch gemacht. Ihr habt mir einige Ratschläge gegeben. Einige davon habe ich daraufhin umgesetzt. Andere nicht 😉

Jedenfalls war ich mir nach der Präsentation sicher, dass ich nicht sehr viele (bzw. keine) Leser verlieren werde. Das Design wurde von euch recht gut aufgenommen. Danke noch mal für eure Kommentare.

Schritt 7 – Abschluss

Samstag sollte das Design online gehen. Donnerstag war ich fertig. Leider ist fertig nie fertig. Ich wollte das Redesign in der Nacht hochladen. Dann, wenn nicht so viele Besucher online sind, da das Ganze doch eine kurze offline Zeit benötigte. Das war ein Fehler. Ich war ein wegen der späten Uhrzeit ein wenig unkonzentriert. Deswegen hat es noch gedauert, bis ich fertig wurde. Blöd, dass ein paar Plug-Ins nicht funktionieren wollten und ich mich nach Alternativen umschauen musste. Naja, sowas verläuft selten problemlos. Da muss man durch.

Fazit

Ich hoffe, dass euch der Beitrag irgendwas gebracht hat. Ich denke, dass sich der Gestaltungsprozess auf viele andere Blogdesigns und vielleicht auch sonstige Internetsetien projizieren lässt.

Insgesamt kann ich nicht genau sagen, wie lange ich an dem Redesign gesessen habe. Ich weiß nur, dass er mit diesem Beitrag angefangen hat. Da ich mich aber nicht jeden Tag mit dem Redesign beschäftigen konnte, kann ich im nachhinein leider nicht genau sagen, wie lange ich daran gearbeitet habe.

Was euch auch interessieren könnte

Hier noch zwei Blogbeiträge, die sich auch um Redesigns drehen und euch vielleicht interessieren könnten.

• Blog übernommen: Redesign oder nicht?
• Der Redesignprozess – Tipps und Tricks

Eure Redesigns?

Wie geht ihr an Redesigns, vor allem Blogredesigns, ran? Habt ihr einen ähnlichen Arbeitsablauf? Vielleicht hat ja jemand von euch Lust, auch einen Blogbeitrag zu dem Thema zu schreiben. Mich würde das sehr interessieren!

35 Kommentare