Blogsalon 01 – Das Bloglayout

2015/12/20
Blogsalon – Tipps für dein Bloglayout // Foto © fieberherz.de

„Design should never say ‚Look at me.‘
It should always say ‚Look at this.'“
David Craib, Designer

Heutzutage ist es leicht, einen Blog zu eröffnen – kostenlose Plattformen gibt es ja dafür genug. Wenn man eine Vorliebe für das Schreiben hat, fällt es auch wohl nicht sehr schwer, alles mit Inhalt zu füllen. Doch eben dieser Inhalt, so gut er auch sein mag, transportiert sich nur schwer von alleine. Die Gestaltung eines Blogs und der Posts sollte ihn unterstützen und verstärken. Dabei glaube ich fest daran, dass gelungene Gestaltung kein Hexenwerk ist! Auch wenn man sonst wenig mit Grafiken & Co. zu tun hat, kann man unter Beachtung einer Handvoll Tipps plus eigenem Ehrgeiz gute Ergebnisse erzielen. 

Blogsalon ist die neue Mini-Reihe auf FIEBERHERZ zum Thema Blog- und Postgestaltung – von grob bis fein. Augenmerk liegt dabei eher auf textlastigen Blogs, wie es ja auch FIEBERHERZ selber ist. In diesem (ausnahmsweise etwas längeren) Beitrag geht es um das grobe Bloglayout. Zu Feinheiten gibt es später weitere Posts. Viel Spaß beim Lesen





Blogaufbau und -vorlage

Menschen ohne HTML-/CSS-Kenntnisse und/oder mit nur wenig Zeit, finden im WWW unzählige Blog-Vorlagen, sog. Templates, für unterschiedliche Plattformen wie beispielsweise Blogger und Wordpress. Die gibt es natürlich sowohl kostenlos, als auch kostenpflichtig. Will man ein anständiges Layout, empfehle ich wirklich, auch einmalig ein bisschen Geld zu investieren – es gibt Layouts für jedes Budget, die meist viel besser aussehen, als alle kostenlosen Standardvorlagen. Standard erkennt man übrigens auch immer noch dann, wenn man einfach Linkfarben verändert und einen großen Header reingepackt hat ;)

Grundsätzlich lassen sich viele Layouts individualisieren, sei es durch integrierte "Programme" wie z.B. dem Vorlagendesigner bei Blogger, oder mit kleinen HTML- bzw. CSS-Tricks, die sich mit Hilfe von Tutorials auch ohne viel Kenntnis in dem Bereich umsetzen lassen (Google ist da wieder ein grandioses Helferlein, wenn man nur will). In der heutigen Zeit bietet es sich zudem an, ein Layout zu wählen, das auch auf dem Smartphone funktioniert und dort denselben Wiedererkennungswert hat, wie im normalen Webbrowser – Google unterstützt übrigens seit April 2015 bevorzugt Blogs mit Smartphone-Optimierung.

Bevor du eine Vorlage auswählst, mache dir eine Liste mit Unterseiten und sonstigen Links (z.B. für Social Media) zu machen, die sich grundsätzlich im Layout wiederfinden sollen und rechtlich gesehen teilweise auch müssen. Das erleichtert das Anfertigen einer groben Layoutskizze und somit die Entscheidung darüber, ob die Vorlage beispielsweise nun ein, zwei oder keine vertikalen Seitenspalten bzw. Sidebars haben soll. Bei FIEBERHERZ sah eine erste Skizze so aus:

Skizzen für das Bloglayout // Foto © fieberherz.de
Skizzen für das Bloglayout // Foto © fieberherz.de


Das Hauptaugenmerk sollte auf der Haupt- bzw. Textspalte liegen, dem Herzstück des Blogs. Je weniger links, rechts, sowie oben und unten davon ablenkt, umso glaubhafter erscheint es, dass sich ein Blog wirklich über den Inhalt der Posts definiert. Für mich hat sich in der Vergangenheit bewährt zu schauen, ob die Hauptspalte breiter ist als die Seitenspalte oder beide Seitenspalten zusammen – damit signalisiert schon der Aufbau, dass der Text im Mittelpunkt steht und nicht der Klimbim darum herum.


