Domenic Helfenstein über Webdesign und die Fotografie
Neue Openair Kino Seite
Ende letzter Woche stellte ich die neue Website des Openair Kino Sursee online. Grund für ein Redesign war primär das neue Logo, welches Mitte März vorgestellt wurde. Ich habe mir dann Zeit gelassen, bis auch die Filme für die Saison 2010 endgültig feststanden.
Nicht zuletzt weil ich das ganze Material zur Verfügung hatte, konnte ich die Seite innerhalb einer Rekordzeit von 1 ½ Wochen konzipieren und umsetzen. Also die Zeit vom ersten richtigen Gedanken bis zur Onlinestellung betrug gerade einmal 11 Tage!
Da ich bei diesem Projekt einige Erkenntnisse im Bezug auf jQuery (Javascript- Bibliothek) gewonnen habe, werde ich in naher Zukunft noch einige Beiträge veröffentlichen, die sicherlich dem einen oder anderen Web –Designer/Developer helfen könnten.
Heute möchte ich aber eher auf das Design selbst eingehen.
Meine Hauptintentionen zu diesem Projekt waren (Gewichtung in dieser Reihenfolge):
- Man muss auf den ersten Blick sehen, welche Filme dieses Jahr laufen und wie man mehr zu den Filmen erfährt
- Die Seite muss das neue Logo präsentieren
- Die Seite muss nach wie vor die anderen Menüpunkte einfach und schnell darstellen
- Die Seite sollte wieder etwas dunkler werden, da es sich ja immerhin um ein Openair Kino handelt
Präsentation der Filme
Auf der alten Seite prangte ein JPEG des Openair Kino- Plakates auf der Startseite. Wenn man auf einen der Filme klickte, gelangte man auf die Detailseite des jeweiligen Films. Das erste Problem bei dieser Vorgehensweise war, dass viele Leute diese Funktionsweise gar nicht verstanden. Sprich: Viele klickten gar nicht auf einen Film und fanden keine Details zu den Filmen. Das andere Problem lag darin, dass man auf der Detailseite eines Filmes keine Filmübersicht mehr hatte. Man konnte zwar über Home wieder das Plakat sehen, aber eben nicht zu jeder Zeit die anderen Filme überblicken.
Ich habe dieses Problem in zwei Schritten auf der neuen Website gelöst: Zuerst habe ich den Inhaltsblock zweigeteilt. Links sieht man zu jeder Zeit alle Filme im Überblick (Logo des Films mit dem jeweiligen Vorführdatum). Auf der rechten Seite ist dann der Detailbeschrieb zum Film (Text, Cover und Screenshots). Der zweite Schritt ist nun Spezieller: Ich habe mit Hilfe der BarackSlideshow (In Anlehnung an die Slideshow auf der Website von Barack Obama)eine Pfeilnavigation umgesetzt. Im Klartext bedeutet das, dass beim Betreten der Seite schon der Beschrieb zum ersten Film geladen wird. Ausserdem zeigt auch gleich ein Pfeil auf das Logo des ersten Films. Dies zeigt dem User eindeutig, welche Details er sieht. Wenn er nun mit der Maus über die Logos der anderen Filme fährt, merkt der User, dass ihm der Pfeil folgt. Dies suggeriert dem User, dass er nur auf das Logo eines Filmes klicken muss, um an mehr Informationen zu gelangen.
Wo bin ich?
Ich empfinde es immer als sehr angenehm, wenn ich auf einer Website immer auf einen Blick weiss, wo genau ich bin, also in welchem Menüpunkt ich mich befinde. Heutzutage sieht man häufig sogenannte Breadcrumbs, um dem User diese Information aufzuzeigen. Auch ich finde diese Lösung sehr elegant. Allerdings nur, wenn es sich auch um eine geschachtelte Website handelt. Sprich: Diese Lösung macht nur Sinn, wenn es auch Untermenüs auf der Website gibt. Da dies bei der neuen Openair Kino Seite nicht der Fall ist, kam für mich diese Lösung also nicht in Frage. Ich habe mich deshalb dafür entschieden, dem User diese Information auf zwei Arten aufzuzeigen: Einerseits sieht er den aktuell gewählten Menüpunkt im Website- Titel. Dies hat den Vorteil, dass man auch anhand eines minimierten Fensters in der Taskbar erkennen kann, wo man sich befindet. Auf der anderen Seite sieht man auch in der Menüliste sehr schnell, wo man sich befindet: Der aktuell gewählte Menüpunkt erscheint in Weiss, im Gegensatz zum Grau der Anderen Menüpunkte.
Fade- In
Wenn man auf der neuen Website eine Seite lädt, erscheint zuerst nur das Logo, das Menü und das Hintergrundbild. Danach fadet der eigentliche Inhalt ein. Wieso habe ich das gemacht? Dies hat mehrere Gründe: Erstens mal gefällt mir dieser Effekt und man sieht ihn (noch) nicht so häufig, der Effekt ist also noch nicht überstrapaziert. Wichtiger ist aber, dass auf diese Weise die Seite sich richtig aufbaut. Wenn dieser Fade- In Effekt nicht wäre, würden einzelne Bilder erst nacheinander in die Seite „rein springen“. Durch das Einfaden wirkt die Website angenehmer und ruhiger (Man Beachte: Der Effekt bringt Ruhe. Meist ist das Umgekehrte der Fall!).
Black is beauty but where’s the color?
Wie schon angesprochen, habe ich bei der neuen Website vermehrt darauf geachtet, die Website dunkel, ja sogar Schwarz zu gestalten. Allerdings fehlte mir dann doch etwas die Farbe. Ich habe dieses Problem gelöst, in dem ich zuerst einmal ein Hintergrundbild, statt nur Schwarz als Hintergrund genommen habe. Dies lockert die ganze Seite auf und durch die massiv erhöhte Sättigung erhält auch der Hintergrund etwas Farbe. Danach habe ich Hintergründe nur für den Inhalt erstellt. Diese weisen eine ca. ¼ Transparenz auf, sodass der eigentliche Hintergrund noch ganz wenig durchschimmert. Ausserdem habe ich für jeden Menüpunkt eine eigene Hintergrundfarbe zugeteilt, was wiederum der Auflockerung und der Abwechslung auf der Seite dienlich ist.
Hintergrundbilder sind böse
Ich hörte schon die ersten aufschreien, während sie die Zeilen aus dem vorherigen Abschnitt lasen. Früher hat man uns ja schliesslich noch beigebracht, dass man mit Bildern sehr sparsam umgehen sollte. Wenn es also einen anderen Hintergrund als nur eine Farbe sein sollte, dann höchstens eine kleine 5×5 Pixel Textur, was aber an sich auch völlig aus der Mode gekommen ist. Ich sage dazu: Die Zeiten haben sich geändert! Die Ära der schnellen Internetverbindungen ist nicht eben erst hereingebrochen. Nein, die meisten benutzen bereits einen DSL- oder Kabel- Zugang! Wir können es uns also erlauben, ein richtiges Hintergrundbild einzusetzen. Allerdings würde ich evtl. bei der Qualität klare Abstriche machen, da es verschwommen nicht zu sehr ablenkt und als positiven Nebeneffekt schneller geladen wird.
Fazit
Wie ihr also seht, steckt hinter einem Design meist etwas mehr, als ein kurzer Blick auf eine Website oft vermuten lässt. Ich hoffe, euch hat der Bericht hier gefallen und ihr schaut wiedermal rein!
Neue Openair Kino Seite
Ende letzter Woche stellte ich die neue Website des Openair Kino Sursee online. Grund für ein Redesign war primär das neue Logo, welches Mitte März vorgestellt wurde. Ich habe mir dann Zeit gelassen, bis auch die Filme für die Saison 2010 endgültig feststanden.
Nicht zuletzt weil ich das ganze Material zur Verfügung hatte, konnte ich die Seite innerhalb einer Rekordzeit von 1 ½ Wochen konzipieren und umsetzen. Also die Zeit vom ersten richtigen Gedanken bis zur Onlinestellung betrug gerade einmal 11 Tage!
Da ich bei diesem Projekt einige Erkenntnisse im Bezug auf jQuery (Javascript- Bibliothek) gewonnen habe, werde ich in naher Zukunft noch einige Beiträge veröffentlichen, die sicherlich dem einen oder anderen Web –Designer/Developer helfen könnten.
Heute möchte ich aber eher auf das Design selbst eingehen.
Meine Hauptintentionen zu diesem Projekt waren (Gewichtung in dieser Reihenfolge):
- Man muss auf den ersten Blick sehen, welche Filme dieses Jahr laufen und wie man mehr zu den Filmen erfährt
- Die Seite muss das neue Logo präsentieren
- Die Seite muss nach wie vor die anderen Menüpunkte einfach und schnell darstellen
- Die Seite sollte wieder etwas dunkler werden, da es sich ja immerhin um ein Openair Kino handelt
Präsentation der Filme
Auf der alten Seite prangte ein JPEG des Openair Kino- Plakates auf der Startseite. Wenn man auf einen der Filme klickte, gelangte man auf die Detailseite des jeweiligen Films. Das erste Problem bei dieser Vorgehensweise war, dass viele Leute diese Funktionsweise gar nicht verstanden. Sprich: Viele klickten gar nicht auf einen Film und fanden keine Details zu den Filmen. Das andere Problem lag darin, dass man auf der Detailseite eines Filmes keine Filmübersicht mehr hatte. Man konnte zwar über Home wieder das Plakat sehen, aber eben nicht zu jeder Zeit die anderen Filme überblicken.
Ich habe dieses Problem in zwei Schritten auf der neuen Website gelöst: Zuerst habe ich den Inhaltsblock zweigeteilt. Links sieht man zu jeder Zeit alle Filme im Überblick (Logo des Films mit dem jeweiligen Vorführdatum). Auf der rechten Seite ist dann der Detailbeschrieb zum Film (Text, Cover und Screenshots).
Der zweite Schritt ist nun Spezieller: Ich habe mit Hilfe der BarackSlideshow (In Anlehnung an die Slideshow auf der Website von Barack Obama)eine Pfeilnavigation umgesetzt. Im Klartext bedeutet das, dass beim Betreten der Seite schon der Beschrieb zum ersten Film geladen wird. Ausserdem zeigt auch gleich ein Pfeil auf das Logo des ersten Films. Dies zeigt dem User eindeutig, welche Details er sieht. Wenn er nun mit der Maus über die Logos der anderen Filme fährt, merkt der User, dass ihm der Pfeil folgt. Dies suggeriert dem User, dass er nur auf das Logo eines Filmes klicken muss, um an mehr Informationen zu gelangen.
Wo bin ich?
Ich empfinde es immer als sehr angenehm, wenn ich auf einer Website immer auf einen Blick weiss, wo genau ich bin, also in welchem Menüpunkt ich mich befinde. Heutzutage sieht man häufig sogenannte Breadcrumbs, um dem User diese Information aufzuzeigen. Auch ich finde diese Lösung sehr elegant. Allerdings nur, wenn es sich auch um eine geschachtelte Website handelt. Sprich: Diese Lösung macht nur Sinn, wenn es auch Untermenüs auf der Website gibt.
Da dies bei der neuen Openair Kino Seite nicht der Fall ist, kam für mich diese Lösung also nicht in Frage. Ich habe mich deshalb dafür entschieden, dem User diese Information auf zwei Arten aufzuzeigen: Einerseits sieht er den aktuell gewählten Menüpunkt im Website- Titel. Dies hat den Vorteil, dass man auch anhand eines minimierten Fensters in der Taskbar erkennen kann, wo man sich befindet. Auf der anderen Seite sieht man auch in der Menüliste sehr schnell, wo man sich befindet: Der aktuell gewählte Menüpunkt erscheint in Weiss, im Gegensatz zum Grau der Anderen Menüpunkte.
Fade- In
Wenn man auf der neuen Website eine Seite lädt, erscheint zuerst nur das Logo, das Menü und das Hintergrundbild. Danach fadet der eigentliche Inhalt ein. Wieso habe ich das gemacht? Dies hat mehrere Gründe: Erstens mal gefällt mir dieser Effekt und man sieht ihn (noch) nicht so häufig, der Effekt ist also noch nicht überstrapaziert. Wichtiger ist aber, dass auf diese Weise die Seite sich richtig aufbaut. Wenn dieser Fade- In Effekt nicht wäre, würden einzelne Bilder erst nacheinander in die Seite „rein springen“. Durch das Einfaden wirkt die Website angenehmer und ruhiger (Man Beachte: Der Effekt bringt Ruhe. Meist ist das Umgekehrte der Fall!).
Black is beauty but where’s the color?
Wie schon angesprochen, habe ich bei der neuen Website vermehrt darauf geachtet, die Website dunkel, ja sogar Schwarz zu gestalten. Allerdings fehlte mir dann doch etwas die Farbe. Ich habe dieses Problem gelöst, in dem ich zuerst einmal ein Hintergrundbild, statt nur Schwarz als Hintergrund genommen habe. Dies lockert die ganze Seite auf und durch die massiv erhöhte Sättigung erhält auch der Hintergrund etwas Farbe. Danach habe ich Hintergründe nur für den Inhalt erstellt. Diese weisen eine ca. ¼ Transparenz auf, sodass der eigentliche Hintergrund noch ganz wenig durchschimmert. Ausserdem habe ich für jeden Menüpunkt eine eigene Hintergrundfarbe zugeteilt, was wiederum der Auflockerung und der Abwechslung auf der Seite dienlich ist.
Hintergrundbilder sind böse
Ich hörte schon die ersten aufschreien, während sie die Zeilen aus dem vorherigen Abschnitt lasen. Früher hat man uns ja schliesslich noch beigebracht, dass man mit Bildern sehr sparsam umgehen sollte. Wenn es also einen anderen Hintergrund als nur eine Farbe sein sollte, dann höchstens eine kleine 5×5 Pixel Textur, was aber an sich auch völlig aus der Mode gekommen ist. Ich sage dazu: Die Zeiten haben sich geändert! Die Ära der schnellen Internetverbindungen ist nicht eben erst hereingebrochen. Nein, die meisten benutzen bereits einen DSL- oder Kabel- Zugang! Wir können es uns also erlauben, ein richtiges Hintergrundbild einzusetzen. Allerdings würde ich evtl. bei der Qualität klare Abstriche machen, da es verschwommen nicht zu sehr ablenkt und als positiven Nebeneffekt schneller geladen wird.
Fazit
Wie ihr also seht, steckt hinter einem Design meist etwas mehr, als ein kurzer Blick auf eine Website oft vermuten lässt. Ich hoffe, euch hat der Bericht hier gefallen und ihr schaut wiedermal rein!