(Blog)aktionen

{Bloggeralphabet} D wie Design | Mitmachaktion

8. April 2016

Bloggeralphabet, Neontrauma

Bloggeralphabet: D wie Design


52 Wochen – 26 Buchstaben – 26 Themen.
Alle zwei Wochen steht ein neues Stichwort im Raum, das mit dem Bloggen verknüpft ist.
Wie genau das Blogger-Alphabet funktioniert und wie du teilnehmen kannst, findest du hier.


Happy Friday liebe Nischenleser,

heute war mir nicht nach Rezensionen posten und die neue Freitagsaktion ist noch nicht fertig – psssst, ich verrate nichts!

Ich möchte mich, zwar etwas verspätet – nun gut, sehr verspätet, der Buchstabe D war glaube ich im Februar ’16 an der Reihe – nun auch am Bloggeralphabet von Neontrauma.de beteiligen. Ich hatte positives Feedback auf meine Frage, ob euch das interessiert, bekommen und hier schreibe ich nun also. Diese Aktion ist überaus spannend und habe mir daher das Thema ‚D wie Design‘ herausgesucht. Das Blogdesign ist, wie ich finde, das I-Tüpfelchen eines jeden Blogs. Natürlich ist es vor allem der Inhalt, der einen Blog lesens- und letzten Endes folgenswert macht. Doch auch das Drumherum ist mit entscheidend, ob man sich nur ein paar Minuten auf dem Blog aufhält oder jederzeit gern wieder kommt. Das Auge liest bekanntlich mit und bei so mancher Webseite im Netz ergreift mein Mauszeiger ehrlich gesagt ziemlich schnell die Flucht Richtung Schließen-Button.

Ich möchte dir eine einfache Frage stellen:


Was machst du als erstes, nachdem du eine Blogadresse im Browser eingetippt hast und die Webseite sich aufgebaut hat? Beginnst du sofort, Artikel zu lesen, oder siehst du dich erst einmal um?


Ich beschreibe jetzt einmal, wie sich das aus meiner Perspektive verhält.

Der erste Eindruck: Farbkonzept & Lesbarkeit

Inspiration von Designseeds | Foto von @clangart

Ich sehe mich um, meine Augen erfassen innerhalb weniger Sekunden das Farbkonzept der Webseite. Hell oder Dunkel? Meistens fühle ich mich schon gleich wohl, wenn die Webseite nicht überladen wirkt, alles gut lesbar und aufgeräumt wirkt. Auch ein dunkles Designthema kann übersichtlich und ansprechend sein, sofern man nicht gerade zu heller Schrift auf dunklem Untergrund greift. Hier kommt das Thema Lesbarkeit schon recht früh zur Sprache:

Ich finde es unwahrscheinlich wichtig, dass man alle Texte lesen kann, ohne nach ein paar Minuten mit Kopfschmerzen kapitulieren zu müssen. Zu grelle Farben auf dunklem Untergrund, der sich mir geradezu in die Netzhaut einbrennt oder zu extreme Farbkombinationen stören meiner Empfindung nach das Leseerlebnis und sorgen dafür, dass ich die Seite schlussendlich mit einem Seufzen schließe. Ich suche mir gerne auf Webseiten wie Designseeds oder Pinterest Inspiration für Farbschemen – das als Tipp am Rande.

Das Logo

Mein Blick schweift weiter über das Menü, verweilt kurz bei den dort vorzufindenden Stichworten und bewegt sich dann mehr oder minder unbewusst Richtung Logo. Ob schlicht oder aufwändig, ich sehe es mir in Ruhe an, denn ein prägnantes, wiedererkennbares Design finde ich sehr wichtig. Passt es zum Farbkonzept der Seite? Meistens spürt man hier recht schnell, ob sich jemand Gedanken um seine Webpräsenz gemacht hat.

