Design-Evolution II: folietto
Teil 2 meiner kleinen Serie befasst sich mit dem Projekt folietto. Viel Spaß damit!
Die erste Version von Folietto war recht flott fertig. Ich finde das Layout eigentlich OK (es wandert in Folge auch in meine Archive) aber so wirklich will es mich nicht glücklich machen. Das Logo ist simpel und vermittelt das Thema. Der Rest muss weichen.
Relativ früh sind die Grundformen und das Farbkonzept von folietto fixiert. Hier sieht man schon sehr deutliche Teile vom Endergebnis. Das Menü ist noch links und folgt den Linien der Folien. Der Header war eigentlich dazu gedacht, die Kerninformation jeder Seite, in kurzen Worten auf den Punkt zu bringen.
In Version 3 wandert die linke Kante etwas nach rechts um in einer Flucht mit dem Formular zu stehen und das Logo bekommt eine prägnantere Farbe. Die linke Seite ist so deutlich kompakter. Der Header bietet jetzt dem Menü und einer Titelzeile Platz. Der aktuelle Bereich wird vertikal Platziert um das Menü mehr zu gewichten. Das Grün wird zurückgenommen.
Das Kernproblem war aber, dass eines der wichtigsten Elemente, das Auto, noch zu kurz kam. Ronny Behrendt, der Eigentümer von folietto, hatte sich damals gerade einen A4 Avant bestellt. Da sowieso geplan war, diesen zu folieren, haben wir ihn auch gleich für die Homepage verwendet. Der vertikale Bereich macht zwei Layouts Pause – was mich bei den blauen Bubbles getrieben hat, kann ich heute auch nicht mehr nachvollziehen …
Also weg mit den Bubbles! Zusätzlich wandert der A4 nach rechts, was die Gewichtung der Seite deutlich verbessert und als zusätzlicher Ankerpunkt im Bereich des Menüs dient.
Der schwarze Wagen widerspricht aber noch zu sehr dem „wolkigen“ Farbkonzept. In weiß funktioniert das deutlich besser. Die drei Fotos darunter stehen zu sehr in Konkurrenz zum Wagen, werden in Folge vertikal gegliedert und erhalten ein „glossy finish“. Fertig!
Virtual Car Style
„Virtual Car Style“, dass zu diesem Zeitpunkt noch „car configurator“ heisst (Anm.: Schwachsinn, es geht ja um die Folie), war urspünglich in XHTML geplant. Zwei Dinge haben mich dann aber doch zu einer Flash-Version bewogen.
Erstens: Wie viel Sinn macht es, ein Tool, welches ausschließlich zur optischen Beurteilung von Folien dient, im Code inhaltlich lesbar zu machen? Hätte die Seite jemand mit Textbrowser oder Screenreader besucht, wäre die Information „silber, grau, schwarz, gelb, hellbraun, …“ und „Folientyp 1, 2, 3“ nicht wirklich sinnvoll gewesen.
Zweitens: Der Trick, dem IE transparente PNGs beizubringen, funktioniert nicht auf allen Systemen. Unter einer bestimmten NT-Version (keine Ahnung mehr welche – bin dankbar für Tipps) mögen es weder 5.5 noch 6.0. Unter den Einflüssen von Punkt Eins, musste die Version also weichen obwohl ich witzig fand, was mit der Verbindung (X)HTML, CSS und Javascript so alles möglich ist.
Zum Abschluss noch die (nie veröffentlichte) Version von „Virtual Car Style“.
Achtung Baustelle – Sollte aber zumindest in Firefox funktionieren … 
Beautiful weblog !!
Danke (Thankyou)!
Ich finde die Seite so geile.
Die ist echt gut – unglaublich die verspieltheit die Details die einem immer wieder auffallen bei einem erneuten Besuch.
Meine Freundin ist ja immer mega begeistert über meine Entwürfe, aber hier kommt man so schnell nicht mit.
Cool! Webdesign in Entwicklungsstufen! Großen Dank an den Meister für den Einblick ins Geschäft (-:
Danke euch allen für die Rosen!
@Engelbert: Ich war gerade auf deiner Homepage und bin jetzt unglaublich hungrig!