Bringt eure Blogdesigns auf das nächste Level!

  • von Lennart Prange

thumbBlogdesign bringt mir persönlich viel Spaß. Aus dem Grund entwickle ich mich häufig weiter und müsste deshalb eigentlich auch dieses Blog 2 mal in der Woche redesignen. Naja.

Jedenfalls sind viele Blogs heute auf einem recht hohen Niveau, was die Gestaltung angeht. Anbieter von Premium Themes und hochwertige Freethemes machen es Bloggern möglich, aus vielen verschiedenen Blogdesigns zu entscheiden.

Für die Designer unter euch (und das sind hoffentlich einige) bietet es sich natürlich an, Blogs selber zu gestalten und ihnen eine persönliche und einzigartige Note zu verpassen. Dieser Beitrag befasst sich nicht mit den Grundlagen des Blogdesigns. Vielmehr möchte ich auf Dinge eingehen, die häufig vernachlässigt oder übersehen werden.

Aber nicht nur für Blogdesigner ist dieser Beitrag interessant. Viele der hier aufgeführten Anregungen lassen sich auch auf andere Bereiche übertragen.

Wenn euch das Thema interessiert, könntet ihr auch Gefallen an meinem Gastartikel “Der Weg zu einem guten Blogdesign” finden.

Kommentare, Retweets usw. würden mich wirklich freuen. Viel Spaß mit dem Beitrag.

Typographie

Man kann mit CSS mehr machen, als die meisten denken und auch wenn die Möglichkeiten im Gegensatz zum Print Bereich weiterhin kümmerlich wirken, lohnt es sich, sich mit dem Thema zu beschäftigen.

Wer ein wenig mehr raus holen will, kann sich auch wp-sIFR angucken. Mit dem Plug-In kann jeder kinderleicht sIFR integrieren und so auf mehr Schriften zurückgreifen. Nutzt es aber bitte nur für Überschriften.
Mit sIFR kann man zum Beispiel so schöne Überschriften wie Collis Ta’eed zaubern.

The Netsetter

Thenetsetter zeigt übrigens, das Serifenschrift auch auf dem Monitor problemlos darstellbar ist. Meiner Meinung nach ist das auch kein Problem. Wenn ihr eine Serifenschrift für den Fließtext verwendet, solltet ihr nur darauf achten, die Schrift etwas größer zu machen. 16px finde ich angemessen. Außerdem solltet ihr nicht Times verwenden. Georgia ist für den Bildschirm die bessere Wahl.

theswishlife zeigt, wie gut Serifenschrift aussehen kann. Dort wurde versucht mit Schrift und Layout an ansprechendes Äußeres zu erreichen. Nicht mit Bildern.

The Swish Life Magazine

Weiterhin zeigt theswishlife Initialen (das sind die großen Buchstaben am Anfang der Beiträge). Das sieht man auf Internetseiten nicht sehr oft, sieht aber nett aus und ist mit CSS einfach zu machen.
Interessant ist auch die zentrierte Ausrichtung in den 4 Boxen. Das wird auch gerne als ein Mittel für Kreativlose bezeichnet um Kreativität vorzutäuschen und ist tatsächlich mit Vorsicht zu genießen, passt in diesem Fall aber sehr gut. Natürlich ist das Schriftbild viel zu unruhig um längere Texte zentriert auszurichten, aber für kurze Absätze ist es doch eine interessante Sache, oder?

Wo wir schon bei der Ausrichtung sind fällt mir spontan der Blocksatz ein. Niemals (!) im Internet mit Blocksatz arbeiten. Es entstehen dermaßen hässliche und große Lücken, dass das nicht gut aussieht und auch nicht Benutzerfreundlich ist. Im Print Bereich ist das was anderes. Dort gibt es Möglichkeiten, um Wöter automatisch trennen zu lassen und weitere Optionen, um die Probleme zu verringern.

The morning News lockert das Schriftbild mit Unterteilungen und Zitaten auf. Mir gefallen diese Zitate, die den Text nicht unterbrechen sondern ihn begleiten. Stellt euch diesen Beitrag mal ohne die Zitate vor. Viel abschreckender ginge es nicht mehr.

