Der Weg zu einem guten Blogdesign

DirectAds
Werbung

Der Autor: Hallo, mein Name ist Lennart Prange. Ich bin seit Januar 2008 aktiver Blogger und berichte auf meinem eigenen Blog daswebdesignblog.de über Webdesign.

Heute gibt es mal wieder einen sehr interessanten Gastartikel. Lennart betreibt daswebdesignblog.de. Ich kann allen Webdesign-Interessierten diesen Blog nur empfehlen. Ich lese ihn selber sehr gern und freue mich, dass Lennart einen recht ausführlichen Artikel über Blogdesign bei mir “abgeliefert” hat.

Der folgende Artikel geht auf die Frage ein, warum man überhaupt ein professionelles Blog-Design braucht und warum man es an die eigenen Bedürfnisse anpassen sollte.

Im weiteren Verlauf des Artikels werden die Grundelemente eines Blogdesigns vorgestellt und welche Bedeutung diese haben.

Lennart hat auch viele interessante Blogs verlinkt, die ich teilweise selber regelmäßig lese. Zudem hat er auch ein paar eigene Artikel verlinkt, was er auf Grund der Qualität seiner Artikel gerne darf.

Damit übergebe ich Lennart nun das Wort:

Wer seinem Blog ein eigenes Design spendieren möchte, braucht Vorkenntnisse in vielerlei Hinsicht. Programmiersprachen, Layout und Design sind nur Teile des Ganzen. In diesem Beitrag möchte ich euch etwas über das Design von Blogs erzählen. Dafür gehe ich auf die Vorbereitung ein und dann auf jedes einzelne Element (Sidebar usw.). Der Beitrag hält auch ein wenig Inspiration bereit.

Viel Spaß beim Lesen. Ich freue mich über eure Kommentare.

Warum braucht man ein professionelles Design?

Im Internet gibt es extrem viele Blogs. Zu fast jedem Thema gibt es mehr als 10 Stück. Wenn man als Blogger in den Genuss vieler Besucher kommen will, führt meistens kein Weg an einem professionellen Design vorbei. Der Content ist zwar wichtiger, der erste Eindruck entscheidet aber häufig schon über vieles. Ein Design ist um einiges schneller erfassbar als Text und ist daher von größerer Bedeutung für den ersten Eindruck. Außerdem will man aus der Masse herausstechen.

Weiterhin haben Blogs mittlerweile viele Funktionen und sind nicht mehr reine Textseiten. Um die ganzen Funktionen wie letzte Artikel, Blogroll, Werbung usw. unterzubringen, ohne dass der Nutzer die Übersicht verliert, braucht es einige Kenntnisse in Sachen Layout. Hinzu kommen noch gute Überschriften und vieles mehr.

Also: Das Design von Blogs ist komplex. Wenn man das Design für sich erstellen lässt, oder es selbst erstellt, kann man es genau an seine Bedürfnisse anpassen (lassen).

Ein professioneller Webdesigner sollte fähig sein, ein Design zu schaffen, welches allen Anforderungen gerecht wird. Ohne Vorkenntnisse geht das aber nicht.

Vorbereitung

Vor dem Design steht die gründliche Vorbereitung. Als erstes sollte man festlegen, was für ein Design man haben will. Hier unterscheidet man zwischen zwei Arten: Magazine Themes und Normale Themes. Erstere sind komplexer und zeigen mehrere Artikel auf der Startseite. Dafür sind die Ausschnitte aber kleiner. Für gewöhnlich hat es einen sog. Featured Artikel, welcher groß herausgestellt wird. Ein Magazine Theme wirkt grundsätzlich auch professioneller und voller.

Hier findet ihr ein guten Artikel über Magazine Themes.

Normale Blog Themes kennt jeder und auch hier, bei SelbständigImNetz, ist ein relativ standardmäßiger Aufbau gewählt worden.