Dabei muss man wirklich kein Ass im Umgang mit Photoshop & Co. sein, oder außerordentliches zeichnerisches Talent besitzen. Schon mit wenigen Mitteln kann man ein Logo kreieren, dass Wiedererkennungswert hat und dabei zum Rest der Seite, zum Namen und zu einem selbst passt. Wir haben alle unterschiedliche Fähigkeiten, eine meiner Stärken ist eben Kreativität. Auch ich habe mir lange Gedanken darüber gemacht, wie mein Logo aussehen soll, habe es zunächst auf Papier skizziert und später in Adobe Photoshop und Illustrator digital ausgearbeitet.

Kindernische, März 2016

Doch ein Logo muss gar nichts Aufwändiges sein: Ein schlichter schwarzer Schriftzug in einer schicken Schriftart oder vielleicht sogar eurer eigenen Handschrift, vielleicht mit dem einen oder anderen Farbtupfer versehen, macht schon wahnsinnig viel her. Auch hier gilt meiner Meinung nach das Motto Weniger ist mehr. Abgesehen von meinem Kindernische-Logo, das gerne bunt sein darf, halte ich mich an Schlichtheit beim Farbkonzept und lenke den Blick eher auf Farbtupfer meiner Inhalte. Das Logo für meinen Kinder- und Jugendbuchbereich ist übrigens mal wieder neu gestaltet, mir war nach Veränderung. Ihr kennt das. 

Ressourcen zur Gestaltung des Blogs

Es gibt zahlreiche Seiten im Netz, auf welchen man kostenloses oder sehr kostengünstiges Grafikmaterial findet, das man zur Gestaltung seines Logos nutzen darf – oftmals reicht es dabei völlig, die Webseiten im Impressum kurz zu erwähnen, manchmal muss man noch nicht einmal das – im Fall von CC 0.0 Lizenzen z.B.. Ich bin beispielsweise sehr gerne auf unsplash.com oder stocksnap.io unterwegs und suche mir dort passende Fotos zu Blogartikeln aus. Selbstverständlich findet man diese Fotos dann sehr häufig im Netz, aber wen juckt das? Fotos von Unsplash beispielsweise dürft ihr sogar weiter bearbeiten, Collagen bilden oder was auch immer euch in den Sinn kommt, da die diese Fotos unter einer ‚do whatever you want‘-Lizenz zur Verfügung gestellt wurden. Grundsätzlich gilt, dass man sich immer die jeweiligen Lizenzbedingungen durchliest, bevor man Illustrationen oder Fotografien verwendet & bearbeitet. Wer kostengünstig nach Ressourcen Ausschau halten möchte, wird sicherlich auch etwas auf kreativen Marktplätzen wie creativemarket.com oder auch etsy.com finden – letzteres bietet auch allerlei digitale Angebote, einfach mal Stöbern lohnt sich durchaus.

Wer bloggt denn hier?

sandra

Hello, it’s me. Sandra.

Schließlich sehe ich mir die Menüführung etwas genauer an, klicke mich dann meistens als erstens zum Über mich durch, weil ich die Person hinter dem Blog gerne kennen lernen möchte. Warum bloggt sie, wie lange schon, hat sie sich etwas bestimmtes dabei gedacht, ihrem Blog diesen oder jenen Namen zu geben? Das finde ich immer besonders spannend. Die Büchernische hat übrigens auch eine kleine Hintergrundgeschichte. Ich wollte über Bücher schreiben und ein Eckchen im Netz bereit stellen, in dem man sich eingeladen fühlt, nach Herzenslust zu stöbern – eine Art Rückzugsort für Buchliebhaber, die nach einem langen, stressigen Arbeitstag in Ruhe surfen und neue Buchtipps vom Kinderbuch bis Roman finden wollen.

Die Sidebar

