Callum Chapman 29. Juni 2010

Webdesign-Trends auf Sport-Websites

Egal ob Sie nun Webdesigner oder Webentwickler sind, ob Sie einen Blog oder eine E-Commerce-Website betreiben. Mit ziemlicher Sicherheit sehen Sie tagein, tagaus sehr viel mehr oder weniger gutes Webdesign und schauen, wie’s die anderen machen. Haben Sie auf der Suche nach Inspirationen schon mal Fußball- oder Tennis-Websites angeschaut? Nicht?!? Dann holen wir das jetzt nach – denn sportbezogene Seiten haben in punkto Navigation, Interaktion und Benutzerfreundlichkeit viel zu bieten.

Das, was sportbezogene Websites so interessant macht, ist ihr typischerweise großes Informationsangebot: Spielpläne, Ergebnisse, Berichte von Spielen, Neuigkeiten über die Spieler oder das Team, Videos, Blogs, Fan-Foren, Shops für Fanartikel, Meinungsumfragen und vieles mehr. Ein Internetauftritt mit so vielen verschiedenen Informationen und interaktiven Elementen muss einfach zu navigieren sein, was das Design und die Entwicklung umso schwieriger macht.

Das ist sozusagen „Real-Life Webdesign“. Leider findet man Listen solcher Designs nicht allzu häufig im Netz, daher bietet dieser Beitrag eine Sammlung von sportbezogenen Websites – darunter Fußball, Radsport, Eishockey, Tennis, Rugby und Golf. Die Beispiele sind danach ausgewählt, ob Menüs, Content und Image Slider oder Response-Elemente schön und anwenderfreundlich gestaltet sind.

Fußball-Websites

Nike Football

Nike’s Fußball-Website präsentiert sich mit ansprechendem Design. Die Startseite ist dank der großen Schriften und der beherrschenden Fotografien eher wie ein Poster gestaltet. Die moderne Typografie und das großzügige Layout setzen sich auch auf den Unterseiten fort.

Der Auftritt verbindet moderne Webprogrammierung mit einigen schönen Flash-Elementen, die eine sehr komfortable und schicke Navigation erlauben.

Animationseffekte runden das Design ab. Wenn Sie mit der Maus über bestimmte Elemente fahren, werden mehr Details zum jeweiligen Foto und zusätzliche Informationen angezeigt. Das macht es für den Anwender interessant, sich intensiver mit der Seite zu beschäftigen und nach mehr Effekten zu suchen.

Goool

Goool.tv ist eine sympathische Fußball-Seite mit einem einfachen minimalistischem Design, das sehr gut rüberkommt. Das Dreispalten-Layout erinnert an ein gedrucktes Magazin und sorgt für eine gute und schnelle Orientierung,

Die Website bietet außerdem ein kleines, aber feines Umfrage-Element, mit dem die Anwender ihren Tipp abgeben können, wer 2010 Weltmeister wird.

Fifa World Cup

Die offizielle Fifa-Website für die Fußballweltmeisterschaft 2010 muss sich natürlich etwas oppulenter präsentieren – und das tut sie auch, bis an den Rand gefüllt mit den modernsten Webelementen.

Ein herausragendes interaktives Element ist der Spiel-Selektor, eine Art Content Slider mit dem Sie sich durch die verschiedenen bevorstehenden Spiele bewegen können, ohne die Seite zu verlassen.

Budweiser Football

Als Großsponsor der aktuellen Weltmeisterschaft hat Budweiser natürlich ebenfalls eine Fußball-Website. Ein interessantes Feature auf dieser Seite ist die Überprüfung des Alters. Muss man sich auf anderen Websites in der Regel durch drei verschiedene Dropdown-Listen klicken, kann man hier sein Geburtsjahr über einen pfiffigen Slider auswählen.

Flash at its best: Ein super Beispiel für den gut gelungenen Einsatz von Flash-Elementen bietet die Hauptseite, die es dem Anwender sehr einfach macht, sich durch die Inhalte zu bewegen.

Conti Soccer World

Continental setzt dagegen auf bildschirmfüllende Fotografien für den Hintergrund und transparente Design-Elemente, um die Aufmerksamkeit der Benutzer direkt zu den Inhalten ziehen. Auch hier ist Flash gut eingesetzt – diesmal als Banner, der für Stadion-Atmosphäre sorgt.

Einen Anklang ans iPhone oder Geldspielautomaten bietet dieses schicke Flash-Element zum Auswählen bestimmter Teams, die zudem als Favorit definiert werden können.