Was soll in die Menüs im Bloglayout? // Foto © fieberherz.de
Was soll in die Menüs im Bloglayout? // Foto © fieberherz.de


Inhalte von einem Menü ganz oben, einer oder zwei Seitenspalten und einer abschließenden Leiste am Ende der Seite sollte man für sich für das Skizzieren eines Layouts "staffeln" – Links wie Impressum und Haftung sind am besten von jeder Seite aus erreichbar, allerdings nicht das spannendste an einem Blog. Also macht es Sinn, spannende Links zu Unterseiten prominenter zu platzieren.
Dieser Gedanke war übrigens bei FIEBERHERZ entscheidend, um ein Menü oberhalb des Headers und unten auf dem Blog zu wählen. Oben sind Inhalte, die ich dem Leser wirklich ans Herz lege, wohingegen ich unten quasi nur mein "Pflichtprogramm" an Links eingebettet habe.

Zur (inhaltlichen) Gestaltung dieser Spalten und Menüs gibt es aber mehr im nächsten Post von Blogsalon :)

Zusammenfassung

  • kostenlose und standartisierte Layouts sollten nicht immer die letzte Lösung sein
  • ein gutes Layout funktioniert im Webbrowser und auf Smartphone bei gleich bleibendem Wiedererkennungswert
  • CSS/HTML lassen sich mit Vorlagendesignern bei Blogger/Wordpress anpassen – viele Tutorials im Internet helfen bei anderen Dingen auch ohne viel Kenntnis
  • Liste mit Links und Unterseiten im Bloglayout zu staffeln nach Wichtigkeit für den Leser (z.B. ist "Veröffentlichungen" interessanter als "Impressum") erleichtert Skizzieren eines Layouts
  • der Layoutsuche sollte eine Skizze des Inhaltes zugrunde liegen – der Inhalt sollte sich nicht nach einem schicken Layout richten, sondern das Layout nach dem Inhalt
  • Hauptspalte ist idealerweise breiter als die Seitenspalte(n zusammen), um Wichtigkeit der Posts besser zu betonen

        Meine Link-Tipps für Blogger- + Wordpress-Vorlagen, kostenpflichtig – aber günstig & gut!

        Nützliche Links mit HTML-/CSS-Tricks etc.

  

Schlüsselfarben & -grafiken

Farben und Grafiken sind wiederkehrende Schlüsselelemente der Gestaltung und stellen den optischen Feinschliff dar. Dezent platziert bieten derartige Wiederholungen eine Orientierungsmöglichkeit für Leser, die ihnen helfen, sich schnell auf der Seite zurecht zu finden und somit auch schnell zum eigentlichen Inhalt kommen zu können. Zusätzlich unstreichen und prägen Schlüsselelemente die gesamte optische Identität eines Blogs und schaffen hohen Wiedererkennungswert.

Zusammengewürfelte Gestaltung ohne klare, gestalterische Linie, wird eher wahrgenommen als "unprofessionell" und "hobbymäßig" – da nützt auch guter Inhalte wenig, wenn er sich schlecht oder zumindest nicht gerne liest. Will man also solch einen Eindruck vermeiden, lohnt es sich, Zeit in die gestalterischen Schlüsselelemente zu investieren. Denn ganz ehrlich – auch wenn etwas "nur" ein Hobby ist, bedeutet das überhaupt nicht, dass es "unprofessionell" wirken muss. Ich behaupte das Gegenteil: Wem sein Hobby, das Bloggen, wirklich am Herzen liegt, bemüht sich neben dem Inhalt auch um eine gute, sinnvolle Gestaltung.


Schlüsselfarben im Bloglayout // Foto © fieberherz.de



