Tipps zur Gestaltung eines Blogs


Unser Unterbewusstsein spielt eine große Rolle beim fällen von Entscheidungen, innerhalb einer Millisekunde wissen wir ob wir uns von etwas angezogen fühlen oder doch lieber fern bleiben sollten. Das Unterbewusste besitzt ebenso eine große Rolle im Grafikdesign, sowie bei der Gestaltung eures Blogs. So ist es wahrscheinlicher, dass ein Blog mit einer harmonischen Design eher gelesen wird, als ein Chaotischer. Denn unser Auge liebt Klarheit, wird es zu oft abgelenkt verlieren wir schnell die Lust am Lesen.

Wenn wir einen Blog besuchen fällt unser Blick immer als Erstes auf den Header, aus diesem Grund ist es wichtig sich besonders viel Mühe bei seinem Header zu geben. Natürlich ist jetzt nicht jeder gleich ein Grafiker. Aber ich werde euch ein paar Tipps zum allgemeinen Aufbau geben, um euren Blog übersichtlicher zu gestalten. Deswegen werden wir uns zuerst einmal die Grundregeln des Kompositionsaufbaus ansehen.





1. Grafische Wirkung

 
Ich lade bei allem Bildern zu  kleinen Selbsttests ein, verdeckt jeweils ein Bild mit eurer Hand und schaut einfach einmal, welchen Bild ihr mit welchem Gefühl verbindet! 

In unserer Kultur verbinden wir automatisch unten links aufsteigende Linien etwas mit Positivem und mit links herunterfallenden Linien etwas Negatives. Nun könnte man meinen dass es eigentlich egal ist wie die Linien jetzt fallen, wie wir aber am Selbsttest sehen können ist dies falsch. Unser Unterbewusstsein ist durch unsere Gesellschaft so geprägt, und ist somit abhängig von unserer Kultur. In Ländern wo beispielsweise von rechts nach links gelesen wird, ist genau das Gegenteil der Fall...
 
 

Nun welches Bild macht auf euch einen harmonischen ausgewogenen Eindruck? Vermutlich Nummer Eins und Vier. Da die Schwerpunkte des jeweiligen Bilds gleichmäßig verteilt sind. Ungleichmäßig verteilte Kompositionen* wirken so als ob sie gleich kippen, dies vermittelt das Gefühl von Unsicherheit, wie bei Nummer Zwei und Drei. Von daher ist es wichtig das ihr falls ihr zwei Seitenleisten auf eurem Blog habt, alle Buttons gleichmäßig auf beide Seiten zu verteilen. Falls ihr nur eine Seitenleiste habt müsst ihr die Buttons/Links etc. mit etwas Anderem ausgleichen, das schafft ihr am besten wenn ihr mit der Farbe spielt.
Beschweren und Farbbild von 7hundert

Mit Farbe kann man wunderbar Wirkungen unterstreichen (s. Bild 1.), ebenso könnt ihr mithilfe von Farbe eine Seite eures Design schwerer machen. Zum Beispiel benutzt ihr dann für euren Postbereich eine leicht dunklere Farbe als für eure Sidebar und schon befindet ihr euch wieder im Gleichgewicht. Allerdings ist wichtig das ihr euch auf max. fünf Farbtöne beschränkt, ansonsten wirkt das Design schnell mal überladen. Die Farbtöne sollten harmonisch sein und auf keinen Fall zu grell, da dies den Augen weh tut. Ebenfalls sollte euer Blogthema, sowie eure Posts durch die Farben gut hervorgehoben werden. Ihr müsst die Farben nicht selbst zusammen stellen, sondern könnt auch den Generator auf ColorBlender dazu nutzen. Falls ihr mehr über die Bedeutung über Farben lesen möchtet werdet ihr viel darüber im Netz finden, ich fürchte ansonsten würde das den Rahmen sprengen. Interessant ist vielleicht auch, dass Schwarz, Grau und Weiß sind keine Farben sind, ihr könnt sie ebenfalls zusätzlich verwenden. Aber dennoch solltet ihr darauf achten alles im Gleichgewicht zu halten.
2. Tipps für euer Blogdesign


Allgemein kann ich nur sagen, falls ihr Buttons Header & Co selbst erstellen wollt benutzt ein Programm das mit Vektoren und nicht mit Pixeln arbeitet. Ansonsten haben eure Kreationen im Web meistens einen unschönen pixeligen Rand oder sind unscharf weil sie zu groß skaliert wurden. Photoshop, Gimp und Co arbeiten mit Pixeln. Vektorprogramme sind z.B. Illustrator oder die Freeware InkSkape, speichert danach euer Button am Besten im png-Format.