Anschließend scrolle ich mit dem Mausrad Richtung Artikel weiter, werfe einen Blick auf die Sidebar und sehe mir deren Struktur an. Was finde ich hier? Gibt es ein Suchfeld? Habe ich Zugang zu den Socialmediakanälen des Bloggers – sofern vorhanden -, werden Folge-Möglichkeiten angeboten – wenn ja, welche? Manchmal stellt sich die Person hinter dem Blog in der Sidebar noch einmal kurz mit Foto vor – etwas, das seit meinem Relaunch auch hier in der Nische zu finden ist. Ich finde es schön, auf diese Weise schon einmal willkommen zu heißen, bevor der Mauszeiger sich überhaupt erst zur ausführlicheren Blog(ger)vorstellung im Menü bewegt. Für mich hat es sich bewährt, die Seitenleiste ausschließlich auf der rechten Seite zu positionieren. Bevor ich mein aktuelles Theme von Solo Pine installiert habe, hatte ich ein dreispaltiges Magazinlayout verwendet, da dieses mir ausreichend Platz für zahlreiche Widgets, Fotos und Informationen bot, die ich stets im Blickfeld des Lesers belassen wollte, während man meine Artikel liest. Doch auch mit einer Sidebar habe ich noch genug Platz, da ich gründlich ausgemistet habe und nur das meiner Ansicht nach Notwendigste dort platziert habe.

Meine Widgets

Auf der Startseite nutze ich einen großformatigen Slider, um bestimmte Artikel etwas auffälliger zu präsentieren, darunter folgt ein Gridlayout mit angeteaserten Artikeln und passenden Artikelfotos. Durch die Länge der Startseite bietet sich mir so ausreichend Platz, um die für den Leser wichtigsten Informationen stets erreichbar in der Seitenleiste zu platzieren: eine Kalender als Artikelarchiv, eine Übersicht meiner letzten Rezensionen, die Kategorien“wolke“ und Badgets. Früher habe ich zum Einblenden meiner gelesenen Bücher das praktische Lesestatuswidget von Lovelybooks verwendet. Mittlerweile habe ich mir einfach ein kleines Html-Widget gebastelt, das meinen Lesefortschritt anzeigt. Im Moment verwende ich es jedoch nicht, da ich mehrere Bücher parallel lese und meine Sidebar nicht zukleistern möchte. Wen mein Lesestatus interessiert, der darf gerne hier vorbeischauen. Ich versuche stets, die Zahl der Widgets auf ein Minimum zu reduzieren, denn eine Sidebar wirkt sehr schnell ziemlich überladen. Ganz zufrieden bin ich noch nicht, zumal sich meine Blogroll am Ende der Sidebar aufgrund der Fülle an Lesehaltestellen doch ziemlich ausdehnt. Vielleicht verschiebe ich die Links doch wieder auf eine separate Seite.

Bloggeralphabet, D wie Design, Neontrauma, Blogaktion

Was geht gar nicht?

Achtung, dieser Teil des Artikels könnte etwas bissiger formuliert sein; anders kann und möchte ich das Folgende gar nicht ausdrücken. Jedes dieser Punkte spiegelt meine ganz persönliche Meinung wieder und ist nicht beleidigend gemeint – das gleich mal vorweg.


NoGo #1 Blinkernde, Spuren ziehende, durch irgendwelche Bildchen veränderte Mauszeiger – das ist ein uraltes Relikt aus der Zeit der ersten Html-Webseiten in den 90er Jahren, als jeder die neuen Möglichkeiten dieses Neulands namens Internet und dieser merkwürdigen surrenden Kiste namens Desktop-PC auszuprobieren gedachte. Seht mal, wir können den Mauszeiger einfärben. Äh.. ja. Nein. Nur weil man es nutzen kann, bedeutet dies noch lange nicht, dass das man alles ausprobieren muss, was nicht bei drei auf den Bäumen ist. Solche Spielereien kann man gerne auf seinem heimischen PC hinter den Kulissen austoben, doch auf einer Internetpräsenz sollte man sich darüber im Klaren sein, ob man ernst genommen werden möchte, oder nicht. Rosarotes Plüschkätzchenmauszeigergeschwurbel kann und möchte ich einfach nicht ernst nehmen. Sorry, not sorry.

