Der Vorhang geht auf

Alles neu. Daswebdesignblog ist mit einem neuen Auftritt online in dem viele Arbeitsstunden stecken. Dieser Beitrag gibt eine Ãœbersicht.

  • von Lennart Prange

Hier ist es also: Das neue Design von daswebdesignblog.de. Mit diesem Redesign belebe ich das Blog nach langer Pause (sieht man von den letzten beiden kurzen Beiträgen ab) wieder.


Ab jetzt könnt ihr neue Beiträge erwarten. Nicht täglich, aber auch nicht, wie zuletzt, nur monatlich.

Auch wenn das alte Design eigentlich gut funktioniert hat, brauchte das Blog diesen Umbruch.

Dieser Beitrag führt euch Backstage: Ich erkläre warum ich was wie gemacht habe, zeige euch besondere Elemente, die meiner Meinung nach gut in ein Blogdesign passen.

Wie gefällt es euch?

Ziele

Auch wenn ich dieses Thema kürzlich angerissen habe, möchte ich euch noch mal kurz die Hauptziele erklären, die ich mit diesem Design erreichen will/wollte. Denn daran muss der Erfolg und die Qualität gemessen werden.

  • Ein Umbruch – Es sollte ganz deutlich werden, dass sich das Blog jetzt im Jahr 2010 befindet und endlich wieder aktuell wird. Anpassungen am alten Design hätten aus diesem Grund nicht gereicht. Es sollte neu sein und frischen Wind bringen.
  • Einfach – Total einfach und trotzdem mit Wiedererkennungswert. Das war ein wichtiges, ehrgeiziges Ziel, dass ich mir im Vorfeld gesetzt hatte. Auf Grund dieses Zieles ist ein anderer Entwurf in den Papierkorb geschmissen worden: Er war einfach zu gewöhnlich.
  • Heller – Auch wenn ich für den dunklen Hintergrund beim letzten Design gute Gründe hatte, sah das Ganze nicht wirklich einladend aus. Ich wollte deswegen ein sehr helles Design. Trotzdem handelt es sich bei der Hintergrundfarbe nicht um reines Weiß. Das geht manchmal auf die Augen.
  • Entladen und Beladen – Nutzerlinks raus, Slideshow raus. Auf der anderen Seite Empfehlungen rein und beliebteste Beiträge für jede Kategorie.
  • Das Leseerlebnis – Für mich ist es entscheidend, dass das Lesen hier Spaß bringt, die Inhalte gut präsentiert werden und alle Beiträge übersichtlich sind.

Verschiedene Versionen

Oben habe ich es bereits angedeutet: Was ihr vor euch seht, ist nicht der erste Versuch des Redesigns. Tatsächlich habe ich mich schon Wochen vor meinem ersten Beitrag in diesem Jahr mit einem Redesign beschäftigt und erste Entwürfe angefertigt. Die wurden aber alle sehr schnell verworfen.

Von diesen Entwürfen sind nur zwei wirklich weit gekommen. Einer davon wird jetzt feinsäuberlich auf meiner Festplatte verschimmeln, der andere ist vor euch.

Die Mühe war aber nicht umsonst. Ich konnte viele Ideen aus vorangegangenen Designs in dieses einbringen.

Der finale Schnipsel Inspiration

Erst als ich einen Beitrag über Spaltensatz mit CSS und JavaScript las, wusste ich wirklich, was ich machen wollte. Und dann ging es schnell. Auch wenn nur ein sehr kleiner Teil dieser Webseite im Spaltensatz gesetzt wurde, nämlich der erste Beitrag auf der Startseite, war dies das Schlüsselerlebnis auf dem Weg zum Redesign.

Und ich war froh, dass es ein Blogbeitrag war und keine andere Webseite. Denn ich wollte ein Design gestalten, das möglichst uneingeschränkt auf meinem Mist gewachsen ist und nicht mit bekannten Blogs verwechselbar ist.

Skizzen

Um ehrlich zu sein brauchte ich kaum Skizzen. Die Startseite hatte ich im Kopf und ich habe einfach losgelegt.

Trotzdem kam hin und wieder der Bleistift oder auch Kugelschreiber zum Einsatz. Ich fertigte Skizzen für die Category.php und die Single.php an. Das hat den Gestaltungsprozess stark beschleunigt.

Ich bin ich kein hervorragender Zeichner, aber um ungefähr meine Ideen aufs Papier zu bringen reicht es. Ich habe noch viel mehr Skizzen gemacht. Allerdings häufig ohne Details und ganz grob. Nur um den Aufbau zu entwerfen.

Das Design

Wie bereits gesagt, legte ich Wert auf einen schlichten aber einprägsamen Auftritt und habe mich nicht von anderen Webseiten inspirieren lassen. Ich wollte die Seite logisch aufbauen. Und optimal für meine Zwecke.

Header/Navigation

Die Untertitel unter den Navigationspunkten hielt ich für überflüssig. Der Header ist, wie auch das restliche Design, minimalistisch.

Etwas besonderes hat er trotzdem: position:fixed;

Der Hintergedanke: Man kann jetzt überall wo man ist sofort auf die Startseite zurück oder zu einer Kategorie springen, um die Webseite weiter zu erkunden. Das hat für euch einige Vorteile und soll vor allem die Besucher von google daran erinnern, wo sie hier sind und sie zum Bleiben bewegen.