Logoentwicklung von Vintage meets Design
Wie oben schon erwähnt sollte vor allem Wert auf einen guten einprägsamen Header gelegt werden. Nun wie bekomme ich einen guten Header hin? Eigentlich müsst ihr designtechnisch nur alle Punkte von Oben berücksichtigen, jedoch soll ein Header auch im Gedächtnis bleiben. Deswegen ein paar kleine Tipps zu Headererstellung.
Skizziert eure Logovorstellung zuerst grob auf Papier, dazu müsst ihr auch nicht Picasso sein. Ihr könnte auch von Formen ausgehen und diese dann füllen. Eurer Fantasie sind keine Grenzen gesetzt, behaltet nur die Grundregeln etwas im Hinterkopf.
Sucht Inspiration in Büchern, Internet oder in eurer Umgebung, falls ihr ideenlos seid.
Achtet darauf das euer Blogname hervorsticht und nicht in Fotos oder euer Grafik untergeht.
Weniger ist oft mehr, so bleibt euer Logo schneller im Gedächtnis. (Oft reicht auch nur ein Symbol und euer Blogname)
Ihr könnt euren Header ähnlich wie bei 7hundert auch ins Design integrieren, aber auch hier darauf achten dass es ausgewogen bleibt. Die Ausgewogenheit wird hier durch die Menüleiste und die Linie aus Quadraten erreicht. 

Schriften im Web 

Ähnlich wie Bilder sind Schriften lizenzrechtlich geschützt, falls ihr nun eine Schriftart downloadet solltet  Ihr beachten, dass die Schriften frei sind zum weiterverbreiten d.h. dort sollte "Free" stehen und nicht nur "Free for personal use". Denn Persönlicher Gebrauch heißt nur das ihr sie privat zum Beispiel für eine Einladung o.Ä. nutzen dürft. Freie Schriften findet ihr auf DaFont oder 1001fonts. 

Serif oder Sans Serif? 

Zu Anfang meines Studiums fragte ich mich immer, worin genau der Unterschied zwischen den beiden Schriften besteht. Nun es ist ganz einfach: Serifen haben kleine Füßchen an ihren Buchstabenende (Times New Roman) und Sans Serif ist das entsprechende Gegenteil (Arial). Für Bücher werden meistens Serifen verwendet, da das Auge auf Papier besser Serifen erfassen kann. Jedoch am Computer ist es anstrengend Serifen zu lesen, weswegen für seine Posts besser eine Schrift ohne Serife auswählt.Hat euer Header vielleicht ein bestimmtes Element/Detail, das heraus sticht? Dann wiederholt es in eurem Design! So wird ein Zusammenhang zwischen Header und dem Rest des Blogs geschaffen, beispielsweise ist die Kompassnadel meines Headers ebenfalls Inspiration für den Hintergrund meines Datums und für meine vor/zurück Tasten geworden.

So damit wären wir ans Ende der wichtigsten grafischen Grundlagen gekommen, natürlich gibt es noch etliche Themen und Regeln, aber die sind für den normalen Gebrauch eher uninteressant. Ich hoffe euch mit meinen Tipps ein wenig weiter helfen zu können, beim Erstellen eures nächsten Designs!

