PAGE online

Sportlich! Webseiten für Brooks

D

Bild Brooks Glycerin

ie Agentur Josekdesign kreierte für das Sportlabel Brooks zwei Webseiten, die mit Parallax-Scrolling und kreativer Navigation spielen.

Gleich zwei Web-Projekte durfte die Kölner Kreativagentur Josekdesign für die Laufsportmarke Brooks entwickeln und umsetzen – und beide sind gut gelungen.

Zum zehnten Jubiläum des Laufschuhs »Glycerin« kreierte Josekdesign eine Microsite, die den Schuh und seine Eigenschaften auf unterhaltsame Weise vorstellt: Mittels Parallax-Scrolling erlebt der Nutzer den Produktionsprozess des »Glycerin«-Schuhs – vom Labor über die Produktion bis zum Einsatz auf der Straße. Dabei lassen sich in jedem Bereich weitere Features anklicken, die dazu führen, dass sich Bildergalerien oder zusätzliche Info-Boxen öffnen. Besonders sympathisch ist die Gestaltung der Seite: Eine Kombination aus handgezeichneten Illustrationen, Fotografien und Grafiken, die dem Nutzer Lust darauf macht, die Seite zu erkunden.

Josekdesign ist für Konzeption, Design und Realisation der Seite verantwortlich – auch Illustrationen und Produktfotografien entstanden inhouse.

Bild Brooks Running Team

Über die Jubiläumswebseite hinaus entwickelte Josekdesign außerdem die Webseite zum »Brooks Running Team«, einem Projekt zwischen Brooks und der LG Olympia Dortmund. Zum »Running Team« gehören einige der besten Läufer Deutschlands – und diese werden auf der Webseite vorgestellt. Eingebettet in atmosphärische fotografische Szenerien hat jeder der neun Läufer seine eigene digitale Bühne, auf der er mit einer kurzen Biografie, Fotos, Fakten sowie seinen jeweiligen Laufdaten präsentiert wird. Außerdem bietet die Webseite Informationen zu den Lauf-Teams, Trainern, News sowie Partnern des Projekts.

Die Navigation der Webseite funktioniert sowohl vertikal wie auch horizontal: Der Nutzer kann entweder über Pfeile an den äußeren Seitenrändern auf andere Unterseiten gelangen oder aber eine Navigation in der linken oberen Ecke nutzen.

Wie die Fotos für die Webseite des Running Teams entstanden, zeigt ein Making-of-Video:

Ein Screenshot der Microsite »Glycerin 10«
Bild: Brooks
1/12
Ein Screenshot der Microsite »Glycerin 10«
Bild: Brooks
2/12
Ein Screenshot der Microsite »Glycerin 10«
Bild: Brooks
3/12
Ein Screenshot der Microsite »Glycerin 10«
Bild: Brooks
4/12
Ein Screenshot der Microsite »Glycerin 10«
Bild: Brooks
5/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
6/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
7/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
8/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
9/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
10/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
11/12
Screenshot der Webseite »Brooks Running Team«
Bild: Brooks
12/12

Produkt: eDossier: »Microinteractions: Animationen und Transitions«
eDossier: »Microinteractions: Animationen und Transitions«
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte Sie auch interessieren