Außerdem finde ich es ganz schön, wie die Seite beim Scrollen unter dem Header verschwindet.

Oder nervt euch das zu sehr?

Der Inhaltsbereich

Viele Gestalter fangen beim Header an, ich in diesem Fall aber nicht. Wie schon gesagt, war für mich der Spaltensatz die wichtigste Inspiration und dementsprechend war dieses Element auch das Erste, was ich gestaltet habe.

Da die Startseite stilgebend für die gesamte Webseite ist, habe ich mir hier besonders viel Zeit gelassen und sehr viel experimentiert.

Euch sollte auffallen, dass ich mich bei der Typographie etwas mehr angestrengt habe als zuvor. Georgia als Überschrift, Initialen und teilweise angepasste Zeichenabstände sollen das Schriftbild interessanter machen.

Die ehemalige riesige Slideshow ist verschwunden. Die Aktualisierung war mir zu mühsam und dadurch war de Slideshow nutzlos. Außerdem gehe ich davon aus, dass ihr lieber den letzten Beitrag ganz oben sehen wollt, als irgendwelche Empfehlungen meinerseits.

Deshalb ist nun auch immer der erste Beitrag der Hauptdarsteller dieser Seite.

Darunter kommt dann das, was früher die Slideshow war: Empfehlungen von mir für euch. Artikel, die ich für gut halte und die mich meistens viel Mühe gekostet haben. Diese kleine Galerie ist für mich deutlich pflegeleichter als die ehemalige Slideshow und gefällt euch hoffentlich.

Der Footer

Ein Element, dass sich eigentlich kaum verändert hat. Ich habe lediglich das Archiv hinzugefügt um euch den Zugriff auf alte Beiträge zu erleichtern.

Die Sidebar

Hier habe ich ausgemistet. Die Nutzerlinks waren gut und schön und sollten Bloggern eine Möglichkeit geben, ihre Artikel zu promoten, letztendlich haben sie aber nichts gebracht. Da sie nur sehr selten benutzt wurden mussten sie weichen. Aber nicht für eine neue Funktion sondern für White Space. Ist doch auch was schönes.

Viel minimalistischer könnte die Sidebar auf jeden Fall nicht sein. Deswegen gibt es dazu auch nicht so viel zu sagen. Werbung ist drin, so wie vorher. Aber die Banner bleiben nach wie vor defensiv und werden euch, denke ich jedenfalls, nicht sonderlich stören.

single.php

Die single.php stellt die Beiträge dar. Dieses Template musste einfach gut werden. Deswegen habe ich mich auch vorher ans Skizzieren gemacht.

Ich habe versucht, interessante und nützliche Überschriften zu gestalten, Zitate hervorzuheben und Listen gut erkennbar und lesbar zu machen.

Außerdem bekommt ihr die Möglichkeit, meine Beiträge zu twittern oder bei hype dafür abzustimmen. Der Rest des Social Bookmark Zeug ist rausgeflogen. Das hat nichts gebracht.

Weiterhin bekommt ihr auch hier meine Empfehlungen präsentiert. Nicht als reine Liste sondern wie auch auf der Startseite mit Bild und Überschrift.

Der Kommentarbereich ist sehr schlicht und enthält nur das Wesentliche. Das Formular habe ich aus dem alten Design übernommen.

category.php

Die Artikel der einzelnen Kategorien, auf die ihr mit Hilfe der Navigation kinderleicht zugreifen könnte, werden auf eigenen Unterseiten hoffentlich übersichtlich präsentiert. Ich bin jedenfalls der Meinung.

Außerdem findet ihr unter den Artikeln aus jeder Kategorie die beliebtesten Artikel. Vielleicht findet ihr ja dadurch neuen, qualitativen Content. Allerdings ist der Zähler natürlich nicht seit Launch aktiv sondern erst seit diesem Redesign.

Probleme beim Design

Eins machte mir vor allem zu schaffen: Es ist ein Redesign. Ich musste mich mit den alten Beiträgen rumschlagen und das Design musst ein gutes Zuhause für sie sein. Das war extrem anstrengend und ich musste auf ein paar Elemente verzichten.

Die Entwicklung…

… war nicht so mühsam wie ich gedacht habe. Alle Funktionen ließen sich ohne Probleme integrieren. Nur der Internet Explorer 7 zickte etwas rum und wer ihn benutzt, muss, was das Design angeht, ein paar Abstriche machen. Aber auch dort ist alles gut lesbar 😉

Auch wenn ich kein besonders guter Programmierer bin, konnte ich dank WordPress und vor allem dank des Wissens aus vorangegangenen Projekten alles sehr sehr schnell umsetzen.

Viel mehr kann ich dazu auch nicht sagen. Oder interessiert euch noch etwas? Fragen kostet nichts 😉

Eure Meinung

Eure Meinung interessiert mich, wie immer, brennend. Natürlich ist der Kommentarbereich nach wie vor vorhanden 😉

Besser kritisiert als ignoriert!Frank Farian

Hoffentlich seht ihr in diesem Design einen Fortschritt, fühlt euch wohl und findet euch zurecht.

An der ein oder anderen Stelle finden sich vielleicht noch kleine Fehler, aber ich bemühe mich, diese so schnell wie möglich aufzuarbeiten.
Natürlich freue ich mich darüber, wenn ihr mir diese Fehler mitteilt.

Und jetzt genug geredet. Ihr seid dran 😉

31 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.