The Surrogate Life by Leah Finnegan - The Morning News

Es lohnt sich übrigens auch darüber nachzudenken, mit Großbuchstaben zu arbeiten. Solange man nicht ganze Sätze sondern nur ein paar Wörter so darstellt, ist das mit der Lesbarkeit auch kein Problem.

Das ist natürlich ein Detail, aber schließlich geht es hier auch um das nächste Level und gutes Webdesign findet sich nun mal in den Details. So wie bei A List Apart. Die Autoren sind mit Großbuchstaben dargestellt.

A List Apart- A List Apart

Dort lohnt sich übrigens auch ein Blick in die Sidebar. Bei Editors Chioce wurde der Zeichenabstand erhöht. Sieht doch recht interessant aus.

Unterseiten

Im Archiv werden alle Beiträge gesammelt. Man kann es nach Monaten, Wochen oder Jahren ordnen. Mein Archiv bietet dem Leser zwei verschiedene Möglichkeiten an.

Mein Archiv ist auch ein super Beispiel für die Vernachlässigung von Unterseiten. Wohl alle Blogdesigner planen die Startseite ausführlich. Auch die Beitragsseite wird noch mit Photoshop im Voraus gestaltet. Ich bin mir aber sicher, dass nur wenige Unterseiten wie das Archiv, die Sucherergebnisse usw. detailliert im Voraus planen. Das Ergebnis ist dann natürlich so gut wie immer suboptimal. Deswegen fordere ich an dieser Stelle mehr Liebe für Unterseiten 😉

Einen sehr guten Job hat obox mit dem neuen Theme Press da gemacht. Das Archiv ist meiner Meinung nach sehr gut: Es sieht gut aus, es ist übersichtlich.

Press

Press hat übrigens auch eine Galerie, die wirklich einen Blick wert ist.

Auch die Über Seite von Freelanceswitch macht meiner Meinung nach eine recht gute Figur. Klar, sie sieht jetzt nicht außergewöhnlich aus, aber die Aufteilung in Tabs kommt mir doch recht sinnvoll vor.

About Us – FreelanceSwitch

Werbung

125*125 Banner haben sich zum Standard entwickelt und auch wenn die Werbung wohl der Bereich ist, auf dessen Gestaltung die meisten Leute am wenigsten achten, könnte man sich doch über andere Varianten Gedanken machen.

Ich bin froh an dieser Stelle auch ein deutsches Blog erwähnen zu können. Das wirklich sehr nette Design von Stylespion zeigt mal eine andere Form von Werbung in der Sidebar. Mit Bild und Beschreibungstext. Finde ich als Besucher angenehmer, da ich über das Angebot informiert werde (ich bin keiner, der aus Prinzip nicht auf Werbung klickt, aber auf nichtssagenden Bannern bleibt  auch meine Maus nicht lange).

StyleSpion - Lifestyle Magazin, Design, Inneneinrichtung, Wohndesign, Möbel, Einrichtungstipps und Musik Blog

Interessant ist dort auch die Anzeige der letzten Beiträge. Mal nicht als Liste in der Sidebar sondern mit Bildern und horizontal über dem Content. Sie geben einen schnellen Überblick.

Logos

Ich halte es keinesfalls für notwendig, einem Blog ein gutes Logo zu spendieren, aber es ist natürlich ein Teil des i-Tüpfelchens.

An dieser Stelle zeige ich immer wieder gerne das sehr gute Logo von Just Creative Design.

Just Creative Design  Graphic Designer, Logo Designer

Weitere Details

Gehen wir noch ein wenig mehr ins Detail. Viele Blogs veröffentlichen sehr häufig Content und es ist für die Besucher deshalb wichtig, das Datum zu sehen. So kann man die Beiträge auch auf Aktualität überprüfen und merkt, wenn man einen 30 Jahre alten Test von Katzenfutter vor sich hat.

Die Anzeige des Datum geschieht häufig in Form eines einfachen Textes. Aber es gibt auch hier viele kreativere Varianten. Ein Kalenderblatt ist übrigens recht langweilig. Meiner Meinung nach 😉

