SlowLifeLab

Laboratorium für Traditionelles und Historisches

Der Weg zum aktuellen Design von slowlifelab

| 5 Kommentare

Ansicht auf breiten Bildschirmen (mit bereits geänderten Schriften)

Ansicht auf breiten Bildschirmen (mit bereits geänderten Schriften)

Wie die Stammleser von slowlifelab vielleicht wissen, schrieb ich meine Diplomarbeit anno 2000 bei einer Webagentur. Begeistert vom damaligen In-Thema Wissensmanagement, schrieb ich über das Verfassen und die Verwendung von Lessons Learned aus IT-Projekten.

slowlifelab ist nun ein Jahr alt und steht vor dem Redesign. Bevor das aktuelle Design dem Vergessen preisgegeben wird, möchte ich seine wichtigsten Eigenschaften und den Entscheidungsweg dorthin festhalten. Vielleicht kann man in einem zweiten Schritt ein paar Lessons Learned ableiten.

Der Leitsatz zum Design

Zunächst war slowlifelab als Selbstversorger- und DIY-Blog gedacht. Das sollte sich natürlich auch im Design der Seite widerspiegeln.

Zusammengefasst, kann man meine damalige Aufgabe folgendermaßen beschreiben:

Stelle genussvolles Selbermachen in unserem roten Haus dar

Und so ging ich vor:

Das Template

Ein komplett selbstgemachtes Template (genaugenommen zwei) hatte ich für DasBogenfenster entwickelt und dabei fast die Lust am Bloggen verloren. Bei slowlifelab wollte ich den Fehler nicht wiederholen und ein freies Template anpassen.

Am besten gefielen und gefallen mir heute noch Grunge-Designs und skeuomorphe Themes wie Morning Coffee  oder Coffee-Desk. Gerne hätte ich eines dieser Templates angepasst und um persönliche Elemente ergänzt. Aber leider sind Grunge-Templates selten responsive. Stunden, Tage der Templateevaluierung folgten. Letztendlich blieb die Wahl zwischen Ari und Yoko von Elmastudio.

Letztendlich gefiel mir die Formatierung der Startseite bei Ari besser. Der Weißraum unter dem Artikelbild bei Yoko störte mich. Der Text sollte das Vorschaubild umfließen.

Die Farben

Die Farben des Blogs sollten an unser Haus erinnern.

Ich nahm daher ein Foto unseres Hauses zur Hand und reduzierte seine Farben, bis fünf übrig blieben:

Gelbliches Weiß, hellblau, hellgrün, grau und helles Terracottarot.

Gelbliches Weiß Hellblau hellgrün grau (später abgedunkelt) terracotta (heller durch Alpha Kanal)

Diese Farben notierte ich in allen Farbnotationen und suchte alternativ noch die passende websichere Farbe. Damit war mein Stylebook zur Gestaltung des gesamten Blogs fertig.

Die Schriften

Zur Auswahl der Schriften verwendete ich das Buch Firmendesign mit kleinem Budget.

Dem Autor erachtete ein Design mit bis zu zu drei Firmenschiften als ansprechend. So entwarf ich das typografische Logo und leitete die auf der Website verwendeten Schriften davon ab. Die Quelle dieser Schriften ist das stetig wachsende Google-Fonts-Verzeichnis.

Typografisches Logo mit drei Schriften

Typografisches Logo mit drei Schriften

slowlifelab ist in Camelcase geschrieben und enthält drei Elemente:

  1. Slow : Langsam, selbstgemacht, traditionell, ohne industrielle Vorgehensweise. Ich stellte mir eine Oma vor, die Marmeladengläser beschriftet.
  2. Life: Leben mit seinen Höhen und Tiefen. So gut, wie man es aus eigener Kraft schaffen kann. Ich stellte mir mich selbst als Studentin vor.
  3. Lab: Labor, Laboratorium. Mit wissenschaftlicher Vorgehensweise und Aufzeichnungen. Eigentlich ist der Unterschied zur Studentin nicht groß. Allerdings würde ich Wissenschaftliches sachlicher notieren. Etwa wie im Buch „Business Model Generation“.

Für diese drei Elemente sollen drei verschiedene Schriften stehen:

Slow als Text

Vibur, die Google-Font, die der Schreibschrift am Nächsten ist, zum Symbolisieren des “Slow”.

Life

Waiting fort he Sunrise, ebenfalls eine Handschriftart, sieht aus wie schnell notiert. Sie soll „Life“, das alltägliche Leben symbolisieren.

Lab

Cabin Sketch erinnert an technische Zeichnungen. Auch diese werden in einem Labor gemacht.

Alternative zum Titelbild

Leider enthält das Template Ari außer dem Logo kein Titelbild. Mir waren immer mehr bildfüllende Hintergrundbilder aufgefallen. So entschied ich mich für ein sprechendes Hintergrundbild an Stelle eines Titelbildes.