Soccernet ESPN World Cup

Besonderer Hingucker und schöne Inpiration für gelungene Hintergrund-Illustrationen ist der Riesenkürbis, den ESPN im Grunge-Stil präsentiert. Die sanften Farben des Hintergrunds lassen die gut strukturierten, weißen Vordergrund besonders gut zur Geltung kommen. Außerdem gut gemacht: der Live-Countdown bis zum nächsten Spiel. Kein besonders aufwändiges Feature, aber in diesem Zusammenhang sorgt es für die nötige Spannung.

Ein wirklich cooles Element ist die Möglichkeit, über das laufende und bevorstehende Spiele zu hovern. So lassen sich platzsparend Vorberichte und – zur passenden Zeit – eine Animation (GameCast) des laufenden Spiels anzeigen.

EA Sports: World Cup

EA Sports: World Cup ist das offizielle Fußballweltmeisterschaftsspiel. Die folgende Abbildung zeigt die offizielle Website dieses Spiels. Besonders ansprechend sind die kräftigen Farben und die Kombination aus Fotos und Illustrionen.

Content Slider gewährleisten eine schnelle Navigation durch die Kern-Funktionen und Top Stories des Spiels und der Weltmeisterschaft.

Coca-Cola Football

Ein klassisches Beispiel für das Motto „Einfach, aber gut“, bietet die WM-Website von Coca-Cola. Besondere Merkmale sind der mit klaren Vektorgrafiken illustrierte Header und Footer.

Für das schöne Gesamtbild sorgt vor allem die Navigation, die mit drei Farben für alle Menü-Zustände auskommt:

  • weiß für die aktive Seite, auf der Sie sich gerade befinden
  • rot für die nicht aktiven Seiten
  • pink für den Hover-Effekt

Twitter World Cup

Twitter ist ohnehin für gutes Design bekannt. Die WM-Website von Twitter bekräftigt diesen Ruf verdientermaßen. Diese farblich sehr ruhig gehaltene Seite, auf der sämtliche spannenden Tweets zur Fußballweltmeisterschaft zusammengefasst sind, beeindruckt durch einen simplen Rasenstreifen als Header mit integretiertem jQuery-Contenslider.

Auch schön: Der Image Slider für die Nationalflaggen, mit dem Anwender ihr Team auswählen können. Der Hover-Effekt erinnert ein wenig an das populäre Dock von Mac OS X.

Hyundai World Cup

Die WM-Website von Huyndai kommt mit einem unglaublich minimalistischen Design aus: Eine riesen Rasenfläche als Hintergrund und eine sehr schlanke, elegante Benutzeroberfläche mit einigen feinen und individuell gelösten Elementen – etwa für die Auswahl der Sprache.

Das Flash-basierte Design ist voller interaktiver Elemente und Animationseffekte, inklusive eines kleinen Maskottchens, das Ihrem Mauszeiger auf Schritt und Tritt folgt – zumindest beim ersten Besuch der Seite …

Schön gelöst: Dank transparentem Hintergrund des Spielauswahl-Features kommt der Rasen prima zur Geltung.

Radsport & Mountain Biking

La Fuga

La Fuga besticht durch minimalistisches Design mit einem farblich sehr ruhig gehaltenen Vordergrund und einer hervorragenden Balance zwischen Schwarzweiß- und Farbfotos vor einer farblich eher gewagten Hintergrundgrafik.

Die Anwender können den Renn-Teams über Google Maps rund um die Welt folgen und die einzelnen Etappen der jeweiligen Rennen auf der Landkarte mit Nadeln markieren.

British Cycling

British Cycling ist ein gutes Beispiel, wie man eine Website trotz enorm umfangreicher Inhalte und verschiedenster Content-Elemente – vom Text über Video und Newsticker –  übersichtlich strukturieren kann.

Die Hauptnachrichten und Aktualisierungen werden direkt unterhalb des Headers in einem großen Contentslider präsentiert, der in langsamen Tempo die sechs Top Stories anreisst.

Die gleichen Beiträge werden unterhalb des Sliders noch einmal veröffentlicht, wobei die zwei jüngsten jeweils doppelt so viel Raum einnehmen wie die vier folgenden.

Bike Radar

Bike Radar hat ein gut strukturiertes 4-Spalten-Layout, wirkt vom Design jedoch etwas überladen. Dafür ist jedoch die Navigation mit horizontalem Ausklapp-Menü sehr gut gelungen, ebenso der Slider, der Benutzer über die neuesten Nachrichtena auf dem Laufenden hält.