Am Beispiel von FIEBERHERZ kristallisieren sich schon bei nicht all zu genauer Betrachtung drei Schlüsselfarben heraus. Mein Leser weiß recht schnell bei Besuch dieses Blogs, dass beispielsweise die im Fließtext in Goldgelb dargestellten Wörter Links sind und dass die dunkelgraue Schrift eben immer der reguläre Text ist. Natürlich muss man eine Linkfarbe nicht komplett durchziehen – solange es einer gewissen Logik folgt, also intuitiv nachvollziehbar bleibt. Am Beispiel von FIEBERHERZ haben z.B. die Links in den Menüs ganz oben und ganz unten eine andere Linkfarbe, weil nur hier der Hintergrund dunkel ist. Dennoch sind alle Farben Teil der oben gezeigten "Farbfamilie".

Wenn man noch mit Grafiken spielen möchte, bieten sich hier wiederkehrende Elemente an wie z.B.

– Trennlinien,
– Auflistungssymbole,
– Buttons für Links,
– "Logos" für Teile einer Post-Reihe

Solche Grafiken kann man, wenn man selber keine Ahnung oder Zeit / Lust hat, diese zu erstellen, vielfach im Internet finden. Auch hier ist wiederum weniger mehr: Nicht alles, was gefällt, passt unbedingt in das Gesamtkonzept. Schlüsselfarben helfen oft, sich in Sachen Grafik richtig zu entscheiden – zumindest, was die Farbigkeit angeht. Es lohnt sich zusätzlich, mal bei "großen" Blogs vorbeizuschauen, um zu sehen, welche "grafische Sprache" dort "gesprochen" wird. Natürlich kommt es auch auf den Inhalt an und das Image, das man vermitteln möchte – ist man eher eine ernste Person, die ebenso ernste Texte schreibt? Dann sollte man nichts wählen, das zu verspielt aussieht – und andersherum. Reflektiere, wer du bist, sei ehrlich, mache dich nicht von Gestaltungstrends auf Blogs abhängig und kopiere nicht andere. Anders bist du sonst schnell wieder unzufrieden mit dem Layout und dem Bloggen an sich.

Zusammenfassung

  • sinnvoll eingesetzte Farben(familie) und Grafiken helfen dem Leser, sich besser orientieren und schneller zum eigentlichen Inhalt kommen zu können
  • als Schlüsselelemente betonen sie idealerweise die optische Identität des Blogs und schaffen einen guten Wiedererkennungswert 
  • ganzheitliche Gestaltung mit wiederkehrenden Elementen in Farbe bzw. Grafik wird (unbewusst) eher als harmonisch und "professionell" wahrgenommen
  • Farben und Grafiken sollten zum Blogthema und -betreiber passen für Authentizität (und längeren Spaß am Bloggen)

        Diese Link-Tipps beziehen sich auf das Thema Schlüsselfarben bzw. Farbfamilien.
 

        Hier findet ihr Grafikquellen, meist kostenlos, teilweise geringfügig kostenpflichtig.
 
        Welche Farben wann wie wirken kann man hier nachlesen.


Hintergrund

In den Hintergrund der Seite und/oder speziell der Posts lassen sich bereits für Anfänger leicht Farbe oder Bild einbauen. Und genau das ist eine der übelsten Gestaltungsfallen! Wie fast überall in Sachen Design, empfiehlt sich nicht ausschließlich das, was gefällt, sondern insbesondere das, wodurch Inhalt und Layout unterstützt werden. Zu leicht sollte man es sich mit dem Hintergrundbild bzw. der Hintergrundfarbe also nicht machen.

Zu vermeiden sind unruhige Muster und sehr dunkle Farben auf zu großem Raum, die das Lesen von Text und das Erfassen einzelner Grafiken um den Text herum erschweren. Stelle dir das Layout samt Inhalt als ein Zimmer vor – wenn alles unaufgeräumt ist und du eigentlich nur eben deine Schlüssel finden möchtest, statt alles durchwühlen zu müssen, kann das frustrierend werden. Wenn da noch überall unterschiedliche Gegenstände herumliegen, erschwert es die Suche noch mehr. In seinem eigenen Zimmer mag man das in Ordnung finden, aber um ein Gästezimmer, quasi um deinen Blog, sollte es so nicht bestellt sein.