Hintergrundbild mit Samen, Plan des Badezimmers und "Selbstversorgung aus dem Garten"

Hintergrundbild mit Samen, Plan des Badezimmers und „Selbstversorgung aus dem Garten“


Hintergrundbild mit Ansicht von Mölln, Nähzeug und Büchern

Hintergrundbild mit Ansicht von Mölln, Nähzeug und Büchern

Ich gruppierte bezeichnende Objekte aus unserem Haus mit einem Weißraum in der Mitte und fotografierte sie. Darunter war z.B. ein Dudelsack, ein vom Urgroßvater gemaltes Bild, alte Bücher, eine Gießkanne, aber auch selbstgeschriebene, neue Notizzettel.

Hintergrundbild mit Hummel (Dudelsack), Kultursense und Gießkanne aus Metall

Hintergrundbild mit Hummel (Dudelsack), Kultursense und Gießkanne aus Metall

Das Plugin „Better Backgrounds“ wählt ein Hintergrundbild aus mehreren Motive aus und zeigt es bildfüllend auf jedem Bildschirm an. Da auf kleineren Bildschirmen zu wenig Platz zum Erkennen der Motive blieb, ließ ich den Hintergrund etwas durch den Textbereich durchschimmern. Insbesondere beim letzten Motiv war verringerte dies letztendlich die Lesbarkeit des darüber liegenden Textes.

Selbstgemachtes symbolisieren, aber responsive!

Wie könnte man “Selbstgemacht” symbolisieren, ohne Ladezeit kostende und schief skalierende Grafiken einzusetzen?

Ari setzt unter jedes jedes WordPress-Widget eine Linie. Das wirkt sachlich und wenig selbstgemacht.

Nach etwas Nachdenken und Anregung durch andere DIY-Seiten kam ich auf den Gedanken,  durchgehende aber gestrichelte Rahmen als Symbol für Handgenähtes zu verwenden. 

In den Anfangszeiten von Word und Co. wurden gestrichelte Rahmen zur Gestaltung von Tabellen verwendet.  Deshalb ist dieser Rahmentyp in CSS bereits enthalten (border-style: dotted). Ich hielt seinen ursprünglichen Einsatz für längst vergessen und die Zeit reif für ein Upcycling.  Allerdings war ein Anteil der befragten Leser anderer Meinung und wunderte sich über den “altmodischen” Rahmen.

"Gestickter", Dotted-Rahmen um jedes Widget

„Gestickter“, Dotted-Rahmen um jedes Widget

Ebenfalls inspiriert von diversen DIY-Bloggerinnen und aktuellen DIY-Trends fügte ich noch ein paar „gestickte“ Herzchen hinzu.

Zu viel des Guten? Die Herzchen

Zu viel des Guten? Die Herzchen

Buttons zum Verschenken

Spätestens sobald man beginnt, andere Blogger zu featuren, wird man feststellen, wie hilfreich ein Pressebereich mit frei verwendbaren Grafiken und Werbebuttons ist.

Bis zum Januar 20013 hatte ich eine hübsche Bloggroll. Ein externer Dienst stellte eine Screenshot von jeder verlinkten Website her. Anlässlich der Abmahnwelle von Getty-Images, die auch Listen mit Screenshots betraf, entfernte ich die Screenshot-Funktion wieder. Geblieben ist ein Bild: Der freie Webebutton einer Heidelberger Bloggerin.

Kurz danach stellte ich einen Buttons her, den ich zur freien Verwendung anbiete. Mehr Buttons und Pressefotos, vielleicht mit einer Registrierfunktion, sollen folgen.

slowlifelab - Laboratorium für Traditionelles und Historisches

Stimmen

Kritik, insbesondere solche aus Blogger-Workshops, ist schwer einzuschätzen. Ist das Kritisierte wirklich signifikant problematisch, oder fällt es nur auf, weil es anders ist?

Allgemein wurde angemerkt, dass die Schrift auf dem lachsroten Hintergrund schwer zu lesen ist. Das durchscheinende Hintergrundbild scheint insbesondere auf kleinen Bildschirmen zu stören.

So sieht das Blog übrigens auf großen Bildschirmen aus:

Ansicht auf breiten Bildschirmen (mit bereits geänderten Schriften)

Ansicht auf breiten Bildschirmen (mit bereits geänderten Schriften)

Der der Text zwischen den beiden Navigationsleisten sei nur schwer zu lesen. Er solle am besten links beginnen. Außerdem würden zu viele Schriftarten und Größen verwendet.

Ein Aspekt, den ich nicht bedacht hatte, war dass Schreibschriften nicht nur zwischen den Schuljahrgängen variieren, sondern auch international. So wunderte sich eine Dänin, dass ich “eine Art Sütterlin” verwende.

