Hier mal der optische Werdegang der Site, die am 20. April 2004 das Licht der Online-Welt erblickte. (Die ursprüngliche Version, die ich der Abteilung vor dem Release vorgestellt hatte, ist mir leider bei einem Boot-Failure verloren gegangen). Rein optisch hat sich den letzten 1,5 Jahren einiges getan, doch habe ich immer nur ein bestehendes Design optimiert. Trotz farblicher Veränderungen blieb das Grundgerüst immer das gleiche.

Das Layout am 23. Mai 2004.

Das Layout am 22. Oktober 2004.

Das Layout am 30. April 2005.

Das Layout seit dem 3. Juli 2005.

Da es lediglich um den Relaunch einer bestehenden Webseite geht, ist die Frage des Content eher zweitranging, da dieser bis auf kleinere Veränderungen bestehen bleiben soll. Es geht um eine neue Optik, die sich vom alten Erscheinungsbild absetzen soll, sowie um eine verbesserte Usability. So sollen u.a. die nicht mehr zeitgemäßen Frames verschwinden. Auch soll durch den Einsatz eines Content-Management-Systems der Webmaster entlastet und der Zugang “freier Mitarbeiter” erleichtert werden. Der Einsatz einer serverseitigen Skriptsprache soll das alles erleichtern.

Der erste Schritt bei diesem Relaunch ist die Trennung vom bisherigen Konzept. Zugegeben, sich von Althergebrachtem zu lösen ist nicht leicht, aber notwendig. Ich habe zum Glück “nur” zwei Tage gebraucht, um zu der Erkenntnis zu gelangen, optisch etwas völlig neues zu wagen. Bis dato habe ich mit allen Tricks versucht das alte Design als Vorlage zu nehmen. Mit alles andere als zufriedenstellenden Ergebnissen.

Ein nicht zufriedenstellender Versuch.

Iraklis Vorschlag folgend sich an Webseiten von Unternehmen und nicht an anderen Feuerwehr-Seiten zu orientieren, habe ich mittlerweile drei “Vorbilder”. Zum einen handelt es sich dabei um die Seite von Airbus, zum anderen um die von Bosch sowie die des SWR. Alle drei Seiten haben Elemente, die ich beabsichtige in mein Design aufzunehmen.

Die Seite von Airbus

Die Seite von Bosch

Die Seite des SWR

Der zweite Schritt ist nun sich die Seite auf dem Papier grob aufzuzeichnen und sich dabei auch schon Gedanken über die Breite und farbliche Gestaltung der einzelnen Elemente zu machen. Maßgebend sind für mich die Horizontale mit 1024 Pixel (ich habe mich für eine Optimierung auf 1024x768 entschieden, darüber kann man streiten). Die linke Navigtaionsleite soll dabei weiterhin 150 Pixel umfassen, ebenso wie weiterhin die Farben #CC0000 und #000066 eine Rolle spielen sollen.

Hier eine meiner ersten Skizzen.

Obige Skizze mit dem Lineal nachgezeichnet und mit Abständen versehen.

Diese grafischen Spielchen sollten zunächts mal losgelöst von der technischen Machbarkeit erfolgen. Diese Phase kann man durchaus als grafisches Brainstorming bezeichnen.

Hat man nun eine oder mehrere Skizze(n) angefertigt, folgt Phase 3: Die grafische Umsetzung mit Hilfe eines Grafikprogramms. Ich mache dies bspw. mit Paint Shop Pro. Auf Basis meiner Skizzen fertige ich nun eine Art Screenshot an. Erst jetzt sieht man, ob die Elemente und die Farben harmonieren und die Abstände richtig gewählt wurden.

Phase Drei beginnt nun dieses Wochenende. Ich hoffe, ich kann diese Phase erfolgreich durchführen! Und das, wo ich doch gleich zwei Weihnachtsmärkte vor der Türe habe. Schwierig! ;-)