NoGo #2 Schwarze oder allgemein sehr dunkle Hintergründe, auf welchen man schließlich in weißer (halbwegs lesbarer) oder bunter (geht gar nicht) Schrift seine Texte präsentiert. Manch einer denkt sich vielleicht, mit Hilfe von glitzernden, am besten noch sich tausendfach kachelnden Weltallhintergrundbildern so eine gewisse fantastische Stimmung vermitteln zu wollen. Doch mit Lesbarkeit hat das wirklich gar nichts mehr zu tun.

NoGo #3 Gar kein Designkonzept zu haben. Wenn ich mir ein Theme aussuche, sollte ich einfach schon eine gewisse Idee im Kopf haben, wie mein Blog später aussehen soll. Logo, Farbkonzept und Inhalt sollten irgendwo schon harmonisch zusammen und vor allen Dingen zu einem selbst passen. Wenn dann irgendwo links oben in quietschgrünem Times New Roman Größe 50px der Blogtitel prangt, schräg darunter ein Menü ohne jegliche Struktur am besten noch ohne Impressum & Datenschutzerklärung baumelt und dazu der Blogtitel an sich so aussagekräftig wie eine Wiener Wurst nach der Kollision mit einem Panzer ist, dann kann das nichts werden. Ja, es gibt solche Webseiten, zum Glück sind sie recht selten.

NoGo #4 Kein Responsive Design. Fast jeder Internetnutzer surft heutzutage unterwegs mit dem Handy, sei es morgens in der Bahn oder abends auf dem Nachhauseweg. Wenn du dann mit deinem Kaffee-to-go in der Hand nur mal eben zwischen U-Bahngedrängel und Büroarbeit deinen Lieblingsblog lesen möchtest, der sich aber leider Gottes nicht darum gekümmert hat, ob sein Design auch in der mobilen Ansicht noch gut lesbar ist, könnte dies ziemlich schnell zu einer ziemlichen Geduldsprobe für den Leser werden. Darum, ganz wichtig, immer auf die Fähigkeit des Themes, in allen möglichen Auflösungen bequem lesbar zu sein, achten.


Ich habe fertig. :)

Nein, im Ernst. Natürlich bleibt es jedem selbst überlassen, wie man seinen Blog gestaltet. Doch ich wurde gefragt, was ich für gutes Design halte, also habe ich geantwortet. Jetzt wisst ihr Bescheid. Mal sehen, welche Themen der Blogparade von Neontrauma ich in den nächsten Monaten noch aufgreifen werde. Ich wünsche euch nun schon einmal ein schönes, erholsames Wochenende, lasst es euch gut gehen. Mein Monatsresumé wird in den nächsten Tagen nachgeliefert. Ich habe derzeit viel zu tun und daher nicht ganz so viel Zeit zum Lesen & Bloggen.

Liebe Grüße

sandra_signed

You Might Also Like

