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.
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.
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.
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.
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.
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:
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.
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.
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:
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
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.
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:
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:
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.
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.
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.
Hier noch zwei Blogbeiträge, die sich auch um Redesigns drehen und euch vielleicht interessieren könnten.
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!
nastorseriessix
19. Mai 2009 um 10:24 UhrBoah fetter Artikel! 😀
Wenn du diesen Einen Artikel in 2 oder 3 kleinere Artikel unterteilt hättest, das wäre unter Umständen dann noch besser gewesen. So viel auf ein mal zu lesen dauert nicht nur extrem lange, sondern ist mit unter auch manch mal anstrengend. Nur so als Tipp am Rande für die Zukunft. 😉
Ansonsten was den Inhalt vom Artikel angeht, gut geschrieben und vor allem eine gute Selbstreflektion. 😉
nastorseriessixs letzter Beitrag..Pixelmator – 1A Grafikprogram für kleines Geld
Lennart Prange
19. Mai 2009 um 10:39 UhrDanke. Ich lese selber lange Artikel. Deswegen hab ich diesen auch nicht aufgeteilt. Als ich gesehen habe, dass der Artikel über 2000 Wörter hat, dachte ich mir schon, dass das einige abschrecken könnte. Naja, ihr könnt euch den Artikel ja selber einteilen, oder? Vielleicht mache ich nochmal 2 Teile draus. Er hat mich viel Zeit gekostet. Ich will das er gelesen wird 😀
Marvin
19. Mai 2009 um 12:27 UhrAlso ich habe ihn trotz der Länge schnell durchgelesen,. Liegt einfach an der besseren Präsentation im Vergleich zum Vorgänger. Zum Thema: Ja ich gehe eigentlich genauso vor. Wichtig ist auf jeden Fall zu erkennen, was gut und was nicht gut gelaufen ist und die Fehler dann beim Redesign zu “beheben”. Hast du übrigens gut geschafft. Gibt also mal ein Lob ohne aber 😉
Daishi
19. Mai 2009 um 12:49 Uhrnein nein, ich finde das schon gut, längere Artikel
Hier wo man Männer vom Fach erwartet :D.
dafür gibt es ja Abschnitte…
ohne jemanden jetzt Nahe treten zu wollen ^^
Danke Lennart
alex
19. Mai 2009 um 15:12 UhrHi Lennart,
klasse Artikel – Danke dafür!
Bin selber gerade in den ersten Überlegungen zum ReDesign min. eines unserer Blogs. Da war Dein Posting schon eine große Hilfe. Meine Zeiten des aktiven Web-Designs sind schon ein paar Jährchen her 🙂
Lennart Prange
19. Mai 2009 um 15:28 UhrGerne 🙂 Viel Glück und Spaß mit deinem Redesign!
nastorserissix
19. Mai 2009 um 15:21 UhrAlso bei mir wird das mit dem ReDesign noch eine ganze Weile dauern, überhaupt bis ich da mal weiter komme in der Planung für das neue Layout bzw. am Farblayout. 😉
Tim
19. Mai 2009 um 17:57 UhrDa sind einige gute Gedanken bei. Und was die Länge angeht, ja das stimmt, das ist zu viel.
Die Kunst ist nicht lange und viel zu schreiben, sondern nur das wichtigste. Das muss ja nicht alles in einem Satz sein und kompliziert aber so gewisse Sätze oder Satzstücke könne auch wegfallen.
Mich nervt auch ein wenig dieses “hier entscheidet MAN..”. Wer Man? Du oder ihr aber es klingt so schulmeisterlich als wenn das der einzige Weg wäre. Wireframes sind z.B. für dieses arg simple Layout vergeudete Mühe. Das kann man dann auch im System entwicklen.
Ach so: habe noch nie gesehen das jemand in WordPress einen style tag in den header schreibt und dann direkt und nur @import macht. Gibt ein paar geschmeidigere Lösungen…
Lennart Prange
19. Mai 2009 um 18:09 UhrNicht alle Artikel werden so lang sein (das schaff ich auch gar nicht). Sicher können einige Sätze wegfallen. Mein Schreibstil ist für das Internet eventuell noch nicht prägnant genug. Ich arbeite daran 😉
Mhm, hab noch nie gehört, dass jemand an dem “man” etwas auszusetzen hatte. Und Wireframes sind meiner Meinung nach nie vergeudete Mühe. Es ist einfach besser, die Gestaltung auf einem Papier vorauszuplanen und da gehört auch der einfach Aufbau dazu. Egal wie komplex das Layout ist. Jedenfalls finde ich das angenehmer 😉
Die Einbindung des Stylesheets habe ich mal korrigiert. Danke für dein Kommentar 🙂
Tim
24. Mai 2009 um 13:06 UhrBin zufällig über den Artikel gespolpert. Sehr viel Arbeit und wirklich hilfreich (auch noch für mich). Deshalb ein danke von mir!
Übrigens das Design gefaällt mir gut.
Tims letzter Beitrag..Bequemer und schneller Kopieren > TeraCopy 2
Lennart Prange
24. Mai 2009 um 13:12 UhrFreut mich. Danke 🙂
Schorschi
7. Juni 2009 um 19:02 UhrMoin,
richtig, richtig cooler Artikel! Ich selber habe momentan keinen Blog, aber fande es trotzdem interessant, wie andere Leute ans “Designen” gehen.
Übrigens was du beschreibst, dass man bei der Umsetzung doch immer wieder Dinge findet, die nicht fertig gedacht waren, kenne ich gut.
Finde deinen Blog übrigens richtig, richtig cool! Bin dir mal direkt gefollowt bei Twitter (georgschaal :p), aber leider funktioniert der RSS Feed bei mir nicht richtig -.- Keine Ahnung wieso.
Naja weiter so! Bin gespannt auf deine nächsten interessanten Artikel 😉
Gruß Schorschi
Matthias
16. Juni 2009 um 09:52 UhrDanke für die Tipps, hab sie beim Relaunch beachtet (hoffe ich zumindestens) 😉
Lennart Prange
16. Juni 2009 um 17:31 UhrGerne 🙂
Zappodrom
17. Juni 2009 um 08:25 UhrDanke für den sehr interessanten Bericht. Mich würde noch interessieren wie Du die Slideshow technisch umgesetzt hast. Es scheint ja kein Flash zu sein, was ich schon mal gut finde. Hast Du da einen Link für mich?
Lennart Prange
17. Juni 2009 um 08:41 UhrDas ist jQuery. Schau mal bei google nach.
Margit
26. Juni 2009 um 08:46 UhrDas ist ja sehr schön.Danke für diese Tipps , die werden mir eigentlich sehr helfen.Die Seite ist ja toll, weiter so!
Philipp
27. Juli 2009 um 10:25 UhrSuper ausführlicher Artikel. Hast ja richtig Arbeit investiert. Werde ich mal weiterempfehlen.
Horst
15. August 2009 um 10:55 UhrSehr interessant und gut geschrieben. Vielen Dank.
SteAm
27. August 2009 um 14:16 UhrSehr guter Artikel. Hatte selbst erst die Ehre, einen Corporate Blog neu designen zu dürfen.
Markus
4. September 2009 um 02:25 Uhrsehr guter artikel. bin grad auch am redesign und versuche so gut es geht alles umzusetzen. mal schauen ob es hinhaut^^
Marko
17. Januar 2010 um 17:39 UhrHui geschafft, erst einmal sehr informativer Artikel!
Bin auch eher durch Zufall auf diesen Artikel gestoßen, da ich gerade auf der Suche nach ein paar Tipps zum redesignen bin und da kam mir dein Artikel sehr gelegen. Danke für die nützlichen Tipps und die Links, werde versuchen mich daran nun zu orientieren.
holger
28. Januar 2010 um 23:23 UhrWirklich sehr lesenswerter Artikel. Besonders interessant für jemanden wie mich, der bisher “nur” Artisteer für das Template nutzt 🙂 Ok das funktioniert zwar soweit echt gut, aber hier und da muss trotzdem nachgearbeitet werden. Schön mal zu lesen wie das “eigentlich” richtig geht 😉
Michael Finger
3. März 2010 um 18:49 UhrDer Artikel hat mir schon mal ein wenig weiter geholfen, wie ich am besten an ein neues Design von meiner Webseite ran gehe.
Danke für den Artikel, ich persönlich fand ihn nicht zu lang, wollte das nur noch mal sagen, weil da einige geschrieben hatten in den Kommentaren das der Artikel doch ein wenig lang wäre.
Silvi
13. Juni 2010 um 17:34 UhrSehr Hilfeich geschrieben. Mal sehen ob ich es auch umsetzen kann.
apaju
14. Juli 2010 um 03:28 UhrEine der bestens Referenzen die ich zum Redesign gelesen habe. Bei uns steht auch in kürze ein größeres Redesign an und ich Hoffe meine Notizen reichen aus um nicht zu vergessen! Danke für die Tipps!
Thomas » Ofen Kamine
15. Juli 2010 um 15:42 UhrSpannender Artikel. Wie wir unserer Seite ein neues Design verpasst haben sind wir auch ähnlich vorgegangen.
Besonders gefallen hat mir, dass du dir einen genauen Plan gemacht hast.
Bei uns ist das ganze ein wenig kaotischer abgelaufen ;).
Die länge finde ich persönlich ok.
Habs mir in zwei Etappen durchgelesen ;).
GeT4 Shirt Druck
3. November 2010 um 11:59 UhrAm Wochenende habe ich mit einem Bekannten Webmaster gesprochen der auch nun ein Redesign erstellen will und habe ihn nur mal drauf hingewiesen das zb. Guenstiger ja nun nach dem Redesign erst mal Probleme bei der Suchmaschinen Platzierung hatte. Denn wenn man zu viel an der Seite auf einmal umändert ist es auch nicht gut. Deshalb gehe ich momentan dazu über meine Seiten schritt für schritt an ein neues Aussehen zu bringen und lasse das Gerüst dahinter stehen. Aber die Aussage Umsetzung des Designs in mehrere Tage ruhen lassen kann ich nur zustimmen, es kommen immer wieder kleinigkeiten die man wieder anders macht.
Daniel
14. November 2010 um 23:39 UhrHi, gutes Design ist wirklich mehr als wichtig, ich lese zur Zeit ein Buch in dem es genau um dieses Thema geht und man glaubt garnicht wie Leute denken die eine Seite zum ersten mal besuchen. Vielen Dank für diesen Artikel, ich beschäftige mich gerade Beruflich sehr mit dem Thema und dein Artikel hat mir auch sehr geholfen. Viele Grüße, Daniel
Mario >> Suchmaschinenoptimierung günstig
3. Januar 2012 um 17:09 UhrSehr interessante Liste, den ein oder anderen Punkt habe ich selbst auch auf meiner Todo-Liste, Du hast mir jedoch auch etwas Inspiration vermitteln können – Danke dafür 🙂
Max
19. März 2012 um 17:51 UhrFand insbesondere den Link zu den Totorials (PSD to xhtml) sehr nützlich. Danke für den Beitrag! Ein paar konkrete Beispiele für gelungene Blog-Relaunches wären natürlich top gewesen. Aber will net meckern… 🙂
Mac
17. Mai 2012 um 07:08 UhrArtikel sollten lesbar sein. Das halte ich für wichtig. Dazu muss das Design stimmen und soll den Leser nicht vom (möglichst interessant geschiebenen) Text ablenken. Stichwort Weißraum und klare Benutzerführung.