Man kann’s mögen oder nicht – aber die Art und Weise, wie die Werbung mit dem Hintergrund verschmilzt, ist sehr professionell gemacht.

MB Wales

Mountain Biking Wales kommt gegen das vorige Beispiel sehr viel minimalistischer daher, dafür bietet die Website ein paar gute interaktive Elemente, die dem Benutzer helfen, das Gesuchte schnell zu finden. Eines davon ist die interaktive Landkarte von Wales, über die man bestimmte Orte auswählen kann.

Außerdem gut gelöst: Die Schnellauswahl für die ideale Mountain-Bike-Route.

Lance Armstrong

Für Flash-Fans bietet die persönliche Website von Lance Armstrong hervorragende Effekte – zum Beispiel die Slideshow auf der Startseite. Klicken Sie auf einen der Links gerät das Bild völlig unerwartet aus dem Fokus. Probieren Sie auch mal die Links oberhalb der Slideshow aus.

Über Infoboxen im Footer geht es zu den verschiedenen Unterseiten der Site – natürlich nicht ohne ein paar abgefahrene Roll-Over-Effekte, bei denen die Thumbnails herumwirbeln und vergrößert werden.

Mission Bicycle

Mission Bicycle gleicht eher einem Design-Portfolio. Die Website ist farblich und typografisch schön gestaltet. Gut gemacht sind die silhouettenhaften Mini-Icons und die Content Slider.

Aufmerksamkeit verdienen die mehrfargiben Roll-Over-Effekte der Hauptnavigation und die schön gemachten Icons.

Gewinnbringend eingesetzt, ist zudem eine Query-Lightbox, über die Anwender Fotos der Fahrrader vergrößern können.

Urban Outfitters

Die Website von Urban Outfitters gleicht in ihrer grundsätzlichen Aufmachung der von Mission Bycicle. Silhouttenartige Icons scheinen bei Radsport-Seiten voll im Trend zu liegen.

Ein herausragendes interaktives Element besteht hier jedoch in der Möglichkeit, sein eigenes Fahrrad zusammen zu bauen. Rahmengröße und Farbe der einzelnen Bestandteile können per Mausklick über ein leicht bedienbares Menü an die eigenen Wünsche angepasst werden.

Trek Bikes

Eher wie die Seite einer Jazz-Band kommt Trek Bikes daher. Blickfang sind die monochromen Fotos – farblich auf den sehr dunklen Hintergrund und die blauen Schriftzüge abgestimmt. Dazu kontrastatiert das silbergraue Hauptmenü ganz hervorragend. Das Design besticht zudem durch sorgfältige Typografie mit ausgewählten Schriftfonts.

Die eingebetteten Videos sind in einem Lightbox-artigen Element untergebracht. Sobald Sie auf den Pfeil klicken, wird das Fenster mit dem Video groß ein- und die übrige Website ausgeblendet, so dass Sie sich voll aufs Video konzentrieren können, ohne von den anderen Informationen abgelenkt zu werden.

Ice Hockey

NHL

Der Trend zu dunklen Hintergrundfarben setzt sich bei den Eishockey-Sites ganz klar fort. Die offizielle NHL-Website ist innerhalb dieser Sammlung, womöglich die Seite mit den meisten Informationen. Eine gute Navigation ist daher unerlässlich. NHL löst das über ein relativ einfaches Dropdown-Menü für die Hautnavigation und einen Content-Slider für die Auswahl der diversen Videos.

Neben dem Drop-down zur Auswahl der Teams gibt es auch ein grafisches Menü mit den ausgegrauten Logos der Mannschaften. Beim Hovern werden die Grafiken farbig angezeigt. Ein  Klick aufs wohlbekannte Logo führt Fans vermutlich schneller zur Seite ihres Dream-Teams als der Weg über das sehr umfangreiche Ausklapp-Menü.

ESPN NHL

ESPN NHL setzt mit einigen stylishen Effekten wie transparenten Ebenen und Farbverläufen ein ganz ähnliches Grundlayout doch ein wenig anders in Szene. Besonders wirkungsvoll ist der zweifarbige Farbverlauf des Hintergrunds, der zudem mit einem opaken Effekt versehen und Ton-in-Ton mit dem Hauptmenü gestaltet ist.