Andererseits nannten manche Leser das Blog „gemütlich“ und „meine Persönlichkeit wiederspiegelnd“. Änderungen würden es austauschbar machen.

Meine Meinung

Ich möchte, dass die Leser von slowlifelab meine/unsere Geschichten entspannt lesen können, ohne dass das Blog unpersönlich wirkt. Ein weißes, sachliches Blog passt nicht zu unserem Haus, das enthält nun mal über fast keine weißen, sachlichen Möbelstücke und keine einzige leere Wand.

Das als Sütterlin interpretierte Vibur entfernte ich umgehend aus dem Blog. Soll ich es für das typografische Logo wieder zurückholen?

Neben der besseren Lesbarkeit gibt es meiner Meinung nach einen zweiten Grund, das Design zu überarbeiten. Die  thematische Ausrichtung des Blogs hat sich  geändert:

  • Sehr viele Selbstversorgerblogs bieten fachlich fundierte Informationen an und arbeiten professioneller als wir mit unseren Wochenend-Selbstversorger-Gärten. Als DAS-Selbstversorger-Blog aufzutreten, halte ich für übertrieben.
  • Garten und Reskilling hin oder her, letztendlich macht es mir unheimlich Spaß, vergessene und unbekannte Geschichten und Zusammenhänge zu entdecken. Die Geschichten die mir beim Arbeiten mit alten Geräten und beim Lesen alter Bücher begegnen, handeln nicht immer von Selbstversorgern und Handwerkern, sondern auch vom vergangenen Industriezeitalter. Das Blog soll eine Mischung aus beidem sein.

Diese geänderte Ausrichtung soll sich auch im Design wiederspiegeln. Gestickte Herzchen sind hübsch, haben aber keinen Bezug zu bisherigen Blogposts.

Der Leitsatz für das neue Blogdesign ist:

Historisches und Traditionelles soll man auf slowlifelab lesen und fühlen können

Hierzu habe ich mich der einst verschmähten Yoko von Elmastudio zugewandt und werde sie bis zur nächsten Woche in ein gemütliches, aber angenehm lesbares Blog verwandeln.

Autor: Alice Scheerer

Sie sind auf der Suche nach einer Texterin und Online-Redakteurin? betreibt nicht nur dieses Blog, sondern bietet auch Corporate Blogging, Content Marketing und Recherchedienstleistungen an, z.B. für History Marketing. Nutzen Sie das Kontakt-Formular. Mehr Informationen zum Angebot auf alicescheerer.de.

5 Kommentare

  1. Statt Baustellenschild: Der Weg zum aktuellen Design von slowlifelab
    http://t.co/tjZ0ljbrvN

  2. Liebe Alice,
    jetzt wundert mich nichts mehr. Das Design von slowlifelab gefällt mir deshalb so gut, weil Du es so sorgfältig und klug gemacht hast. Das ist kein Zufall, das verstehe ich jetzt. Was mich wundert, sind die Bedenkenträger. Ich hatte hier noch nie Probleme mit der Lesbarkeit. Allerdings habe ich auch noch nicht probiert, Blogs auf dem Handy zu lesen.
    Ich selbst habe zweimal Websites mit HTML und CSS gebaut und dabei gemerkt, dass das überhaupt nicht „mein Ding“ ist. Für meinen neuen Blog verwende ich Ari – ohne große Individualisierungsbemühungen in puncto Design.
    Wie auch immer Dein neues Design wird – ich bin schon jetzt darauf gespannt, werde dem gewohnten aber auch nachtrauern, denn das gefällt mir wirklich sehr gut!
    Liebe Grüße
    Katrin

    • Liebe Katrin,
      vielen Dank für die Komplimente! Es freut mich sehr, dass Dir das aktuelle Layout gefällt!
      Das ich beim Design nicht wahllos vorgegangen bin, wollte ich mit diesem Blogpost aufzeigen. Das wird bei Feedbackrunden, in denen man die
      Kritikpunkte kommentarlos annehmen soll, leicht übersehen.
      In den letzten Wochen habe ich sehr oft über das Design und seine Zielgruppe nachgedacht.
      Ich denke nicht, dass die meisten der Bedenkenträger durch ein neues Design zu meinen Stammlesern werden. Interessen und Themen sind viel zu verschieden. Bei Altbaufans scheinen Seite und Design hingegen gut anzukommen :-)
      Ich befürchtete eher, dass der eine oder die andere von einer Erwähnung der Inhalte absieht, weil sie zu ‚rosa‘ verpackt sind.

      Ob das Re-Design wirklich notwendig war, wird sich wohl erst viel später erweisen.

      Liebe Grüße, Alice

  3. @TuraSatana Danke noch mal für das Fremdwort! Ich habe es auf der Stelle verwendet: http://t.co/tjZ0ljbrvN

  4. Pingback: Best Blog Award: Elf Fragen, Elf Antworten - slowlifelab

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


↑ Back to Top ↑