Von großer Wichtigkeit für das Design ist auch der Funktionsumfang. Je mehr Funktionen ein Blog haben soll, desto voller wird das Design und umso wichtiger ist eine klare Struktur.

Weiterhin sollte man einplanen, wieviel Werbung man einbauen möchte. Wenn man das nachträglich macht, kommen oft halbherzige Lösungen raus, die weder vorteilhaft sind, noch gut aussehen. Über die richtige Positionierung von Werbung findet ihr auf meinem Blog einen Artikel.

Außerdem sollte die Zielgruppe möglichst genau eingegrenzt werden. Es ist wichtig zu wissen, wer die Seite nutzen wird/soll. Nur so kann man die Wünsche der späteren Benutzer kennen und erfüllen. Denkt daran: Der Benutzer steht auf einer Website immer im Vordergrund!

Der Header

Der Header (Kopfbereich) ist eines der wichtigsten Elemente. Die meisten Besucher werden ihn als erstes sehen und nur hier und im Footer kann sich ein Designer richtig austoben. Ein guter Header kann ein Blogdesign unvergesslich machen und hilft daher beim Branding. Denkt daran, dass das Logo das wichtigste Element des Headers ist und immer sofort erkennbar sein muss.

Wenn ihr einen seriösen Eindruck machen wollt, lasst ihr das Logo am besten ohne irgendwelche Hintergrundeffekte stehen.

Wer keine Ahnung hat, wie man einen einigermaßen vernünftigen Header erstellt, kann sich mal dieses Tutorial anschauen: Teil 1, Teil 2.

Der Header von mosaiko

Der Header von Mike Poss

Der Header vom Outlawdesignblog

Die Navigation

Ich könnte hier jetzt viel zum Thema Usability erzählen, aber die meisten Blogs haben nur sehr wenige Unterseiten und bei der Navigationsstruktur kann man daher nicht viel falsch machen.

Wichtig ist die Position der Navigation. Fast alle Nutzer werden die Navigation horizontal unter dem Header oder in der linken Sidebar erwarten. Da die meisten Blogs nur eine Sidebar haben, hat sich die erste Variante eigentlich durchgesetzt. Hier kann man noch ein wenig variieren und die Navigation zum Beispiel über den Header packen, wie es z. B. bei problogger.net der Fall ist.

Bitte begeht nicht den Fehler und platziert die Navigation irgendwo rechts in der Sidebar. Nach dem Footer ist das der letzte Platz, wo die Leser nach der Navi suchen werden.

Bei der Gestaltung solltet ihr darauf achten, dass die Navigation ohne Grafiken, die Text beinhalten, realisierbar ist. Der Text sollte immer mit HTML geschrieben werden.

Das sollte aber keine so große Hürde sein. Webdesignerwall (s. unten) zeigt wie es geht.

Die Navigation von rockatee.com
Blogdesign Tipps

Die Navigation von Mercer Bradley
Blogdesign Tipps

Die Navigation von Webdesignerwall.com
Blogdesign Tipps

Der Content

Im Contentbereich werden die Leser ihre meiste Zeit verbringen. Daher ist es wichtig, dass dieser gut strukturiert und übersichtlich ist.

Ich habe bereits einen sehr umfangreichen Gast Artikel über Contentgestaltung geschrieben und möchte hier nicht nochmal alles aufzählen. Bitte lest euch den Artikel durch. Er enthält viele Tipps. Hier noch ein paar Ergänzungen.
Nur Links unterstreichen. Fast alle meisten Leser werden auf unterstrichenen Text reagieren und ihn sofort als Link identifizieren.

Ein weiterer wichtiger Aspekt ist die Schriftgröße. Hier sollte man das Rad nicht neu erfinden. Ich empfehle eine Schriftgröße um die 12 Pixel. Die meisten Schriften sind so gestaltet, dass ihr am Zeilenabstand und Zeichenabstand nichts manuell ändern müsst.