Eure Gedanken:

  1. toller Post, da sind wirklich ein paar hilfreiche Tips dabei. Den ColorBlender werd ich mir mal genauer anschaun

    AntwortenLöschen
  2. Vielen Dank für diesen wunderbaren, hilfreichen Post :)
    Übrigens ist das ein wunderschönes Blog (wunderschöner Blog !?) :)

    AntwortenLöschen
  3. Toller Post! So viele hilfreiche Tipps, dass man sich das Ganze wahrscheinlich fünfmal durchlesen muss ;) Aber vor allem das Thema Bildgestaltung ist eine wirklich wichtige Sache, die man beachten und mit der man sich beschäftigen sollte.

    AntwortenLöschen
  4. wirklich sehr hilfreich! Das mit der Ausgewogenheit etc. habe ich so noch bei keinem gelesen! Wirklich toll :) Danke!
    Lg Christin

    AntwortenLöschen
  5. Halli Hallo, bin gerade zufällig über den Post gestolpert!
    Toller Artikel, bist Du zufällig auch Grafikerin? Einiges stammt ja aus dem 1x1 der Mediengestaltung / Grafik Design!
    Ich nutze übrigens für Farbschemata am liebsten Adobe Kuler (Klar) und genauso gern den Color Explorer, der liefert meinem Geschmack nach sehr gute Ergebnisse in verschiedenen Farbschema-Varianten.
    Ganz lieb gemeint: Einen kleinen Fehler habe ich allerdings gefunden: InDesign ist ein Layout Programm, dass zwar mit Vektoren arbeitet, aber nicht unbedingt das geeignetste für reine Vekrorgrafikerstellung ist. Ich würde hier, wenn schon kostenpflichtige Adobe Software, den Illustrator bei Weitem vorziehen, das Ganze als svg exportieren und per html skalierbar ins Layout einfügen. Ich weiß allerdings nicht, wie weit man in Blogspot ins Layout eingreifen kann, weil ich überwiegend WordPress nutze. Und zwar die selbstgehostete Version, weil man in der Server Version nicht in die Quelldateien schreiben kann :) Inkskape ist aber mindestens genauso gut geeignet für Neueinsteigen, da kann ich Dir nur beipflichten!

    Mensch, eigentlich wollte ich nicht meckern, also nochmal kurz: Klasse Artikel, sehr hilfreich für Blogstarter!

    AntwortenLöschen
    Antworten
    1. Danke für deinen lieben Kommentar! Ja ich bin auch Grafikerin :). Und danke du hast gerade einen Fehler in meinem Text gefunden, ich meinte auch Illustrator. Aber da ich in letzter Zeit so viel mit InDesign gearbeitet habe, habe ich aus versehen InDesign hingeschrieben. Peinlich.
      Man kann zwar bei Blogger ins Layout eingreifen, allerdings ist das Ganze sehr begrenzt, zum Teil funktionieren Befehle die man eingibt nicht einmal...

      Löschen
  6. Toller Artikel!
    Ich wünsche mir für meinen Blog schon lange einen tollen Header, aber ich weiß gar nicht, wie man so etwas erstellt. Muss man dafür Profi sein? Gibt es irgendwo eine Schritt-für-Schritt-Anleitung? Denn beinahe jeder Blogger hat einen selbst erstellten Header, auch die, die gerade mal mit dem Bloggen anfangen. Ich blogge seit 6 Monaten und habe noch immer keinen eigenen. :-(

    AntwortenLöschen
  7. Vielen Dank für den schönen Beitrag :) Ich versuche gerade einen Blog aus dem Boden zu stampfen und obwohl ich über das Thema Gestaltung schreibe bin ich ziemlich schnell an meine Grenzen gestoßen da mir die Kapazitäten fehlen. Einerseits möchte man sich schnellstmöglich um Traffic kümmern und guten Content generieren, andererseits sollte man sich dem Design schnellstmöglich zuwenden, da es über den ersten Eindruck entscheidet... Ich habe mich für ein absolutes Standard Theme von Wordpress entschieden, ein bisschen die Farben geändert und den Header eingebastelt, der (zugegeben) nicht wirklich kreativ ist ;(

    Wie sind da Deine Erfahrungen? Eher erst Design oder Content?
    Schließlich kann man sich später um ein schönes Re-Design kümmern, sobald genug Besucher da sind, oder?

    Liebe Grüße, Mon :)

    PS: Wer mal reinschauen möchte ist auf http://www.l2mediengestalter.de herzlich willkommen :)

    AntwortenLöschen
  8. Hallo =)
    Das ist ein toller Beitrag!!
    Danke dafür!
    Liebe Grüße,
    Sylvana
    www.sylvanagraeser.de

    AntwortenLöschen
  9. Endlich, endlich mal ein Post mit hilfreichen, gut zu verstehenden und "neuen" Tipps. Ich muss ja gestehen durch meine Mediendesign-Ausbildung ist für mich nichts neues dabei, aber es ist mal wieder schön das Wissen was man ganz hinten im Kopf hat hervorzuholen. Derzeit beschäftige ich mich viel mit dem Thema BLOG und durchsuche das Netz nach Tipps und Tricks. Auf fast jedem Blog sieht man die gleichen Tipps. Nichts neues mehr. Deine sind sehr hilfreich und gut formuliert. Vielen Dank dafür : )
    Süße Grüße
    Alison

    AntwortenLöschen
  10. Super erklärt! Danke für die Tipps

    AntwortenLöschen
  11. Dein Blog ist sehr schön. Auch gefällt mir das Blogdesign, welches auf dem ersten Bild ersichtlich ist, sehr gut!

    AntwortenLöschen