Bei Hey Josh wird das Datum als Grafik dargestellt und sieht doch ganz gut aus.

Hey Josh

Ein weiteres Detail ist natürlich die wechselnde Farbe der Grafik.

Bei Blogs werden auch gerne Top Listen in der Sidebar und im Footer dargestellt. Zum Beispiel “die 10 meist kommentierten Beiträge”. Anstatt eine einfache Liste zu zeigen, findet man bei Chris Guillebeau eine cool nummerierte Liste.

The Art of Nonconformity

Fazit

Blogdesign ist extrem umfangreich. Selbst das kleinste Blog bietet einem Designer genug Fläche um sich auszutoben. Und das in jedem Bereich. Typographie, Layout usw. Die Vielfältigkeit ist enorm.

Das bietet natürlich auch eine größere Möglichkeit für Nachlässigkeiten. Jedes Element eines Blogs zu planen und gestalten kann schon anstrengend sein, aber die Beispiele hier zeigen, wie viel Spaß die Ergebnisse machen.

Wer von euch es wirklich ernst meint mit Blogdesign, findet hier sicherlich viele interessante Anregungen und wird das nächste Blog vielleicht anders gestalten oder sich schon jetzt nach einem Redesign sehnen 😉 Wichtig ist, dass ihr auch daran denkt, dass ich hier nicht auf alles eingegangen bin. Wie sollte ich auch. Das würde ein Buch füllen. Bleibt beim Gestalten also Aufmerksam. Erstellt euch vielleicht eigene Checklisten, damit ihr nichts vergesst.

Ich freue mich auf eure Kommentare 😉