6 Comments

  • Reply Mieze Schindler 8. April 2016 at 18:27

    Toller Artikel!
    Tolle Must-Haves, bei denen ich zu großen Teilen deiner Meinung bin.
    Lediglich der Punkt Header… es ist gar nicht so einfach sich einen schönes Logo/ einen Header zu bauen, wenn man kein Photoshop hat, hab ich schon festgestellt – deswegen hab ich mich gegen Bildmaterial und nur für Schrift entschieden (weil mal ehrlich, in Paint geht sowas überhaupt nicht…)
    Zu den No-Go’s gehört ür mich auch, das leider immernoch vorkommende Phänomen, der festinstallierten Musik, die anfängt zu dudeln, sobald man die Seite öffnet – nicht schön! Vor allem, wenn man keine Möglichkeit findet, sie auszuschalten.
    Was ich ebenfalls wichtig finde, dass die Fotos nicht zu groß und nicht zu klein dargestellt werden (ich meine hauptsächlich die im Artikel).

    Liebe Grüße,
    Linda

    • Reply Sandra 20. April 2016 at 21:40

      Liebe Linda,

      danke dir :)

      Gimp sollte da eigentlich auch ganz gut funktionieren, hast du das schon mal ausprobiert? Das arbeitet auch mit Ebenen, was wiederum einige Möglichkeiten eröffnet, Elemente anzuordnen. Photoshop ist auch preislich schon eine Hausnummer, finde ich. Für den „Gebrauch zwischendurch“ finde ich das schon arg teuer. Aber das muss natürlich jeder für sich selbst entscheiden. Wert ist das Programm sein Geld allemal. Und ja, Paint geht wirklich gar nicht, grausam. Ich wundere mich ohnehin schon, dass in Paint schon das Abspeichern von *.jpg möglich ist. Gab mal Zeiten, da unterstützte das nur *.bmp. ^^

      Musik?! Sowas gibt es wirklich noch? Gruselig, ich hatte gehofft, das wäre ausgestorben. Ich kenne das noch aus früheren Zeiten, aus den Anfängen der 2000er, als man auf dudelnden Webseiten begrüßt wurde und keinen Button fand, um das Gejaule auszustellen. :D

      Fotogröße finde ich auch wichtig, zumal sie auch den Artikel nicht überladen sollten.

      Danke für dein Feedback!

      Liebe Grüße
      Sandra ♥

  • Reply kielfeder 8. April 2016 at 15:25

    Ein sehr schöner Artikel, liebe Sandra!

    Ich liebe deinen Blog! ♥
    Wegen seiner Farben, dem Konzept und deiner Kreativität.
    Oft wünschte ich, ich hätte deine Fähigkeiten.
    Das neue Kindernische-Logo (überhaupt dein Logo) ist einfach wunderschön.
    Was soll ich noch sagen?
    Ehe ich mich wiederhole, wünsche ich dir ein wunderbar sonniges Wochenende!
    Liebe Grüße,
    Ramona

    • Reply Sandra 20. April 2016 at 18:15

      Liebe Ramona,

      dankeschön ♥ das höre ich gern und macht mich auch ein wenig verlegen. Jeder hat eben so seine Fähigkeiten. :)

      Liebe Grüße und eine schöne Woche
      Sandra

  • Reply Karo 8. April 2016 at 15:14

    Sehr schöner Artikel :)
    Ich selbst weiß von mir auch, dass ich ein „Augenmensch“ bin und sehr gerne länger auf Seiten verweile, die ich ansprechend finde – deine gehört da definitiv auch dazu.
    Irgendwie findet man auch immer noch einen Punkt, der noch nicht so ganz passt. Ich z.B. schiebe immer noch an der Schriftfarbe rum, weil ich es nicht leiden kann, wenn schwarz auf weiß einfach so trifft, weil das mir selbst das lesen erschwert; aber zu hell sollte es halt auch nicht sein.

    Das mit dem responsive Design finde ich auch immer wichtiger. Wenn ich sehe, dass die Homepage meiner Uni nicht einmal da hinkriegt, da könnte ich die Wand hochgehen.

    • Reply Sandra 20. April 2016 at 18:14

      Liebe Karo,

      danke dir auch für das liebe Kompliment. Oh, eine Uni-Webseite ohne Responsive Design? Das ist schon wirklich merkwürdig, gerade solche Webseiten sollten doch mit gutem Beispiel voran gehen.

      Ich weiß, was du meinst. Meine Schriftfarbe ist auch nicht ganz schwarz, sondern ein recht dunkles Grau. Ich finde, das liest sich ganz gut. Dein Logo ist schon gewürden, Ich mag das Abstrakte mit den Büchern daneben, schön geworden. Auch die cleanen Fonts sehen dazu sehr gut aus.

      Liebe Grüße & eine schöne Wochenmitte
      Sandra

    Ich freue mich auf euer Feedback :-)

    %d Bloggern gefällt das: