Design Prozess für Zehelein.de
Der Anfang
Am Anfang stand der Wunsch eines neuen Layouts. Auch der Termin für den Reboot - der erste May 2006 fand sich dann "unterwegs" (auch wenn die Anmeldung länger auf sich warten lies).
Nur eines fehlte am Anfang logischerweise - das neue Layout. Daher hieß es anfangs erst einmal Ideen zu sammeln, mit offenen Augen seine Lieblingsseiten und deren Lieblingsseiten anzusehen Screenshots von Seitenelementen machen, die Teile sehr schön gelöst haben - und doch das meiste wieder verwerfen.
Die erste Skizze
Nachdem ich mir einige Webseiten angesehen hatte, mir einiges gefiel, anderes nicht habe ich mich an den ersten Entwurf gemacht. Dieser ist rechts zu sehen (klicken um die große Ansicht zu sehen). Er erinnert sogar schon halbwegs an das Layout, welches dann auch tatsächlich herausgekommen ist. In der Großansicht sind dann auch schon einige Notizen, Pfeilchen - und jede Menge "Radierungen". Die Skizze an sich ging allerdings sogar erstaunlich schnell, bis ich damit zufrieden war (eigentlich hatte ich mit einigen mehr Skizzen gerechnet).
Die Umsetzung
Die erste Umsetzung hat dann schon deutlich mehr Zeit in Anspruch genommen. Schwierig war anfangs vor allem die Auswahl der Farben - die ja "schön bunt" sein sollten. Da Orange und Grün zu meinen Favoriten zählt (siehe http://www.pixelexodus.de - ehemalige Firma von Benny und mir) habe ich mir diese beiden Farben ausgesucht, allerdings in schönen satten Farbtönen.
Das Grundlayout entsprach schon in der anfänglichen Version (ca. 4 Stunden Arbeit in Corel Photopaint) der endgültig zu sehenden Fassung. Mit der Navigation war in dieser Version jedoch noch sehr unzufrieden. Sie war noch zu unklar als Navigation zu erkennen. Noch dazu befand sich die Hauptnavigation im Kopfbereich der Seite, die Unternavigation jedoch wie zu sehen in der linken Spalte.
Das Layout der Seite an sich war dann nicht einmal so viel Aufwand - nur die Navigation hat noch mal etliche verschiedene Varianten hervorgebracht. Insgesamt waren es 7 ziemlich unterschiedliche Designs, bis ich endlich mit einer Version glücklich wurde. Wichtig war mir bei der Navigation, den Besucher der Seite mit einer kurzen Beschreibung einen Vorgeschmack zu geben, was ihn in dem jeweiligen Bereich erwartet. Erst nach einem Klick offenbart sich jetzt die eigentliche Navigationsstruktur.
Damit wollte ich eine Trennung der Struktur der Seite (also der Unternavigation) von den Inhalten des Bereiches schaffen. Teilweise sind Unternavigationen besser in einem eingebetteten Kontext zu verstehen.
Letztlich habe ich mich hauptsächlich für Version drei entschieden und nur das Orange mit dem Grün getauscht, da dies auf dem jeweiligen Hintergrund besser zu lesen war. Zusätzlich die "> Navigation" Überschrift weggelassen und ein Suchfeld hinzugefügt, was zu Version sieben führte. Die Lesbarkeit war leider nicht bei allen Navigationen gegeben (Version 5 und 6) - und selbst die aktuelle hat auf manchen Monitoren noch etwas zu geringen Kontrast. Version 1 und 2 waren mir für eine Navigation zu überladen und hatten zu viele eye-catcher auf dem begrenzten Raum, die Aufmerksamkeit vom eigentlichen Inhalt abgelenkt hatten. Und Version 4 hat mi einfach nicht gefallen - die war zu sehr in web-typischer Kastenform.
Footer
Nachdem nach langem Kampf und einiger Zeit die Navigation soweit stand, ging es an den Footer. Dieser war in der ersten Version wirklich extrem einfach gehalten und hat mich so garnicht überzeugt. Er war als Gegenstück zur grünen Linie gedacht, der den Kopfbereich abschließt:
Bei dieser Version hat mir der Ausklang der Seite gefehlt. Dieser Footer hätte höchstens direkt am Seitenende gewirkt - und damit wäre auf Seiten mit wenig Inhalt sehr viel Weissraum entstanden. Weissraum, der nicht als Stilelement eingesetzt wird sondern einen unschönen leeren Raum hinterlässt.
Die zweite Version hatte mir schon deutlich besser gefallen. Das Grau am Ende der Seite hat von der Farbe (oder eher dem Fehlen von Farbe) visuell das Ende der Seite dargestellt. Allerdings hat die Optik der Seite damit nicht mehr gepasst. Im Headerbereich ist der eigentliche Seiteninhalt zum Hintergrund ein wenig nach oben verschoben. Dies wurde mit dieser Version des Footers nicht fortgesetzt.
Daher habe ich dann eine dritte Version designed, welche die zweite Version fortführte und ebenfalls optisch korrekt nach oben verschoben darstellte. Hinzu kam ganz am Ende der Seite noch eine abschließende Zusammenfassung, worum sich diese Webseite eigentlich dreht:
Content
Schließlich, endlich, letztlich kam dann noch der eigentliche Seiteninhalt. Bei diesem habe ich aber im Voraus eigentlich nur die Seitenüberschrift und das Erscheinen von Bildern im Layoutprozess berücksichtigt (der Blindtext im Layout stammt von einer Seite auf der ich gerade war - sollte über google/msn sicher wieder zu finden sein):
Mit dem Inhalt war dann der eigentliche Layoutprozess abgeschlossen. Das Layout hat mich als Software-Entwickler natürlich mal wieder mehr Zeit gekostet als es einem Grafikdesigner gekostet hätte, aber ich denke das habe ich dann beim Aufsetzen des Systems und bei der Programmierung wieder reingeholt ;-)