24 Kommentare

  1. Mario
    12. August 2009 um 21:16 Uhr

    Wieder ein sehr schöner Artikel von dir! Mir wäre die Idee zu dem Beitrag schon gar nicht gekommen, aber ich finde es absolut Spitze, wie du immer perfekte Beispiele findest. Liest du diese Blogs alle oder woher kennst du so viele Webseiten, die dir in deinen Artikeln als Beispiel dienen?

    Nun zum Artikel: Ich glaube, dass die von dir angesprochenen Punkte sehr gut geeignet sind, um Akzente zu setzen. Allerdings kann ich mir eine ganze Webseite, die alle diese Punkte berücksichtigt nur schwer vorstellen. Das wäre ja schon ein Kunstwerk. Dennoch hat mich der Artikel dazu bewogen, mir ernsthaft Gedanken über ein Redesign meines Blogs zu machen.

    • Lennart Prange
      12. August 2009 um 22:27 Uhr

      Danke.

      Die Beispiele hier lese ich zum Teil. Den Rest suche ich mir immer aus den vielen Galerien zusammen. Das kostet zwar Zeit, aber da ich selber lieber Beiträge mit Beispielen lese, weiß ich, dass es sich lohnt.

      Sicher, alles zu berücksichtigen (und dieser Beitrag geht ja auch noch nicht auf alles ein) wird fast unmöglich. Aber ich wollte vielmehr Anregungen geben. Wenn du jetzt beginnst, neu über dein Design nachzudenken, hat der Beitrag wohl funktioniert 🙂

  2. pisti
    12. August 2009 um 22:47 Uhr

    ist das bewusst, dass du blogs mit dem Hauptkontrastfarben schwarz/weiss ausgesucht hast?

    • Lennart Prange
      12. August 2009 um 22:50 Uhr

      Darauf habe ich nicht geachtet, ist mir aber ebenfalls aufgefallen.

  3. Manu
    12. August 2009 um 22:51 Uhr

    Nett, wie Du hier ins Detail gegangen bist, Lennart! Mit Initialen und Großbuchstaben beschäftige ich mich in letzter Zeit auch häufiger. Bin jedoch noch nicht dahinter gekommen, wie ich diese am besten weiter innerhalb des Textes setzen kann. Aber Danke für die Beispielseite, die wird mir sicherlich da weiter helfen!

    Was ich jedoch nicht verstehen kann ist die große Abneigung gegenüber Blocksätzen: Diese können durchaus schön und benutzerfreundlich sein, solange man ein bisschen auf die Wortanzahl Rücksicht nimmt. Vielleicht liegt es auch daran, dass ich derzeit an zu vielen Templates arbeite und mit Lorem Ipsum gut am ausfüllen bin. 🙂

    Die Anzahl der letzten 10 Beiträge ist mir neu, bin bisher immer auf die aktuellsten 5 gestoßen. Aber gut, auch was feines! Achja, was übrigens auch sehr nett aussieht, ist die Nummerierung der Kommentare! Hab‘ dazu leider grad kein Beispiel zuhanden, sry.

    Mich würde es sehr freuen, wenn Blogdesigns mehr auf CSS aufbauen würden. Damit käme man etwas mehr der Barrierefreiheit entgegen und vorallem auch meiner Verbindung, ja!

    • Lennart Prange
      12. August 2009 um 22:55 Uhr

      Danke.

      Für Initialen kannst du einfach p:first-letter{} verwenden. Damit kannst du das erste Zeichen eines Absatzes stylen. Großbuchstaben funktionieren natürlich einfach mit text-transform:uppercase;. Die Tipps hätte ich vielleicht einbauen sollen.

      Gegen Blocksätze habe ich nichts, wenn sie im Print Bereich eingesetzt werden 😉 Die Technik im Web ist einfach noch nicht weit genug um damit zu arbeiten. Denke ich. Natürlich lasse ich mich vom Gegenteil überzeugen. Bisher ist mir aber erst eine Seite über den Weg gelaufen, wo das einigermaßen geklappt hat. Hast du Beispiele?

      • Andre
        13. August 2009 um 13:39 Uhr

        Zum Blocksatz…guck dir meine Seite (http://www.chukki.de) an. Ist mit JS umgesetzt..hyphenator heißt das gute ding. Geht leider etwas zu leiden der Geschwindigkeit, weil eine riesen Datei dahinter steht, welche weiß wo getrennt werden muss.

  4. Millus
    12. August 2009 um 22:54 Uhr

    Interessanter Beitrag. Ich habe auch echt lange gebastelt bis ich endlich mit meinem Blogdesign eigenermaßen zufrieden war. Mein Problem, ich habe viel zuviele Kategorien, Links und Themen.
    Auch muss man werbetechnisch das Layout auch unter einem anderen Licht sehen. Denn nicht jeder Platz eigenet sich für Werbung und es gibt viele Richtlinen von Google Adsense & Co.

  5. shortee
    13. August 2009 um 11:57 Uhr

    danke für den post.
    ich plane gerade auch ein neues design und die erinnerung an wp-sifr kommt mir da gerade recht 🙂

  6. Jana
    13. August 2009 um 13:28 Uhr

    Sehr interessanter Beitrag. Nachdem ich mit meiner Zwillingsschwester erst seit kurzem wieder blogge und für den Anfang auf ein fertiges Theme zurück gegriffen habe, bin ich gerade dabei ein eigenes zu gestalten. Da bin ich natürlich immer auf der Suche nach guten Tipps, was man zu beachten hat und vor allem auch nach Meinungen – was eben für ein gutes Blogdesign spricht.

    Der liebe Blocksatz. Ich glaube man liebt ihn oder man hasst ihn. Ich hasse ihn, ganz gleich ob im Web oder im Print 😉

    wp-sirf hab ich übrigens gerade kurz ausprobiert. Funktioniert. Werde ich mir sicher nochmal genauer ansehen. Danke für den Hinweis.

  7. Tanja Hammerl
    13. August 2009 um 14:30 Uhr

    Klasse Artikel mit vielen Anregungen und Tipps. Ich blogge selber erst seit wenigen Wochen und bisher noch auf einem WordPress.com Blog. Liegt daran, dass mir bisher noch die technischen Hintergründe fehlen ein eigenes Blog zu betreiben. Allerdings hab ich schon festgestellt, dass ich bei WordPress ziemlich eingeschränkt bin. Früher oder später muss ich mich da wohl durchbeißen… Dein Artikel wird mir mir dabei auf jeden Fall eine Hilfe sein!

  8. Kathleen Linke
    14. August 2009 um 10:02 Uhr

    Danke für diesen tollen Artikel.
    Den Punkt mit den verschiedenen Schriftarten fand ich sehr gut, denn in der Schule bekommt man immer etwas anderes beigebracht – bin angehende Mediengestalterin. Bei privaten Projekten werde ich das sicher mal versuchen. In der Schule bzw. im Beruf sind Serifen noch nicht gern gesehen…

    Es waren wirklich ein paar gute Anregungen für meinen eigenen Blog dabei. Mal schauen, wann ich das erste umsetze.

  9. Martin S.
    14. August 2009 um 13:57 Uhr

    Solangsam komme ich bei deinem Blog richtig auf den Geschmack. Deine Beiträge gefallen mir super.

    Beim Durchlesend er einzelnen Punkte fiel mir auf, wie wenig ich selbst davon berücksichtigt habe. Ich werde mein Design hinsichtlich dieser Punkte sicher noch einmal überarbeiten.

    Ich freue mich schon auf deinennächsten Artikel.

    Gruß Martin

  10. Ohrflieger
    14. August 2009 um 14:17 Uhr

    Der Artikel gefällt mir, vielen Dank für deine Anregungen! Doch alle deine Beispiele lassen sich mit Sicherheit auf (fast) jede Website übertragen und nicht nur auf Blogs. Solche Details wie kreative Listenpunkte, kleine Grafiken, die das Design aufpeppen oder gut durchdachte Gestaltung der Schrift sind das „i-Tüpfelchen“ für jede Seite.
    Allerdings lassen sich solche Designaspekte eher auf Blogs finden als auf „normalen“ Websites, weil meist Designer oder Kreative hinter den Blogs stehen. So eignen sich Blogs gut als Beispiele.

  11. torsten
    14. August 2009 um 18:21 Uhr

    Schöner Artikel. Bisher hatte ich keine Zeit mich mit Blogdesign zu befassen, aber der Artikel macht schon Lust drauf. Danke dafür.

  12. chris nürnberg
    14. August 2009 um 20:04 Uhr

    Der Hinweis mit den Großbuchstaben habe ich schon umgesetzt. In der Tat kann man so nicht längere Texte (lesen) schreiben, aber als Hervorhebung einzelner Worte ist das einach mal interessanter als Fettschrift!
    Danke für den ausführlichen, toll bebilderten Artikel!

  13. Alfred
    18. August 2009 um 16:11 Uhr

    also ich fand diesen Beitrag auch sehr interessant. ich befasse mich zuz. sehr intensive mit Typographie, und hab Layout usw. ein bisschen vernachlässigt. danke für die Seite hier, die ist recht hilfreich

  14. Nerdster Magazin
    24. August 2009 um 12:41 Uhr

    Sehr toller Artikel! Der Artikel war sehr inspirierend! Besonders der Part mit der Typographie. Danke =) Wegen dir habe ich jetzt wieder mal lust auf ein redesign =) Grüße^^

  15. Millus
    25. August 2009 um 02:37 Uhr

    Ich habe mir am WE ein neues Design verpasst und es bei blogspot gemacht. Hab mich echt gewundert was es da jetzt für Gestaltungsmöglichkeiten es gibt.
    Das Ergebnis: http://millus.blogspot.com

    Wahrscheinlich werde ich noch einige Gimmicks einbauen, aber das Gerüst steht.

  16. Julia
    25. September 2009 um 04:51 Uhr

    Ich habe mein Blogdesign auf http://www.fotoholiker.com nun ebenfalls zum nächsten Level gebracht, in dem ich eines von einer Agentur hab erstellen lassen.

  17. Michael Finger
    6. Januar 2010 um 16:32 Uhr

    Ist das jetzt der neue Trent für 2010 man macht nur noch Webseiten fast ohne Farbe, sondern in schwarz => weiß und Graustufen?? Ein wenig Farbe finde ich eigentlich selber etwas schöner.

    Sonst sind da sehr schöne Anregungen bei, danke dafür.

Trackbacks/Pingbacks