Liebe zum Detail beweist das Dropdown-Menü mit verschiedenen Farben für die Zustände „Aktiv“, „Inaktiv“ und „Hovern“ nebst Auswahlliste mit abgerundeten Ecken sowie einem nach unten dunkler werdenden Farbverlauf. Dank dieser Gestaltung heben sich die grauen Dropdownlisten gut vom ebenfalls grauen Content-Bereich ab.

Anze’s Eleven

Flash und Sport  ist eine gern gewählte Kombination.  Das Webdesign von Anze’s Eleven ist komplett mit Flash realisiert. Blickfang für Typografie-Liebhaber: Der animierte Schriftzug auf der Startseite.

Auch beim Dropdown-Menü machen sich die Flash-Animationen sehr schön. Fahren Sie mal mit dem Mauszeiger über die Menüpunkte.

Tennis

Adidas Tennis

Sobald Sie diesen Link aufrufen, werden Sie von einem netten Tennisball begrüßt, der Ihnen den Ladestatus vermittelt. Das lässt auf eine angenehme User Experience hoffen.

Die Hauptnavigation ist ein einfaches Dropdown-Menü. Überall dort, wo das an den Tennisball erinnernde gelbe Symbol mit einem Pfeil präsent ist, gibt es weitere Navigationselemente, die zu Unterseiten mit Produktfotos und weitergehenden Informationen führen …

… allerdings bedarf dies eines zweiten Klicks auf die per Roll-Over eingeblendete gelbe Schaltfläche.

Wimbledon

Der erste Eindruck der Wimbledon-Website ist recht simpel – und fast ein wenig unattraktiv, was das Farbschema betrifft.

They’ve made use of extending menus, allowing them to save space, and an easy navigation experience for the viewer.

Dafür ist die Navigation sehr schön gelöst mit Sprechblasen-artigen Flyouts für die Menüpunkte der zweiten Ebene.

Australian Open

Etwas Effekt-haschender präsentiert sich die offizielle Seite der Australian Open. Die spritzenden Wassertropfen in der Header-Grafik und der 3D-Schriftzug mit Metall-Stil geben der Seite einen frischen Anstrich.

Die in die Sidebar eingebetteten YouTube-Videos bieten ein multimediales Anwendererlebnis, ohne dass der Benutzer die Website verlassen muss.

Roland Garros

Die persönliche Website von Roland Garros ist ein wenig überladen, hat aber ein paar tolle Effekte und Elemente.

Eins der besten Elemente ist der Mehrzweck-Slider, über den die Benutzer sowohl die jüngsten Nachrichten, Videos und Fotos anschauen und weitere Informationen über Links im unteren Bereich des Bildes aufrufen können.

Rugby

Wasps

Trotz der vielen Informationen sieht die Website des London Wasps Rugby Teams nicht unordentlich oder überladen aus.

Wie bei vielen anderen Websites in dieser Design-Umschau ist ein Content Slider im Header-Bereich das Mittel der Wahl, um neue Berichte darzustellen. Die einzelnen Beiträge werden beim Anzeigen und beim Überfahren mit dem Mauszeiger gelb hervorgehoben, so dass man leichter erfassen, kann, worum es geht, bevor man den Artikel tatsächlich aufruft.

Gloucester Rugby

Dank eines kontrastreichen Farbschemas ist die Website on Goucester Ruby sehr gut lesbar.

Dem  Trend zur Personalisierung und damit stärkeren Identifizierung der Anwender mit dieser Website trägt das Design durch verschiedene Header-Bilder Rechnung, die über Schaltflächen per Mausklick bequem eingebunden werden können.

RFU

Trotz eines umfangreichen Content-Angebots kommt die offizielle RFU-Website ohne Drop-down-Menü aus.

Sie verwendet separate Navigationen für Haupt- und Untermenüs. Zudem kommt ein Slider zum Einsatz, mit dessen Hilfe Anwender sehr komfortabel die aktuellen Nachrichten und andere Inhalte aufrufen können.

RBS 6 Nations

Farbverläufe für den Hintergrund liegen eindeutig eindeutig im Trend – so auch bei RBS 6 Nations, was dank des blau-grauen Farbschemas ein wenig kühl, aber durchaus modern wirkt.

Einfach aber übersichtlich: Die dreifarbige Hauptnavigation

Golf

Evershed Golf

Der so genannte Out-of-the-box-Effekt kommt bei der Header-Grafik von dieser Golf-Website sehr schön zur Geltung. Das Design besticht durch diesen Effekt und ein sorgfältig abgestimmtes Farbschema, das dem Anwender sofort vermittelt, welche Schalftflächen einen Klick lohnen.

