Frühjahrsputz - Verfeinerung von advanced-simple.de

Bereits seit einiger Zeit war ich mit dem optischen Erscheinungsbild von advanced-simple.de nicht mehr so richtig zufrieden und seit ich vor ein paar Wochen das Logo einer Auffrischung unterzogen hatte wurde es noch augenfälliger. In meiner Vorstellung sollte es freier, offener und gleichzeitig auch reduzierter werden, um auch meine Philosophie von einfachen und klaren Strukturen im Webdesign besser zu verkörpern.

Während ich zu Ostern am seit langem überfälligen Portfolio für die Seite arbeitete, wurde mir bewußt, dass ich es nicht im alten Seitendesign veröffentlichen wollte.

Aus der ursprünglich geplanten kleinen Verfeinerung der Website wurde dann ein ziemlich großflächiges Redesign – dank der konsequenten Trennung von Struktur (XHTML) und Layout (CSS) ohne eine einzige Zeile im XHTML-Quellcode ändern zu müssen.

Gleich als erstes ließ dann ich die Boxen um die Inhalte verschwinden, da sie irgendwie nicht mehr in mein Bild von advanced-simple.de passen wollten. Die Hintergrundfarbe für den Hauptbereich änderte ich in einen sehr, sehr hellen Blauton ab.

Auch das Aussehen der Tabs bzw. der Reiter in der Hauptnavigation war für mich ein knappes Jahr nach dem Entwurf des ersten Designs nicht mehr zufriedenstellend. Sie sollten sauberer und edler wirken.

Vorher-Nachher-Bild der Navigation

Das neue Design des Menüs benötigt, im Gegensatz zu den vier Hintergrundbilder des alten, nur noch ein kleines Bild für die Schattierung des aktiven Menüpunktes. Die im alten Menü fest über die Bildern eingebaute Eckrundung der Tabs wird beim neuen Menü durch die CSS3-Anweisung border-radius umgesetzt. Das hat zwar den Nachteil, dass die runden Ecken zur Zeit von Nutzern des Internet Explorers (und auch von Nutzern mit anderen älteren Browsern) nicht gesehen werden können (da der diese neue Technik noch nicht beherrscht), aber ich denke das läßt sich verschmerzen.

Um so weiter das Redesign fortschritt, desto klarer wurde, dass auch die Mini-Icons, die ich zur Kennzeichnung von internen und externen Links verwendete, dringend überarbeitet werden mußten. Im alten Design folgten sie nicht unbedingt einem einheitlichen Stil, im neuen Design, wie ich finde, schon eher.

Vorher-Nachher-Bild der Icons

Das Aussehen der Überschriften wollte inzwischen auch nicht mehr richtig zu dem überarbeiteten Design passen. Ich experimentiert mit verschiedenen Dingen und entschied mich dann für Kapitälchen und als Schriftfarbe der Hauptüberschrift für den dunklen Blauton der nichtaktiven Tabs des Hauptmenüs.

Vorher-Nachher-Bild der Überschriften

Die Kontaktseite und da speziell das Formular benötigten dann schließlich auch noch eine Überarbeitung um ins Bild zu passen. Diese fiel im Endeffekt sogar weitaus umfangreicher aus als jetzt erkennbar ist, da die vorher feste Breite passend zum übrigen Design ebenfalls flexibel gestaltet wurde (Wer es testen mag: einfach das Browser-Fenster verkleinern.). Als Mini-Verfeinerung erhielten dann noch einige Elemente des Formulars abgerundete Ecken per CSS3-Anweisung.

Vorher-Nachher-Bild des Kontaktformulars

Zu guter Letzt wurden einige der Inhalte noch anders organisiert. Auf der alten Seite waren meine Texte zu den Themen Webdesign, Barrierefreiheit usw etwas verstreut angeordnet und es gab keine zusammenfassende, übergeordnete Struktur. Einige waren in der Hauptnavigation verewigt, andere dagegen nur durch Links im Inhalt oder im Seitenbereich erreichbar. Außerdem war nun ja als neuer Menüpunkt das Portfolio (liebevoll „Werkschau“ genannt :)) dazugekommen. Um der Website etwas mehr Struktur zu geben bekamen die Webdesign-Texte eine übergeordnete Kategorieseite, ebenso wie die einzelnen Portfolio-Einträge. Dazu wurde auch die Navigation etwas geändert und zwei extra Template-Dateien angelegt.

Knapp eine Woche hat das Redesign plus Erstellung der Werkschau dann letztendlich in Anspruch genommen, aber ich finde es hat sich gelohnt.

Ein Kommentar »

  1. Kommentar by Gregor

    9. September 2010, 15:14 Uhr

    Das neue Design ist wirklich gut gelungen!

RSS feed for comments on this post. TrackBack URL

Kommentar hinterlassen
  1. (required)
  2. (required)
  3. (required)