| In der Datenbank befinden sich derzeit 90 Artikel. Alle Artikel anzeigen... |
| Über die Entwicklung eines neuen Designs | |||||||||||
| Vom Frust, von der Lust und von der Verzweiflung am Entwickeln eines neuen Designs für Splashcomics. | |||||||||||
|
Nun gut, ich bin professioneller Web-Designer, mache in meiner Arbeit neben einigem Anderen auch den Entwurf und die Ausführung von Designs für Websites. Daneben bin ich auch Programmierer, schreibe derzeit meistens PHP-Anwendungen mit Datenbank Anbindung, so wie auch das System, das hinter den Splashpages steckt. Aber dennoch ist es gar nicht so einfach ein Design zu verändern, es eigentlich zu toppen, das so zeitlos war, wie das von Splashcomics. Es war, was man unter Webdesignern den großen Wurf nennt. Es wirkte trotz der sechs Jahre, die es nun auf dem Buckel hat, nie wirklich abgegriffen. Es lief damals keinem Trend hinterher und war - das ist der größte Witz dabei - in fünf Minuten unter der Dusche erdacht worden. Da war es schon erheblich schwieriger das neue Design zu finden und schlussendlich umzusetzen. Im April 2006 habe ich mich dran gesetzt einen ersten Entwurf zu erstellen, den ich im Juni 2006 weiter komplettierte. Wie man an der folgenden Grafik sehen kann, war ich damit nicht mehr weit vom Endentwurf entfernt, aber es war alles zu brav, zu einfach, zu sehr auf Effekten von Photoshop aufgebaut, die schon x-mal verwendet worden waren. Das Grundlayout war gefunden.  Über Wochen hinweg bastelte ich nun an verschiedenen Effekten, bis letztendlich dieser Entwurf dabei entstanden war, der vom 21.07.2006 datiert:  Entscheidend war die Idee eines glasartigen Looks des Menüs und der RSS-Buttons direkt darunter. Der Effekt besteht aus insgesamt vier Ebenen: Einer unteren Ebene mit schwarzem Rand, die den Schattenwurf hat. Zwei Farbverlauf-Ebenen, die gegensätzliche Farbverläufe haben und dadurch den Glaseffekt herstellen. Und einer vierten Ebene, die nur den weißen Rahmen darüberlegt. Ich muss ehrlich zugeben: Ich habe die Idee nicht selbst entwickelt, hier half ein Photoshop-Tutorial weiter. Man bemerke aber die lange zeitliche Distanz. Dazwischen gab es zahlreiche Versuche, die verworfen wurden und sehr viel Recherche auf Photoshop-Seiten, um die richtige Inspiration zu finden. Schwierig war auch die Umsetzung. Wir waren uns einig: Barrierearmut - Barrierefreiheit besteht sowieso nie - sollte es sein. Das bedeutete mit DIV-Layern zu arbeiten, die aber durch die unterschiedlichen Reaktionen der Browser nicht gerade mein Lieblingswerkzeug sind. Die Arbeit am HTML-Unterbau begann am 10.08.2006 gegen 14:00 Uhr. Gegen 4 Uhr morgens sah das Endergebnis nicht gerade berauschend aus:  Am Schwierigsten war dabei die Positionierung der Formularelemente. Diese sind punkgenau ausgerichtet worden. Und manchmal kam auch die eigene Dummheit dazwischen. Der Layer für den Login wollte einfach nicht komplett erscheinen. Bis ich irgendwann auf den Trichter kam: Ist der überhaupt lang genug? Nein, war er nicht. Bis dahin dachte ich immer nur: Der liegt einfach unter dem Login-Button. Manchmal ist es aber auch die eigenartige Auslegung der Browser bei einigen CSS-Einstellungen, insbesondere beim MSIE. Etwas was beim Firefox lief, wollte nicht unbedingt folgsam beim MSIE sein. Aber auch der Umkehrschluss konnte des Öfteren gezogen werden. Warum war das überhaupt so kompliziert? Nunja: Die meisten Layouts bestehen aus zwei Spalten und zwei Zeilen. Header und Inhalt als Zeile, im Inhalt dann eine Spalte für die Navigation und den Inhalt. Splashcomics besteht aus fünf Zeilen, drei Spalten, die sich zum Teil auch noch überlappen und weitere Elemente innerhalb der Zeilen und Spalten beinhalten. So besteht das Suchfeld aus drei Elementen: Eingabefeld, Lupe und Hintergrund. Der Login hat sechs Elemente: Feld für den Loginnamen, Feld für das Passwort, Abschicken-Pfeil, Grafik für den CF-Text, Grafik für die Hilfe und der Hintergrundgrafik. Wir haben es hier also mit einem hochkomplexen Gebilde zu schaffen, für das es keine Vorlage gibt. Dabei waren die Elemente oberhalb des Inhalts noch sehr einfach. Die waren ja starr in Höhe und Breite. Das Problem fing erst mit dem Inhaltsbereich an, der sich dynamisch verbreitern soll. Klingt einfach, ist es aber aufgrund der Problematik der verschiedenen Browser nicht. Die HTML-Arbeiten waren schlussendlich am 11.8.2006 gegen 19 Uhr beendet. Zieht man die Pausen ab, stand der Unterbau in ca. 16 Stunden. Übrigens ging von dieser Zeit mindestens eine Stunde zum Testen mit den verschiedenen Browsern drauf. Dabei wurde die Site mit dem MSIE, Firefox, Konqueror und dem Opera getestet und dies erfolgte auf Windows XP und Linux Mandriva auf insgesamt vier Rechnern. Ein Apple-Test wurde dann noch am Abend von unserem Chefgrafiker gemacht. Auf allen Plattformen sieht die Site nahezu gleich aus. Es gibt ein paar Unterschiede. Der MSIE und der Opera können zum Beispiel die abgerundeten Kanten der Kästen im Inhalt nicht anzeigen. Das geht nur im Firefox. Im MSIE ist die Linie zudem dicker als im Opera oder Firefox. Der Rest ist aber bis auf marginale Unterschiede in den dargestellten Schriftgrössen gleich. Übrigens waren ein paar Designelemente schon im Laufe des 11.08.2006 zu sehen. Die Navigationspfeile waren geändert worden und auch das Logo. Beides ging im Laufe der Entwicklung nicht anders. Ist dieses Design nun wieder ein großer Wurf? Wir wissen es nicht. Übrigens: Wenn ich von "wir" spreche, dann ist das nicht der Majestatis pluralis, sondern dann ist auch Henning Kockerbeck gemeint, dem anderen Chefredakteur von Splashcomics. Er hat immer wieder mit Rat und Tat zur Seite gestanden, hat die unterschiedlichen Designideen begutachtet und Vorschläge gemacht. Und er hat meine schlechte Laune ausgehalten während der Entwicklung des HTML-Unterbaus, wenn mal wieder etwas nicht so wollte. Wir waren dabei im ständigen Skype-Kontakt. Und bei ihm muss ich mich an dieser Stelle mal ganz herzlich bedanken :-) Zurück zum großen Wurf: Das kann man eigentlich nur in ein paar Jahren sagen. Hält das Design auch weitere sechs Jahre durch, dann muss es wohl so gewesen sein. Wenn nicht, dann ... sollte es wohl nicht so sein ;-) Aber freilich hoffen wir, dass wir diesen Kraftakt nicht so schnell wiederholen müssen. |
|||||||||||
|
|||||||||||
| Artikel vom: | 12.08.2006 | ||||||||||
| Kategorie: | Kolumne | ||||||||||
| Autor dieses Artikels: | Bernd Glasstetter | ||||||||||
| Artikel als Podcast downloaden: | Download (Größe: 1.38 MB - 5.901 Downloads) | ||||||||||
| Artikel als Podcast anhören: |
|
||||||||||
|
|||||||||||
| Das sagen unsere Leser | |||||||||||
| Zu diesem Beitrag existieren noch keine Kommentare unserer Leser. Wenn Du möchtest, kannst Du einen Kommentar zu diesem Beitrag beisteuern. Klicke dazu hier... | |||||||||||
?>