Auch das Login beherzigt die Regeln benutzerfreundlicher Gestaltung: Dank jQuery wird der Hintergrund abgedunkelt, so dass die ungeteilte Aufmerksamkeit der Anwender auf der hübsch beschrifteten Login-Box ruht. Wie Sie eine solche 3D-Banderole mit CSS 3 realisieren, erfahren Sie in diesem Beitrag.

Greywolf Golf

Die Website von Greywolf Golf  hat einen besonders gut gestalteteten Hintergrund, der das Bild der Titelgrafik nahtlos fortsetzt. Auch hier darf der Farbverlauf nicht fehlen – er liegt halbtransparent über dem Hintergrundbild und greift dessen Farben auf.

Transparenz ist der rote Faden dieses Designs: Auch das Content-Fenster hat einen transparenten Hintergrund, so dass das Hintergrundbild des Body-Elements auch dort zu sehen ist. Dazu passt sehr schön die senkrechte und einfach zu bedienende Tab-Leiste auf der Startseite.

PGA

The PGA (Professional Golfers‘ Association) site also uses a photographic background and a low-opacity/transparent content window.

It features an easy to use navigation menu, allowing you to expand certain categories to view all of the links underneath; great if the user only wants to view certain site content.

PGA Tour

The official PGA Tour website makes use of content slider and embedded videos, as well as a clean light-effect header.

Matching the header background, the navigation bar links glow when hovered over, a nice little effect to add some visual interest.

Golf Turkey

Dieser Internetauftritt bündelt mehrere aktuelle Webdesign-Trends und Techniken wie feine Linien, Schlagschatten, Farbverläufe und abgerundete Ecken, um die einzelnen Elemente voneinander abzuheben und dem Betrachter, die Inhalte ins Blickfeld zu rücken.

Die Auswahlliste der Hauptnavigation präsentiert sich mit sehr schön und individuell gestalteten Icons zusätzlich zum Text.

Masters

Das Design von Masters kommt dank der bildschirmfüllenden Hintergrundbilder mit einem sehr einfachen Layout und wenigen Elementen aus.

Die wesentlichen Inhalte werden mittels jQuery über Slider und Drop-down-Menüs eingeblendet.

Fazit

Benutzerfreundlichkeit ist bei den Informationsüberladenen Sport-Websites ein absolutes Muss. Dank CSS3, HTML 5 oder je nach Vorliebe  auch Flash, lassen sich komplexe Navigationen gut gestalten und die einzelnen Inhaltsbereiche sowie modale Fenster für Meldungen, Login-Boxen oder Videos sehr schön vom übrigen Inhalt abheben. Ohne diese modernen Techniken würden die Seiten schlicht überladen wirken und die Anwendererfahrung beträchtlich schmälern.

Wenn Sie weitere interessante Beispiele für gut gemachte Sport-Websites haben, freuen wir uns über Links in den Kommentaren.

(mm), ™

Callum Chapman

Callum ist ein freiberuflicher Grafikdesigner und Illustrator aus Cambridge in Großbritannien. Er ist der Kopf hinter dem Circleboxblog, ein design-orientiertes Weblog das Artikel, Inspiration, Tutorials und Texturen zum Download anbietet.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Hallo, Sie haben unsere Homepage http://www.golfturkey.com sehr positiv bewertet, was uns natürlich sehr gefreut hat. Wir haben noch eine weitere Seite für Aktivitätsurlaub in der Türkei, siehe obigen Link. Diese ist noch nicht sehr lange online und natürlich vor allem in Deutschland noch völlig unbekannt. Der Webdesigner ist derselbe und die Seite ebenso schön. Vielleicht schauen Sie ja mal rein. Sollte Sie eine Bewertung vornehmen, wäre ich über eine Nachricht dankbar, da ich sie sonst bestimmt übersehe.
    Mit freundlichen Grüßen
    Katharina Koch

  2. Hallo, habe gerade gesehen, dass ein Interessent aufgrund Ihrer positiven Bewertung unserer Webseite (ich betreue die Kunden unserer deutschen Seite http://www.golfturkei.de) per Link unsere Seite besucht hat und ausführlich studiert. Wir freuen uns sehr über Ihre positive Bewertung.Ich werde sie an meinen türkischen Partner, Hakan Söyler, der die Webseite erstellt hat und der Ihren Kommentar nicht lesen kann, da er nur Englisch spricht, weiterleiten. Nur weiter so. Danke
    MfG Katharina Koch

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.