Überschriftengrößen müssen konsequent eingehalten werden, damit der Leser der Hierachie immer folgen kann. Also: Am größten sollte die Beitragsüberschrift sein. Darauf folgt dann die Überschrift innerhalb von Beiträgen, die den Beitrag aufteilt. Die nächst kleinere Schrift teilt die Teilstücke nochmal usw.

Das könnte so aussehen:

Überschrift 1

Überschrift 2

Überschrift 3

Der Contentbereich von daswebdesignblog.de
Blogdesign Tipps

Der Contentbereich von problogger.net
Blogdesign Tipps

Der Contentbereich vom smashingmagazine
Blogdesign Tipps

Die Sidebar

Die Sidebar enthält weitere Informationen für den Besucher und ist ebenfalls sehr wichtig. Ein Beitrag zur Gestaltung der Sidebar könnt ihr auf meinem Blog finden. Hier geht’s zum Beitrag.

Hier die wichtigsten Punkte aus dem Beitrag kurz zusammengefasst:

Die meisten Blogs haben nur eine Sidebar. Wenn dem so ist, muss man diese rechts vom Content platzieren. Das sind die User gewohnt. Außerdem liest man von links nach rechts und der Content ist wichtiger als die Sidebar.

Achtet darauf, die einzelnen Bereiche der Sidebar klar voneinander zu trennen. Die Sidebar muss sich auch klar vom Content abheben, damit keine Verwirrung entsteht.

Die Sidebar von elitistsnob.com
Blogdesign Tipps

Die Sidebar von psdtuts
Blogdesign Tipps

Die Sidebar von copyblogger.com
Blogdesign Tipps


Der Footer

Blogs brauchen häufig sehr viele Funktionen. Wenn man die Sidebar nicht vollkommen zu knallen will, muss man entweder auf ein paar Sachen verzichten, oder sie in den Footer verlagern.

Der Footer sollte sehr klar vom Content getrennt werden. Das kann man durch einen einfachen, aber deutlichen Strich oder auch einen Farbwechsel machen.

Im Footer können sich Designer nochmal richtig ausleben. Wie im Header kann man ein paar tolle Effekte einbauen. Man muss es aber nicht.

Der Footer ist das Ende der Seite und sollte deswegen einen Link enthalten, der zurück zum Seitenanfang führt.

Der Footer von samrayner.com

Der Footer von tnvacation.com

Der Footer von Colourlovers


Weiter lesen

Und hier noch einige nützliche Links für die Gestaltung von Blogdesigns – viel Spaß :-)

Der Sinn einer Internetseite und Usability
10 Principles Of Effective Web Design
What makes a good Blogdesign
11 things to consider when designing your blog theme

Du hast Interesse einen Gastartikel hier auf “Selbständig im Netz” zu veröffentlichen? Dann einfach eine eMail mit kurzer Vorstellung und Artikelideen an autor@selbstaendig-im-netz.de senden.


Werbung
Werbung