Gerade viel Text sollte einen einfachen Hintergrund haben. / Grafik © fieberherz.de

In obigen einfachen Beispiel passieren stark heruntergebrochen zwei Dinge:

  1. Die Felder 1 und 2 ziehen das Auge praktisch an, dunkle Farben dominieren und werden eher als Formen wahrgenommen – aber weniger als etwas, das Text transportiert. 
  2. Beim Versuch, den Text zu lesen, fällt dem Auge das Erfassen in Feld 3 am leichtesten. Obwohl es entgegen der üblichen Leserichtung platziert ist, kann man annehmen, dass es am ehesten komplett erfasst wird.

Bei zu geringem Kontrast und zu wenig Freiraum um den Inhalt wird die Konzentration schnell stark geschwächt – und auch die Geduld des Lesers und damit die Lust, weiter zu lesen. Erleichtere ihm das Kennenlernen deines Inhaltes, nutze dezenteren, helleren Hintergrund gerade für viel Text. Das gilt auch für Grafiken, die der Leser wahrnehmen und auch anklicken soll.
Im Übrigen nehmen wenige Leser solche Dinge bewusst wahr – nur weil man denkt "Das ist doch in Ordnung, was soll an dem Hintergrund schlimm sein?", heißt das nicht, dass das Auge quasi nicht ermüdet. Selbst wenn den Leser offiziell der unruhige Hintergrund nicht stört, fällt die Verweildauer des Lesers auf deinem Blog kürzer aus, als sie sein müsste.

Zu dem Verhältnis Text und Hintergrund im einzelnen Post wird es aber nochmal einen gesonderten Blogbeitrag für diese Reihe geben – daher wurde das alles hier nur "gestreift".

Zusammenfassung

  • ein guter Hintergrund eines Blogs und / oder Posts unterstützt Inhalt und Layout
  • ein unruhiger und / oder zum Text zu kontrastarmer Hintergrund erschwert das Erfassen des Layouts, sowie das Aufrechterhalten der Konzentration beim Lesen des Inhalts
  • schlecht zu erfassender Inhalt verringert die Zeit, die der Leser auf deinem Blog verbringt

      Hier findet ihr kostenlose Hintergrund-Muster für euren Blog.

Pattern © Andrew Wagner





Dies war der erste Post zu Blogsalon – ich hoffe, es waren ein paar hilfreiche Hinweise für dich dabei, wie man ein Bloglayout "anpacken" kann, wenn man sich ein gutes, individuelles wünscht! In den nächsten Wochen und Monaten wird es immer mal wieder weitere Posts dazu geben, allerdings dann weniger Themen pro Post ;)

Im nächsten Post dreht es sich um die Ausgestaltung von Sidebars und Menüs – plus kleine Überraschung


Kommentare zu "Blogsalon 01 – Das Bloglayout "
  1. Toller Post! Meine Skizze für ein neues Blogdesign sieht allerdings immer viel "hässlicher" aus bzw. findet sich bei mir (anders als bei dir wie's scheint^^) niemand mehr außer mir zurecht xD

    AntwortenLöschen
    Antworten
    1. Danke, freut mich, dass er dir gefällt :)♥ Ich hoffe, dass die Nachfolge-Posts ebenfalls Gefallen finden :)

      Das mit dem "irgendwie hübsch" machen habe ich von meiner Mama... :p Bei so lästigen/trockenen Sachen wie Planung brauche ich was für's Auge. Du solltest mal meine Lernkarten für die Uni sehen, haha. Sieht aus, als wäre ich der größte Streber ever, allerdings *brauche* ich das halt, um langweiliges "Bimsen" zu verschönern...

      Löschen