Kommentare

  1. meint

    Es kommt natürlich immer darauf an was man mit einem Blog bezwecken möchte. Nicht jeder Blogger legt Wert auf hohen Traffic und steigende Leserzahlen, daher ist es durch aus legitim nicht überall ein professionelles Design besitzen zu müssen.

    BTW: “Ein professioneller Webdesigner” der nicht in der Lage ist ein Design zu schaffen, welches allen Anforderungen genügt, ist keiner! Schließlich heißt es ja auch professionell und nicht “Hobby-Webdesigner” ;o)

    Klasse Beitrag Lennart

  2. Holger meint

    Aufgrund der starken Verbreitung von WordPress als Blog-Software erkennt man in den allermeisten Fällen Blogs die WordPress als System nutzen. Natürlich kann man seinem Blog mit ausreichend Know-How ein eigenes Design geben, was zumindest bei deutschen Blogs aber ehr selten der Fall ist – warum auch immer. Für geschäftlich genutzte Blogs würde ich immer ein eigenes Design wählen welches möglichst unverwechselbar ist …nennt man wohl auch corporate identity.
    Wordpress als Magazin zu nutzen ist zwar recht beliebt, jedoch in der Regel recht umständlich zu verwalten und man braucht schon professionelle Kenntnisse um Anpassungen selbst vornehmen zu können. Grundsätzlich lohnt da auch mal ein Blick auf Content-Management-Systeme die in vielen Fällen alle Features eines Blogs (z.B. Pingback, Trackback etc). Außerdem bieten “echte” CMS meist deutlich mehr Features als eine reine Blogsoftware. Es kommt natürlich immer auf den Badarf an.

  3. meint

    Ein sehr netter Gastbeitrag. Jetzt muss ich erstmal die ganzen Links durchgehen, damit ich auch alles nachvollziehen kann. :) Solche Gastbeiträge könnten öfters kommen, sind wirklich prima und der passt auch gut zu deinem Blog selbst. :)

  4. meint

    Ich hätte mich über ein paar Links zu Agenturen gefreut, die professionelle WP-Templates den eigenen Vorstellungen entsprechend designen. “Klassische” Webdesign-Agenturen haben leider idR wenig Erfahrung mit dem Script, gerade bei größeren Arbeiten möchte ich mich aber ungern auf (im WP-Umfeld zahlreich agierende) Einzelkämpfer verlassen.

    Ciao
    Johannes

  5. Andreas meint

    Mensch Peer – super Beitrag aber ein paar Tage früher wäre nicht schlecht gewesen. :lol: Habe gerade mein Blogdesign geändert. Denke aber, ich liege bei meiner Umsetzung gar nicht soo daneben. Werde sicher das eine oder andere noch ergänzen.

  6. meint

    Ich habe mich bei meinem Blog für ein dreispaltiges recht klassisches Theme entschieden. Ich hatte die Erfahrung gemacht, dass sich die Augen häufig auf Blogs regelrecht verlaufen. Das passiert, wenn es keine eindeutige horizontale und vertikale Trennung der einzelnen Beiträge und der Werbung voneinander gibt. Mein Traum wäre ein nur für mich von einem Profi erschaffenes Theme mit einem witzigen Logo und individuellem Schriftzug für den Blognamen.

  7. meint

    Ein ansprechendes Design zu haben ist wichtig. Allerdings finde ich das Übersichtlichkeit und Usability noch wichtiger sind. Was mir an Selbständig im Netz besonders gut gefällt, ist im Header die Übersicht der letzten und beliebteste Artikel. Ich werde nicht drum rum kommen mir ebenfalls sowas zu basteln. :cool:

  8. webstyle meint

    Schöner Post Lennard, gute beispiele. Mal ein langer Post den man echt schnell runterlesen kann. :lol:

  9. meint

    Danke für eure zahlreichen Kommentare :)

    @Benni: Nein, copyblogger widerspricht nicht meiner Empfehlung ;). Hättest du den weiterführenden Link angeklickt, hättest du noch mehr über die Position der Sidebar erfahren. Copyblogger hat mehr als eine Sidebar. Das musst du beachten :)

    @webstlye: Hey, mein Name wird mit “t” geschrieben.

    @Johannes: Sorry, aber ich wollte nicht zu viel Werbung machen. Kann Google da nicht helfen?

  10. meint

    @Lennart Leider nicht wirklich, schon gar nicht im Bezug auf empfehlenswerte Anbieter…bei “klassischen” Agenturen hab’ ich mir schon einen Wolf telefoniert, viele nehmen entsprechende Aufträge schlicht nicht an. Die Wirtschaftskrise kann uns offenbar doch noch nicht ganz im Griff haben.

    Im professionellen WP-Umfeld bin ich auf perun.net, webdesign-in.de & inpsyde.com gestoßen, sehr viel mehr gewerbliche Dienstleister gibt es fürchte ich nicht.
    Eine Alternative wäre das Ausweichen auf Agenturen in den USA oder emerging nations (via rentacoder.com u.ä. Diensten), in Übersee gibt es etliche Anbieter. Bei derart kommunikationsintensiven Arbeiten wie der Erstellung eines passgenauen Templates bevorzuge ich dann aber doch native Speaker, um Missverständnissen vorzubeugen.

    Ciao
    Johannes

  11. meint

    Wie schrieb Webstandard-Team
    Es kommt natürlich immer darauf an was man mit einem Blog bezwecken möchte. Nicht jeder Blogger legt Wert auf hohen Traffic und steigende Leserzahlen,

    ehm… was denn dann?
    das man auf Trash-Traffic keinen Wert legt, ok. Und nicht auf Teufel komm raus irgendwas postet, … Aber steigende Leserzahlen? Die hätte doch eigentlich jeder gerne …

    Ansonsten, ja Design ist wichtig, und den 1. Millionsten Blog mit dem blauen Header oben … naja, wenn der Inhalt stimmt, wird der auch seine Leser haben … leicht wird es so allerdings nicht,
    Grüße Bella …

  12. meint

    Danke sowas kann ich im moment auch gut Gebrauchen, vieles hab ich schon von Natur aus so gemacht aber da sind einige Nützliche Tipps die mir im moment helfen können an meinem Zweiten layout

  13. meint

    Vielen Dank für den einleuchtenden Beitrag.
    Eine Sache ist mir aber aufgefallen, die ich besonders im Zusammenhang mit der technischen Miniaturisierung (Notbooks, Netbooks und mobile Endgeräte) wichtig finde. Die Schriftgröße von 12px empfinde ich (und ich habe ganz gute Augen) als zu klein. Einen guten Beitrag darüber gibt es bei den Informationsarchitekten “The 100% Easy-2-Read Standard” (http://informationarchitects.jp/100e2r/). Ich habe Seiten von mir dahingehend angepasst und bin zufrieden damit. Eine kleine Diskussion über Gegenteilige Meinungen gibt es auf meiner Seite http://marius300482.wordpress.com/2008/12/22/webdesign-lesbarkeit-von-internetseiten-merklich-erhohen/.

  14. meint

    Ich glaube schon, dass man viele dieser Punkte beachten sollte. Ich glaube aber auch, dass man darüber hinaus niemals seinen Weg und sein Ziel vergessen darf. Denn es gibt sicherlich einige Dinge, die mit der Blogseite nicht übereinstimmen werden. Jeder stellt sich selbst etwas vor und möchte das umsetzen. Ich denke, dass man von diesem Weg, auch wenn es nicht immer professionell und perfekt ist nicht allzu sehr abweichen sollte. So bleibt man sich selbst treu und das nicht nur im wahren Leben, sondern auch im eigenen Blog.

  15. meint

    Interessanter Artikel. Dazu muss man vielleicht sagen, dass es noch nie so einfach war, ohne großes Können zu einem guten Design zu kommen. Schließlich werden an jeder Ecke des Netzes hochwertige Themes angeboten, die keinen Cent kosten. Das hat allerdings auch den Nachteil, dass sich die wenigsten die Mühe machen, ihrem Blog eine persönliche Note (in Bezug aufs Design) zu verleihen.

Trackbacks/ Pingbacks

  1. Der Weg zu einem guten Blogdesign…

    Den Weg zu einem guten Blogdesign erklärt dieser Artikel anhand vieler Beispiele und Erläuterungen. So wird euer Blog-Theme wirklich professionell….

  2. Der Weg zu einem guten Blogdesign…

    Den Weg zu einem guten Blogdesign erklärt dieser Artikel anhand vieler Beispiele und Erläuterungen…

Werbung